chore: build dev distribution (#251)

.eslintrc.json

@@ -20,6 +20,9 @@
     "import/no-extraneous-dependencies": [2, { "devDependencies": true }],
     "import/no-dynamic-require": 0
   },
+  "globals": {
+    "__NEBULA_DEV__": false
+  },
   "overrides": [
     {
       "files": ["apis/**/*"],
@@ -27,6 +30,12 @@
         "no-console": "error"
       }
     },
+    {
+      "files": ["apis/*/index.js"],
+      "rules": {
+        "global-require": 0
+      }
+    },
     {
       "files": ["**/*.{int,comp,spec}.{js,jsx}"],
       "env": {

apis/locale/index.js

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/locale.js');
+} else {
+  module.exports = require('./dist/locale.dev.js');
+}

apis/locale/package.json

@@ -10,10 +10,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/qlik-oss/nebula.js.git"
+    "url": "https://github.com/qlik-oss/nebula.js.git",
+    "directory": "apis/locale"
   },
-  "main": "dist/locale.js",
+  "main": "index.js",
-  "module": "dist/locale.esm.js",
+  "module": "dist/locale.esm",
   "files": [
     "dist"
   ],

apis/nucleus/index.js

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/nucleus.js');
+} else {
+  module.exports = require('./dist/nucleus.dev.js');
+}

apis/nucleus/package.json

@@ -10,10 +10,13 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/qlik-oss/nebula.js.git"
+    "url": "https://github.com/qlik-oss/nebula.js.git",
+    "directory": "apis/nucleus"
   },
-  "main": "dist/nucleus.js",
+  "main": "index.js",
-  "module": "dist/nucleus.esm.js",
+  "module": "dist/nucleus.esm",
+  "jsdelivr": "dist/nucleus.js",
+  "unpkg": "dist/nucleus.js",
   "files": [
     "dist"
   ],

apis/nucleus/src/__tests__/app-theme.spec.js

@@ -16,7 +16,7 @@ describe('app-theme', () => {
       error: sandbox.spy(),
       warn: sandbox.spy(),
     };
-    [{ default: appThemeFn }] = aw.mock([['**/apis/theme/**/theme.js', () => t]], ['../app-theme']);
+    [{ default: appThemeFn }] = aw.mock([[require.resolve('@nebula.js/theme'), () => t]], ['../app-theme']);
   });
 
   afterEach(() => {

apis/nucleus/src/sn/__tests__/type.spec.js

@@ -13,7 +13,7 @@ describe('type', () => {
     satisfies = sb.stub();
     [{ default: create }] = aw.mock(
       [
-        ['**/dist/supernova.js', () => SNFactory],
+        [require.resolve('@nebula.js/supernova'), () => SNFactory],
         ['**/semver/functions/satisfies.js', () => satisfies],
         ['**/load.js', () => ({ load })],
       ],

apis/supernova/index.js

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/supernova.js');
+} else {
+  module.exports = require('./dist/supernova.dev.js');
+}

apis/supernova/package.json

@@ -10,10 +10,13 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/qlik-oss/nebula.js.git"
+    "url": "https://github.com/qlik-oss/nebula.js.git",
+    "directory": "apis/supernova"
   },
-  "main": "dist/supernova.js",
+  "main": "index.js",
-  "module": "dist/supernova.esm.js",
+  "module": "dist/supernova.esm",
+  "jsdelivr": "dist/supernova.js",
+  "unpkg": "dist/supernova.js",
   "files": [
     "dist"
   ],

apis/theme/index.js

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/theme.js');
+} else {
+  module.exports = require('./dist/theme.dev.js');
+}

apis/theme/package.json

@@ -10,10 +10,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/qlik-oss/nebula.js.git"
+    "url": "https://github.com/qlik-oss/nebula.js.git",
+    "directory": "apis/theme"
   },
-  "main": "dist/theme.js",
+  "main": "index.js",
-  "module": "dist/theme.esm.js",
+  "module": "dist/theme.esm",
   "files": [
     "dist"
   ],

aw.config.js

@@ -7,3 +7,5 @@ module.exports = {
     exclude: ['**/commands/**', '**/__stories__/**'],
   },
 };
+
+global.__NEBULA_DEV__ = false; // eslint-disable-line

commands/serve/lib/webpack.build.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const babelPath = require.resolve('babel-loader');
@@ -38,7 +39,7 @@ const cfg = ({ srcDir, distDir, dev = false, serveConfig = {} }) => {
           : {}),
         fixtures: path.resolve(process.cwd(), 'test/component'),
       },
