feat(plugin-conventions): support conventional css pair, support alte…

…rnative file extentions

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

@@ -0,0 +1,76 @@
+import { preprocessOptions } from '@aurelia/plugin-conventions';
+import { assert } from '@aurelia/testing';
+
+describe('preprocessOptions', function () {
+  it('returns default options', function() {
+    assert.deepEqual(
+      preprocessOptions(),
+      {
+        cssExtensions: ['.css', '.less', '.sass', '.scss', '.styl'],
+        jsExtensions: ['.coffee', '.js', '.jsx', '.ts', '.tsx'],
+        templateExtensions: ['.haml', '.html', '.jade', '.md', '.pug', '.slim', '.slm'],
+        stringModuleWrap: undefined
+      }
+    );
+  });
+
+  it('merges optional extensions', function() {
+    assert.deepEqual(
+      preprocessOptions({
+        cssExtensions: ['.css', '.some'],
+        jsExtensions: ['.mjs'],
+        templateExtensions: ['.markdown']
+      }),
+      {
+        cssExtensions: ['.css', '.less', '.sass', '.scss', '.some', '.styl'],
+        jsExtensions: ['.coffee', '.js', '.jsx', '.mjs', '.ts', '.tsx'],
+        templateExtensions: ['.haml', '.html', '.jade', '.markdown', '.md', '.pug', '.slim', '.slm'],
+        stringModuleWrap: undefined
+      }
+    );
+  });
+
+  it('merges optional options', function() {
+    const wrap = (id: string) => `text!${id}`;
+
+    assert.deepEqual(
+      preprocessOptions({
+        defaultShadowOptions: { mode: 'closed' },
+        stringModuleWrap: wrap,
+        templateExtensions: ['.markdown'],
+        useProcessedFilePairFilename: true,
+        useCSSModule: false
+      }),
+      {
+        defaultShadowOptions: { mode: 'closed' },
+        cssExtensions: ['.css', '.less', '.sass', '.scss', '.styl'],
+        jsExtensions: ['.coffee', '.js', '.jsx', '.ts', '.tsx'],
+        templateExtensions: ['.haml', '.html', '.jade','.markdown', '.md', '.pug', '.slim', '.slm'],
+        stringModuleWrap: wrap,
+        useProcessedFilePairFilename: true
+      }
+    );
+  });
+
+  it('merges optional options, turn off stringModuleWrap if uses CSSModule', function() {
+    const wrap = (id: string) => `text!${id}`;
+
+    assert.deepEqual(
+      preprocessOptions({
+        cssExtensions: ['.some'],
+        defaultShadowOptions: { mode: 'open' },
+        stringModuleWrap: wrap,
+        useProcessedFilePairFilename: true,
+        useCSSModule: true
+      }),
+      {
+        defaultShadowOptions: { mode: 'open' },
+        cssExtensions: ['.css', '.less', '.sass', '.scss', '.some', '.styl'],
+        jsExtensions: ['.coffee', '.js', '.jsx', '.ts', '.tsx'],
+        templateExtensions: ['.haml', '.html', '.jade', '.md', '.pug', '.slim', '.slm'],
+        stringModuleWrap: undefined,
+        useProcessedFilePairFilename: true
+      }
+    );
+  });
+});

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

@@ -1,5 +1,6 @@
-import { preprocessHtmlTemplate } from '@aurelia/plugin-conventions';
+import { preprocessHtmlTemplate, preprocessOptions } from '@aurelia/plugin-conventions';
 import { assert } from '@aurelia/testing';
