Merge branch 'dev' into consolidate-rust

config/add-css-types.js

@@ -2,6 +2,7 @@ const DtsCreator = require('typed-css-modules');
 const chokidar = require('chokidar');
 const util = require('util');
 const sass = require('node-sass');
+const normalizePath = require('normalize-path');
 
 const sassRender = util.promisify(sass.render);
 
@@ -29,9 +30,10 @@ function addCssTypes(rootPaths, opts = {}) {
     let ready = false;
 
     for (const rootPath of rootPaths) {
+      const rootPathUnix = normalizePath(rootPath);
       // Look for scss & css in each path.
-      paths.push(rootPath + '/**/*.scss');
-      paths.push(rootPath + '/**/*.css');
+      paths.push(rootPathUnix + '/**/*.scss');
+      paths.push(rootPathUnix + '/**/*.css');
     }
 
     // For simplicity, the watcher is used even if we're not watching.
@@ -68,7 +70,7 @@ function addCssTypes(rootPaths, opts = {}) {
       // And if we're not watching, close the watcher.
       if (!watch) watcher.close();
     });
-  })
+  });
 }
 
 module.exports = addCssTypes;

package-lock.json

@@ -1775,6 +1775,17 @@
       "requires": {
         "micromatch": "^3.1.4",
         "normalize-path": "^2.1.1"
+      },
+      "dependencies": {
+        "normalize-path": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+          "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+          "dev": true,
+          "requires": {
+            "remove-trailing-separator": "^1.0.1"
+          }
+        }
       }
     },
     "aproba": {
@@ -9953,13 +9964,10 @@
       }
     },
     "normalize-path": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-      "dev": true,
-      "requires": {
-        "remove-trailing-separator": "^1.0.1"
-      }
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
     },
     "normalize-url": {
       "version": "2.0.1",

package.json

@@ -45,6 +45,7 @@
     "minimatch": "3.0.4",
     "node-fetch": "2.6.0",
     "node-sass": "4.13.0",
+    "normalize-path": "^3.0.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pointer-tracker": "2.0.3",
     "preact": "8.4.2",

webpack.config.js

@@ -18,14 +18,15 @@ const addCssTypes = require('./config/add-css-types');
 
 const VERSION = require('./package.json').version;
 
-module.exports = async function (_, env) {
+/** @returns {Promise<import('webpack').Configuration>} */
+module.exports = async function(_, env) {
   const isProd = env.mode === 'production';
   const nodeModules = path.join(__dirname, 'node_modules');
   const componentStyleDirs = [
-    path.join(__dirname, 'src/components'),
-    path.join(__dirname, 'src/codecs'),
-    path.join(__dirname, 'src/custom-els'),
-    path.join(__dirname, 'src/lib'),
+    path.join(__dirname, 'src', 'components'),
+    path.join(__dirname, 'src', 'codecs'),
+    path.join(__dirname, 'src', 'custom-els'),
+    path.join(__dirname, 'src', 'lib')
   ];
 
   await addCssTypes(componentStyleDirs, { watch: !isProd });
@@ -53,18 +54,17 @@ module.exports = async function (_, env) {
     resolveLoader: {
       alias: {
         // async-component-loader returns a wrapper component that waits for the import to load before rendering:
-        async: path.join(__dirname, 'config/async-component-loader')
+        async: path.join(__dirname, 'config', 'async-component-loader')
       }
     },
     module: {
-      // Disable the default JavaScript handling:
-      defaultRules: [],
       rules: [
         {
           oneOf: [
             {
               test: /(\.mjs|\.esm\.js)$/i,
-              type: 'javascript/esm',
+              // don't use strict esm resolution for mjs:
+              type: 'javascript/auto',
               resolve: {},
               parser: {
                 harmony: true,
@@ -143,7 +143,7 @@ module.exports = async function (_, env) {
         {
           // All the codec files define a global with the same name as their file name. `exports-loader` attaches those to `module.exports`.
           test: /\.js$/,
-          include: path.join(__dirname, 'src/codecs'),
+          include: path.join(__dirname, 'src', 'codecs'),
           loader: 'exports-loader'
         },
         {
@@ -183,6 +183,7 @@ module.exports = async function (_, env) {
         format: '\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m\r',
         renderThrottle: 100,
         summary: false,
+        total: 10,
         clear: true
       }),
 
@@ -191,17 +192,13 @@ module.exports = async function (_, env) {
         'assets',
         '**/*.{css,js,json,html,map}'
       ], {
-        root: path.join(__dirname, 'build'),
-        verbose: false,
-        beforeEmit: true
-      }),
+          root: path.join(__dirname, 'build'),
+          verbose: false,
+          beforeEmit: true
+        }),
 
       new WorkerPlugin(),
 
-      // Automatically split code into async chunks.
-      // See: https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-      isProd && new webpack.optimize.SplitChunksPlugin({}),
-
       // In production, extract all CSS to produce files on disk, even for
       // lazy-loaded CSS chunks. CSS for async chunks is loaded on-demand.
       // This is a modern Webpack 4 replacement for ExtractTextPlugin.
@@ -302,6 +299,10 @@ module.exports = async function (_, env) {
     ].filter(Boolean), // Filter out any falsey plugin array entries.
 
     optimization: {
+      splitChunks: {
+        // Automatically split code into async chunks.
+        // See: https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+      },
       minimizer: [
         new TerserPlugin({
           sourceMap: isProd,