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

Help Requests
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