@wener/system

SystemJS

Utils for SystemJS

Browser env

import { addPreload, getGlobalSystem, loadBrowserSystem } from '@wener/system';
import { createNoopLogger } from '@wener/utils';

// use script load to avoid minify error - nextjs & swc minify make cause minify error
await loadBrowserSystem({ logger: createNoopLogger(), script: true });

// make external lib works with current react
const BuiltinModules = {
  react: () => import('react'),
  'react/jsx-runtime': () => import('react/jsx-runtime'),
  'react-dom': () => import('react-dom'),
  'react-dom/client': () => import('react-dom/client'),
};
Object.entries(BuiltinModules).map(([k, v]) => addPreload(k, v));

const System = getGlobalSystem();
// load through jsdelivr & ga.system.jspm.io
const { ErrorSuspenseBoundary } = await System.import('@wener/reaction');
console.log(`Result`, React.createElement(ErrorSuspenseBoundary));

Server env

import { getGlobalSystem } from '@wener/system';
import { loadServerSystem } from '@wener/system/server';
import { createNoopLogger } from '@wener/utils';

await loadServerSystem({ logger: createNoopLogger() });
const System = getGlobalSystem();
// load through jsdelivr & ga.system.jspm.io
const { default: React } = await System.import('react');
console.log(`React`, React.createElement('a'));

Links

• Site
  • wener.me
    • Blog
    • Github wenerme/wener
  • apis.wener.me
    • APIs playground with docs & stories
    • Github wenerme/apis
• Library
  • @wener/reaction - -
    • React hooks, render, logical components
    • helpful typing
    • some external minimal helpful utils
      • reduce packages
  • @wener/utils - -
    • utils for daily use
    • Document
  • @wener/ui - -
    • Storybook
    • Document
  • @wener/tinyrpc - -
    • Document
  • rjsf-antd-theme - -
    • Ant Design Theme for React Json Schema Form
    • Storybook
    • Document