feat: add vite as default bundler, use vitest with vite

.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 }}

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,8 +1,8 @@
 // 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', 'jest'],
+  'default-typescript': ['app', 'vite', 'typescript', 'jest'],
   'default-esnext-plugin': ['plugin', 'webpack', 'babel', 'shadow-dom', 'jest'],
   'default-typescript-plugin': ['plugin', 'webpack', 'typescript', 'shadow-dom', 'jest'],
 };

common/package.json

@@ -5,6 +5,7 @@
   // @endif
   // @if plugin
   "description": "An Aurelia 2 plugin.",
+  "type": "module",
   "main": "dist/index.js",
   "files": [
     "dist"

questions.js

@@ -16,7 +16,8 @@ module.exports = [
   {
     message: 'Which bundler would you like to use?',
     choices: [
-      {value: 'webpack', title: 'Webpack', hint: 'A powerful and popular bundler for modern JavaScript apps.'},
+      {value: 'vite', title: 'Vite', hint: 'Next Generation Frontend Tooling.'},
+      {if: 'app', value: 'webpack', title: 'Webpack', hint: 'A powerful and popular bundler for modern JavaScript apps.'},
       {if: 'app', value: 'dumber', title: 'Dumber', hint: 'A dumb JavasScript bundler, dumber than you and me. The successor of Aurelia CLI built-in bundler.'},
       {if: 'app', value: 'parcel', title: 'Parcel', hint: 'Blazing fast, zero configuration web application bundler.'},
     ]
@@ -49,9 +50,10 @@ module.exports = [
     message: 'What unit testing framework to use?',
     choices: [
       {value: 'no-unit-tests', title: 'None', hint: 'No unit testing'},
-      {value: 'jest', title: 'Jest', hint: 'Runs in Node.js, simulates browser by default, with a focus on simplicity.'},
-      {value: 'jasmine', title: 'Jasmine', hint: 'Runs in browser, a behavior-driven testing framework.'},
-      {value: 'mocha', title: 'Mocha + Chai', hint: 'Runs in browser, a feature-rich JavaScript test framework for node and browsers.'}
+      {if: '!vite', value: 'jest', title: 'Jest', hint: 'Runs in Node.js, simulates browser by default, with a focus on simplicity.'},
+      {if: '!vite', value: 'jasmine', title: 'Jasmine', hint: 'Runs in browser, a behavior-driven testing framework.'},
+      {if: '!vite', value: 'mocha', title: 'Mocha + Chai', hint: 'Runs in browser, a feature-rich JavaScript test framework for node and browsers.'},
+      {if: 'vite', value: 'vitest', title:'Vitest', hint: 'A Vite-native testing framework.'}
     ]
   },
   {

vite/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Aurelia</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<!-- @if app -->
+  <script type="module" src="/src/main.<!-- @if babel -->js<!-- @endif --><!-- @if typescript -->ts<!-- @endif -->"></script>
+<!-- @endif -->
+<!-- @if plugin -->
+  <script type="module" src="/dev-app/main.<!-- @if babel -->js<!-- @endif --><!-- @if typescript -->ts<!-- @endif -->"></script>
+  <!-- @endif -->
+  <base href="/">
+</head>
+
+<body>
+  <my-app></my-app>
+</body>
+
+</html>
+

vite/package.json

@@ -0,0 +1,31 @@
+{
+  "type": "module",
+  "devDependencies": {
+    "@aurelia/vite-plugin": /* @if latest */"latest"/* @endif *//* @if dev */"dev"/* @endif */,
+    "vite": "^5.1.4",
+    "vite-plugin-node-polyfills": "^0.21.0",
+    // @if babel
+    "vite-plugin-babel": "^1.2.0",
+    // @endif
+    // @if typescript && plugin
+    "vite-plugin-dts": "^3.8.1",
+    // @endif
+    // @if vitest
+    "vitest": "^1.4.0",
+    "jsdom": "^24.0.0",
+    // @endif
+    // @if less
+    "less": "^4.2.0",
+    // @endif
+    // @if sass
+    "sass": "^1.72.0",
+    // @endif
+  },
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    // @if vitest
+    "test": "vitest",
+    // @endif
+  }
+}

vite/tsconfig.vitest.json__if_vitest

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+    "types": ["node", "jsdom"]
+  }
+}

vite/vite.config.ext

@@ -0,0 +1,58 @@
+import { defineConfig } from 'vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import aurelia from '@aurelia/vite-plugin';
+// @if babel
+import babel from 'vite-plugin-babel';
+// @endif
+// @if plugin
+import { resolve } from 'path';
+// @if typescript
+import dts from 'vite-plugin-dts';
+// @endif
+// @endif
+
+export default defineConfig({
+  server: {
+    open: !process.env.CI,
+    port: 9000,
+  },
+  // @if plugin
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index./* @if babel */js/* @endif *//* @if typescript */ts/* @endif */'),
+      // Generate ESM dist file only.
+      formats: ['es'],
+      fileName: 'index',
+    },
+    rollupOptions: {
+      // Add all 3rd party dependencies here to avoid bundling.
+      external: [/@aurelia\/\w+/, 'aurelia'],
+    },
+  },
+  // @endif
+  plugins: [
+    aurelia({
+      useDev: true,
+      // @if plugin
+      include: '{src,dev-app}/**/*.{ts,js,html}',
+      // @endif
+      // @if shadow-dom
+      // The other possible Shadow DOM mode is 'closed'.
+      // If you turn on "closed" mode, there will be difficulty to perform e2e
+      // tests (such as Playwright). Because shadowRoot is not accessible through
+      // standard DOM APIs in "closed" mode.
+      defaultShadowOptions: { mode: 'open' },
+      // @endif
+      // @if css-module
+      useCSSModule: true,
+      // @endif
+    }),
+    // @if babel
+    babel(),
+    // @endif
+    nodePolyfills(),
+    // @if typescript && plugin
+    dts(),
+    // @endif
+  ],
+});

