@nebula.js/cli-build 3.0.0-rc.2 → 3.0.0

package/README.md

@@ -19,7 +19,8 @@ Options:
   --version        Show version number                                 [boolean]
   --config, -c     Path to JSON config file
                                           [string] [default: "nebula.config.js"]
-  --watch, -w      Watch source files                 [boolean] [default: false]
+  --watch, -w      Watch source files
+                                   [choices: "umd", "systemjs"] [default: "umd"]
   --sourcemap, -m  Generate source map                 [boolean] [default: true]
   --mode           Explicitly set mode
                                  [string] [choices: "production", "development"]
@@ -142,6 +143,15 @@ In the package.json file, the main field makes sure that Node users using requir
 can be served the umd version. The module field is a common convention to designate
 how to import an esm version of your code.
 
+### SystemJS build
+
+You can build a bundle using the SystemJS format by adding a `systemjs` field in the
+package.json which specifies the output file from the build:
+
+```json
+"systemjs": "dist/hello.systemjs.js"
+```
+
 ### Typescript
 
 With this option you can enable typescript bundling of your code. Add a `tsconfig.json`

package/lib/build.js

@@ -45,12 +45,40 @@ const setupReactNative = (argv) => {
   return { reactNative, reactNativePath };
 };
 
+const getBanner = ({ pkg }) => {
+  const { name, author, version, license } = pkg;
+  const auth = typeof author === 'object' ? `${author.name} <${author.email}>` : author || '';
+
+  return `/*
+* ${name} v${version}
+* Copyright (c) ${new Date().getFullYear()} ${auth}
+* Released under the ${license} license.
+*/
+`;
+};
+
+const getExternalDefault = ({ pkg }) => {
+  const peers = pkg.peerDependencies || {};
+  return Object.keys(peers);
+};
+
+const getOutputFileDefault = ({ pkg }) => pkg.main;
+
+const getOutputNameDefault = ({ pkg }) => pkg.name.split('/').reverse()[0];
+
 const config = ({
   mode = 'production',
   format = 'umd',
   cwd = process.cwd(),
   argv = { sourcemap: true },
   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 { reactNative, reactNativePath } = setupReactNative(argv);
@@ -58,8 +86,9 @@ const config = ({
   let pkg = require(path.resolve(CWD, 'package.json')); // eslint-disable-line
   const corePkg = core ? require(path.resolve(core, 'package.json')) : null; // eslint-disable-line
   pkg = reactNative ? require(path.resolve(reactNativePath, 'package.json')) : pkg; // eslint-disable-line
-  const { name, version, license, author } = pkg;
   const { sourcemap, replacementStrings = {}, typescript } = argv;
+  const banner = getBanner({ pkg });
+  const outputName = getOutputName({ pkg, config: argv });
 
   if (reactNative) {
     dir = `${dir}/${reactNativePath}`;
@@ -68,14 +97,11 @@ const config = ({
     dir = core;
   }
 
-  if (format === 'esm' && !pkg.module) {
+  if (!enabled({ pkg })) {
     return false;
   }
+  const outputFile = getOutputFile({ pkg, config: argv });
 
-  const fileTarget = format === 'esm' ? pkg.module : pkg.main;
-
-  const auth = typeof author === 'object' ? `${author.name} <${author.email}>` : author || '';
-  const moduleName = name.split('/').reverse()[0];
   const extensions = ['.mjs', '.js', '.jsx', '.json', '.node'];
 
   let typescriptPlugin;
@@ -88,21 +114,11 @@ const config = ({
     }
   }
 
-  const banner = `/*
-* ${name} v${version}
-* Copyright (c) ${new Date().getFullYear()} ${auth}
-* Released under the ${license} license.
-*/
-`;
-
-  const peers = pkg.peerDependencies || {};
-  const external = Object.keys(peers);
-
+  const external = getExternal({ pkg, config: argv });
   // stardust should always be external
-  if (!peers['@nebula.js/stardust']) {
+  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');
-  } else if (external.indexOf('@nebula.js/stardust') === -1) {
     external.push('@nebula.js/stardust');
   }
 
@@ -158,8 +174,8 @@ const config = ({
     output: {
       banner,
       format,
-      file: path.resolve(dir, fileTarget),
-      name: moduleName,
+      file: path.resolve(dir, outputFile),
+      name: outputName,
       sourcemap,
       globals: {
         '@nebula.js/stardust': 'stardust',
@@ -168,7 +184,7 @@ const config = ({
   };
 };
 
-const minified = async (argv) => {
+const umd = async (argv) => {
   const c = config({
     mode: argv.mode || 'production',
     format: 'umd',
@@ -184,9 +200,38 @@ const esm = async (argv, core) => {
     format: 'esm',
     argv,
     core,
+    behaviours: {
+      getOutputFile: ({ pkg }) => pkg.module,
+      enabled: ({ pkg }) => !!pkg.module,
+    },
+  });
+  if (!c) {
+    return undefined;
+  }
+  const bundle = await rollup.rollup(c.input);
+  return bundle.write(c.output);
+};
+
+const systemjsBehaviours = {
+  getExternal: ({ config: cfg }) => {
+    const defaultExternal = ['@nebula.js/stardust', 'picasso.js', 'picasso-plugin-q', 'react', 'react-dom'];
+    const { external } = cfg.systemjs || {};
+    return Array.isArray(external) ? external : defaultExternal;
+  },
+  getOutputFile: ({ pkg }) => pkg.systemjs,
+  getOutputName: () => undefined,
+  enabled: ({ pkg }) => !!pkg.systemjs,
+};
+
+const systemjs = async (argv) => {
+  const c = config({
+    mode: argv.mode || 'production',
+    format: 'systemjs',
+    argv,
+    behaviours: systemjsBehaviours,
   });
   if (!c) {
-    return Promise.resolve();
+    return undefined;
   }
   const bundle = await rollup.rollup(c.input);
   return bundle.write(c.output);
@@ -205,12 +250,48 @@ function clearScreen(msg) {
   }
 }
 
-const watch = async (argv) => {
-  const c = config({
+const getPackage = (argv, cwd = process.cwd()) => require(path.resolve(argv.cwd || cwd, 'package.json')); // eslint-disable-line
+
+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;
+    }
+  }
+  return true;
+};
+
+const getWatchConfig = (argv) => {
+  const base = {
     mode: argv.mode || 'development',
-    format: 'umd',
     argv,
-  });
+  };
+
+  let opts;
+
+  switch (argv.watch) {
+    case 'systemjs':
+      opts = { ...base, format: 'systemjs', behaviours: systemjsBehaviours };
+      break;
+    case 'umd':
+    default:
+      opts = { ...base, format: 'umd' };
+      break;
+  }
+  return config(opts);
+};
+
+const watch = async (argv) => {
+  if (!validateWatchInput(argv)) {
+    return undefined;
+  }
+  const c = getWatchConfig(argv);
 
   let hasWarnings = false;
 
@@ -275,13 +356,17 @@ async function build(argv = {}) {
   if (buildConfig.watch) {
     return watch(buildConfig);
   }
-  await minified(buildConfig);
+
+  await umd(buildConfig);
+  await esm(buildConfig);
+  await systemjs(buildConfig);
 
   if (argv.core) {
     const core = path.resolve(process.cwd(), argv.core);
     await esm(buildConfig, core);
   }
-  return esm(buildConfig);
+
+  return undefined;
 }
 
 module.exports = build;

package/lib/init-config.js

@@ -1,4 +1,4 @@
-/* eslint global-require: 0 */
+/* eslint global-require: 0, no-param-reassign: 0 */
 const fs = require('fs');
 
 const defaultFilename = 'nebula.config.js';
@@ -13,9 +13,8 @@ const options = {
   },
   watch: {
     description: 'Rebuild the bundle when its source files change on disk',
-    type: 'boolean',
     alias: 'w',
-    default: false,
+    choices: ['umd', 'systemjs', true],
   },
   sourcemap: {
     description: 'Generate source maps',
@@ -40,22 +39,44 @@ const options = {
   },
 };
 
+// nebula build --watch                - watch umd bundle
+// nebula build --watch umd            - watch umd bundle
+// nebula build --watch systemjs       - watch systemjs bundle
+// nebula build                        - watch disabled
+const watchMiddleware = (argv) => {
+  let value = false;
+
+  if (argv.watch === true) {
+    value = 'umd';
+  } else if (typeof argv.watch === 'string') {
+    value = argv.watch;
+  }
+
+  argv.watch = value;
+  argv.w = value;
+
+  return argv;
+};
+
 module.exports = (yargs) => {
   yargs.parserConfiguration({
     'dot-notation': false, // To avoid parsing "replacementStrings" with dot-notation into objects
   });
 
-  return yargs.options(options).config('config', (configPath) => {
-    if (configPath === null) {
-      return {};
-    }
-    if (!fs.existsSync(configPath)) {
-      if (RX.test(configPath)) {
-        // do nothing if default filename doesn't exist
+  return yargs
+    .options(options)
+    .config('config', (configPath) => {
+      if (configPath === null) {
         return {};
       }
-      throw new Error(`Config ${configPath} not found`);
-    }
-    return require(configPath).build || {};
-  });
+      if (!fs.existsSync(configPath)) {
+        if (RX.test(configPath)) {
+          // do nothing if default filename doesn't exist
+          return {};
+        }
+        throw new Error(`Config ${configPath} not found`);
+      }
+      return require(configPath).build || {};
+    })
+    .middleware(watchMiddleware);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebula.js/cli-build",
-  "version": "3.0.0-rc.2",
+  "version": "3.0.0",
   "description": "",
   "license": "MIT",
   "author": "QlikTech International AB",
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@babel/cli": "7.18.10",
-    "@babel/core": "7.18.10",
+    "@babel/core": "7.18.13",
     "@babel/plugin-transform-react-jsx": "7.18.10",
     "@babel/preset-env": "7.18.10",
     "@rollup/plugin-commonjs": "22.0.2",
@@ -32,7 +32,7 @@
     "chalk": "4.1.2",
     "extend": "3.0.2",
     "postcss": "^8.4.16",
-    "rollup": "2.77.2",
+    "rollup": "2.79.0",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-sourcemaps": "0.6.3",
@@ -40,9 +40,9 @@
     "yargs": "17.5.1"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "8.3.4",
+    "@rollup/plugin-typescript": "8.4.0",
     "tslib": "*",
-    "typescript": ">=4.7.4"
+    "typescript": ">=4.8.2"
   },
-  "gitHead": "898b5acf0ecf16f2e988a9c01a06f681e0d5bf5e"
+  "gitHead": "50254faefff85fa3da57abfa1be1a0f71785ea30"
 }