From: Haoqun Jiang Date: Fri, 23 Jul 2021 06:03:21 +0000 (+0800) Subject: wip: basic structure X-Git-Tag: v3.0.0-alpha.2~38 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=cf01dbc6bcf3e9cda94301ea6f9609b17ebae4a0;p=thirdparty%2Fvuejs%2Fcreate-vue.git wip: basic structure --- diff --git a/index.js b/index.js new file mode 100644 index 00000000..0d33e063 --- /dev/null +++ b/index.js @@ -0,0 +1,40 @@ +import prompts from 'prompts' +import kolorist from 'kolorist' + +import renderTemplate from './renderTemplate.js' + +// Prompts: +// - Project name: +// - Project language: JavaScript / TypeScript +// - Install Vue Router & Vuex for Single Page Applications? +// - Adding tests? + +// TODO: +// add command-line for all possible option combinations +// so that we can generate them in playgrounds + +// Add configs. +// renderTemplate('config/base') +// if (needs tests) { +// renderTemplate('config/cypress') +// } +// if (is typescript) { +// renderTemplate('config/typescript') +// } + +// sourceTemplateName = +// (isTs ? 'typescript-' : '') + +// (isSPA ? 'spa' : 'default') +// renderTemplate(`source/${sourceTemplateName}`) + +// Cleanup. + +// All templates assumes the need of tests. +// If the user doesn't need it: +// rm -rf cypress **/__tests__/ + +// TS config template may add redundant tsconfig.json. +// Should clean that too. + +// Instructions: +// Supported package managers: pnpm > yarn > npm diff --git a/package.json b/package.json new file mode 100644 index 00000000..90b1484a --- /dev/null +++ b/package.json @@ -0,0 +1,36 @@ +{ + "name": "create-vue", + "version": "3.0.0", + "description": "An easy way to start a Vue project", + "type": "module", + "main": "index.js", + "bin": { + "create-vue": "index.js" + }, + "files": [ + "index.js", + "renderTemplate.js", + "templates" + ], + "engines": { + "node": "^12.13.0 || ^14.0.0 || >= 16.0.0" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/vuejs/create-vue.git" + }, + "keywords": [], + "author": "Haoqun Jiang ", + "license": "ISC", + "bugs": { + "url": "https://github.com/vuejs/create-vue/issues" + }, + "homepage": "https://github.com/vuejs/create-vue#readme", + "dependencies": { + "kolorist": "^1.5.0", + "prompts": "^2.4.1" + } +} diff --git a/playground/.gitkeep b/playground/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml new file mode 100644 index 00000000..6cb35189 --- /dev/null +++ b/pnpm-lock.yaml @@ -0,0 +1,32 @@ +lockfileVersion: 5.3 + +specifiers: + kolorist: ^1.5.0 + prompts: ^2.4.1 + +dependencies: + kolorist: 1.5.0 + prompts: 2.4.1 + +packages: + + /kleur/3.0.3: + resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==} + engines: {node: '>=6'} + dev: false + + /kolorist/1.5.0: + resolution: {integrity: sha512-pPobydIHK884YBtkS/tWSZXpSAEpcMbilyun3KL37ot935qL2HNKm/tI45i/Rd+MxdIWEhm7/LmUQzWZYK+Qhg==} + dev: false + + /prompts/2.4.1: + resolution: {integrity: sha512-EQyfIuO2hPDsX1L/blblV+H7I0knhgAd82cVneCwcdND9B8AuCDuRcBH6yIcG4dFzlOUqbazQqwGjx5xmsNLuQ==} + engines: {node: '>= 6'} + dependencies: + kleur: 3.0.3 + sisteransi: 1.0.5 + dev: false + + /sisteransi/1.0.5: + resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} + dev: false diff --git a/renderTemplate.js b/renderTemplate.js new file mode 100644 index 00000000..cdf3fbce --- /dev/null +++ b/renderTemplate.js @@ -0,0 +1,7 @@ +export default function renderTemplate(templateFolder) { + // TODO: + // Recursively copy all files under `template/${templateFolder}`, + // with the following exception: + // - `_filename` should be renamed to `.filename` + // - Fields in `package.json` should be recursively merged +} diff --git a/template/config/base/.vscode/extensions.json b/template/config/base/.vscode/extensions.json new file mode 100644 index 00000000..3dc5b08b --- /dev/null +++ b/template/config/base/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["johnsoncodehk.volar"] +} diff --git a/template/config/base/README.md b/template/config/base/README.md new file mode 100644 index 00000000..e69de29b diff --git a/template/config/base/_gitignore b/template/config/base/_gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/template/config/base/_gitignore @@ -0,0 +1,27 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.DS_Store +dist +dist-ssr +*.local + +/cypress/videos/ +/cypress/screenshots/ + +# Editor directories and files +.vscode +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/template/config/base/index.html b/template/config/base/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/template/config/base/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/template/config/base/package.json b/template/config/base/package.json new file mode 100644 index 00000000..ede5f015 --- /dev/null +++ b/template/config/base/package.json @@ -0,0 +1,17 @@ +{ + "scripts": { + "dev": "vite", + "build": "vite build", + "prepreview": "vite build", + "preview": "vite preview --port 5050" + }, + "dependencies": { + "vue": "^3.1.5" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^1.2.5", + "@vitejs/plugin-vue-jsx": "^1.1.6", + "@vue/compiler-sfc": "^3.1.5", + "vite": "^2.4.3" + } +} diff --git a/template/config/base/public/favicon.ico b/template/config/base/public/favicon.ico new file mode 100644 index 00000000..df36fcfb Binary files /dev/null and b/template/config/base/public/favicon.ico differ diff --git a/template/config/base/vite.config.js b/template/config/base/vite.config.js new file mode 100644 index 00000000..8ae6fd07 --- /dev/null +++ b/template/config/base/vite.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue(), vueJsx()], + resolve: { + alias: { + '@/': new URL('./src/', import.meta.url).pathname, + }, + } +}) diff --git a/template/config/cypress/cypress.json b/template/config/cypress/cypress.json new file mode 100644 index 00000000..3d372252 --- /dev/null +++ b/template/config/cypress/cypress.json @@ -0,0 +1,7 @@ +{ + "baseUrl": "http://localhost:5050", + "component": { + "componentFolder": "src", + "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" + } +} diff --git a/template/config/cypress/cypress/fixtures/example.json b/template/config/cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/template/config/cypress/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} diff --git a/template/config/cypress/cypress/plugins/index.js b/template/config/cypress/cypress/plugins/index.js new file mode 100644 index 00000000..ad2e351d --- /dev/null +++ b/template/config/cypress/cypress/plugins/index.js @@ -0,0 +1,28 @@ +/// +// *********************************************************** +// 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 +} diff --git a/template/config/cypress/cypress/support/commands.js b/template/config/cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/template/config/cypress/cypress/support/commands.js @@ -0,0 +1,25 @@ +// *********************************************** +// This example commands.js 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) => { ... }) diff --git a/template/config/cypress/cypress/support/index.js b/template/config/cypress/cypress/support/index.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/template/config/cypress/cypress/support/index.js @@ -0,0 +1,20 @@ +// *********************************************************** +// This example support/index.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') diff --git a/template/config/cypress/cypress/tsconfig.json b/template/config/cypress/cypress/tsconfig.json new file mode 100644 index 00000000..e5d5ea63 --- /dev/null +++ b/template/config/cypress/cypress/tsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*.ts"] +} diff --git a/template/config/cypress/package.json b/template/config/cypress/package.json new file mode 100644 index 00000000..9edbc273 --- /dev/null +++ b/template/config/cypress/package.json @@ -0,0 +1,14 @@ +{ + "scripts": { + "test:unit": "cypress open-ct", + "test:unit:ci": "cypress run-ct --quiet --reporter spec", + "test:e2e": "start-server-and-test preview 5050 'cypress open'", + "test:e2e:ci": "start-server-and-test preview 5050 'cypress run'" + }, + "devDependencies": { + "@cypress/vite-dev-server": "^2.0.2", + "@cypress/vue": "^3.0.1", + "cypress": "^8.0.0", + "start-server-and-test": "^1.12.6" + } +} diff --git a/template/config/typescript/package.json b/template/config/typescript/package.json new file mode 100644 index 00000000..2f2f3697 --- /dev/null +++ b/template/config/typescript/package.json @@ -0,0 +1,9 @@ +{ + "scripts": { + "build": "vue-tsc --noEmit && vite build" + }, + "devDependencies": { + "typescript": "~4.3.5", + "vue-tsc": "^0.2.2" + } +} diff --git a/template/config/typescript/src/shims-vue.d.ts b/template/config/typescript/src/shims-vue.d.ts new file mode 100644 index 00000000..ec4f1b2e --- /dev/null +++ b/template/config/typescript/src/shims-vue.d.ts @@ -0,0 +1,6 @@ +declare module '*.vue' { + import { DefineComponent } from 'vue' + // eslint-disable-next-line + const component: DefineComponent<{}, {}, any> + export default component +} diff --git a/template/config/typescript/src/vite-env.d.ts b/template/config/typescript/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/template/config/typescript/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/template/config/typescript/tsconfig.json b/template/config/typescript/tsconfig.json new file mode 100644 index 00000000..883a694c --- /dev/null +++ b/template/config/typescript/tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "baseUrl": "./", + "target": "esnext", + "useDefineForClassFields": true, + "module": "esnext", + "moduleResolution": "node", + "strict": true, + "jsx": "preserve", + "sourceMap": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "paths": { + "@/*": [ + "src/*" + ] + }, + "lib": ["esnext", "dom", "dom.iterable", "scripthost"] + }, + "include": [ + "vite.config.ts", + + "src/**/*.ts", + "src/**/*.d.ts", + "src/**/*.tsx", + "src/**/*.vue" + ] +} diff --git a/template/config/typescript/vite.config.ts b/template/config/typescript/vite.config.ts new file mode 100644 index 00000000..8ae6fd07 --- /dev/null +++ b/template/config/typescript/vite.config.ts @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue(), vueJsx()], + resolve: { + alias: { + '@/': new URL('./src/', import.meta.url).pathname, + }, + } +}) diff --git a/template/source/default/cypress/integration/example.spec.js b/template/source/default/cypress/integration/example.spec.js new file mode 100644 index 00000000..493bfcf0 --- /dev/null +++ b/template/source/default/cypress/integration/example.spec.js @@ -0,0 +1,8 @@ +// https://docs.cypress.io/api/introduction/api.html + +describe('My First Test', () => { + it('visits the app root url', () => { + cy.visit('/') + cy.contains('h1', 'Hello Vue 3 + Vite') + }) +}) diff --git a/template/source/spa/cypress/integration/example.spec.js b/template/source/spa/cypress/integration/example.spec.js new file mode 100644 index 00000000..ec952ec4 --- /dev/null +++ b/template/source/spa/cypress/integration/example.spec.js @@ -0,0 +1,13 @@ +// https://docs.cypress.io/api/introduction/api.html + +describe('My First Test', () => { + it('visits the app root url', () => { + cy.visit('/') + cy.contains('h1', 'Hello Vue 3 + Vite') + }) + + it('navigates to the about page', () => { + cy.visit('/about') + cy.contains('h1', 'This is an about page') + }) +}) diff --git a/template/source/spa/package.json b/template/source/spa/package.json new file mode 100644 index 00000000..364bb2bf --- /dev/null +++ b/template/source/spa/package.json @@ -0,0 +1,6 @@ +{ + "dependencies": { + "vue-router": "^4.0.10", + "vuex": "^4.0.2" + } +} diff --git a/template/source/typescript-default/cypress/integration/example.spec.ts b/template/source/typescript-default/cypress/integration/example.spec.ts new file mode 100644 index 00000000..bbe8f52d --- /dev/null +++ b/template/source/typescript-default/cypress/integration/example.spec.ts @@ -0,0 +1,8 @@ +// https://docs.cypress.io/api/introduction/api.html + +describe('My First Test', () => { + it('visits the app root url', () => { + cy.visit('/') + cy.contains('h1', 'Hello Vue 3 + TypeScript + Vite') + }) +}) diff --git a/template/source/typescript-spa/cypress/integration/example.spec.ts b/template/source/typescript-spa/cypress/integration/example.spec.ts new file mode 100644 index 00000000..3898b0ca --- /dev/null +++ b/template/source/typescript-spa/cypress/integration/example.spec.ts @@ -0,0 +1,13 @@ +// https://docs.cypress.io/api/introduction/api.html + +describe('My First Test', () => { + it('visits the app root url', () => { + cy.visit('/') + cy.contains('h1', 'Hello Vue 3 + TypeScript + Vite') + }) + + it('navigates to the about page', () => { + cy.visit('/about') + cy.contains('h1', 'This is an about page') + }) +}) diff --git a/template/source/typescript-spa/src/App.vue b/template/source/typescript-spa/src/App.vue new file mode 100644 index 00000000..b9643551 --- /dev/null +++ b/template/source/typescript-spa/src/App.vue @@ -0,0 +1,30 @@ + + + diff --git a/template/source/typescript-spa/src/assets/logo.png b/template/source/typescript-spa/src/assets/logo.png new file mode 100644 index 00000000..f3d2503f Binary files /dev/null and b/template/source/typescript-spa/src/assets/logo.png differ diff --git a/template/source/typescript-spa/src/components/HelloWorld.vue b/template/source/typescript-spa/src/components/HelloWorld.vue new file mode 100644 index 00000000..383c3097 --- /dev/null +++ b/template/source/typescript-spa/src/components/HelloWorld.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/template/source/typescript-spa/src/components/__tests__/HelloWorld.spec.ts b/template/source/typescript-spa/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..087c9561 --- /dev/null +++ b/template/source/typescript-spa/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,22 @@ +import { mount } from '@cypress/vue' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) + + it('adds 1 when clicking the plus button', () => { + mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) + + cy.get('button') + .should('contain', '0') + .click() + .should('contain', '1') + }) +}) diff --git a/template/source/typescript-spa/src/main.ts b/template/source/typescript-spa/src/main.ts new file mode 100644 index 00000000..ab55e6d5 --- /dev/null +++ b/template/source/typescript-spa/src/main.ts @@ -0,0 +1,12 @@ +import { createApp } from 'vue' +import App from './App.vue' + +import router from './router' +import store from './store' + +const app = createApp(App) + +app.use(router) +app.use(store) + +app.mount('#app') diff --git a/template/source/typescript-spa/src/router/index.ts b/template/source/typescript-spa/src/router/index.ts new file mode 100644 index 00000000..8e2f95ee --- /dev/null +++ b/template/source/typescript-spa/src/router/index.ts @@ -0,0 +1,25 @@ +import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' +import Home from '../views/Home.vue' + +const routes: Array = [ + { + path: '/', + name: 'Home', + component: Home + }, + { + path: '/about', + name: 'About', + // route level code-splitting + // this generates a separate chunk (About.[hash].js) for this route + // which is lazy-loaded when the route is visited. + component: () => import('../views/About.vue') + } +] + +const router = createRouter({ + history: createWebHistory(import.meta.env.BASE_URL), + routes +}) + +export default router diff --git a/template/source/typescript-spa/src/shims-vue.d.ts b/template/source/typescript-spa/src/shims-vue.d.ts new file mode 100644 index 00000000..ec4f1b2e --- /dev/null +++ b/template/source/typescript-spa/src/shims-vue.d.ts @@ -0,0 +1,6 @@ +declare module '*.vue' { + import { DefineComponent } from 'vue' + // eslint-disable-next-line + const component: DefineComponent<{}, {}, any> + export default component +} diff --git a/template/source/typescript-spa/src/store/index.ts b/template/source/typescript-spa/src/store/index.ts new file mode 100644 index 00000000..5f05f193 --- /dev/null +++ b/template/source/typescript-spa/src/store/index.ts @@ -0,0 +1,12 @@ +import { createStore } from 'vuex' + +export default createStore({ + state: { + }, + mutations: { + }, + actions: { + }, + modules: { + } +}) diff --git a/template/source/typescript-spa/src/views/About.vue b/template/source/typescript-spa/src/views/About.vue new file mode 100644 index 00000000..3fa28070 --- /dev/null +++ b/template/source/typescript-spa/src/views/About.vue @@ -0,0 +1,5 @@ + diff --git a/template/source/typescript-spa/src/views/Home.vue b/template/source/typescript-spa/src/views/Home.vue new file mode 100644 index 00000000..4ade1db6 --- /dev/null +++ b/template/source/typescript-spa/src/views/Home.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/template/source/typescript-spa/src/vite-env.d.ts b/template/source/typescript-spa/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/template/source/typescript-spa/src/vite-env.d.ts @@ -0,0 +1 @@ +///