feat: only use ShadomDOM closed mode in production mode

Author: 3cp

dumber/gulpfile.js

@@ -116,13 +116,15 @@ function buildHtml(src) {
     .pipe(au2({defaultShadowOptions: {mode: 'open'}}));
     // @endif
     // @if shadow-dom-closed
-    .pipe(au2({defaultShadowOptions: {mode: 'closed'}}));
+    // Only use 'closed' mode in production build.
+    // 'open' mode is needed for running tests.
+    .pipe(au2({defaultShadowOptions: {mode: isProduction ? 'closed' : 'open'}}));
     // @endif
     // @if css-module
     .pipe(au2({useCSSModule: true}));
     // @endif
     // @if !shadow-dom-open && !shadow-dom-closed && !css-module
-    .pipe(au2()); // inject aurelia conventions
+    .pipe(au2());
     // @endif
 }
 

e2e-test.js

@@ -84,7 +84,7 @@ const skeletons = [
   'webpack babel shadow-dom-open app-min cypress',
   'webpack babel css-module app-min cypress',
   'webpack typescript app-min cypress',
-  'webpack typescript shadow-dom-open app-min cypress',
+  'webpack typescript shadow-dom-closed app-min cypress',
   'webpack typescript css-module app-min cypress',
 
   // 'parcel babel app-min cypress',
@@ -95,7 +95,7 @@ const skeletons = [
   // 'fuse-box typescript app-min cypress',
 
   'dumber babel app-min cypress',
-  'dumber babel shadow-dom-open app-min cypress',
+  'dumber babel shadow-dom-closed app-min cypress',
   // 'dumber babel css-module app-min cypress',
   'dumber typescript app-min cypress',
   'dumber typescript shadow-dom-open app-min cypress',

webpack/package.json

@@ -20,6 +20,6 @@
   },
   "scripts": {
     "start": "webpack-dev-server",
-    "build": "rimraf dist && webpack",
+    "build": "rimraf dist && webpack --mode=production",
   }
 }

webpack/webpack.config.js

@@ -32,7 +32,16 @@ module.exports = function(env, { mode }) {
         { test: /\.css$/i, use: ["style-loader", "css-loader"] },
         // @endif
         // @if css-module
-        { test: /\.css$/i, use: ["style-loader", { loader: "css-loader", options: { modules: true } }] },
+        {
+          test: /\.css$/i,
+          use: [
+            "style-loader",
+            {
+              loader: "css-loader",
+              options: { modules: true }
+            }
+          ]
+        },
         // @endif
         // @if babel
         { test: /\.js$/i, use: ['babel-loader', '@aurelia/webpack-loader'], exclude: /node_modules/ },
@@ -41,13 +50,42 @@ module.exports = function(env, { mode }) {
         { test: /\.ts$/i, use: ['ts-loader', '@aurelia/webpack-loader'], exclude: /node_modules/ },
         // @endif
         // @if shadow-dom-open
-        { test: /\.html$/i, use: { loader: '@aurelia/webpack-loader', options: { defaultShadowOptions: { mode: 'open' } } }, exclude: /node_modules/ }
+        {
+          test: /\.html$/i,
+          use: {
+            loader: '@aurelia/webpack-loader',
+            options: {
+              defaultShadowOptions: { mode: 'open' }
+            }
+          },
+          exclude: /node_modules/
+        }
         // @endif
         // @if shadow-dom-closed
-        { test: /\.html$/i, use: { loader: '@aurelia/webpack-loader', options: { defaultShadowOptions: { mode: 'closed' } } }, exclude: /node_modules/ }
+        {
+          test: /\.html$/i,
+          use: {
+            loader: '@aurelia/webpack-loader',
+            options: {
+              defaultShadowOptions: {
+                // Only use 'closed' mode in production build.
+                // 'open' mode is needed for running tests.
+                mode: production ? 'closed' : 'open'
+              }
+            }
+          },
+          exclude: /node_modules/
+        }
         // @endif
         // @if css-module
-        { test: /\.html$/i, use: { loader: '@aurelia/webpack-loader', options: { useCSSModule: true } }, exclude: /node_modules/ }
+        {
+          test: /\.html$/i,
+          use: {
+            loader: '@aurelia/webpack-loader',
+            options: { useCSSModule: true }
+          },
+          exclude: /node_modules/
+        }
         // @endif
         // @if !shadow-dom-open && !shadow-dom-closed && !css-module
         { test: /\.html$/i, use: '@aurelia/webpack-loader', exclude: /node_modules/ }