+import * as path from 'path';
 
 describe('preprocessHtmlTemplate', function () {
   it('processes template with no dependencies', function () {
@@ -17,7 +18,49 @@ export function getHTMLOnlyElement() {
   return _e;
 }
 `;
-    const result = preprocessHtmlTemplate('lo/foo-bar.html', html);
+    const result = preprocessHtmlTemplate({ path: path.join('lo', 'foo-bar.html'), contents: html }, preprocessOptions());
+    assert.equal(result.code, expected);
+  });
+
+  it('processes template with css pair', function () {
+    const html = '<template></template>';
+    const expected = `import { CustomElement } from '@aurelia/runtime';
+import { Registration } from '@aurelia/kernel';
+import d0 from "./foo-bar.css";
+export const name = "foo-bar";
+export const template = "<template></template>";
+export default template;
+export const dependencies = [ Registration.defer('.css', d0) ];
+let _e;
+export function getHTMLOnlyElement() {
+  if (!_e) {
+    _e = CustomElement.define({ name, template, dependencies });
+  }
+  return _e;
+}
+`;
+    const result = preprocessHtmlTemplate({ path: path.join('lo', 'foo-bar.html'), contents: html, filePair: 'foo-bar.css' }, preprocessOptions());
+    assert.equal(result.code, expected);
+  });
+
+  it('do not import css pair if a pair is imported', function () {
+    const html = '<import from="./foo-bar.less"></import><template></template>';
+    const expected = `import { CustomElement } from '@aurelia/runtime';
+import { Registration } from '@aurelia/kernel';
+import d0 from "./foo-bar.less";
+export const name = "foo-bar";
+export const template = "<template></template>";
+export default template;
+export const dependencies = [ Registration.defer('.css', d0) ];
+let _e;
+export function getHTMLOnlyElement() {
+  if (!_e) {
+    _e = CustomElement.define({ name, template, dependencies });
+  }
+  return _e;
+}
+`;
+    const result = preprocessHtmlTemplate({ path: path.join('lo', 'foo-bar.html'), contents: html, filePair: 'foo-bar.css' }, preprocessOptions());
     assert.equal(result.code, expected);
   });
 
@@ -41,7 +84,7 @@ export function getHTMLOnlyElement() {
   return _e;
 }
 `;
-    const result = preprocessHtmlTemplate('lo\\FooBar.html', html);
+    const result = preprocessHtmlTemplate({ path: path.join('lo', 'FooBar.html'), contents: html }, preprocessOptions());
     assert.equal(result.code, expected);
   });
 
@@ -65,7 +108,10 @@ export function getHTMLOnlyElement() {
   return _e;
 }
 `;
-    const result = preprocessHtmlTemplate('lo\\FooBar.html', html, undefined, id => `raw-loader!${id}`);
+    const result = preprocessHtmlTemplate(
+      { path: path.join('lo', 'FooBar.html'), contents: html },
+      preprocessOptions({ stringModuleWrap: (id: string) => `raw-loader!${id}` })
+    );
     assert.equal(result.code, expected);
   });
 
@@ -76,7 +122,7 @@ import * as h0 from "./hello-world.html";
 const d0 = h0.getHTMLOnlyElement();
 import * as d1 from "foo";
 import { Registration } from '@aurelia/kernel';
-import d2 from "./foo-bar.scss";
+import d2 from "raw-loader!./foo-bar.scss";
 export const name = "foo-bar";
 export const template = "<template></template>";
 export default template;
@@ -90,7 +136,13 @@ export function getHTMLOnlyElement() {
   return _e;
 }
 `;
-    const result = preprocessHtmlTemplate('lo\\FooBar.html', html, { mode: 'open' });
+    const result = preprocessHtmlTemplate(
+      { path: path.join('lo', 'FooBar.html'), contents: html },
+      preprocessOptions({
+        defaultShadowOptions: { mode: 'open' },
+        stringModuleWrap: (id: string) => `raw-loader!${id}`
+      })
+    );
     assert.equal(result.code, expected);
   });
 
@@ -115,7 +167,13 @@ export function getHTMLOnlyElement() {
   return _e;
 }
 `;
-    const result = preprocessHtmlTemplate('lo\\FooBar.html', html, { mode: 'closed' }, id => `raw-loader!${id}`);
+    const result = preprocessHtmlTemplate(
+      { path: path.join('lo', 'FooBar.html'), contents: html },
+      preprocessOptions({
+        defaultShadowOptions: { mode: 'closed' },
+        stringModuleWrap: (id: string) => `raw-loader!${id}`
+      })
+    );
     assert.equal(result.code, expected);
   });
 
@@ -140,7 +198,13 @@ export function getHTMLOnlyElement() {
   return _e;
 }
 `;
-    const result = preprocessHtmlTemplate('lo\\FooBar.html', html, { mode: 'closed' }, id => `raw-loader!${id}`);
+    const result = preprocessHtmlTemplate(
+      { path: path.join('lo', 'FooBar.html'), contents: html },
+      preprocessOptions({
+        defaultShadowOptions: { mode: 'closed' },
+        stringModuleWrap: (id: string) => `raw-loader!${id}`
+      })
+    );
     assert.equal(result.code, expected);
   });
 
@@ -165,14 +229,19 @@ export function getHTMLOnlyElement() {
   return _e;
 }
 `;
-    const result = preprocessHtmlTemplate('lo\\FooBar.html', html, undefined, id => `raw-loader!${id}`);
+    const result = preprocessHtmlTemplate(
+      { path: path.join('lo', 'FooBar.html'), contents: html },
+      preprocessOptions({
+        stringModuleWrap: (id: string) => `raw-loader!${id}`
+      })
+    );
     assert.equal(result.code, expected);
   });
 
   it('turn off shadowDOM mode for one word element', 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';
-console.warn("WARN: ShadowDOM is disabled for lo\\\\foo.html. ShadowDOM requires element name to contain a dash (-), you have to refactor <foo> to something like <lorem-foo>.");
+console.warn("WARN: ShadowDOM is disabled for ${path.join('lo', 'foo.html')}. ShadowDOM requires element name to contain a dash (-), you have to refactor <foo> to something like <lorem-foo>.");
 import * as h0 from "./hello-world.html";
 const d0 = h0.getHTMLOnlyElement();
 import * as d1 from "foo";
@@ -190,7 +259,13 @@ export function getHTMLOnlyElement() {
   return _e;
 }
 `;
-    const result = preprocessHtmlTemplate('lo\\foo.html', html, { mode: 'closed' }, id => `raw-loader!${id}`);
+    const result = preprocessHtmlTemplate(
+      { path: path.join('lo', 'foo.html'), contents: html },
+      preprocessOptions({
+        defaultShadowOptions: { mode: 'closed' },
+        stringModuleWrap: (id: string) => `raw-loader!${id}`
+      })
+    );
     assert.equal(result.code, expected);
   });
 
@@ -211,7 +286,12 @@ export function getHTMLOnlyElement() {
   return _e;
 }
 `;
-    const result = preprocessHtmlTemplate('lo\\foo.html', html, null, id => `raw-loader!${id}`);
+    const result = preprocessHtmlTemplate(
+      { path: path.join('lo', 'foo.html'), contents: html },
+      preprocessOptions({
+        stringModuleWrap: (id: string) => `raw-loader!${id}`
+      })
+    );
     assert.equal(result.code, expected);
   })
 });