To use route splitting in a vite app without compat / ember-cli

[NullVoxPopuli]

I noticed that when I extend from @embroider/router, I'm... not -- the build is still using the ember router.

Key information:

• https://github.com/embroider-build/embroider/blob/main/packages/router/src/index.ts#L34
  • The whole embroider router implementation is removed at build time if the global @embroider/core config isn't present.
• Without compat build, we don't get any macro global config by default.
• Get ready for manual babel configs.

In babel.config.cjs:

const { buildMacros } = require('@embroider/macros/babel');

const macros = buildMacros({
  configure(config) {
    config.setGlobalConfig(__filename, '@embroider/core', { active: true });
  },
});

In your router.js:

// the normal part
import EmbroiderRouter from '@embroider/router';

export default class Router extends EmbroiderRouter {
  // ...
}

Router.map(function () {
  this.route('edit');
  this.route('output');

  // our split bundle
  this.route('docs', function () {
    this.route('repl-sdk');
    this.route('ember-repl');
    this.route('embedding');
    this.route('editor');
  });

  this.route('error', { path: '*' });
});


// The secret part:


function bundle(name: string, loader: () => Promise<{ default: unknown }>[]) {
  return {
    names: [name],
    load: async () => {
      const [template, route, controller] = await Promise.all(loader());
      let slashName = name.replaceAll('.', '/');
      let results: Record<string, unknown> = {};

      if (template) results[`limber/templates/${slashName}`] = template.default;
      if (route) results[`limber/routes/${slashName}`] = route.default;
      if (controller) results[`limber/controllers/${slashName}`] = controller.default;

      return {
        default: results,
      };
    },
  };
}

(window as any)._embroiderRouteBundles_ = [
  bundle('docs', () => [import('./templates/docs.gts')]),
  bundle('docs.repl-sdk', () => [import('./templates/docs/repl-sdk.gts')]),
  bundle('docs.ember-repl', () => [import('./templates/docs/ember-repl.gts')]),
  bundle('docs.embedding', () => [import('./templates/docs/embedding.gts')]),
  bundle('docs.editor', () => [import('./templates/docs/editor.gts')]),
  bundle('docs.whatever', () => [
    import('./the/template.gts'),
    import('./the/route.ts'),
    import('./the/controller.ts'),
  ]),
];

and ✨ tada ✨ you have bundle splitting without compat mode.

(I'm using this over here: NullVoxPopuli/limber#1962 )