create-vue 3.1.12 → 3.2.0

package/outfile.cjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/*! create-vue v3.1.12 | MIT */
+/*! create-vue v3.2.0 | MIT */
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -5525,7 +5525,7 @@ ${getCommand(packageManager, "test:unit")}
   }
   if (needsCypressCT) {
     npmScriptsDescriptions += `
-### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction)
+### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component)
 
 \`\`\`sh
 ${getCommand(packageManager, "test:unit")} # or \`${getCommand(packageManager, "test:unit:ci")}\` for headless testing
@@ -5603,7 +5603,7 @@ function configureEslint({ language, styleGuide, needsPrettier, needsCypress, ne
   if (needsCypress) {
     const cypressOverrides = [
       {
-        files: needsCypressCT ? ["**/__tests__/*.spec.{js,ts,jsx,tsx}", "cypress/integration/**.spec.{js,ts,jsx,tsx}"] : ["cypress/integration/**.spec.{js,ts,jsx,tsx}"],
+        files: needsCypressCT ? ["**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}", "cypress/e2e/**.{cy,spec}.{js,ts,jsx,tsx}"] : ["cypress/e2e/**.{cy,spec}.{js,ts,jsx,tsx}"],
         extends: ["plugin:cypress/recommended"]
       }
     ];
@@ -5848,6 +5848,9 @@ Scaffolding project in ${root}...`);
     if (needsCypress) {
       render("tsconfig/cypress");
     }
+    if (needsCypressCT) {
+      render("tsconfig/cypress-ct");
+    }
     if (needsVitest) {
       render("tsconfig/vitest");
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vue",
-  "version": "3.1.12",
+  "version": "3.2.0",
   "description": "An easy way to start a Vue project",
   "type": "module",
   "bin": {

package/template/code/default/src/components/TheWelcome.vue

@@ -31,7 +31,7 @@ import SupportIcon from './icons/IconSupport.vue'
     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
     your components and web pages, check out
     <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
-    <a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
+    <a href="https://on.cypress.io/component" target="_blank"
       >Cypress Component Testing</a
     >.
 

package/template/code/router/src/components/TheWelcome.vue

@@ -31,7 +31,7 @@ import SupportIcon from './icons/IconSupport.vue'
     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
     your components and web pages, check out
     <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
-    <a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
+    <a href="https://on.cypress.io/component" target="_blank"
       >Cypress Component Testing</a
     >.
 

package/template/code/typescript-default/src/components/TheWelcome.vue

@@ -31,7 +31,7 @@ import SupportIcon from './icons/IconSupport.vue'
     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
     your components and web pages, check out
     <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
-    <a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
+    <a href="https://on.cypress.io/component" target="_blank"
       >Cypress Component Testing</a
     >.
 

package/template/code/typescript-router/src/components/TheWelcome.vue

@@ -31,7 +31,7 @@ import SupportIcon from './icons/IconSupport.vue'
     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
     your components and web pages, check out
     <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
-    <a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
+    <a href="https://on.cypress.io/component" target="_blank"
       >Cypress Component Testing</a
     >.
 

package/template/config/cypress/cypress/{jsconfig.json → e2e/jsconfig.json}

@@ -4,5 +4,5 @@
     "lib": ["es5", "dom"],
     "types": ["cypress"]
   },
-  "include": ["./**/*"]
+  "include": ["./**/*", "../support/**/*"]
 }

package/template/config/cypress/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

package/template/config/cypress/cypress.config.js

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

package/template/config/cypress/cypress.config.ts

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

package/template/config/cypress/node_modules/.bin/cypress

@@ -11,7 +11,7 @@ else
   export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/create-vue/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/cypress@9.7.0/node_modules/cypress/bin/cypress" "$@"
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/cypress@10.0.2/node_modules/cypress/bin/cypress" "$@"
 else
-  exec node  "$basedir/../../../../../node_modules/.pnpm/cypress@9.7.0/node_modules/cypress/bin/cypress" "$@"
+  exec node  "$basedir/../../../../../node_modules/.pnpm/cypress@10.0.2/node_modules/cypress/bin/cypress" "$@"
 fi

package/template/config/cypress/package.json

@@ -1,10 +1,10 @@
 {
   "scripts": {
-    "test:e2e": "start-server-and-test preview http://127.0.0.1:4173/ 'cypress open'",
-    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:4173/ 'cypress run'"
+    "test:e2e": "start-server-and-test preview http://127.0.0.1:4173/ 'cypress open --e2e'",
+    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:4173/ 'cypress run --e2e'"
   },
   "devDependencies": {
-    "cypress": "^9.7.0",
+    "cypress": "^10.0.2",
     "start-server-and-test": "^1.14.0"
   }
 }

package/template/config/cypress-ct/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/template/config/cypress-ct/cypress/support/component.js

@@ -0,0 +1,27 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

package/template/config/cypress-ct/cypress/support/component.ts

@@ -0,0 +1,39 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

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

@@ -0,0 +1,15 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:4173'
+  },
+  component: {
+    specPattern: 'src/**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}',
+    devServer: {
+      framework: 'vue',
+      bundler: 'vite'
+    }
+  }
+})

package/template/config/cypress-ct/cypress.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:4173'
+  },
+  component: {
+    specPattern: 'src/**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}',
+    devServer: {
+      framework: 'vue',
+      bundler: 'vite'
+    }
+  }
+})

package/template/config/cypress-ct/node_modules/.bin/cypress

@@ -11,7 +11,7 @@ else
   export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/create-vue/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/cypress@9.7.0/node_modules/cypress/bin/cypress" "$@"
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/cypress@10.0.2/node_modules/cypress/bin/cypress" "$@"
 else
