feat: use shadowOptions in bundler plugins.

Author: 3cp

app-min/src/html.d.ts__if_typescript

@@ -3,5 +3,6 @@ declare module '*.html' {
   export const template: string;
   export default template;
   export const dependencies: string[];
+  export const shadowOptions: { mode: 'open' | 'closed'};
   export function getHTMLOnlyElement();
 }

dumber/gulpfile.js

@@ -107,7 +107,15 @@ function buildJs(src) {
 
 function buildHtml(src) {
   return gulp.src(src, {since: gulp.lastRun(build)})
+    // @if shadow-dom-open
+    .pipe(au2({defaultShadowOptions: {mode: 'open'}}));
+    // @endif
+    // @if shadow-dom-closed
+    .pipe(au2({defaultShadowOptions: {mode: 'closed'}}));
+    // @endif
+    // @if !shadow-dom-open && !shadow-dom-closed
     .pipe(au2()); // inject aurelia conventions
+    // @endif
 }
 
 function buildCss(src) {

questions.js

@@ -20,6 +20,14 @@ module.exports = [
       // {value: 'fuse-box', title: 'FuseBox', hint: 'A bundler that does it all, and does it right.'},
     ]
   },
+  {
+    message: 'Do you want to use ShadowDOM?',
+    choices: [
+      {title: 'No'},
+      {value: 'shadow-dom-open', title: 'ShadowDOM in open mode', hint: 'Open mode means that you can access the shadow DOM using JavaScript written in the main page context.'},
+      {value: 'shadow-dom-closed', title: 'ShadowDOM in closed mode', hint: "Closed mode means that you won't be able to access the shadow DOM from the outside."},
+    ]
+  },
   {
     message: 'What transpiler would you like to use?',
     choices: [

webpack/webpack.config.js

@@ -35,7 +35,15 @@ module.exports = function(env, { mode }) {
         // @if typescript
         { 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/ }
+        // @endif
+        // @if shadow-dom-closed
+        { test: /\.html$/i, use: { loader: '@aurelia/webpack-loader', options: { defaultShadowOptions: { mode: 'closed' } } }, exclude: /node_modules/ }
+        // @endif
+        // @if !shadow-dom-open && !shadow-dom-closed
         { test: /\.html$/i, use: '@aurelia/webpack-loader', exclude: /node_modules/ }
+        // @endif
       ]
     },
     plugins: [new HtmlWebpackPlugin({ template: 'index.ejs' })]