feat(plugin-conventions): enable ShadomDOM option in html-only-element

closes #465

packages/__tests__/plugin-conventions/preprocess-html-template.spec.ts

@@ -56,7 +56,7 @@ export const name = "foo-bar";
 export const template = "<template></template>";
 export default template;
 export const dependencies = [ d0, d1, Registration.defer('.css', d2) ];
-export const shadowOptions = {"mode":"open"};
+export const shadowOptions = { mode: 'open' };
 let _e;
 export function getHTMLOnlyElement() {
   if (!_e) {
@@ -81,7 +81,32 @@ export const name = "foo-bar";
 export const template = "<template></template>";
 export default template;
 export const dependencies = [ d0, d1, Registration.defer('.css', d2) ];
-export const shadowOptions = {"mode":"closed"};
+export const shadowOptions = { mode: 'closed' };
+let _e;
+export function getHTMLOnlyElement() {
+  if (!_e) {
+    _e = CustomElement.define({ name, template, dependencies, shadowOptions });
+  }
+  return _e;
+}
+`;
+    const result = preprocessHtmlTemplate('lo\\FooBar.html', html, { mode: 'closed' }, id => `raw-loader!${id}`);
+    assert.equal(result.code, expected);
+  });
+
+  it('processes template with css dependencies in shadowDOM mode with string module wrap and explicit shadow mode', function () {
+    const html = '<import from="./hello-world.html"><use-shadow-dom><template><import from="foo"><require from="./foo-bar.scss"></require></template>';
+    const expected = `import { CustomElement } from '@aurelia/runtime';
+import * as h0 from "./hello-world.html";
+const d0 = h0.getHTMLOnlyElement();
+import * as d1 from "foo";
+import { Registration } from '@aurelia/kernel';
+import d2 from "raw-loader!./foo-bar.scss";
+export const name = "foo-bar";
+export const template = "<template></template>";
+export default template;
+export const dependencies = [ d0, d1, Registration.defer('.css', d2) ];
+export const shadowOptions = { mode: 'open' };
 let _e;
 export function getHTMLOnlyElement() {
   if (!_e) {

packages/__tests__/plugin-conventions/preprocess.spec.ts

@@ -35,7 +35,7 @@ export const name = "foo-bar";
 export const template = "<template></template>";
 export default template;
 export const dependencies = [ d0, d1, Registration.defer('.css', d2) ];
-export const shadowOptions = {"mode":"open"};
+export const shadowOptions = { mode: 'open' };
 let _e;
 export function getHTMLOnlyElement() {
   if (!_e) {

packages/__tests__/plugin-conventions/strip-meta-data.spec.ts

@@ -0,0 +1,160 @@
+import { stripMetaData } from '@aurelia/plugin-conventions';
+import { assert } from '@aurelia/testing';
+
+describe('stripMetaData', function () {
+  it('returns empty html', function() {
+    assert.deepEqual(stripMetaData(' '), {
+      html: ' ',
+      shadowMode: null,
+      deps: []
+    });
+  });
+
+  it('strips import tag', function() {
+    const html = `<import from="./a"></import>
+<template>
+  <p></p>
+</template>
+`;
+    const expected = `
+<template>
+  <p></p>
+</template>
+`;
+
+    assert.deepEqual(stripMetaData(html), {
+      html: expected,
+      shadowMode: null,
+      deps: ['./a']
+    });
+  });
+
+  it('strips import tags with wrong or missing close tag', function() {
+    const html = `<import from="./a" />
+<import from="b"></import>
+<template>
+  <import from="./c.css">
+  <p></p>
+</template>
+`;
+    const expected = `
+
+<template>
+${'  ' /* leading space is untouched */}
+  <p></p>
+</template>
+`;
+
+    assert.deepEqual(stripMetaData(html), {
+      html: expected,
+      shadowMode: null,
+      deps: ['./a', 'b', './c.css']
+    });
+  });
+
+  it('strips require tag', function() {
+    const html = `<require from="./a"></require>
+<template>
+  <p></p>
+</template>
+`;
+    const expected = `
+<template>
+  <p></p>
+</template>
+`;
+
+    assert.deepEqual(stripMetaData(html), {
+      html: expected,
+      shadowMode: null,
+      deps: ['./a']
+    });
+  });
+
+  it('strips mixed import/require tags with wrong or missing close tag', function() {
+    const html = `<import from="./a" /><import from="foo">
+<require from="b"></require>
+<template>
+  <require from="./c.css">
+  <p></p>
+</template>
+`;
+    const expected = `
+
+<template>
+${'  ' /* leading space is untouched */}
+  <p></p>
+</template>
+`;
+
+    assert.deepEqual(stripMetaData(html), {
+      html: expected,
+      shadowMode: null,
+      deps: ['./a', 'foo', 'b', './c.css']
+    });
+  });
+
+  it('strips use-shadow-dom tag', function() {
+    const html = `<use-shadow-dom></use-shadow-dom>
+<template>
+</template>
+`;
+    const expected = `
+<template>
+</template>
+`;
+    assert.deepEqual(stripMetaData(html), {
+      html: expected,
+      shadowMode: 'open',
+      deps: []
+    });
+  });
+
+  it('strips use-shadow-dom tag with mode attribute', function() {
+    const html = `<use-shadow-dom mode="closed">
+<template>
+<require from="./a"></require>
+</template>
+`;
+    const expected = `
+<template>
+
+</template>
+`;
+    assert.deepEqual(stripMetaData(html), {
+      html: expected,
+      shadowMode: 'closed',
+      deps: ['./a']
+    });
+  });
+
+  it('strips use-shadow-dom attribute', function() {
+    const html = `<template use-shadow-dom>
+</template>
+`;
+    const expected = `<template >
+</template>
+`;
+    assert.deepEqual(stripMetaData(html), {
+      html: expected,
+      shadowMode: 'open',
+      deps: []
+    });
+  });
+
+  it('strips use-shadow-dom attribute with explicit mode', function() {
+    const html = `<template use-shadow-dom="closed">
+<require from="./a"></require>
+</template>
+`;
+    const expected = `<template >
+
+</template>
+`;
+    assert.deepEqual(stripMetaData(html), {
+      html: expected,
+      shadowMode: 'closed',
+      deps: ['./a']
+    });
+  });
+});

packages/plugin-conventions/src/index.ts

@@ -1,5 +1,5 @@
 export { nameConvention, ResourceType } from './name-convention';
 export { preprocessResource } from './preprocess-resource';
 export { preprocessHtmlTemplate } from './preprocess-html-template';
-export { stripHtmlImport } from './strip-html-import';
+export { stripMetaData } from './strip-meta-data';
 export { preprocess } from './preprocess';

packages/plugin-conventions/src/preprocess-html-template.ts

@@ -2,7 +2,7 @@ import { kebabCase } from '@aurelia/kernel';
 import modifyCode from 'modify-code';
 import * as path from 'path';
 import { fileBase } from './file-base';
-import { stripHtmlImport } from './strip-html-import';
+import { stripMetaData } from './strip-meta-data';
 
 // stringModuleWrap is to deal with pure css text module import in shadowDOM mode.
 // For webpack:
@@ -13,7 +13,11 @@ import { stripHtmlImport } from './strip-html-import';
 //   import d0 from './foo.css';
 // because most bundler by default will inject that css into HTML head.
 export function preprocessHtmlTemplate(filePath: string, rawHtml: string, defaultShadowOptions?: { mode: 'open' | 'closed' }, stringModuleWrap?: (id: string) => string) {
-  const { html, deps } = stripHtmlImport(rawHtml);
+  let { html, shadowMode, deps } = stripMetaData(rawHtml);
+
+  if (defaultShadowOptions && !shadowMode) {
+    shadowMode = defaultShadowOptions.mode;
+  }
 
   const viewDeps: string[] = [];
   const importStatements: string[] = [];
@@ -23,7 +27,7 @@ export function preprocessHtmlTemplate(filePath: string, rawHtml: string, defaul
     const ext = path.extname(d);
 
     if (isCss(ext)) {
-      if (defaultShadowOptions) {
+      if (shadowMode) {
         if (!registrationImported) {
           importStatements.push(`import { Registration } from '@aurelia/kernel';\n`);
           registrationImported = true;
@@ -53,14 +57,14 @@ export default template;
 export const dependencies = [ ${viewDeps.join(', ')} ];
 `);
 
-  if (defaultShadowOptions) {
-    m.append(`export const shadowOptions = ${JSON.stringify(defaultShadowOptions)};\n`);
+  if (shadowMode) {
+    m.append(`export const shadowOptions = { mode: '${shadowMode}' };\n`);
   }
 
   m.append(`let _e;
 export function getHTMLOnlyElement() {
   if (!_e) {
-    _e = CustomElement.define({ name, template, dependencies${defaultShadowOptions ? ', shadowOptions' : ''} });
+    _e = CustomElement.define({ name, template, dependencies${shadowMode ? ', shadowOptions' : ''} });
   }
   return _e;
 }