Lazy Loading of Views and Components in Aureila2

vNext
1

Hi All,

My company is making a small prototype app with Aurelia2 without using a build tool (no typescript or webpack) just vanilla JS as a proof-of-concept before migrating our other apps over. We love this example and are using it as our goal:

However, our apps will be just slightly too large to fit into one file like this example. Basically I want the app’s structure to be one file per component. Ideally we would split the code into multiple HTML/Template files each with their associated Aurelia Javascript Class. And again I don’t want to rely on TypeScript/Webpack or any other bundler to achieve this.

Pseudocode

/view1.html

    <template id="view1">
     I am imported/lazy loaded into appRoot
        <script type="module">
           const view1 = CustomElement.define({
              name: 'view1',
              template: getTemplate(view'1),
           }, class {});
        </script>
   </template>

/index.html

 <template id="appRoot">
     I want to lazily import/load view1
        <script type="module">
           const appRoot = CustomElement.define({
              name: 'appRoot',
              template: getTemplate('appRoot'),
           }, class {});
        </script>
   </template>

Does anyone have any examples of doing this with or without using the Router? Can <au-slot> take a URL parameter? Am I over-thinking this? Thanks in advance for your help and advice.

2

Couple of things to clear.

Firstly, I am not sure if you are using it consciously, but TypeScript is not a bundler by any means. Although Au2 is written using TypeScript, that does not mean that you also need to use it while writing apps. That depends on purely on your use-case.

Secondly, au-slot is primarily the native slot equivalent for Au2. That is, it is purely meant for content projection, and has nothing to do with “taking a URL parameter” or routing so to speak.

Although I am intrigued by your use-case, I am not sure that I understand, how you are going to import ‘view1’ inside ‘app’ without a bundler. IMO if you don’t want to use a bundler, then you are sort of restricted in defining the custom elements in one page. Hypothetical alternative might be that you pack each custom element in it’s own JS module and load those in your app or index page. Also the in the examples you have shown, your importing the templates from inside the same templates, which contains also the script. This is bit confusing, and you might want to separate those two.

Generally speaking, things might be easier if you use a bundler like webpack.

3

Thanks for the help brainstorming ideas.

You are right I did nest the <script> inside the <template> but I would be fine splitting those apart and keeping in the same file or even making a view1.html / view1.js file pair. Open to ideas here.

If we put each component into a JS module that would work but I believe that templates would have to be strings rather than html? I think this is how Aurelia1 bundle splitting worked. Maybe the module could do an ajax call to get the html and then load the component, so that we wouldn’t have to work with html as strings.

Or maybe there is a way to use HTML Imports to grab components one-by-one? Like <import from="mydomain/view1.html"></import>. I know Aurelia2 uses <import> as well so not sure if I would want native or au-style imports to make this work.