@movable/studio-framework-build-config 3.0.0-canvases.0 → 3.0.0-esmodules.1

package/.eslintrc.js

@@ -1,5 +1,4 @@
 module.exports = {
-  extends: ['airbnb-base', 'plugin:prettier/recommended'],
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module'
@@ -11,9 +10,6 @@ module.exports = {
   overrides: [
     {
       files: ['rollup.js', 'karma.js', 'index.js'],
-      rules: {
-        '@typescript-eslint/no-var-requires': 'off'
-      },
       env: {
         node: true
       }

package/package.json

@@ -1,54 +1,49 @@
 {
   "name": "@movable/studio-framework-build-config",
-  "version": "3.0.0-canvases.0",
+  "version": "3.0.0-esmodules.1",
   "license": "MIT",
   "private": false,
   "author": "Movable Ink",
   "repository": "movableink/studio-apps",
   "homepage": "https://github.com/movableink/studio-apps#README.md",
   "main": "src/index.js",
-  "scripts": {
-    "lint": "eslint . --ext .js"
-  },
   "dependencies": {
-    "@babel/core": "^7.7.5",
-    "@babel/plugin-external-helpers": "^7.7.4",
-    "@babel/plugin-transform-runtime": "^7.7.6",
-    "@babel/preset-env": "^7.5.4",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/runtime-corejs2": "^7.5.4",
-    "@movable/rollup-plugin-manifest-merger": "^3.0.0-canvases.0",
-    "glob": "^7.1.6",
-    "karma": "^4.4.1",
+    "@babel/core": "^7.14.0",
+    "@babel/plugin-external-helpers": "^7.12.13",
+    "@babel/plugin-transform-runtime": "^7.13.15",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.14.5",
+    "@movable/rollup-plugin-manifest-merger": "^2.43.0",
+    "@movable/rollup-plugin-package-manifest-validator": "^3.0.0-esmodules.1",
+    "@rollup/plugin-url": "^6.0.0",
+    "esbuild": "^0.15.14",
+    "glob": "^7.1.7",
+    "is-docker": "^2.2.1",
+    "karma": "^6.3.4",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-html2js-preprocessor": "^1.1.0",
-    "karma-qunit": "^4.0.0",
-    "karma-rollup-preprocessor": "^7.0.2",
-    "qunit": "^2.9.3",
-    "rollup": "^1.27.10",
+    "karma-qunit": "^4.1.2",
+    "karma-rollup-preprocessor": "7.0.7",
+    "postcss": "^8.2.15",
+    "qunit": "^2.16.0",
+    "rollup": "^2.52.2",
     "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-babel-minify": "^9.1.1",
+    "rollup-plugin-babel-minify": "^10.0.0",
     "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-copy-assets": "^2.0.1",
+    "rollup-plugin-copy-assets": "^2.0.3",
     "rollup-plugin-image": "^1.0.2",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-serve": "^1.0.1",
-    "rollup-plugin-url": "^3.0.1",
+    "rollup-plugin-serve": "^1.1.0",
     "rollup-split-index": "^1.1.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "devDependencies": {
-    "eslint": "^6.7.2",
-    "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-prettier": "^3.1.1"
+  "volta": {
+    "extends": "../../package.json"
   },
-  "gitHead": "13dbb367ccbba108236f1bf0188986df50970877"
+  "gitHead": "ea2420f0db42b95a3e1e877da7f2a0c6ac4b0240"
 }

package/src/apps/babel.js

@@ -1,18 +1,14 @@
 module.exports = {
   babelrc: false,
-  runtimeHelpers: true,
   include: ['app/**', 'tests/**'],
   presets: [
     [
       '@babel/env',
       {
-        modules: false
+        targets: { safari: '16' },
+        bugfixes: true
       }
     ],
     '@babel/react'
-  ],
-  plugins: [
-    '@babel/external-helpers',
-    ['@babel/transform-runtime', { corejs: 2 }]
   ]
 };

package/src/apps/data-loader.js

@@ -0,0 +1,62 @@
+const esbuild = require('esbuild');
+const fs = require('fs').promises;
+const path = require('path');
+
+const { ENVIRONMENT } = process.env;
+
+const loaderHtmlSourceDefault = path.resolve(__dirname, './html/loader.html');
+const loaderDebugHtmlSourceDefault = path.resolve(__dirname, './html/loader-debug.html');
+
+async function buildDataLoader(watchMode = false, buildConfig = {}) {
+  if (typeof buildConfig !== 'object') {
+    // might have passed dataLoader: true; if so, use defaults
+    buildConfig = {};
+  }
+
+  console.log('Copying data loader wrappers: dist/loader.html, dist/loader-debug.html');
+
+  await fs.copyFile(buildConfig.loaderHtml || loaderHtmlSourceDefault, './dist/loader.html');
+  await fs.copyFile(loaderDebugHtmlSourceDefault, './dist/loader-debug.html');
+
+  console.log('Building data loader: dist/loader.js');
+
+  if (watchMode) {
+    console.log('Watching for changes to data loader');
+  }
+
+  esbuild.build({
+    entryPoints: ['./app/loader/index.js'],
+    outfile: 'dist/loader.js',
+    target: 'safari15',
+    format: 'esm',
+    bundle: true,
+    logLevel: 'info',
+    minify: ENVIRONMENT === 'production',
+    watch: watchMode,
+    ...buildConfig
+  });
+}
+
+// Only invoke the first time rollup runs
+let dataLoaderBuilt = false;
+
+module.exports = function buildDataLoaderPlugin(options = {}) {
+  return {
+    name: 'build-data-loader',
+    closeBundle() {
+      if (dataLoaderBuilt) {
+        // closeBundle happens on every build; we only invoke esbuild the first time and
+        // it watches its own changes
+        return;
+      }
+
+      const { watchMode } = this.meta;
+      dataLoaderBuilt = true;
+
+      buildDataLoader(watchMode, options.dataLoader).catch((error) => {
+        console.error(error);
+        dataLoaderBuilt = false;
+      });
+    }
+  };
+};

package/src/apps/html/loader-debug.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html>
+<body>
+  <h1>Data Loader Tester</h1>
+
+  <h2>Result:</h2>
+  <div id="result" style="font-family: monospace; white-space: pre-wrap; padding: 20px; background-color: #EEE;"></div>
+
+  <h2>Query:</h2>
+  <textarea id="params" style="width: 100%; min-height: 400px;"></textarea>
+  <button id="submit_params" type="button">Submit</button>
+
+  <script type="module">
+   import loader from '../dist/loader.js';
+
+   const url = new URL(document.location);
+
+   const paramsInput = document.querySelector("#params");
+   let paramsValue = '';
+   for (let [key, value] of url.searchParams) {
+     paramsValue += `${key}=${value}\n`;
+   }
+   paramsInput.value = paramsValue;
+
+   const button = document.querySelector("#submit_params");
+   button.onclick = () => {
+     let newURL = new URL(url);
+     for (let [key, _] of newURL.searchParams) {
+       newURL.searchParams.delete(key);
+     }
+
+     const paramsList = paramsInput.value.split("\n").filter(l => l.length);
+     for (let line of paramsList) {
+       const [key, value] = line.split("=");
+       newURL.searchParams.set(key, value);
+     }
+     window.location = newURL;
+   }
+
+   const result = document.querySelector("#result");
+
+   async function registerHandler(fn) {
+     try {
+       const data = await fn(url);
+       result.innerText = JSON.stringify(data, null, 2);
+     } catch(e) {
+       result.innerText = [e.message, e.stack].join('\n');
+       throw e;
+     }
+   }
+   registerHandler(loader);
+
+   export default '';
+  </script>
+
+  <script type="module" src="../dist/loader.js"></script>
+</body>
+</html>

package/src/apps/html/loader.html

@@ -0,0 +1,22 @@
+<html>
+  <body>
+    <script id="handler" type="module">
+      import loader from './loader.js';
+
+      if (typeof(window.registerHandler) === 'undefined') {
+        console.log("Missing window.registerHandler; setting mock.")
+        window.registerHandler = (fn) => fn(new URL(document.location));
+      }
+
+      window.registerHandler(loader);
+    </script>
+
+    <script>
+     window.onerror = function catchError(e) {
+         console.error(e);
+         window.MICapture && MICapture.error("Handler registration failed");
+     };
+     document.querySelector('#handler').onerror = window.onerror;
+    </script>
+  </body>
+</html>

package/src/apps/karma.js

@@ -4,40 +4,40 @@ const commonjs = require('rollup-plugin-commonjs');
 const replace = require('rollup-plugin-replace');
 const postcss = require('rollup-plugin-postcss');
 const image = require('rollup-plugin-image');
-const manifestMerger = require('@movable/rollup-plugin-manifest-merger');
 const json = require('rollup-plugin-json');
+const isDocker = require('is-docker');
+const { manifestMerger } = require('@movable/rollup-plugin-manifest-merger');
 const babelrc = require('./babel');
 
 const watchMode = process.env.KARMA_WATCH === 'true';
 
 module.exports = function karmaConfig(config) {
   config.set({
-    browsers: ['Chrome'],
+    browsers: ['ChromeWithConfiguration'],
     frameworks: ['qunit'],
     files: ['tests/tests.js'],
     crossOriginAttribute: false, // otherwise can't load remote scripts
 
     preprocessors: {
-      'app/index.html': ['html2js'],
       'tests/tests.js': ['rollup']
     },
 
-    html2jsPreprocessor: {},
+    customLaunchers: {
+      ChromeWithConfiguration: {
+        base: 'ChromeHeadless',
+        flags: isDocker() ? ['--no-sandbox'] : []
+      }
+    },
 
-    plugins: [
-      'karma-chrome-launcher',
-      'karma-html2js-preprocessor',
-      'karma-qunit',
-      'karma-rollup-preprocessor'
-    ],
+    plugins: ['karma-chrome-launcher', 'karma-qunit', 'karma-rollup-preprocessor'],
 
     rollupPreprocessor: {
       input: 'tests/index.js',
       context: 'window',
       plugins: [
-        manifestMerger(),
+        manifestMerger({ output: 'manifest.yml' }),
         babel(babelrc),
-        resolve({ jsnext: true, browser: true }),
+        resolve(),
         commonjs(),
         postcss({
           modules: false

package/src/apps/rollup.js

@@ -9,13 +9,10 @@ const replace = require('rollup-plugin-replace');
 const copy = require('rollup-plugin-copy-assets');
 const minify = require('rollup-plugin-babel-minify');
 const json = require('rollup-plugin-json');
-const manifestMerger = require('@movable/rollup-plugin-manifest-merger');
-const {
-  importExportToGlobal,
-  dependenciesOnly
-} = require('rollup-split-index');
-
+const { manifestMerger } = require('@movable/rollup-plugin-manifest-merger');
+const { importExportToGlobal, dependenciesOnly } = require('rollup-split-index');
 const babelrc = require('./babel');
+const buildDataLoader = require('./data-loader');
 
 module.exports = function rollupConfig(passedConfig = {}) {
   const inputFile = 'app/index.js';
@@ -30,8 +27,9 @@ module.exports = function rollupConfig(passedConfig = {}) {
   const vendorTree = {
     input: inputFile,
     plugins: [
+      manifestMerger({ output: 'manifest.yml', ignoreFrameworkVersionUpdate: true }),
       babel(babelrc),
-      resolve({ jsnext: true, browser: true }),
+      resolve(),
       commonjs(),
       postcss({
         modules: false
@@ -45,13 +43,14 @@ module.exports = function rollupConfig(passedConfig = {}) {
       replace({
         'process.env.NODE_ENV': JSON.stringify('production')
       }),
+      config.dataLoader ? buildDataLoader(config.dataLoader) : null,
       config.minify ? minify({ comments: false, sourceMap: true }) : null,
-      manifestMerger({ output: '../manifest.yml' }),
       config.serve ? serve() : null
     ].filter(Boolean),
     output: {
       name: 'studioDependencies',
-      file: 'dist/vendor.js',
+      dir: './',
+      entryFileNames: 'dist/vendor.js',
       format: 'iife'
     }
   };
@@ -77,7 +76,7 @@ module.exports = function rollupConfig(passedConfig = {}) {
   const dummyTree = {
     input: 'app/dummy/dummy.js',
     plugins: [
-      manifestMerger(),
+      manifestMerger({ output: 'manifest.yml' }),
       resolve(),
       postcss({
         modules: false
@@ -95,7 +94,5 @@ module.exports = function rollupConfig(passedConfig = {}) {
     }
   };
 
-  return [vendorTree, indexTree, config.includeDummy ? dummyTree : null].filter(
-    Boolean
-  );
+  return [vendorTree, indexTree, config.includeDummy ? dummyTree : null].filter(Boolean);
 };

package/src/packages/babel.js

@@ -1,18 +1,14 @@
 module.exports = {
   babelrc: false,
-  runtimeHelpers: true,
   include: ['src/**', 'tests/**'],
   presets: [
     [
       '@babel/env',
       {
-        modules: false
+        targets: { safari: '16' },
+        bugfixes: true
       }
     ],
     '@babel/react'
-  ],
-  plugins: [
-    '@babel/external-helpers',
-    ['@babel/transform-runtime', { corejs: 2 }]
   ]
 };

package/src/packages/karma.js

@@ -4,23 +4,30 @@ const commonjs = require('rollup-plugin-commonjs');
 const replace = require('rollup-plugin-replace');
 const postcss = require('rollup-plugin-postcss');
 const json = require('rollup-plugin-json');
-const url = require('rollup-plugin-url');
+const url = require('@rollup/plugin-url');
+const isDocker = require('is-docker');
 const babelrc = require('./babel');
 
 const watchMode = process.env.KARMA_WATCH === 'true' || true;
 module.exports = function karmaConfig(config) {
   config.set({
-    browsers: ['Chrome'],
+    browsers: ['ChromeWithConfiguration'],
     frameworks: ['qunit'],
     files: ['tests/tests.js'],
     crossOriginAttribute: false, // otherwise can't load remote scripts
 
     preprocessors: {
-      'app/index.html': ['html2js'],
       'tests/tests.js': ['rollup']
     },
 
-    html2jsPreprocessor: {},
+    customLaunchers: {
+      ChromeWithConfiguration: {
+        base: 'ChromeHeadless',
+        flags: isDocker() ? ['--no-sandbox'] : []
+      }
+    },
+
+    plugins: ['karma-chrome-launcher', 'karma-qunit', 'karma-rollup-preprocessor'],
 
     rollupPreprocessor: {
       input: 'tests/index.js',
@@ -28,7 +35,7 @@ module.exports = function karmaConfig(config) {
       plugins: [
         babel(babelrc),
         json(),
-        resolve({ jsnext: true, browser: true }),
+        resolve(),
         commonjs(),
         postcss({
           modules: false

package/src/packages/rollup.js

@@ -4,27 +4,58 @@ const commonjs = require('rollup-plugin-commonjs');
 const external = require('rollup-plugin-peer-deps-external');
 const postcss = require('rollup-plugin-postcss');
 const json = require('rollup-plugin-json');
-const url = require('rollup-plugin-url');
+const url = require('@rollup/plugin-url');
+const replace = require('rollup-plugin-replace');
+const {
+  packageBuilder,
+  manifestMerger,
+  inputFile
+} = require('@movable/rollup-plugin-manifest-merger');
+const { manifestValidatorPlugin } = require('@movable/rollup-plugin-package-manifest-validator');
 const babelConf = require('./babel');
 
 const reactBase = require.resolve('react');
 const reactDomBase = require.resolve('react-dom');
+const STUDIO_TUNNEL_MODE = !!process.env.STUDIO_TUNNEL_MODE;
 
 module.exports = function rollupConfig(pkg) {
-  return {
-    input: 'src/index.js',
-    output: [
-      {
+  if (STUDIO_TUNNEL_MODE) {
+    const plugins = [
+      babel(babelConf),
+      packageBuilder({ entry: 'src/index.js' }),
+      manifestMerger({ output: 'manifest.yml', appManifest: 'test-app-manifest.yml' }),
+      json(),
+      resolve({
+        extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx']
+      }),
+      postcss({
+        modules: false
+      }),
+      commonjs({
+        namedExports: {
+          [reactBase]: ['Children', 'Component', 'PropTypes', 'createElement'],
+          [reactDomBase]: ['render']
+        }
+      }),
+      url({ limit: 1024000 }),
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('production')
+      })
+    ];
+
+    if (!process.env.SKIP_VALIDATION)
+      plugins.splice(1, 0, manifestValidatorPlugin({ manifestPath: 'package-manifest.yml' }));
+
+    return {
+      input: inputFile,
+      output: {
         file: pkg.main,
-        exports: 'named',
-        format: 'cjs'
+        format: 'iife'
       },
-      {
-        file: pkg.module,
-        format: 'es'
-      }
-    ],
-    plugins: [
+      plugins
+    };
+  } else {
+    const plugins = [
       babel(babelConf),
       json(),
       resolve({
@@ -41,6 +72,25 @@ module.exports = function rollupConfig(pkg) {
       }),
       url({ limit: 1024000 }),
       external()
-    ]
-  };
+    ];
+
+    if (!process.env.SKIP_VALIDATION)
+      plugins.splice(1, 0, manifestValidatorPlugin({ manifestPath: 'package-manifest.yml' }));
+
+    return {
+      output: [
+        {
+          file: pkg.main,
+          exports: 'named',
+          format: 'cjs'
+        },
+        {
+          file: pkg.module,
+          format: 'es'
+        }
+      ],
+      input: 'src/index.js',
+      plugins
+    };
+  }
 };

package/.eslintignore

@@ -1 +0,0 @@
-node_modules/*