@nebula.js/cli-build 7.8.0 → 8.0.0-alpha.0

package/README.md

@@ -20,18 +20,15 @@ Options:
   --config, -c              Path to a JavaScript config file
                                                    [string] [default: "nebula.config.js"]
   --watch, -w               Watch source files
-                                            [choices: "umd", "systemjs"] [default: "umd"]
+                                            [choices: "esm", "systemjs"] [default: "esm"]
   --sourcemap, -m           Generate source map                 [boolean] [default: true]
   --mode                    Explicitly set mode
                                           [string] [choices: "production", "development"]
   --core                    Set a core build target            [string] [default: "core"]
   --typescript              Enable typescript bundling         [boolean] [default: false]
-  --preferBuiltins          Specify whether to use Node.js built-in modules.
+  --browser                 Use the 'browser' field and export condition of the packages
+                            in the bundle so browser conditionals in exports are applied.
                                                                 [boolean] [default: true]
-  --browser                 Use the browser module resolutions in package.json and adds
-                            'browser' to exportConditions if it is not present so browser
-                            conditionals in exports are applied.
-                                                               [boolean] [default: false]
 ```
 
 ## Example
@@ -145,9 +142,9 @@ nebula build --core minimal/target
 The code is exported into `/minimal/target` directory
 
 Tips:
-In the package.json file, the main field makes sure that Node users using require
-can be served the umd version. The module field is a common convention to designate
-how to import an esm version of your code.
+The `module` field of package.json is the file of the es module that is built, and the
+`systemjs` field the file of the SystemJS module. A build needs at least one of them. There is
+no UMD bundle, the `main` field is not used by the build.
 
 ### SystemJS build
 
@@ -158,6 +155,15 @@ package.json which specifies the output file from the build:
 "systemjs": "dist/hello.systemjs.js"
 ```
 
+### Styles
+
+Stylesheets that the source imports are added to the bundle and injected in a `<style>` element
+in the document head when the bundle is loaded, nothing is injected when there is no `document`.
+
+- `import './style.css'` adds the stylesheet. PostCSS is applied, using the `postcss.config.js` of your project if there is one.
+- `import styles from './style.module.css'` is a CSS module, `styles` maps the class names of the file to the generated ones.
+- `import './style.scss'` is compiled when `sass` is installed in your project, `import './style.less'` when `less` is.
+
 ### Typescript
 
 With this option you can enable typescript bundling of your code. Add a `tsconfig.json`
@@ -166,3 +172,23 @@ file to configure typescript to your own preferences.
 ```sh
 nebula build --typescript
 ```
