vite+vitest setup

.github/workflows/e2e-linux.yml

@@ -29,6 +29,8 @@ jobs:
           - latest,parcel,typescript
           - latest,dumber,babel
           - latest,dumber,typescript
+          - latest,vite,babel
+          - latest,vite,typescript
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node_version }}

.github/workflows/e2e-macOS.yml

@@ -26,6 +26,8 @@ jobs:
           - latest,parcel,typescript
           - latest,dumber,babel
           - latest,dumber,typescript
+          - latest,vite,babel
+          - latest,vite,typescript
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node_version }}

.github/workflows/e2e-windows.yml

@@ -26,6 +26,8 @@ jobs:
           - latest,parcel,typescript
           - latest,dumber,babel
           - latest,dumber,typescript
+          - latest,vite,babel
+          - latest,vite,typescript
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node_version }}

__test__/before-task.spec.js

@@ -23,7 +23,7 @@ test('"before" task can select default-esnext preset', async t => {
   const result = await before({unattended: false, prompts});
   t.deepEqual(result, {
     silentQuestions: true,
-    preselectedFeatures: ['app', 'webpack', 'babel', 'jest']
+    preselectedFeatures: ['app', 'vite', 'babel', 'vitest']
   });
 });
 
@@ -40,7 +40,7 @@ test('"before" task can select default-typescript preset', async t => {
   const result = await before({unattended: false, prompts});
   t.deepEqual(result, {
     silentQuestions: true,
-    preselectedFeatures: ['app', 'webpack', 'typescript', 'jest']
+    preselectedFeatures: ['app', 'vite', 'typescript', 'vitest']
   });
 });
 

__test__/transforms.spec.js

@@ -71,3 +71,67 @@ test.cb('ext-transform translates .ext file to .ts file when typescript is selec
     contents: Buffer.from('<p></p>')
   }));
 });
+
+test.cb('ext-transform translates css files to .module.css files when css-module is selected', t => {
+  const jsExt = extTransform({}, ['css-module']);
+  const files = [];
+
+  jsExt.pipe(new Writable({
+    objectMode: true,
+    write(file, enc, cb) {
+      files.push(file);
+      cb();
+    }
+  }));
+
+  jsExt.on('end', () => {
+    t.is(files.length, 2);
+    t.is(files[0].path.replace(/\\/g, '/'), 'test/a.module.css');
+    t.is(files[0].contents.toString(), '.p { color: green; }');
+    t.is(files[1].path.replace(/\\/g, '/'), 'test/b.module.scss');
+    t.is(files[1].contents.toString(), '.p { color: red; }');
+    t.end();
+  })
+
+  jsExt.write(new Vinyl({
+    path: 'test/a.css',
+    contents: Buffer.from('.p { color: green; }')
+  }));
+
+  jsExt.end(new Vinyl({
+    path: 'test/b.scss',
+    contents: Buffer.from('.p { color: red; }')
+  }));
+});
+
+test.cb('ext-transform leaves css files untouched files when css-module is not selected', t => {
+  const jsExt = extTransform({}, ['']);
+  const files = [];
+
+  jsExt.pipe(new Writable({
+    objectMode: true,
+    write(file, enc, cb) {
+      files.push(file);
+      cb();
+    }
+  }));
+
+  jsExt.on('end', () => {
+    t.is(files.length, 2);
+    t.is(files[0].path.replace(/\\/g, '/'), 'test/a.css');
+    t.is(files[0].contents.toString(), '.p { color: green; }');
+    t.is(files[1].path.replace(/\\/g, '/'), 'test/b.scss');
+    t.is(files[1].contents.toString(), '.p { color: red; }');
+    t.end();
+  })
+
+  jsExt.write(new Vinyl({
+    path: 'test/a.css',
+    contents: Buffer.from('.p { color: green; }')
+  }));
+
+  jsExt.end(new Vinyl({
+    path: 'test/b.scss',
+    contents: Buffer.from('.p { color: red; }')
+  }));
+});

app-min/e2e__if_playwright/app.spec.ext__if_not_plugin

@@ -1,9 +1,4 @@
-// @if typescript
 import { test, expect } from '@playwright/test';