-  exec node  "$basedir/../../../../../node_modules/.pnpm/cypress@9.7.0/node_modules/cypress/bin/cypress" "$@"
+  exec node  "$basedir/../../../../../node_modules/.pnpm/cypress@10.0.2/node_modules/cypress/bin/cypress" "$@"
 fi

package/template/config/cypress-ct/package.json

@@ -1,15 +1,12 @@
 {
   "scripts": {
-    "test:unit": "cypress open-ct",
-    "test:unit:ci": "cypress run-ct --quiet --reporter spec"
+    "test:unit": "cypress open --component",
+    "test:unit:ci": "cypress run --component --quiet --reporter spec"
   },
   "dependencies": {
     "vue": "^3.2.36"
   },
   "devDependencies": {
-    "@cypress/vite-dev-server": "^2.2.3",
-    "@cypress/vue": "^3.1.2",
-    "cypress": "^9.7.0",
-    "vite": "^2.9.9"
+    "cypress": "^10.0.2"
   }
 }

package/template/config/cypress-ct/src/components/__tests__/{HelloWorld.spec.js → HelloWorld.cy.js}

@@ -1,13 +1,12 @@
-import { mount } from '@cypress/vue'
 import HelloWorld from '../HelloWorld.vue'
 
 describe('HelloWorld', () => {
   it('playground', () => {
-    mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+    cy.mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
   })
 
   it('renders properly', () => {
-    mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+    cy.mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
     cy.get('h1').should('contain', 'Hello Cypress')
   })
 })

package/template/tsconfig/base/{tsconfig.vite-config.json → tsconfig.config.json}

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*"],
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
   "compilerOptions": {
     "composite": true,
     "types": ["node"]

package/template/tsconfig/base/tsconfig.json

@@ -10,7 +10,7 @@
 
   "references": [
     {
-      "path": "./tsconfig.vite-config.json"
+      "path": "./tsconfig.config.json"
     }
   ]
 }

package/template/tsconfig/cypress/cypress/{tsconfig.json → e2e/tsconfig.json}

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["./integration/**/*", "./support/**/*"],
+  "include": ["./**/*", "../support/**/*"],
   "compilerOptions": {
     "isolatedModules": false,
     "target": "es5",

package/template/tsconfig/cypress-ct/tsconfig.cypress-ct.json

@@ -1,8 +1,8 @@
 {
   "extends": "./tsconfig.app.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "cypress/support/component.*"],
   "exclude": [],
   "compilerOptions": {
-    "composite": true,
-    "lib": []
+    "composite": true
   }
 }

package/template/tsconfig/cypress-ct/tsconfig.json

@@ -2,7 +2,7 @@
   "files": [],
   "references": [
     {
-      "path": "./tsconfig.vite-config.json"
+      "path": "./tsconfig.config.json"
     },
     {
       "path": "./tsconfig.app.json"

package/template/tsconfig/vitest/tsconfig.json

@@ -2,7 +2,7 @@
   "files": [],
   "references": [
     {
-      "path": "./tsconfig.vite-config.json"
+      "path": "./tsconfig.config.json"
     },
     {
       "path": "./tsconfig.app.json"

package/template/config/cypress/cypress/plugins/index.js

@@ -1,24 +0,0 @@
-/* eslint-env node */
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-// eslint-disable-next-line no-unused-vars
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-  return config
-}

package/template/config/cypress/cypress/plugins/index.ts

@@ -1,19 +0,0 @@
-/* eslint-env node */
-// ***********************************************************
-// This example plugins/index.ts can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-export default ((on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-  return config
-}) as Cypress.PluginConfig

package/template/config/cypress/cypress.json

@@ -1,3 +0,0 @@
-{
-  "baseUrl": "http://localhost:4173"
-}

package/template/config/cypress-ct/cypress/plugins/index.js

@@ -1,29 +0,0 @@
-/* eslint-env node */
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-const { startDevServer } = require('@cypress/vite-dev-server')
-
-/**
- * @type {Cypress.PluginConfig}
- */
-// eslint-disable-next-line no-unused-vars
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-  on('dev-server:start', (options) => {
-    return startDevServer({ options })
-  })
-  return config
-}

package/template/config/cypress-ct/cypress/plugins/index.ts

@@ -1,24 +0,0 @@
-/* eslint-env node */
-// ***********************************************************
-// This example plugins/index.ts can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-import { startDevServer } from '@cypress/vite-dev-server'
-
-export default ((on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-  on('dev-server:start', (options) => {
-    return startDevServer({ options })
-  })
-  return config
-}) as Cypress.PluginConfig

package/template/config/cypress-ct/cypress.json

@@ -1,7 +0,0 @@
-{
-  "baseUrl": "http://localhost:4173",
-  "component": {
-    "componentFolder": "src",
-    "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}"
-  }
-}

package/template/config/cypress-ct/node_modules/.bin/vite

@@ -1,17 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/Users/haoqun/Developer/vuejs/create-vue/node_modules/.pnpm/node_modules"
-else
-  export NODE_PATH="$NODE_PATH:/Users/haoqun/Developer/vuejs/create-vue/node_modules/.pnpm/node_modules"
-fi
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/vite@2.9.9/node_modules/vite/bin/vite.js" "$@"
-else
-  exec node  "$basedir/../../../../../node_modules/.pnpm/vite@2.9.9/node_modules/vite/bin/vite.js" "$@"
-fi

package/template/tsconfig/cypress/cypress/plugins/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["./**/*"],
-  "compilerOptions": {
-    "module": "CommonJS",
-    "preserveValueImports": false,
-    "types": ["node", "cypress/types/cypress"]
-  }
-}

package/template/tsconfig/vitest/tsconfig.vite-config.json

@@ -1,8 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*"],
-  "compilerOptions": {
-    "composite": true,
-    "types": ["node", "vitest"]
-  }
-}