+
+## Building with Rslib
+
+The bundles are built with [Rslib](https://rslib.rs), on [Rspack](https://rspack.rs). The output has the same formats and behaves the
+same way as it did when the bundler was Rollup, with these differences to be aware of when you upgrade:
+
+- The generated class names of CSS modules have another hash (`name_class__hash`).
+- `replacementStrings` are applied as definitions, a key has to be an identifier or a member expression
+  such as `__VERSION__` or `process.env.VERSION`, not any piece of text, and the value is the code that replaces it.
+- With `--reactNative`, a `.native` file replaces the file it sits next to when it is imported without a file extension.
+- An import that cannot be resolved is an error, it used to be left as an external dependency with a warning. Add the package to the dependencies, or to the peer dependencies when the host provides it.
+- Node.js built-in modules are not bundled and not dependencies, importing one gives an empty module unless a package of that name is installed. `--preferBuiltins` is removed.
+- The `bundle-analysis.html` that development builds used to write is no longer created.
+- `@rollup/plugin-typescript` is not needed for `--typescript`, TypeScript is compiled with SWC. The code, and the packages in `node_modules`, are compiled for the browsers of `@qlik/browserslist-config`.
+- Stylus (`.styl`) files are not supported.
+- With `--codeSplit` a SystemJS build is the entry `index.js` and a chunk per dynamic import. The chunks are loaded from the directory that SystemJS loaded the entry from, also when the entry file is renamed.
+- **The UMD bundle is gone.** `nebula build` writes the es module (`module`) and the SystemJS module (`systemjs`), and `--watch` watches `esm` or `systemjs`. The entry of a bundle is an es module: an entry that is a CommonJS module (`module.exports = …`) has no exports in the es module, its properties are the named exports of the SystemJS module.
+- A bundle contains a small module runtime, so the output of a very small visualization is a few kilobytes larger.
+- A flag or a key in the `build` section of the config file that `nebula build` does not know of is an error (`Unknown argument: foo`), and no longer ignored. A misspelled option used to do nothing.
+- The notices of the licenses (`/*!`, `@license`, `@preserve`) of the code in a production bundle are written to `<bundle>.LICENSE.txt` next to it, and no longer kept in the bundle. Publish that file with the bundle.

package/command.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/extensions */
 import build from './lib/build.js';
 import init from './lib/init-config.js';
 
@@ -6,7 +5,8 @@ export default {
   command: 'build',
   desc: 'Build visualization',
   builder(yargs) {
-    init(yargs).argv;
+    // a flag or a key of the config file that it does not know of is an error, a misspelled one would otherwise do nothing
+    init(yargs).strictOptions().argv;
   },
   handler(argv) {
     build(argv);

package/lib/build.js

@@ -1,23 +1,15 @@
-/* eslint-disable no-console, import/extensions */
 import path from 'path';
+import { createRequire } from 'module';
 import extend from 'extend';
 import yargs from 'yargs';
-import * as rollup from 'rollup';
 
 import initConfig from './init-config.js';
 import config from './config.js';
 import watch from './watch.js';
+import { run } from './compile.js';
 import systemjsBehaviours from './systemjs.js';
 
-const umd = async (argv) => {
-  const c = config({
-    mode: argv.mode || 'production',
-    format: 'umd',
-    argv,
-  });
-  const bundle = await rollup.rollup(c.input);
-  await bundle.write(c.output);
-};
+const require = createRequire(import.meta.url);
 
 const esm = async (argv, core) => {
   const c = config({
@@ -33,8 +25,7 @@ const esm = async (argv, core) => {
   if (!c) {
     return undefined;
   }
-  const bundle = await rollup.rollup(c.input);
-  return bundle.write(c.output);
+  return run(c);
 };
 
 const systemjs = async (argv) => {
@@ -47,8 +38,7 @@ const systemjs = async (argv) => {
   if (!c) {
     return undefined;
   }
-  const bundle = await rollup.rollup(c.input);
-  return bundle.write(c.output);
+  return run(c);
 };
 
 async function build(argv = {}) {
@@ -64,10 +54,11 @@ async function build(argv = {}) {
   if (buildConfig.watch) {
     return watch(buildConfig);
   }
+  const pkg = require(path.resolve(buildConfig.cwd || process.cwd(), 'package.json'));
+  if (!pkg.module && !(buildConfig.systemjs && pkg.systemjs)) {
+    throw new Error('Nothing to build: package.json has no "module" field for the esm bundle or "systemjs" field');
+  }
   console.time('Total build time');
-  console.time('Generate UMD bundle');
-  await umd(buildConfig);
-  console.timeEnd('Generate UMD bundle');
   console.time('Create ESM bundle');
   await esm(buildConfig);
   console.timeEnd('Create ESM bundle');

package/lib/builtins.js

@@ -0,0 +1,13 @@
+import { builtinModules } from 'module';
+
+/**
+ * The `resolve` options that make an empty module of every node builtin.
+ *
+ * A builtin is never a dependency of a bundle. Library code that reaches for one in a path of its own for node
+ * (random-js and @qlik/api do, with require('crypto') and import('fs')) would otherwise make a host that loads the
+ * bundle look for it. A package of the same name that is installed is used instead.
+ */
+export default {
+  fallback: Object.fromEntries(builtinModules.map((name) => [name, false])),
+  alias: Object.fromEntries(builtinModules.map((name) => [`node:${name}`, false])),
+};

package/lib/compile.js

@@ -0,0 +1,44 @@
+import chalk from 'chalk';
+import { createRslib } from '@rslib/core';
+
+const formatWarnings = (stats) => stats.toString({ all: false, warnings: true, colors: false });
+
+const formatErrors = (stats) => stats.toString({ all: false, errors: true, errorDetails: true, colors: false });
+
+/**
+ * Rslib with what a build of nebula needs: it prints nothing itself, the stats of the compilations are
+ * handed to `onCompile` and the build is started with the plugin of `hooks`.
+ */
+const create = async ({ cwd, config }, hooks = () => {}) =>
+  createRslib({
+    cwd,
+    config: {
+      ...config,
+      logLevel: 'silent',
+      plugins: [{ name: 'nebula-build', setup: hooks }],
+    },
+  });
+
+/**
+ * Run a build once and resolve when it is written to disk.
+ * Rejects with the compilation errors, the way a failed rollup bundle did.
+ */
+export const run = async (build) => {
+  let stats;
+  const rslib = await create(build, (api) => {
+    api.onAfterBuild((result) => {
+      stats = result.stats;
+    });
+  });
+  try {
+    await rslib.build();
+  } catch (e) {
+    throw stats && stats.hasErrors() ? new Error(formatErrors(stats)) : e;
+  }
+  if (stats && stats.hasWarnings()) {
+    console.log(`${chalk.black.bgYellow(' WARN  ')} ${chalk.yellow(formatWarnings(stats))}`);
+  }
+  return stats;
+};
+
+export { create, formatWarnings, formatErrors };

package/lib/config.js

@@ -1,23 +1,16 @@
-/* eslint-disable import/extensions */
 import fs from 'fs';
 import path from 'path';
+import { fileURLToPath } from 'url';
 import { createRequire } from 'module';
-import { visualizer } from 'rollup-plugin-visualizer';
+import { rspack } from '@rslib/core';
 
-import resolveNative from './resolveNative.js';
+import builtins from './builtins.js';
+import matchPeers from './peers.js';
 
 const require = createRequire(import.meta.url);
-const babel = require('@rollup/plugin-babel');
-const postcss = require('rollup-plugin-postcss');
-const replace = require('@rollup/plugin-replace');
-const json = require('@rollup/plugin-json');
-const { nodeResolve } = require('@rollup/plugin-node-resolve');
-const commonjs = require('@rollup/plugin-commonjs');
-const terser = require('@rollup/plugin-terser');
-const babelPreset = require('@babel/preset-env');
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
 const browsersList = require('@qlik/browserslist-config');
-const babelPresetReact = require('@babel/preset-react');
-const babelPresetTypescript = require('@babel/preset-typescript');
 
 const resolveReplacementStrings = (replacementStrings) => {
   if (typeof replacementStrings !== 'object') {
@@ -32,7 +25,6 @@ const setupReactNative = (argv) => {
   if (reactNative) {
     reactNativePath = argv.reactNativePath || './react-native';
     if (!fs.existsSync(`${reactNativePath}/package.json`)) {
-      // eslint-disable-next-line no-console
       console.warn(
         `WARNING: No ${reactNativePath}/package.json was found.  If you really intended to build a react-native version of this package, please provide one.\nOther wise, to suppress this warning, omit the --reactNative flag.`
       );
@@ -65,33 +57,38 @@ const getExternalCore = ({ pkg }) => {
   return [...defaultExternal, ...peers];
 };
 
-const getOutputFileDefault = ({ pkg }) => pkg.main;
+const getOutputFileDefault = ({ pkg }) => pkg.module;
 
-const getOutputNameDefault = ({ pkg }) => pkg.name.split('/').reverse()[0];
+// the project's own sass and less, the way rollup-plugin-postcss picked them up
+const resolveFromProject = (name, cwd) => {
+  try {
+    return require(require.resolve(name, { paths: [cwd] }));
+  } catch (e) {
+    return null;
+  }
+};
 
 const config = ({
   mode = 'production',
-  format = 'umd',
+  format = 'esm',
   cwd = process.cwd(),
   argv = { sourcemap: true, codeSplit: false, inlineDynamic: false },
   core,
   behaviours: {
     getExternal = getExternalDefault,
     getOutputFile = getOutputFileDefault,
-    getOutputName = getOutputNameDefault,
     // Return false if no build should be done, otherwise true
     enabled = () => true,
   } = {},
 } = {}) => {
-  const CWD = argv.cwd || cwd;
+  const CWD = path.resolve(argv.cwd || cwd);
   const { reactNative, reactNativePath } = setupReactNative(argv);
   let dir = CWD;
   let pkg = require(path.resolve(CWD, 'package.json'));
   const corePkg = core ? require(path.resolve(core, 'package.json')) : null;
   pkg = reactNative ? require(path.resolve(reactNativePath, 'package.json')) : pkg;
-  const { sourcemap, replacementStrings = {}, typescript, preferBuiltins, browser } = argv;
+  const { sourcemap, replacementStrings = {}, typescript, browser } = argv;
   const banner = getBanner({ pkg });
-  const outputName = getOutputName({ pkg, config: argv });
 
   if (reactNative) {
     dir = `${dir}/${reactNativePath}`;
@@ -105,144 +102,188 @@ const config = ({
   }
   const outputFile = getOutputFile({ pkg, config: argv });
 
-  const extensions = ['.mjs', '.js', '.jsx', '.json', '.node'];
-
-  let typescriptPlugin;
+  const extensions = ['.mjs', '.js', '.jsx', '.json'];
   if (typescript) {
     extensions.push('.tsx', '.ts');
-    try {
-      typescriptPlugin = require('@rollup/plugin-typescript'); // eslint-disable-line
-    } catch (e) {
-      throw new Error(`${e}\n '@rollup/plugin-typescript' is required to build using typescript.`);
-    }
   }
 
   const external = core ? getExternalCore({ pkg }) : getExternal({ pkg, config: argv });
   // stardust should always be external
   if (external.indexOf('@nebula.js/stardust') === -1) {
-    // eslint-disable-next-line no-console
     console.warn('@nebula.js/stardust should be specified as a peer dependency');
     external.push('@nebula.js/stardust');
   }
 
-  const output = () => {
-    const outputConfig = {
-      banner,
-      format,
-      name: outputName,
-      sourcemap,
-      globals: {
-        '@nebula.js/stardust': 'stardust',
-      },
-    };
-    if (!argv.codeSplit || format === 'umd') {
-      outputConfig.file = path.resolve(dir, outputFile);
-    } else {
-      outputConfig.dir = path.resolve(dir, outputFile.split('/')[0]);
-    }
-    if (format === 'umd' || argv.inlineDynamic) {
-      outputConfig.inlineDynamicImports = true;
-    }
-    return outputConfig;
+  const isEsm = format === 'esm';
+  const development = mode === 'development';
+  // a bundle ends up in one file unless code splitting is asked for
+  const singleFile = argv.inlineDynamic || !argv.codeSplit;
+  const outputDir = singleFile
+    ? path.dirname(path.resolve(dir, outputFile))
+    : path.resolve(dir, outputFile.split('/')[0]);
+  // rslib wants the entry as a file, the extension of it is the first that exists
+  const entry =
+    ['.js', '.jsx', '.mjs', ...(typescript ? ['.ts', '.tsx'] : [])]
+      .map((extension) => path.resolve(CWD, `src/index${extension}`))
+      .find((file) => fs.existsSync(file)) || path.resolve(CWD, 'src/index.js');
+  // the chunks of a code split systemjs bundle are loaded relative to the url that SystemJS loaded the entry from
+  const systemChunks = format === 'systemjs' && !singleFile;
+
+  // the class names of a css module are the default export of the module, and are named like they were
+  const cssModules = {
+    namedExport: false,
+    exportLocalsConvention: 'as-is',
+    localIdentName: '[name]_[local]__[hash:base64:5]',
   };
 
-  const babelPresets = [
-    [
-      babelPreset,
-      {
-        modules: false,
-        targets: {
-          browsers: browsersList,
-        },
-      },
-    ],
+  // `url()` is left as it is written, the stylesheet is not a place to bundle assets, as it was before
+  const cssLoaders = (cssOptions = {}) => [
+    require.resolve('./inject-style-loader.cjs'),
+    {
+      loader: require.resolve('css-loader'),
+      // the style is a string in the bundle, a source map of it in the text would only make the bundle larger
+      options: { importLoaders: 1, url: false, sourceMap: false, ...cssOptions },
+    },
+    require.resolve('postcss-loader'),
   ];
 
-  const babelOverrides = [
+  const sass = resolveFromProject('sass', CWD);
+  const less = resolveFromProject('less', CWD);
+
+  const styleRules = [
     {
-      test: /\.[jt]sx$/,
-      presets: [[babelPresetReact, { runtime: 'automatic', development: mode === 'development' }]],
+      test: /\.module\.css$/,
+      use: cssLoaders({ modules: cssModules }),
     },
+    { test: /\.css$/, exclude: /\.module\.css$/, use: cssLoaders() },
+    ...(sass
+      ? [
+          {
+            test: /\.s[ac]ss$/,
+            use: [
+              ...cssLoaders({ importLoaders: 2, modules: { auto: true, ...cssModules } }),
+              { loader: require.resolve('sass-loader'), options: { implementation: sass } },
+            ],
+          },
+        ]
+      : []),
+    ...(less
+      ? [
+          {
+            test: /\.less$/,
+            use: [
+              ...cssLoaders({ importLoaders: 2, modules: { auto: true, ...cssModules } }),
+              { loader: require.resolve('less-loader'), options: { implementation: less } },
+            ],
+          },
+        ]
+      : []),
   ];
 
-  if (typescript) {
-    babelPresets.push([
-      babelPresetTypescript,
-      {
-        allowNamespaces: true,
-        onlyRemoveTypeImports: true,
-      },
-    ]);
-  }
+  const name = path.basename(outputFile).replace(/\.js$/, '');
 
-  return {
-    input: {
-      onwarn(warning, warn) {
-        // Supress "use client" warnings coming from MUI bundling
-        if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes(`"use client"`)) {
-          return;
-        }
-        // https://github.com/d3/d3-interpolate/issues/58
-        if (/Circular dependency.*d3-*/.test(warning.message)) {
-          return;
-        }
-        warn(warning);
+  const lib = {
+    // rslib has no system format, the iife of it is the System.register of rspack below
+    format: isEsm ? 'esm' : 'iife',
+    bundle: true,
+    syntax: browsersList,
+    banner: { js: banner },
+    source: {
+      entry: {
+        [singleFile ? name : 'index']: systemChunks ? [path.resolve(dirname, 'system-public-path.js'), entry] : entry,
       },
-      input: path.resolve(CWD, 'src/index'),
-      external,
-      plugins: [
-        resolveNative({ reactNative }),
-        replace({
-          'process.env.NODE_ENV': JSON.stringify(mode === 'development' ? 'development' : 'production'),
-          preventAssignment: true,
-          ...resolveReplacementStrings(replacementStrings),
-        }),
-        nodeResolve({
-          extensions,
-          browser,
-          preferBuiltins,
-        }),
-        postcss({
-          exclude: /\.module\.css$/,
-        }),
-        // Handle all CSS with conditional modules processing
-        postcss({
-          include: /\.module\.css$/,
-          modules: true,
-          extract: false,
-        }),
-        commonjs({
-          ignoreTryCatch: false, // Avoids problems with require() inside try catch (https://github.com/rollup/plugins/issues/1004)
-        }),
-        json(),
-
-        babel({
-          babelHelpers: 'bundled',
-          babelrc: false,
-          inputSourceMap: sourcemap,
-          extensions,
-          overrides: babelOverrides,
-          presets: babelPresets,
-        }),
-        [
-          mode === 'production'
-            ? terser({
-                output: {
-                  preamble: banner,
-                },
-              })
-            : false,
-        ],
-        [
-          mode === 'development'
-            ? visualizer({
-                filename: 'bundle-analysis.html',
-              })
-            : false,
+      define: {
+        'process.env.NODE_ENV': JSON.stringify(development ? 'development' : 'production'),
+        ...resolveReplacementStrings(replacementStrings),
+      },
+      // the dependencies are transpiled for the browsers as the code of the visualization is
+      include: [/node_modules/],
+    },
+    output: {
+      target: 'web',
+      distPath: { root: outputDir },
+      filename: { js: singleFile ? path.basename(outputFile) : '[name].js' },
+      minify: !development,
+      sourceMap: sourcemap ? { js: 'source-map' } : false,
+      externals: matchPeers(external),
+      // the notices of the licenses go to <bundle>.LICENSE.txt
+      legalComments: 'linked',
+      cleanDistPath: false,
+    },
+    tools: {
+      swc: {
+        jsc: { transform: { react: { runtime: 'automatic', development } } },
+      },
+      // the stylesheets are handled below, with what they were handled with
+      bundlerChain: (chain) => {
+        ['css', 'sass', 'less'].forEach((rule) => chain.module.rules.delete(rule));
+      },
+      rspack: (base) => ({
+        ...base,
+        context: CWD,
+        output: {
+          ...base.output,
+          chunkFilename: '[name]-[contenthash].js',
+          // the url of a chunk of a code split systemjs bundle is relative to the module, see system-public-path.js
+          ...(systemChunks ? { publicPath: '' } : {}),
+          ...(isEsm ? {} : { library: { type: 'system' } }),
+          // an iife has no chunks in rslib, a code split systemjs bundle loads its chunks with script tags
+          ...(systemChunks ? { asyncChunks: true, chunkLoading: 'jsonp', chunkFormat: 'array-push' } : {}),
+        },
+        // the modules of the host are System.register dependencies, and `import()` of one stays a dynamic import
+        externalsType: isEsm ? 'module-import' : 'system',
+        resolve: {
+          ...base.resolve,
+          extensions: reactNative ? extensions.flatMap((e) => [`.native${e}`, e]) : extensions,
+          alias: { ...base.resolve?.alias, ...builtins.alias },
+          mainFields: browser ? ['browser', 'module', 'main'] : ['module', 'main'],
+          fallback: builtins.fallback,
+          ...(browser ? {} : { conditionNames: ['module', 'import', 'require', 'default'] }),
+        },
+        module: {
+          ...base.module,
+          rules: [
+            ...(base.module?.rules || []),
+            // packages that ship esm without file extensions in their imports
+            { test: /\.m?js$/, resolve: { fullySpecified: false } },
+            ...styleRules,
+          ],
+        },
+        optimization: {
+          ...base.optimization,
+          // rollup tree-shakes in development too, rspack's development mode would not
+          usedExports: true,
+          sideEffects: true,
+          providedExports: true,
+          innerGraph: true,
+          concatenateModules: true,
+        },
+        plugins: [
+          ...(base.plugins || []),
+          // @qlik/api imports the runtime modules for node (qix, invoke-fetch) behind `if (isNode)`, a browser gets
+          // them from the host. Rollup left those out because it dropped the function that imports them when nothing
+          // calls it, rspack drops the function too but has already bundled what it imports: about 450kb with
+          // enigma.js and lodash.
+          ...(browser
+            ? [
+                new rspack.IgnorePlugin({
+                  resourceRegExp: /^\.\/(?:qix|invoke-fetch)-[\w-]+\.js$/,
+                  contextRegExp: /@qlik[\\/]api[\\/]chunks$/,
+                }),
+              ]
+            : []),
+          ...(singleFile ? [new rspack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })] : []),
         ],
-      ].filter(Boolean),
+      }),
+    },
+  };
+
+  return {
+    cwd: CWD,
+    config: {
+      mode: development ? 'development' : 'production',
+      lib: [lib],
     },
-    output: output(),
   };
 };
 

package/lib/init-config.js

@@ -17,7 +17,7 @@ const options = {
   watch: {
     description: 'Rebuild the bundle when its source files change on disk',
     alias: 'w',
-    choices: ['umd', 'systemjs', true],
+    choices: ['esm', 'systemjs', true],
   },
   sourcemap: {
     description: 'Generate source maps',
@@ -45,40 +45,39 @@ const options = {
     type: 'boolean',
     default: false,
   },
-  preferBuiltins: {
-    description:
-      'In Rollup, preferBuiltins is a configuration option that specifies whether to use Node.js built-in modules (such as fs or path) when bundling for Node.js environment.',
-    type: 'boolean',
-    default: true,
-  },
   browser: {
     description:
-      'In Rollup, the browser option is a configuration option that specifies whether the bundle is intended to run in a browser environment.',
+      "Use the 'browser' field and export condition of the packages in the bundle, so that browser specific files and conditionals in exports are applied.",
     type: 'boolean',
     default: true,
   },
   codeSplit: {
     description:
-      'Sets output.dir instead of output.file for code-splitting builds. Sets inlineDynamicImports for umd builds to avoid throwing errors.',
+      'Write the esm and systemjs builds to a directory with the entry and a chunk for every dynamic import, instead of one file.',
     type: 'boolean',
     default: false,
   },
+  // not in the help, they are for the other commands, for nebula.config.js and for react native builds
+  cwd: { type: 'string', hidden: true },
+  replacementStrings: { hidden: true },
+  reactNative: { type: 'boolean', hidden: true },
+  reactNativePath: { type: 'string', hidden: true },
   inlineDynamic: {
-    description: 'Sets inlineDynamicImports to true for all builds to help with certain dependencies',
+    description: 'Inline dynamic imports into the bundle in all builds, also when codeSplit is set',
     type: 'boolean',
     default: false,
   },
 };
 
-// nebula build --watch                - watch umd bundle
-// nebula build --watch umd            - watch umd bundle
+// nebula build --watch                - watch esm bundle
+// nebula build --watch esm            - watch esm bundle
 // nebula build --watch systemjs       - watch systemjs bundle
 // nebula build                        - watch disabled
 const watchMiddleware = (argv) => {
   let value = false;
 
   if (argv.watch === true) {
-    value = 'umd';
+    value = 'esm';
   } else if (typeof argv.watch === 'string') {
     value = argv.watch;
   }

package/lib/inject-style-loader.cjs

@@ -0,0 +1,25 @@
+// Puts the css that css-loader produced into a <style> element in the document head when the bundle is loaded.
+//
+// This is what rollup-plugin-postcss did (it inlined the css into the bundle with a tiny helper), kept on
+// purpose instead of style-loader:
+// - nothing happens when there is no document, so a bundle can still be required in node (tests, ssr)
+// - no extra runtime modules in the bundle
+//
+// The module's default export is the class name map for css modules (`import styles from './a.module.css'`)
+// and the css text for plain css, as it was with rollup-plugin-postcss.
+
+module.exports = function injectStyleLoader() {};
+
+module.exports.pitch = function pitch(remainingRequest) {
+  const request = JSON.stringify(this.utils.contextify(this.context, `!!${remainingRequest}`));
+  return `
+import content from ${request};
+var css = String(content);
+if (css && typeof document !== 'undefined') {
+  var style = document.createElement('style');
+  style.appendChild(document.createTextNode(css));
+  document.head.appendChild(style);
+}
+export default content && content.locals ? content.locals : css;
+`;
+};

package/lib/peers.js

@@ -0,0 +1,8 @@
+const escape = (name) => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+/**
+ * What a bundle leaves out of itself: a package, and the modules of it, as `react` and `react-dom/client`. A
+ * regular expression is kept as it is.
+ */
+export default (externals) =>
+  externals.map((external) => (typeof external === 'string' ? new RegExp(`^${escape(external)}(?:/.*)?$`) : external));

package/lib/system-public-path.js

@@ -0,0 +1,9 @@
+// First module of a code split systemjs bundle: where the chunks are loaded from.
+//
+// rspack loads a chunk with a script tag and takes the url of the directory from document.currentScript, which is
+// gone by the time a System.register module executes, so the chunks would be requested from the wrong place. A
+// System.register module is told its own url, rollup's systemjs output imported its chunks relative to it, and so
+// do we.
+if (typeof __system_context__ !== 'undefined' && __system_context__ && __system_context__.meta) {
+  __webpack_public_path__ = __system_context__.meta.url.replace(/[^/]*$/, '');
+}

package/lib/systemjs.js

@@ -13,7 +13,6 @@ const systemjsBehaviours = {
     return Array.isArray(external) ? external : defaultExternal;
   },
   getOutputFile: ({ pkg }) => pkg.systemjs,
-  getOutputName: () => undefined,
   enabled: ({ pkg }) => !!pkg.systemjs,
 };
 

package/lib/watch.js

@@ -1,28 +1,27 @@
-/* eslint-disable no-console, import/extensions */
 import path from 'path';
 import readline from 'readline';
+import { EventEmitter } from 'events';
 import { createRequire } from 'module';
 import chalk from 'chalk';
-import * as rollup from 'rollup';
 
 import config from './config.js';
 import systemjsBehaviours from './systemjs.js';
+import { create, formatErrors, formatWarnings } from './compile.js';
 
 const require = createRequire(import.meta.url);
 
 const getPackage = (argv, cwd = process.cwd()) => require(path.resolve(argv.cwd || cwd, 'package.json'));
 
+// the field of package.json that has the output file of a format
+const OUTPUT_FIELDS = { systemjs: 'systemjs', esm: 'module' };
+
 const validateWatchInput = (argv) => {
-  if (argv.watch === 'systemjs') {
-    const pkg = getPackage(argv);
-    if (!pkg.systemjs) {
-      console.log(
-        `${chalk.white.bgRed(' ERROR ')} ${chalk.red(
-          'No "systemjs" field specifying output file found in package.json'
-        )}`
-      );
-      return false;
-    }
+  const field = OUTPUT_FIELDS[argv.watch];
+  if (field && !getPackage(argv)[field]) {
+    console.log(
+      `${chalk.white.bgRed(' ERROR ')} ${chalk.red(`No "${field}" field specifying output file found in package.json`)}`
+    );
+    return false;
   }
   return true;
 };
@@ -39,10 +38,19 @@ const getWatchConfig = (argv) => {
     case 'systemjs':
       opts = { ...base, format: 'systemjs', behaviours: systemjsBehaviours };
       break;
-    case 'umd':
-    default:
-      opts = { ...base, format: 'umd' };
+    case 'esm':
+      opts = {
+        ...base,
+        format: 'esm',
+        behaviours: {
+          getOutputFile: ({ pkg }) => pkg.module,
+          // the modules that the host of the bundle has, the peer dependencies of the package when it is not told
+          getExternal: ({ pkg, config: cfg }) => cfg.external || Object.keys(pkg.peerDependencies || {}),
+        },
+      };
       break;
+    default:
+      throw new Error(`Cannot watch '${argv.watch}', watch esm or systemjs`);
   }
   return config(opts);
 };
@@ -60,65 +68,85 @@ function clearScreen(msg) {
   }
 }
 
+/**
+ * Watch the sources and rebuild on change.
+ *
+ * Resolves with a watcher after the first successful build. The watcher has the surface the rollup
+ * watcher had, which `nebula serve` depends on: `close()` and `on('event', fn)` with events shaped
+ * `{ code: 'BUNDLE_START' | 'BUNDLE_END' | 'ERROR', ... }`.
+ */
 const watch = async (argv) => {
   if (!validateWatchInput(argv)) {
     return undefined;
   }
   const c = getWatchConfig(argv);
 
-  let hasWarnings = false;
+  const events = new EventEmitter();
+  let closeWatch;
 
-  const watcher = rollup.watch({
-    ...c.input,
-    onwarn({ loc, message, code }) {
-      if (!hasWarnings) {
-        clearScreen();
+  const watcher = {
+    on: (name, listener) => {
+      events.on(name, listener);
+      return watcher;
+    },
+    close: async () => {
+      if (closeWatch) {
+        await closeWatch();
       }
+    },
+  };
 
-      // Supress "use client" warnings coming from MUI bundling
-      if (code === 'MODULE_LEVEL_DIRECTIVE' && message.includes(`"use client"`)) {
-        return;
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    const settle = (fn, value) => {
+      if (!settled) {
+        settled = true;
+        fn(value);
       }
+    };
 
-      console.log(
-        `${chalk.black.bgYellow(' WARN  ')} ${chalk.yellow(
-          loc ? `${loc.file} (${loc.line}:${loc.column}) ${message}` : message
-        )}`
-      );
-      hasWarnings = true;
-    },
-    output: c.output,
-  });
+    const rslibPromise = create(c, (api) => {
+      api.onBeforeBuild(() => {
+        clearScreen();
+        console.log(`${chalk.black.bgBlue(' INFO  ')}  Compiling...\n`);
+        events.emit('event', { code: 'BUNDLE_START' });
+      });
 
-  return new Promise((resolve, reject) => {
-    watcher.on('event', (event) => {
-      switch (event.code) {
-        case 'BUNDLE_START':
-          hasWarnings = false;
-          clearScreen();
-          console.log(`${chalk.black.bgBlue(' INFO  ')}  Compiling...\n`);
-          break;
-        case 'FATAL':
-        case 'ERROR':
+      api.onAfterBuild(({ stats }) => {
+        if (stats.hasErrors()) {
+          const failure = new Error(formatErrors(stats));
           clearScreen();
           console.log(`${chalk.white.bgRed(' ERROR ')} ${chalk.red('Failed to compile\n\n')}`);
-          console.error(event.error.stack);
-          reject(watcher);
-          break;
-        case 'BUNDLE_END':
-          if (!hasWarnings) {
-            clearScreen();
-          } else {
-            console.log();
-          }
-          console.log(
-            `${chalk.black.bgGreen(' DONE  ')} ${chalk.green(`Compiled successfully in ${event.duration}ms\n`)}`
-          );
-          resolve(watcher);
-          break;
-        default:
-      }
+          console.error(failure.stack);
+          events.emit('event', { code: 'ERROR', error: failure });
+          settle(reject, watcher);
+          return;
+        }
+
+        if (stats.hasWarnings()) {
+          console.log(`${chalk.black.bgYellow(' WARN  ')} ${chalk.yellow(formatWarnings(stats))}`);
+          console.log();
+        } else {
+          clearScreen();
+        }
+        const duration = stats.endTime - stats.startTime;
+        console.log(`${chalk.black.bgGreen(' DONE  ')} ${chalk.green(`Compiled successfully in ${duration}ms\n`)}`);
+        events.emit('event', { code: 'BUNDLE_END', duration });
+        settle(resolve, watcher);
+      });
     });
+
+    rslibPromise
+      .then((rslib) => rslib.build({ watch: true }))
+      .then((result) => {
+        closeWatch = result && result.close;
+      })
+      .catch((e) => {
+        // a failed compile is reported by the hook above
+        if (!settled) {
+          settle(reject, e);
+        }
+      });
   });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebula.js/cli-build",
-  "version": "7.8.0",
+  "version": "8.0.0-alpha.0",
   "description": "",
   "type": "module",
   "license": "MIT",
@@ -18,38 +18,26 @@
     "lib",
     "command.js"
   ],
-  "scripts": {
-    "lint": "eslint src"
-  },
   "dependencies": {
-    "@babel/cli": "8.0.6",
-    "@babel/core": "8.0.7",
-    "@babel/helper-plugin-utils": "8.0.1",
-    "@babel/plugin-proposal-object-rest-spread": "7.20.7",
-    "@babel/plugin-transform-react-jsx": "8.0.1",
-    "@babel/preset-env": "8.0.7",
-    "@babel/preset-react": "8.0.1",
-    "@babel/preset-typescript": "8.0.7",
     "@qlik/browserslist-config": "^3.1.0",
-    "@rollup/plugin-babel": "7.1.0",
-    "@rollup/plugin-commonjs": "29.0.3",
-    "@rollup/plugin-json": "6.1.0",
-    "@rollup/plugin-node-resolve": "16.0.3",
-    "@rollup/plugin-replace": "6.0.3",
-    "@rollup/plugin-terser": "1.0.0",
+    "@rslib/core": "1.0.5",
     "chalk": "6.0.1",
+    "css-loader": "7.1.5",
     "extend": "3.0.2",
-    "postcss": "^8.5.29",
-    "rollup": "4.64.5",
-    "rollup-plugin-postcss": "4.0.2",
-    "rollup-plugin-sass": "1.15.3",
-    "rollup-plugin-visualizer": "7.1.1",
+    "less-loader": "13.0.0",
+    "postcss": "^8.5.32",
+    "postcss-loader": "8.2.1",
+    "sass-loader": "17.0.1",
     "yargs": "18.2.0"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "12.3.0",
+    "less": "4.9.1",
+    "sass": "1.106.1",
     "tslib": "*",
     "typescript": "^5.9.3"
   },
-  "gitHead": "870f985afe1849f7a695b34d6f9aebc8e811682d"
-}
+  "scripts": {
+    "lint": "eslint src",
+    "test": "node --test"
+  }
+}

package/lib/resolveNative.js

@@ -1,29 +0,0 @@
-/* eslint-disable no-console */
-import path from 'path';
-import fs from 'fs';
-// this plugin will check if there is a corresponding .native file for the input file and output the contents of the native file
-// This plugin should be loaded first.
-
-export default ({ reactNative }) => ({
-  async load(id) {
-    if (!reactNative) {
-      return null;
-    }
-    if (id) {
-      const parsed = path.parse(id);
-      if (parsed) {
-        if (parsed.name.length > 0) {
-          const nativeTest = `${parsed.dir}/${parsed.name}.native${parsed.ext}`;
-          try {
-            if (fs.existsSync(nativeTest)) {
-              return fs.readFileSync(nativeTest, { encoding: 'utf8', flag: 'r' });
-            }
-          } catch (err) {
-            console.log('there was a problem reading the file', nativeTest, err);
-          }
-        }
-      }
-    }
-    return null;
-  },
-});