<compose> with view-model.bind="string" - Can I bundler to look in bundle for the component?

#1

Can you use with a string pointing to a module with an exported class as view-model, with CLI-bundler + SystemJS AND have systemjs look for the module in the app-bundle?

It seems like SystemJS perfoms a request to the server, trying to load the module, but the module will always be inside the bundle in our case.

Iā€™ve gotten suggestion to import all possible modules with import statements and then feed the class of the component to compose, see example at the bottom. But Iā€™m curious to see if I can avoid this.

Long version:
We have built a screen in our app where the customer can drag n drop components from our ā€œtoolboxā€ onto a dynamic view.

At runtime, we load the uriā€™s to each component that the user has selected from a database and feeds that uri as a string pointing to a module to <compose>-elements. This worked fine with jspm+systemjs and old aurelia bundler from 2016, since each .js-module was copied to the dist folder along with the bundles. SystemJS could then find the js-modules.

With the new CLI-bundler (Beta15) and systemjs no js-files are copied to the dist folder, only the bundles. Can I make SystemJS look inside the bundle instead?

ā€” Workaround: this should work as a work around, but Iā€™m curious to see if I can avoid it.

import { MachineChart } from '/components/machine-chart'
import { Scheduler } from '/components/scheduler'

export class CompositionMapper {

  getViewModel(componentName: string) {
    switch (componentName) {
      case 'MachineChart':
        return MachineChart;
      case 'Scheduler':
        return Scheduler;
    }
  }
}
#2

If you do

<compose view-model.bind="by_a_var"></compose>

CLI-bundler + systemjs/requirejs should able to support it out of the box, as long as your by_a_var point to a full module id, for example "components/machine-chart" which is provided by src/components/machine-chart.ts. As long as you use the full module id like this, it should work. Note no leading "/" in AMD module name pls. You can also use relative module id "../xxx" or "./xxx", but you have to adjust it base on the location of current html file.

Because cli-bundler by default blindly bundles all your source files (everything inside src/ folder), so you would not have a missing module at runtime, unless your by_a_var points to a module provided by some npm package.

2 Likes
#3

Wonderful! Thank you! It works :heart_eyes:

Side note: At first it didnā€™t workā€¦ Systemjs still made a request to the server to fetch the base class of the view model (using type script). Turned out that I had

import { Layout } from '../Layout';

instead of

import { Layout } from '../layout';

when importing the base class in the view modelā€¦ :slight_smile:

1 Like