feat: use type=module in generated projects

index.ts

@@ -447,17 +447,20 @@ async function init() {
 
   if (needsTypeScript) {
     // Convert the JavaScript template to the TypeScript
-    // Check all the remaining `.js` files:
-    //   - If the corresponding TypeScript version already exists, remove the `.js` version.
-    //   - Otherwise, rename the `.js` file to `.ts`
+    // Check all the remaining `.js`/`.cjs` files:
+    //   - If the corresponding TypeScript version already exists, remove the `.js`/`.cjs` version.
+    //   - Otherwise, rename the `.js`/`.cjs` file to `.ts`
     // Remove `jsconfig.json`, because we already have tsconfig.json
     // `jsconfig.json` is not reused, because we use solution-style `tsconfig`s, which are much more complicated.
     preOrderDirectoryTraverse(
       root,
       () => {},
       (filepath) => {
-        if (filepath.endsWith('.js') && !FILES_TO_FILTER.includes(path.basename(filepath))) {
-          const tsFilePath = filepath.replace(/\.js$/, '.ts')
+        if (
+          (filepath.endsWith('.js') || filepath.endsWith('.cjs')) &&
+          !FILES_TO_FILTER.includes(path.basename(filepath))
+        ) {
+          const tsFilePath = filepath.replace(/\.c?js$/, '.ts')
           if (fs.existsSync(tsFilePath)) {
             fs.unlinkSync(filepath)
           } else {

scripts/test.mjs

@@ -1,9 +1,6 @@
 #!/usr/bin/env zx
 import 'zx/globals'
 
-// Vitest would otherwise enable watch mode by default.
-process.env.CI = '1'
-
 const playgroundDir = path.resolve(__dirname, '../playground/')
 let projects = fs
   .readdirSync(playgroundDir, { withFileTypes: true })
@@ -21,7 +18,13 @@ for (const projectName of projects) {
   cd(path.resolve(playgroundDir, projectName))
   const packageJSON = require(path.resolve(playgroundDir, projectName, 'package.json'))
 
-  console.log(`Building ${projectName}`)
+  console.log(`
+
+#####
+Building ${projectName}
+#####
+
+  `)
   await $`pnpm build`
 
   if ('@playwright/test' in packageJSON.devDependencies) {
@@ -35,6 +38,16 @@ for (const projectName of projects) {
 
   if ('test:unit' in packageJSON.scripts) {
     console.log(`Running unit tests in ${projectName}`)
-    await $`pnpm test:unit`
+    if (projectName.includes('vitest') || projectName.includes('with-tests')) {
+      // Vitest would otherwise enable watch mode by default.
+      await $`CI=1 pnpm test:unit`
+    } else {
+      await $`pnpm test:unit`
+    }
+  }
+
+  if ('type-check' in packageJSON.scripts) {
+    console.log(`Running type-check in ${projectName}`)
+    await $`pnpm type-check`
   }
 }

template/base/package.json

@@ -1,5 +1,6 @@
 {
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -10,6 +11,6 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.0",
-    "vite": "^5.0.1"
+    "vite": "^5.0.2"
   }
 }

template/config/nightwatch-ct/package.json

@@ -1,8 +1,11 @@
 {
   "scripts": {
-    "test:unit": "nightwatch src/components/**/__tests__/*"
+    "test:unit": "nightwatch src/**/__tests__/*"
   },
   "dependencies": {
     "vue": "^3.3.8"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.4.2"
   }
 }

template/config/nightwatch/nightwatch.conf.js → template/config/nightwatch/nightwatch.conf.cjs

@@ -30,10 +30,11 @@ module.exports = {
   plugins: ['@nightwatch/vue'],
 
   // See https://nightwatchjs.org/guide/concepts/test-globals.html#external-test-globals
-  globals_path: 'nightwatch/globals.js',
+  globals_path: '',
 
   vite_dev_server: {
-    start_vite: false
+    start_vite: true,
+    port: process.env.CI ? 4173 : 5173
   },
 
   webdriver: {},

template/config/nightwatch/package.json

@@ -1,15 +1,15 @@
 {
   "scripts": {
-    "test:e2e": "nightwatch tests/e2e"
+    "test:e2e": "nightwatch tests/e2e/*"
   },
   "devDependencies": {
     "nightwatch": "^3.3.2",
-    "@nightwatch/vue": "0.4.5",
+    "@nightwatch/vue": "^0.4.5",
     "@vitejs/plugin-vue": "^4.5.0",
     "@types/nightwatch": "^2.3.28",
     "geckodriver": "^4.2.1",
     "chromedriver": "^119.0.0",
     "ts-node": "^10.9.1",
-    "wait-on": "^7.2.0"
+    "vite-plugin-nightwatch": "^0.4.5"
   }
 }

template/config/nightwatch/tests/e2e/example.js

@@ -4,10 +4,7 @@ describe('My First Test', function () {
   })
 
   it('visits the app root url', function () {
-    browser.assert
-      .textContains('.green', 'You did it!')
-      .assert.elementHasCount('.wrapper nav a', 2)
-      .strictClick('.wrapper nav a:last-child')
+    browser.assert.textContains('.green', 'You did it!')
   })
 
   after((browser) => browser.end())

template/config/playwright/e2e/vue.spec.js

@@ -1,4 +1,4 @@
-const { test, expect } = require('@playwright/test');
+import { test, expect } from '@playwright/test';
 
 // See here how to get started:
 // https://playwright.dev/docs/intro

template/tsconfig/cypress-ct/tsconfig.json

@@ -1,5 +1,8 @@
 {
   "files": [],
+  "compilerOptions": {
+    "module": "es2015"
+  },
   "references": [
     {
       "path": "./tsconfig.node.json"

template/tsconfig/nightwatch/nightwatch/tsconfig.json

@@ -3,14 +3,15 @@
   "compilerOptions": {
     "target": "ESNext",
     "module": "commonjs",
+    "moduleResolution": "node",
     "composite": true,
     "rootDir": "../",
     "lib": ["ESNext", "dom"],
     "types": ["nightwatch"]
   },
-  "include": ["../node_modules/@nightwatch/**/*", "../src/components/**/*", "../tests/e2e/**/*"],
+  "include": ["../src/components/**/*", "../tests/e2e/**/*"],
   "ts-node": {
-    "files": true
+    "transpileOnly": true
   },
   "files": ["nightwatch.d.ts"]
 }

template/tsconfig/vitest/tsconfig.json

@@ -1,5 +1,8 @@
 {
   "files": [],
+  "compilerOptions": {
+    "module": "es2015"
+  },
   "references": [
     {
       "path": "./tsconfig.node.json"

utils/filterList.ts

@@ -1,5 +1 @@
-export const FILES_TO_FILTER = [
-  'nightwatch.e2e.conf.js',
-  'nightwatch.component.conf.js',
-  'globals.js'
-]
+export const FILES_TO_FILTER = []