vite/vitest.config.ext__if_vitest

@@ -0,0 +1,17 @@
+import { fileURLToPath } from "node:url";
+import { mergeConfig, defineConfig/* @if playwright */, configDefaults/* @endif */ } from "vitest/config";
+import viteConfig from "./vite.config";
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: "jsdom",
+      watch: false,
+      // @if playwright
+      exclude: [...configDefaults.exclude, "e2e/*"],
+      // @endif
+      root: fileURLToPath(new URL("./", import.meta.url)),
+    },
+  }),
+);

webpack/package.json

@@ -29,9 +29,6 @@
     // @if jasmine || mocha
     "webpack-shell-plugin-next": "^2.3.1",
     // @endif
-    // @if plugin
-    "webpack-node-externals": "^3.0.0",
-    // @endif
   },
   "scripts": {
     "start": "webpack serve",

webpack/webpack.config.js

@@ -9,9 +9,6 @@ const TerserPlugin = require('terser-webpack-plugin');
 // @if jasmine || mocha
 const WebpackShellPluginNext = require('webpack-shell-plugin-next')
 // @endif
-// @if plugin
-const nodeExternals = require('webpack-node-externals');
-// @endif
 
 // @if !css-module
 const cssLoader = 'css-loader';
@@ -53,12 +50,7 @@ module.exports = function(env, { /* @if jasmine || mocha*/runTest, /* @endif */a
   const test = env.test || process.env.NODE_ENV === 'test';
   // @endif
   return {
-    // @if app
     target: 'web',
-    // @endif
-    // @if plugin
-    target: production ? 'node' : 'web',
-    // @endif
     mode: production ? 'production' : 'development',
     devtool: production ? undefined : 'eval-source-map',
     optimization: {
@@ -78,42 +70,22 @@ module.exports = function(env, { /* @if jasmine || mocha*/runTest, /* @endif */a
     entry: {
       entry: test ?
         './test/all-spec./* @if babel */js/* @endif *//* @if typescript */ts/* @endif */' :
-        // @if app
         './src/main./* @if babel */js/* @endif *//* @if typescript */ts/* @endif */'
-        // @endif
-        // @if plugin
-          // Build only plugin in production mode,
-          // build dev-app in non-production mode
-          (production ? './src/index./* @if babel */js/* @endif *//* @if typescript */ts/* @endif */' : './dev-app/main./* @if babel */js/* @endif *//* @if typescript */ts/* @endif */')
-        // @endif
     },
     // @endif
     // @if !jasmine && !mocha
     entry: {
-      // @if app
       entry: './src/main./* @if babel */js/* @endif *//* @if typescript */ts/* @endif */'
-      // @endif
-      // @if plugin
-      // Build only plugin in production mode,
-      // build dev-app in non-production mode
-      entry:  production? './src/index./* @if babel */js/* @endif *//* @if typescript */ts/* @endif */' : './dev-app/main./* @if babel */js/* @endif *//* @if typescript */ts/* @endif */'
-      // @endif
     },
     // @endif
     output: {
       clean: true,
       path: path.resolve(__dirname, 'dist'),
-      // @if app
       filename: production ? '[name].[contenthash].bundle.js' : '[name].bundle.js'
-      // @endif
-      // @if plugin
-      filename: production ? 'index.js' : '[name].bundle.js',
-      library: production ? { type: 'commonjs' } : undefined
-      // @endif
     },
     resolve: {
       extensions: [/* @if typescript */'.ts', /* @endif */'.js'],
-      modules: [path.resolve(__dirname, 'src'),/* @if !production */ path.resolve(__dirname, 'dev-app'),/* @endif */ 'node_modules'],
+      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
       alias: production ? {
         // add your production aliases here
       } : {
@@ -221,12 +193,7 @@ module.exports = function(env, { /* @if jasmine || mocha*/runTest, /* @endif */a
         // @endif
         // @if shadow-dom
         {
-          // @if app
           test: /[/\\]src[/\\].+\.html$/i,
-          // @endif
-          // @if plugin
-          test: /[/\\](?:src|dev-app)[/\\].+\.html$/i,
-          // @endif
           use: {
             loader: '@aurelia/webpack-loader',
             options: {
@@ -242,12 +209,7 @@ module.exports = function(env, { /* @if jasmine || mocha*/runTest, /* @endif */a
         // @endif
         // @if css-module
         {
-          // @if app
           test: /[/\\]src[/\\].+\.html$/i,
-          // @endif
-          // @if plugin
-          test: /[/\\](?:src|dev-app)[/\\].+\.html$/i,
-          // @endif
           use: {
             loader: '@aurelia/webpack-loader',
             options: { useCSSModule: true }
@@ -257,27 +219,15 @@ module.exports = function(env, { /* @if jasmine || mocha*/runTest, /* @endif */a
         // @endif
         // @if !shadow-dom && !css-module
         {
-          // @if app
           test: /[/\\]src[/\\].+\.html$/i,
-          // @endif
-          // @if plugin
-          test: /[/\\](?:src|dev-app)[/\\].+\.html$/i,
-          // @endif
           use: '@aurelia/webpack-loader',
           exclude: /node_modules/
         }
         // @endif
       ]
     },
-    // @if plugin
-    externalsPresets: { node: production },
-    externals: [
-      // Skip npm dependencies in plugin build.
-      production && nodeExternals()
-    ].filter(p => p),
-    // @endif
     plugins: [
-      /* @if plugin */!production && /* @endif */new HtmlWebpackPlugin({ template: 'index.html', favicon: 'favicon.ico' }),
+      new HtmlWebpackPlugin({ template: 'index.html', favicon: 'favicon.ico' }),
       new Dotenv({
         path: `./.env${production ? '' :  '.' + (process.env.NODE_ENV || 'development')}`,
       }),