@nebula.js/cli-build 4.0.0-alpha.1 → 4.0.0-alpha.10

package/lib/build.js

@@ -1,189 +1,12 @@
 const path = require('path');
-const chalk = require('chalk');
-const readline = require('readline');
-
-const fs = require('fs');
 const extend = require('extend');
 const yargs = require('yargs');
 const rollup = require('rollup');
-const babel = require('@rollup/plugin-babel');
-const postcss = require('rollup-plugin-postcss');
-const replace = require('@rollup/plugin-replace');
-const sourcemaps = require('rollup-plugin-sourcemaps');
-const jsxPlugin = require('@babel/plugin-transform-react-jsx');
-const json = require('@rollup/plugin-json');
-const { nodeResolve } = require('@rollup/plugin-node-resolve');
-const commonjs = require('@rollup/plugin-commonjs');
-
-const babelPreset = require('@babel/preset-env');
-
-const terser = require('@rollup/plugin-terser');
-const resolveNative = require('./resolveNative');
 
 const initConfig = require('./init-config');
-
-const resolveReplacementStrings = (replacementStrings) => {
-  if (typeof replacementStrings !== 'object') {
-    throw new Error('replacementStrings should be an object with key value pairs of strings!');
-  }
-  return replacementStrings;
-};
-
-const setupReactNative = (argv) => {
-  const { reactNative } = argv;
-  let reactNativePath;
-  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.`
-      );
-      return false;
-    }
-  }
-  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);
-  let dir = CWD;
-  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 { sourcemap, replacementStrings = {}, typescript } = argv;
-  const banner = getBanner({ pkg });
-  const outputName = getOutputName({ pkg, config: argv });
-
-  if (reactNative) {
-    dir = `${dir}/${reactNativePath}`;
-  } else if (corePkg) {
-    pkg = corePkg;
-    dir = core;
-  }
-
-  if (!enabled({ pkg })) {
-    return false;
-  }
-  const outputFile = getOutputFile({ pkg, config: argv });
-
-  const extensions = ['.mjs', '.js', '.jsx', '.json', '.node'];
-
-  let typescriptPlugin;
-  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 = 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');
-  }
-
-  return {
-    input: {
-      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,
-        }),
-        commonjs({
-          ignoreTryCatch: false, // Avoids problems with require() inside try catch (https://github.com/rollup/plugins/issues/1004)
-        }),
-        json(),
-        babel({
-          babelHelpers: 'bundled',
-          babelrc: false,
-          inputSourceMap: false, // without this you get wrong source maps, but I don't know why
-          extensions,
-          presets: [
-            [
-              babelPreset,
-              {
-                modules: false,
-                targets: {
-                  browsers: ['chrome 62'],
-                },
-              },
-            ],
-          ],
-          plugins: [[jsxPlugin]],
-        }),
-        sourcemaps(),
-        postcss({}),
-        ...[typescript ? typescriptPlugin() : false],
-        ...[
-          mode === 'production'
-            ? terser({
-                output: {
-                  preamble: banner,
-                },
-              })
-            : false,
-        ],
-      ].filter(Boolean),
-    },
-    output: {
-      banner,
-      format,
-      file: path.resolve(dir, outputFile),
-      name: outputName,
-      sourcemap,
-      globals: {
-        '@nebula.js/stardust': 'stardust',
-      },
-    },
-  };
-};
+const config = require('./config');
+const watch = require('./watch');
+const systemjsBehaviours = require('./systemjs');
 
 const umd = async (argv) => {
   const c = config({
@@ -213,17 +36,6 @@ const esm = async (argv, core) => {
   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',
@@ -238,112 +50,6 @@ const systemjs = async (argv) => {
   return bundle.write(c.output);
 };
 
-function clearScreen(msg) {
-  // source: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-shared-utils/lib/logger.js
-  if (process.stdout.isTTY) {
-    const blank = '\n'.repeat(process.stdout.rows);
-    console.log(blank);
-    readline.cursorTo(process.stdout, 0, 0);
-    readline.clearScreenDown(process.stdout);
-    if (msg) {
-      console.log(msg);
-    }
-  }
-}
-
-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',
-    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;
-
-  const watcher = rollup.watch({
-    ...c.input,
-    onwarn({ loc, message }) {
-      if (!hasWarnings) {
-        clearScreen();
-      }
-      console.log(
-        `${chalk.black.bgYellow(' WARN  ')} ${chalk.yellow(
-          loc ? `${loc.file} (${loc.line}:${loc.column}) ${message}` : message
-        )}`
-      );
-      hasWarnings = true;
-    },
-    output: c.output,
-  });
-
-  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':
-          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:
-      }
-    });
-  });
-};
-
 async function build(argv = {}) {
   let defaultBuildConfig = {};
 
@@ -358,13 +64,24 @@ async function build(argv = {}) {
     return watch(buildConfig);
   }
 
+  console.time('Generate UMD bundle');
   await umd(buildConfig);
+  console.timeEnd('Generate UMD bundle');
+  console.time('Create ESM bundle');
   await esm(buildConfig);
-  await systemjs(buildConfig);
+  console.timeEnd('Create ESM bundle');
+
+  if (argv.systemjs) {
+    console.time('Support native format of the SystemJS loader');
+    await systemjs(buildConfig);
+    console.timeEnd('Support native format of the SystemJS loader');
+  }
 
   if (argv.core) {
+    console.time('Create ESM bundle into core');
     const core = path.resolve(process.cwd(), argv.core);
     await esm(buildConfig, core);
+    console.timeEnd('Create ESM bundle into core');
   }
 
   return undefined;

package/lib/config.js

@@ -0,0 +1,179 @@
+const fs = require('fs');
+const path = require('path');
+const babel = require('@rollup/plugin-babel');
+const postcss = require('rollup-plugin-postcss');
+const replace = require('@rollup/plugin-replace');
+const sourcemaps = require('rollup-plugin-sourcemaps');
+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 jsxPlugin = require('@babel/plugin-transform-react-jsx');
+const babelPreset = require('@babel/preset-env');
+
+const resolveNative = require('./resolveNative');
+
+const resolveReplacementStrings = (replacementStrings) => {
+  if (typeof replacementStrings !== 'object') {
+    throw new Error('replacementStrings should be an object with key value pairs of strings!');
+  }
+  return replacementStrings;
+};
+
+const setupReactNative = (argv) => {
+  const { reactNative } = argv;
+  let reactNativePath;
+  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.`
+      );
+      return false;
+    }
+  }
+  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);
+  let dir = CWD;
+  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 { sourcemap, replacementStrings = {}, typescript } = argv;
+  const banner = getBanner({ pkg });
+  const outputName = getOutputName({ pkg, config: argv });
+
+  if (reactNative) {
+    dir = `${dir}/${reactNativePath}`;
+  } else if (corePkg) {
+    pkg = corePkg;
+    dir = core;
+  }
+
+  if (!enabled({ pkg })) {
+    return false;
+  }
+  const outputFile = getOutputFile({ pkg, config: argv });
+
+  const extensions = ['.mjs', '.js', '.jsx', '.json', '.node'];
+
+  let typescriptPlugin;
+  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 = 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');
+  }
+
+  return {
+    input: {
+      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,
+        }),
+        commonjs({
+          ignoreTryCatch: false, // Avoids problems with require() inside try catch (https://github.com/rollup/plugins/issues/1004)
+        }),
+        json(),
+        babel({
+          babelHelpers: 'bundled',
+          babelrc: false,
+          inputSourceMap: false, // without this you get wrong source maps, but I don't know why
+          extensions,
+          presets: [
+            [
+              babelPreset,
+              {
+                modules: false,
+                targets: {
+                  browsers: ['chrome 62'],
+                },
+              },
+            ],
+          ],
+          plugins: [[jsxPlugin]],
+        }),
+        sourcemaps(),
+        postcss({}),
+        ...[typescript ? typescriptPlugin() : false],
+        ...[
+          mode === 'production'
+            ? terser({
+                output: {
+                  preamble: banner,
+                },
+              })
+            : false,
+        ],
+      ].filter(Boolean),
+    },
+    output: {
+      banner,
+      format,
+      file: path.resolve(dir, outputFile),
+      name: outputName,
+      sourcemap,
+      globals: {
+        '@nebula.js/stardust': 'stardust',
+      },
+    },
+  };
+};
+
+module.exports = config;

