Giters

systemjs / systemjs

Dynamic ES module loader

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

add Preload

wenerme opened this issue · comments

commented
  • SystemJS Version:
  • Which library are you using?
    • system.js
    • s.js
    • system-node.cjs
  • Which extras are you using?
    • AMD extra
    • Named Exports
    • Named Register
    • Transform
    • Use Default
    • Global
    • Dynamic Import Maps
  • Are you using any custom hooks?

No

Question

Have code like

System.set(System.resolve('react'),await import('react'))

But await will cause import without System importing, want to do on-demand import like

// when importing this, call the callback and resolve
System.set(System.resolve('react'),()=> import('react'))

What should I do ? custom hook or wrap in another register ?

commented

Found the same question on gitter without answer https://gitter.im/systemjs/systemjs?at=607e95ec55d78266a65725c0

commented

Here is my async reexport

const BuiltinModules: Record<string, () => Promise<any>> = {
  // react
  react: () => import('react'),
  scheduler: () => import('scheduler'),
  'react/jsx-runtime': () => import('react/jsx-runtime'),
  'react-is': () => import('react-is'),
  'use-sync-external-store/shim/with-selector': () => import('use-sync-external-store/shim/with-selector' as any),
  'react-dom': () => import('react-dom'),
  'react-dom/client': () => import('react-dom/client'),
}

export function registerBuiltinModules(s: ModuleSystem) {
  Object.entries(BuiltinModules).map(([k, v]) => {
    s.register(s.resolve(k), [], (exports, module) => {
      return {
        execute: async () => {
          if (process.env.NODE_ENV !== 'production') {
            console.debug(`Loading builtin module ${k}`);
          }
          exports(await v());
        },
      };
    });
  });
}