-      extensions: ['.js', '.jsx'],
+      extensions: ['.dev.js', '.js', '.jsx'],
     },
     module: {
       rules: [
@@ -82,6 +83,9 @@ const cfg = ({ srcDir, distDir, dev = false, serveConfig = {} }) => {
       ],
     },
     plugins: [
+      new webpack.DefinePlugin({
+        __NEBULA_DEV__: true,
+      }),
       new MonacoWebpackPlugin({ languages: ['json'] }),
       new HtmlWebpackPlugin({
         template: path.resolve(srcDir, 'eRender.html'),

commands/serve/package.json

@@ -56,9 +56,9 @@
     "d3-require": "1.2.4",
     "enigma.js": "2.6.3",
     "monaco-editor": "0.19.2",
+    "monaco-editor-webpack-plugin": "1.8.2",
     "react": "16.12.0",
     "react-dom": "16.12.0",
-    "webpack-cli": "3.3.10",
+    "webpack-cli": "3.3.10"
-    "monaco-editor-webpack-plugin": "1.8.2"
   }
 }

rollup.config.js

@@ -12,6 +12,33 @@ const cwd = process.cwd();
 const pkg = require(path.join(cwd, 'package.json')); // eslint-disable-line
 const { name, version, license } = pkg;
 
+const targetName = name.split('/')[1];
+const targetDirName = 'dist';
+const targetDir = path.join(cwd, targetDirName);
+
+const getFileName = (format, dev) => `${targetName}${format ? `.${format}` : ''}${dev ? '.dev' : ''}.js`;
+const getTargetFileName = (format, dev) => `${targetDirName}/${getFileName(format, dev)}`;
+
+// verify package targets and names
+if (pkg.main !== 'index.js') {
+  throw Error(`main target must be index.js`);
+}
+
+// in our webpack/rollup configs we include '.dev.js' as file extension when building
+// a dev distribution, the module target should therefore end with '.esm' and not with '.esm.js'
+// so that the node resolve algorithm finds the correct module based on module format and dev mode
+// e.g. '@nebula.js/supernova' -> '@nebula.js/supernova/dist/supernova.esm.dev.js'
+const moduleTargetName = getTargetFileName('esm').replace(/\.js$/, '');
+if (pkg.module && pkg.module !== moduleTargetName) {
+  throw Error(`module target must be ${moduleTargetName}`);
+}
+if (pkg.unpkg && pkg.unpkg !== getTargetFileName('')) {
+  throw Error(`unpkg target must be ${getTargetFileName('')}`);
+}
+if (pkg.jsdelivr && pkg.jsdelivr !== getTargetFileName('')) {
+  throw Error(`jsdelivr target must be ${getTargetFileName('')}`);
+}
+
 const banner = `/*
 * ${name} v${version}
 * Copyright (c) ${new Date().getFullYear()} QlikTech International AB
@@ -56,11 +83,8 @@ const propTypes = [
 
 const watch = process.argv.indexOf('-w') > 2;
 
-const config = isEsm => {
+const config = (isEsm, dev = false) => {
-  const outputFile = isEsm ? pkg.module : pkg.main;
+  const umdName = targetName
-  const basename = path.basename(outputFile);
-  const dir = path.dirname(outputFile);
-  const umdName = basename
     .replace(/-([a-z])/g, (m, p1) => p1.toUpperCase())
     .split('.js')
     .join('');
@@ -88,22 +112,23 @@ const config = isEsm => {
   const cfg = {
     input: path.resolve(cwd, 'src', 'index'),
     output: {
-      file: path.resolve(dir, basename),
+      file: path.resolve(targetDir, getFileName(isEsm ? 'esm' : '', dev)),
       format: isEsm ? 'esm' : 'umd',
       exports: 'default',
       name: umdName,
-      sourcemap: process.env.CODESANDBOX ? 'inline' : true,
+      sourcemap: false,
       banner,
       globals,
     },
     external,
     plugins: [
       replace({
+        __NEBULA_DEV__: dev,
         'process.env.NODE_ENV': JSON.stringify(isEsm ? 'development' : 'production'),
         'process.env.NEBULA_VERSION': JSON.stringify(version),
       }),
       nodeResolve({
-        extensions: ['.js', '.jsx'],
+        extensions: [dev ? '.dev.js' : false, '.js', '.jsx'].filter(Boolean),
       }),
       json(),
       commonjs({
@@ -158,7 +183,7 @@ const config = isEsm => {
     ],
   };
 
-  if (process.env.NODE_ENV === 'production' && !isEsm) {
+  if (!dev) {
     cfg.plugins.push(
       terser({
         output: {
@@ -171,4 +196,16 @@ const config = isEsm => {
   return cfg;
 };
 
-module.exports = [watch ? false : config(), pkg.module ? config(true) : false].filter(Boolean);
+const dist = [
+  // production
+  watch ? false : config(),
+  // dev
+  watch ? false : config(false, true),
+
+  // esm
+  pkg.module ? config(true) : false,
+  // esm dev
+  pkg.module ? config(true, true) : false,
+];
+
+module.exports = dist.filter(Boolean);