package/lib/init-config.js

@@ -27,6 +27,11 @@ const options = {
     type: 'string',
     default: undefined,
   },
+  systemjs: {
+    description: 'Enable to transpile a systemjs format for release',
+    type: 'boolean',
+    default: true,
+  },
   core: {
     description: 'Set a core build target to compile an ES Module for release',
     type: 'string',

package/lib/systemjs.js

@@ -0,0 +1,12 @@
+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,
+};
+
+module.exports = systemjsBehaviours;

package/lib/watch.js

@@ -0,0 +1,114 @@
+const chalk = require('chalk');
+const rollup = require('rollup');
+const readline = require('readline');
+
+const config = require('./config');
+const systemjsBehaviours = require('./systemjs');
+
+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',
+    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);
+};
+
+function clearScreen(msg) {
+  // source: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-shared-utils/lib/logger.js
+  if (process.stdout.isTTY) {
+    const blank = '\n'.repeat(process.stdout.rows);
+    console.log(blank);
+    readline.cursorTo(process.stdout, 0, 0);
+    readline.clearScreenDown(process.stdout);
+    if (msg) {
+      console.log(msg);
+    }
+  }
+}
+
+const watch = async (argv) => {
+  if (!validateWatchInput(argv)) {
+    return undefined;
+  }
+  const c = getWatchConfig(argv);
+
+  let hasWarnings = false;
+
+  const watcher = rollup.watch({
+    ...c.input,
+    onwarn({ loc, message }) {
+      if (!hasWarnings) {
+        clearScreen();
+      }
+      console.log(
+        `${chalk.black.bgYellow(' WARN  ')} ${chalk.yellow(
+          loc ? `${loc.file} (${loc.line}:${loc.column}) ${message}` : message
+        )}`
+      );
+      hasWarnings = true;
+    },
+    output: c.output,
+  });
+
+  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':
+          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:
+      }
+    });
+  });
+};
+
+module.exports = watch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebula.js/cli-build",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.10",
   "description": "",
   "license": "MIT",
   "author": "QlikTech International AB",
