feat: use type=module in (most) generated projects

With the exception of Nighwatch templates due to nightwatchjs/nightwatch#3959

Closes #389
Largely inspired by @cexbrayat's work in that PR.

I've also made the generation of the root `tsconfig.json` programmatic
because it's becoming more and more convoluted.

Co-authored-by: Cédric Exbrayat <[email protected]>

index.ts

@@ -17,7 +17,6 @@ import generateReadme from './utils/generateReadme'
 import getCommand from './utils/getCommand'
 import getLanguage from './utils/getLanguage'
 import renderEslint from './utils/renderEslint'
-import { FILES_TO_FILTER } from './utils/filterList'
 
 function isValidPackageName(projectName) {
   return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(projectName)
@@ -371,24 +370,64 @@ async function init() {
 
     // Render tsconfigs
     render('tsconfig/base')
+    // The content of the root `tsconfig.json` is a bit complicated,
+    // So here we are programmatically generating it.
+    const rootTsConfig = {
+      // It doesn't target any specific files because they are all configured in the referenced ones.
+      files: [],
+      // All templates contain at least a `.node` and a `.app` tsconfig.
+      references: [
+        {
+          path: './tsconfig.node.json'
+        },
+        {
+          path: './tsconfig.app.json'
+        }
+      ]
+    }
     if (needsCypress) {
       render('tsconfig/cypress')
+      // Cypress uses `ts-node` internally, which doesn't support solution-style tsconfig.
+      // So we have to set a dummy `compilerOptions` in the root tsconfig to make it work.
+      // I use `NodeNext` here instead of `ES2015` because that's what the actual environment is.
+      // (Cypress uses the ts-node/esm loader when `type: module` is specified in package.json.)
+      // @ts-ignore
+      rootTsConfig.compilerOptions = {
+        module: 'NodeNext'
+      }
     }
     if (needsCypressCT) {
       render('tsconfig/cypress-ct')
+      // Cypress Component Testing needs a standalone tsconfig.
+      rootTsConfig.references.push({
+        path: './tsconfig.cypress-ct.json'
+      })
     }
     if (needsPlaywright) {
       render('tsconfig/playwright')
     }
     if (needsVitest) {
       render('tsconfig/vitest')
+      // Vitest needs a standalone tsconfig.
+      rootTsConfig.references.push({
+        path: './tsconfig.vitest.json'
+      })
     }
     if (needsNightwatch) {
       render('tsconfig/nightwatch')
+      // Nightwatch needs a standalone tsconfig, but in a different folder.
+      rootTsConfig.references.push({
+        path: './nightwatch/tsconfig.json'
+      })
     }
     if (needsNightwatchCT) {
       render('tsconfig/nightwatch-ct')
     }
+    fs.writeFileSync(
+      path.resolve(root, 'tsconfig.json'),
+      JSON.stringify(rootTsConfig, null, 2) + '\n',
+      'utf-8'
+    )
   }
 
   // Render ESLint config
@@ -456,7 +495,7 @@ async function init() {
       root,
       () => {},
       (filepath) => {
-        if (filepath.endsWith('.js') && !FILES_TO_FILTER.includes(path.basename(filepath))) {
+        if (filepath.endsWith('.js')) {
           const tsFilePath = filepath.replace(/\.js$/, '.ts')
           if (fs.existsSync(tsFilePath)) {
             fs.unlinkSync(filepath)

template/base/package.json

@@ -1,5 +1,6 @@
 {
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

template/config/cypress-ct/cypress.config.js

@@ -1,6 +1,6 @@
-const { defineConfig } = require('cypress')
+import { defineConfig } from 'cypress'
 
-module.exports = defineConfig({
+export default defineConfig({
   e2e: {
     specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
     baseUrl: 'http://localhost:4173'

template/config/cypress/cypress.config.js

@@ -1,6 +1,6 @@
-const { defineConfig } = require('cypress')
+import { defineConfig } from 'cypress'
 
-module.exports = defineConfig({
+export default defineConfig({
   e2e: {
     specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
     baseUrl: 'http://localhost:4173'

template/config/nightwatch/package.json

@@ -1,10 +1,11 @@
 {
+  "type": "commonjs",
   "scripts": {
     "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.1",
     "@types/nightwatch": "^2.3.30",
     "geckodriver": "^4.2.1",

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/config/playwright/playwright.config.js

@@ -1,5 +1,4 @@
-// @ts-check
-const { devices } = require('@playwright/test')
+import { defineConfig, devices } from '@playwright/test'
 
 /**
  * Read environment variables from file.
@@ -8,10 +7,9 @@ const { devices } = require('@playwright/test')
 // require('dotenv').config();
 
 /**
- * @see https://playwright.dev/docs/test-configuration
- * @type {import('@playwright/test').PlaywrightTestConfig}
+ * See https://playwright.dev/docs/test-configuration.
  */
-const config = {
+export default defineConfig({
   testDir: './e2e',
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
@@ -102,11 +100,10 @@ const config = {
     /**
      * Use the dev server by default for faster feedback loop.
      * Use the preview server on CI for more realistic testing.
+     * Playwright will re-use the local server if there is already a dev-server running.
      */
     command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
     port: 5173,
     reuseExistingServer: !process.env.CI
   }
-}
-
-module.exports = config
+})