-// @endif
-// @if babel
-const { test, expect } = require('@playwright/test');
-// @endif
 
 test.beforeEach(async ({ page }) => {
   await page.goto('http://localhost:9000');

app-min/test__if_not_no-unit-tests/my-app.spec.ext

@@ -1,6 +1,9 @@
 // @if mocha
 import { expect } from 'chai';
 // @endif
+// @if vitest
+import { describe, it, expect } from 'vitest';
+// @endif
 // @if shadow-dom
 import { CustomElement } from 'aurelia';
 // @endif
@@ -25,7 +28,7 @@ describe('my-app', () => {
     // @if !shadow-dom
     const text =  node.textContent;
     // @endif
-    // @if jasmine || jest
+    // @if jasmine || jest || vitest
     expect(text.trim()).toBe('Hello World!');
     // @endif
     // @if mocha

before.js

@@ -1,13 +1,18 @@
 // Use "before" task to ask user to select a preset (to skip questionnaire).
 
 const PRESETS = {
-  'default-esnext': ['app', 'webpack', 'babel', 'jest'],
-  'default-typescript': ['app', 'webpack', 'typescript', 'jest'],
+  'default-esnext': ['app', 'vite', 'babel', 'vitest'],
+  'default-typescript': ['app', 'vite', 'typescript', 'vitest'],
+  // TODO: move plugin to vite+vitest
+  // FIXME: vite compiles plugin with separate css dist file, and removed
+  // import('./style.css') from js code, need to:
+  //   1. hook up a css loader in runtime for normal css and css-module.
+  //   2. hook up a text loader in runtime for shadow-dom css.
   'default-esnext-plugin': ['plugin', 'webpack', 'babel', 'shadow-dom', 'jest'],
   'default-typescript-plugin': ['plugin', 'webpack', 'typescript', 'shadow-dom', 'jest'],
 };
 
-const REQUIRE_NODEJS_VESION = [14, 15, 0];
+const REQUIRE_NODEJS_VESION = [18, 0, 0];
 
 function isNodejsOutdated() {
   const version = process.version.slice(1).split('.');

common/package.json

@@ -5,6 +5,8 @@
   // @endif
   // @if plugin
   "description": "An Aurelia 2 plugin.",
+  // TODO: turn on after moved plugin to vite steup
+  // "type": "module",
   "main": "dist/index.js",
   "files": [
     "dist"

common/src/resource.d.ts__if_typescript

@@ -11,18 +11,18 @@ declare module '*.html' {
 }
 
 // @if css-module
-declare module '*.css' {
+declare module '*.module.css' {
   const value: Record<string, string>;
   export default value;
 }
 // @if less
-declare module '*.less' {
+declare module '*.module.less' {
   const value: Record<string, string>;
   export default value;
 }
 // @endif
 // @if sass
-declare module '*.scss' {
+declare module '*.module.scss' {
   const value: Record<string, string>;
   export default value;
 }

dumber/gulpfile.js

@@ -143,10 +143,7 @@ function buildHtml(src) {
     // standard DOM APIs in "closed" mode.
     .pipe(au2({ defaultShadowOptions: { mode: 'open' }, hmr: false }));
     // @endif
-    // @if css-module
-    .pipe(au2({ useCSSModule: true, hmr: false }));
-    // @endif
-    // @if !shadow-dom && !css-module
+    // @if !shadow-dom
     .pipe(au2({ hmr: false }));
   // @endif
 }
@@ -177,7 +174,8 @@ function buildCss(src) {
       // improve compatibility on svg.
       postcssUrl({ url: 'inline', encodeType: 'base64' })
     ]))/* @if css-module */
-    .pipe(cssModule())/* @endif */;
+    // Use .module.css naming convention
+    .pipe(gulpif(f => f.basename.endsWith('.module.css'), cssModule()))/* @endif */;
 }
 
 function build() {

e2e-test.js

@@ -9,7 +9,6 @@ const os = require('os');
 const fs = require('fs');
 const path = require('path');
 const test = require('ava');
-const puppeteer = require('puppeteer');
 const kill = require('tree-kill');
 const {possibleFeatureSelections} = require('makes');
 const questions = require('./questions');
@@ -85,15 +84,6 @@ function run(command, dataCB, errorCB) {
   });
 }
 
-async function takeScreenshot(url, filePath) {
-  const browser = await puppeteer.launch();
-  const page = await browser.newPage();
-  await page.goto(url);
-  await new Promise(r => setTimeout(r, 6000));
-  await page.screenshot({path: filePath});
-  await browser.close();
-}
-
 const targetFeatures = (process.env.TARGET_FEATURES || '').toLowerCase().split(',').filter(p => p);
 if (!targetFeatures.includes('playwright')) {
   targetFeatures.push('playwright');
@@ -111,6 +101,7 @@ if (targetFeatures.length) {
 function getServerRegex(features) {
   if (features.includes('webpack')) return /Loopback: (\S+)/;
   if (features.includes('parcel')) return /Server running at (\S+)/;
+  if (features.includes('vite')) return /(http:\/\/\S+\/)/;
   return /Dev server is started at: (\S+)/;
 }
 
@@ -163,18 +154,7 @@ skeletons.forEach((features, i) => {
       const m = data.toString().match(serverRegex);
       if (!m) return;
       const url = m[1];
-      t.pass(m[0]);
-
-      try {
-        if (!process.env.GITHUB_ACTIONS) {
-          console.log('-- take screenshot');
-          await takeScreenshot(url, path.join(folder, appName + '.png'));
-        }
-        kill();
-      } catch (e) {
-        t.fail(e.message);
-        kill();
-      }
+      t.pass(m[0]);      kill();
     };
 
     // Webpack5 now prints Loopback: http://localhost:5000 in stderr!

jest/package.json

@@ -25,21 +25,15 @@
       // @if shadow-dom
       "\\.(js|html)$": [ "@aurelia/babel-jest", { defaultShadowOptions: { mode: 'open' } } ]
       // @endif
-      // @if css-module
-      "\\.(js|html)$": [ "@aurelia/babel-jest", { useCSSModule: true } ]
-      // @endif
-      // @if !shadow-dom && !css-module
+      // @if !shadow-dom
       "\\.(js|html)$": "@aurelia/babel-jest",
       // @endif
       // @endif
       // @if typescript
       // @if shadow-dom
       "\\.(ts|html)$": [ "@aurelia/ts-jest", { defaultShadowOptions: { mode: 'open' } } ]
       // @endif
-      // @if css-module
-      "\\.(ts|html)$": [ "@aurelia/ts-jest", { useCSSModule: true } ]
-      // @endif
-      // @if !shadow-dom && !css-module
+      // @if !shadow-dom
       "\\.(ts|html)$": "@aurelia/ts-jest",
       // @endif
       // @endif

package.json

@@ -11,7 +11,6 @@
     "glob": "^10.3.1",
     "makes": "^3.2.0",
     "npm-check-updates": "^16.10.13",
-    "puppeteer": "^20.7.3",
     "semver": "^7.5.3",
     "standard-changelog": "^3.0.0",
     "tree-kill": "^1.2.2",

parcel/README.md

@@ -4,5 +4,5 @@ By Parcel2 conventions, the `index.html` is in `src/` folder.
 
 ## Aurelia 2 config
 
-To control the behaviour of ShadownDOM and CSS-Module setup in Aurelia 2, create a section `"aurelia"` in the `package.json` file.
+To control the behaviour of ShadownDOM in Aurelia 2, create a section `"aurelia"` in the `package.json` file.
 https://www.npmjs.com/package/@aurelia/parcel-transformer

parcel/package.json

@@ -45,14 +45,7 @@
     "hmr": false
   },
   // @endif
-  // @if css-module
-  "aurelia": {
-    "useCSSModule": true,
-    "hmr": false
-  },
-  "@parcel/transformer-css": { "cssModules": true },
-  // @endif
-  // @if !shadow-dom && !css-module
+  // @if !shadow-dom
   "aurelia": {
     "hmr": false
   },

playwright/playwright.config.ext → playwright/playwright.config.mjs

@@ -1,11 +1,4 @@
-// @if typescript
-import type { PlaywrightTestConfig } from '@playwright/test';
-import { devices } from '@playwright/test';
-// @endif
-// @if babel
-// @ts-check
-const { devices } = require('@playwright/test');
-// @endif
+import { defineConfig, devices } from '@playwright/test';
 
 /**
  * Read environment variables from file.
@@ -16,7 +9,7 @@ const { devices } = require('@playwright/test');
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
-const config/* @if typescript */: PlaywrightTestConfig/* @endif */ = {
+export default defineConfig({
   testDir: './e2e',
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
@@ -108,11 +101,4 @@ const config/* @if typescript */: PlaywrightTestConfig/* @endif */ = {
     command: 'npm start',
     port: 9000,
   },
-};
-
-// @if typescript
-export default config;
-// @endif
-// @if babel
-module.exports = config;
-// @endif
+});

plugin-min/test__if_not_no-unit-tests/hello-world.spec.ext

@@ -1,6 +1,9 @@
 // @if mocha
 import { expect } from 'chai';
 // @endif
+// @if vitest
+import { describe, it, expect } from 'vitest';
+// @endif
 // @if shadow-dom
 import { CustomElement } from 'aurelia';
 // @endif
@@ -25,7 +28,7 @@ describe('hello-world', () => {
     // @if !shadow-dom
     const text =  node.textContent;
     // @endif
-    // @if jasmine || jest
+    // @if jasmine || jest || vitest
     expect(text.trim()).toBe('Hello World! foo');
     // @endif
     // @if mocha