CLI Bundler alias/paths matched incorrectly (Plugin development)

[michaelw85]

I'm submitting a bug report

• Library Version:
  "aurelia-cli: ^1.0.0-beta.15
  Please tell us about your environment:

• Operating System:
  Windows [10]

• Node Version:
  v10.15.0

• NPM Version:
  6.9.0

• Browser:
  Not browser related

• Language:
  TS but assume it's an issue for all

• Loader/bundler:
  CLI Bundler

Current behavior:
When the bundler tries to add aliases it looks at the module id, for example ../src/elements/hello-world and tries to match it with a configured path.
One of the following in a default configuration:

{
  "paths": {
    "root": "dev-app",
    "resources": "../src",
    "elements": "../src/elements",
    "attributes": "../src/attributes",
    "valueConverters": "../src/value-converters",
    "bindingBehaviors": "../src/binding-behaviors"
  }
}

It does this by going over this list top down and will only match 1. For the previously mentioned module id it will match with resources and this will result in failure when running the app.

Logic responsible for this behavior:

// lib/build/bundled-source.js:319
function possibleShortcut(moduleId, paths) {
  const _moduleId = fromDotDot(moduleId);
  for (let i = 0, keys = Object.keys(paths); i < keys.length; i++) {
    let key = keys[i];
    let target = paths[key];
    if (key === 'root') continue;
    if (key === target) continue;

    if (_moduleId.startsWith(target + '/')) {
      return {
        fromId: toDotDot(key + _moduleId.slice(target.length)),
        toId: toDotDot(moduleId)
      };
    }
  }
}

• What is the expected behavior?
  I would not expect order to influence alias path matching, neither would I expect duplicate entries with different paths to be an issue.
  There is probably a good reason for current approach but I would expect imports to be converted to the actual paths instead of creating a creating a new module that returns an existing one. So search for key and replace by target (path).

A low impact solution might be to search for the best match based on amount of character matched (I think this could be accomplished by sorting by length before looping)
Edit: Bad idea this could break existing setups

• Steps to reproduce

Given: You have the aurelia cli installed
And: run au new --plugin
And: follow instructions, choose all examples at the final step
And: add import { HelloWorld } from 'elements/hello-world'; to dev-app/app.ts
And add console.log(HelloWorld) to a constructor
And: run au run
When: open localhost:9000 in browser
Then: console will show error

GET http://localhost:9000/src/elements/hello-world.js net::ERR_ABORTED 404 (Not Found)

Expected:
Hello world class should load and be logged in the console.

• What is the motivation / use case for changing the behavior?
  I would like to utilize paths to keep my code clean and maintainable.

Work around
Reorder paths, deepest first, shortest last. This has a drawback, it will force you to use the correct (deepest) alias.

[3cp]

TS is different, it requires config in tsconfig.

Here is a fix unreleased.
eeb59c8

Note this fix only config "resources", means you can only do

import { HelloWorld } from 'resources/elements/hello-world';

But not

import { HelloWorld } from 'elements/hello-world';

You might be able to enhance tsconfig to support 'elements/hello-world' but I don't know TS enough.

So for dev-app to access anything in the inner-plugin, use 'resources/...' to load the module. The plugin readme is updated too (unreleased).

Also as you pointed out in lib/build/bundled-source.js, I need to fix the logic to create multiple shortcuts instead of just one.

FYI

"elements": "../src/elements",
"attributes": "../src/attributes",
"valueConverters": "../src/value-converters",
"bindingBehaviors": "../src/binding-behaviors"

These four are not designed to be used in AMD module loading (for both app and plugin projects), although it works because we hijacked requirejs paths config (if I fixed the shortcuts).
They are actually to facilitate au generate command, you can modify those path config to let au generate to generate files in different folder.

[michaelw85]

@huochunpeng Thanks for your reply.

This issue is not about typescript. Let me try to explain.
In typescript I can write multiple aliases for all of the path entries. This could be configured like this:

"baseUrl": "src",
"paths": { 
  "resources/*": [ "./" ],
  "elements/*": "./elements",
  "attributes/*": "./attributes",
  "valueConverters/*": "./value-converters",
  "bindingBehaviors/*": "./binding-behaviors"
},

This would make both of the following imports possible from a TS point of view:
import { Foo } from resources/elements/foo
and
import { Foo } from elements/foo

But as you already mentioned possibleShortcut only returns 1 match at the moment so for the previous example only the first will work. It will return the first match based on the order the paths are declared in within the aurelia.json. Currently this will match the resources entry "resources": "../src", because ../src will always match anything within src and it's the first entry.
To illustrate this behavior see this fiddle: https://jsfiddle.net/c3ht51dg/2/

This issue is also not just about the dev-app but also limits the usage of aliases in the inner plugin, this is why I raised this ticket.

If the code would support multiple alias matches this problem would not exist or find the "best" match but I just realized this might break existing setups.

[3cp]

I acknowledged that shortcuts issue. Will fix that.

[michaelw85]

@huochunpeng I have some time to take a look. I will give it a go if you don't mind 😃

[3cp]

Sure. Thx!