Demo using lazy loading of templates/scripts

[saibotsivad]

If you've got a view that uses something huge, like a big interactive D3 graph, you don't want to add that to your main bundle.

With Rollup you can do code splitting, and then you should be able to work that into ASR nicely.

[saibotsivad]

Another discussion via chat was to be able to lazy load actual routes, e.g. in the app root check a users available features, if feature X is enabled make sure bundle-features-x.js has been loaded, which has a bunch of asr.addState(...) functions.

You would need links e.g. asr.makePath(...) and asr.go(...) to be blocked until the addState ran, but that should be doable as well.

[saibotsivad]

For example you might have

// app.js
window.asr.addState({
  name: '',
  route: '',
  resolve: async () => {
    const user = await fetchCurrentUser()
    if (user.featuresEnabled.featureX) {
      await addScriptToDom('bundle-feature-x.js')
    }
  }
})

And then inside bundle-feature-x.js you would have e.g.:

window.asr.addState({
  name: 'app.featureX',
  // etc.
})

But inside all components you would need all links guarded, like:

{#if user.featuresEnabled.featureX}
  <a href={asr.makePath('app.featureX')}>Feature X</a>
{/if}