@@ -21,28 +21,28 @@
     "lint": "eslint src"
   },
   "dependencies": {
-    "@babel/cli": "7.21.0",
-    "@babel/core": "7.21.0",
-    "@babel/plugin-transform-react-jsx": "7.21.0",
-    "@babel/preset-env": "7.20.2",
+    "@babel/cli": "7.21.5",
+    "@babel/core": "7.21.8",
+    "@babel/plugin-transform-react-jsx": "7.21.5",
+    "@babel/preset-env": "7.21.5",
     "@rollup/plugin-babel": "6.0.3",
-    "@rollup/plugin-commonjs": "24.0.1",
+    "@rollup/plugin-commonjs": "24.1.0",
     "@rollup/plugin-json": "6.0.0",
-    "@rollup/plugin-node-resolve": "15.0.1",
+    "@rollup/plugin-node-resolve": "15.0.2",
     "@rollup/plugin-replace": "5.0.2",
-    "@rollup/plugin-terser": "0.4.0",
+    "@rollup/plugin-terser": "0.4.1",
     "chalk": "4.1.2",
     "extend": "3.0.2",
-    "postcss": "^8.4.21",
-    "rollup": "3.17.3",
+    "postcss": "^8.4.23",
+    "rollup": "3.21.3",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-sourcemaps": "0.6.3",
-    "yargs": "17.7.1"
+    "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "11.0.0",
+    "@rollup/plugin-typescript": "11.1.0",
     "tslib": "*",
-    "typescript": ">=4.9.5"
+    "typescript": ">=5.0.4"
   },
-  "gitHead": "e88250ef22efa7796ff3049153b31fdd6740c0d0"
+  "gitHead": "0ffa335271ce6e7f4bc58df9b2e7681ff1487984"
 }