From c8689a13afb26f3ffae6ab17aecaa1aeff4c988b Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Mon, 29 Nov 2021 22:06:07 +0800 Subject: [PATCH 01/15] feat: preliminary support for Vue 2 --- default/package.json | 10 +- default/src/App.vue | 20 +-- default/src/components/HelloWorld.vue | 2 +- default/src/components/TheWelcome.vue | 126 +++++++++--------- default/src/main.js | 12 +- default/vite.config.js | 10 +- jsx-pinia-with-tests/.gitignore | 27 ---- jsx-pinia-with-tests/README.md | 42 ------ jsx-pinia-with-tests/cypress.json | 7 - .../cypress/fixtures/example.json | 5 - .../cypress/integration/example.spec.js | 8 -- jsx-pinia-with-tests/cypress/jsconfig.json | 8 -- jsx-pinia-with-tests/cypress/plugins/index.js | 28 ---- .../cypress/support/commands.js | 25 ---- jsx-pinia-with-tests/cypress/support/index.js | 20 --- jsx-pinia-with-tests/index.html | 13 -- jsx-pinia-with-tests/package.json | 26 ---- jsx-pinia-with-tests/public/favicon.ico | Bin 4286 -> 0 bytes jsx-pinia-with-tests/src/App.vue | 81 ----------- jsx-pinia-with-tests/src/assets/base.css | 74 ---------- jsx-pinia-with-tests/src/assets/logo.svg | 1 - .../src/components/HelloWorld.vue | 44 ------ .../src/components/TheWelcome.vue | 84 ------------ .../src/components/WelcomeItem.vue | 86 ------------ .../components/__tests__/HelloWorld.spec.js | 13 -- .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- jsx-pinia-with-tests/src/main.js | 9 -- jsx-pinia-with-tests/src/stores/counter.js | 16 --- jsx-pinia-with-tests/vite.config.js | 15 --- jsx-pinia/.gitignore | 27 ---- jsx-pinia/README.md | 29 ---- jsx-pinia/index.html | 13 -- jsx-pinia/package.json | 18 --- jsx-pinia/public/favicon.ico | Bin 4286 -> 0 bytes jsx-pinia/src/App.vue | 81 ----------- jsx-pinia/src/assets/base.css | 74 ---------- jsx-pinia/src/assets/logo.svg | 1 - jsx-pinia/src/components/HelloWorld.vue | 44 ------ jsx-pinia/src/components/TheWelcome.vue | 84 ------------ jsx-pinia/src/components/WelcomeItem.vue | 86 ------------ .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- jsx-pinia/src/main.js | 9 -- jsx-pinia/src/stores/counter.js | 16 --- jsx-pinia/vite.config.js | 15 --- jsx-router-pinia-with-tests/.gitignore | 27 ---- jsx-router-pinia-with-tests/README.md | 42 ------ jsx-router-pinia-with-tests/cypress.json | 7 - .../cypress/fixtures/example.json | 5 - .../cypress/integration/example.spec.js | 13 -- .../cypress/jsconfig.json | 8 -- .../cypress/plugins/index.js | 28 ---- .../cypress/support/commands.js | 25 ---- .../cypress/support/index.js | 20 --- jsx-router-pinia-with-tests/index.html | 13 -- jsx-router-pinia-with-tests/package.json | 27 ---- .../public/favicon.ico | Bin 4286 -> 0 bytes jsx-router-pinia-with-tests/src/App.vue | 118 ---------------- .../src/assets/base.css | 74 ---------- .../src/assets/logo.svg | 1 - .../src/components/HelloWorld.vue | 44 ------ .../src/components/TheWelcome.vue | 84 ------------ .../src/components/WelcomeItem.vue | 86 ------------ .../components/__tests__/HelloWorld.spec.js | 13 -- .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- jsx-router-pinia-with-tests/src/main.js | 12 -- .../src/router/index.js | 23 ---- .../src/stores/counter.js | 16 --- .../src/views/AboutView.vue | 15 --- .../src/views/HomeView.vue | 9 -- jsx-router-pinia-with-tests/vite.config.js | 15 --- jsx-router-pinia/.gitignore | 27 ---- jsx-router-pinia/README.md | 29 ---- jsx-router-pinia/index.html | 13 -- jsx-router-pinia/package.json | 19 --- jsx-router-pinia/public/favicon.ico | Bin 4286 -> 0 bytes jsx-router-pinia/src/App.vue | 118 ---------------- jsx-router-pinia/src/assets/base.css | 74 ---------- jsx-router-pinia/src/assets/logo.svg | 1 - .../src/components/HelloWorld.vue | 44 ------ .../src/components/TheWelcome.vue | 84 ------------ .../src/components/WelcomeItem.vue | 86 ------------ .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- jsx-router-pinia/src/main.js | 12 -- jsx-router-pinia/src/router/index.js | 23 ---- jsx-router-pinia/src/stores/counter.js | 16 --- jsx-router-pinia/src/views/AboutView.vue | 15 --- jsx-router-pinia/src/views/HomeView.vue | 9 -- jsx-router-pinia/vite.config.js | 15 --- jsx-router-with-tests/.gitignore | 27 ---- jsx-router-with-tests/README.md | 42 ------ jsx-router-with-tests/cypress.json | 7 - .../cypress/fixtures/example.json | 5 - .../cypress/integration/example.spec.js | 13 -- jsx-router-with-tests/cypress/jsconfig.json | 8 -- .../cypress/plugins/index.js | 28 ---- .../cypress/support/commands.js | 25 ---- .../cypress/support/index.js | 20 --- jsx-router-with-tests/index.html | 13 -- jsx-router-with-tests/package.json | 26 ---- jsx-router-with-tests/public/favicon.ico | Bin 4286 -> 0 bytes jsx-router-with-tests/src/App.vue | 118 ---------------- jsx-router-with-tests/src/assets/base.css | 74 ---------- jsx-router-with-tests/src/assets/logo.svg | 1 - .../src/components/HelloWorld.vue | 44 ------ .../src/components/TheWelcome.vue | 84 ------------ .../src/components/WelcomeItem.vue | 86 ------------ .../components/__tests__/HelloWorld.spec.js | 13 -- .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- jsx-router-with-tests/src/main.js | 9 -- jsx-router-with-tests/src/router/index.js | 23 ---- jsx-router-with-tests/src/views/AboutView.vue | 15 --- jsx-router-with-tests/src/views/HomeView.vue | 9 -- jsx-router-with-tests/vite.config.js | 15 --- jsx-router/.gitignore | 27 ---- jsx-router/README.md | 29 ---- jsx-router/index.html | 13 -- jsx-router/package.json | 18 --- jsx-router/public/favicon.ico | Bin 4286 -> 0 bytes jsx-router/src/App.vue | 118 ---------------- jsx-router/src/assets/base.css | 74 ---------- jsx-router/src/assets/logo.svg | 1 - jsx-router/src/components/HelloWorld.vue | 44 ------ jsx-router/src/components/TheWelcome.vue | 84 ------------ jsx-router/src/components/WelcomeItem.vue | 86 ------------ .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- jsx-router/src/main.js | 9 -- jsx-router/src/router/index.js | 23 ---- jsx-router/src/views/AboutView.vue | 15 --- jsx-router/src/views/HomeView.vue | 9 -- jsx-router/vite.config.js | 15 --- jsx-with-tests/.gitignore | 27 ---- jsx-with-tests/README.md | 42 ------ jsx-with-tests/cypress.json | 7 - jsx-with-tests/cypress/fixtures/example.json | 5 - .../cypress/integration/example.spec.js | 8 -- jsx-with-tests/cypress/jsconfig.json | 8 -- jsx-with-tests/cypress/plugins/index.js | 28 ---- jsx-with-tests/cypress/support/commands.js | 25 ---- jsx-with-tests/cypress/support/index.js | 20 --- jsx-with-tests/index.html | 13 -- jsx-with-tests/package.json | 25 ---- jsx-with-tests/public/favicon.ico | Bin 4286 -> 0 bytes jsx-with-tests/src/App.vue | 81 ----------- jsx-with-tests/src/assets/base.css | 74 ---------- jsx-with-tests/src/assets/logo.svg | 1 - jsx-with-tests/src/components/HelloWorld.vue | 44 ------ jsx-with-tests/src/components/TheWelcome.vue | 84 ------------ jsx-with-tests/src/components/WelcomeItem.vue | 86 ------------ .../components/__tests__/HelloWorld.spec.js | 13 -- .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- jsx-with-tests/src/main.js | 4 - jsx-with-tests/vite.config.js | 15 --- jsx/.gitignore | 27 ---- jsx/README.md | 29 ---- jsx/index.html | 13 -- jsx/package.json | 17 --- jsx/public/favicon.ico | Bin 4286 -> 0 bytes jsx/src/App.vue | 81 ----------- jsx/src/assets/base.css | 74 ---------- jsx/src/assets/logo.svg | 1 - jsx/src/components/HelloWorld.vue | 44 ------ jsx/src/components/TheWelcome.vue | 84 ------------ jsx/src/components/WelcomeItem.vue | 86 ------------ jsx/src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - jsx/src/components/icons/IconEcosystem.vue | 7 - jsx/src/components/icons/IconSupport.vue | 7 - jsx/src/components/icons/IconTooling.vue | 19 --- jsx/src/main.js | 4 - jsx/vite.config.js | 15 --- pinia-with-tests/package.json | 12 +- pinia-with-tests/src/App.vue | 20 +-- .../src/components/HelloWorld.vue | 2 +- .../src/components/TheWelcome.vue | 126 +++++++++--------- .../components/__tests__/HelloWorld.spec.js | 4 +- pinia-with-tests/src/main.js | 16 ++- pinia-with-tests/vite.config.js | 10 +- pinia/package.json | 10 +- pinia/src/App.vue | 20 +-- pinia/src/components/HelloWorld.vue | 2 +- pinia/src/components/TheWelcome.vue | 126 +++++++++--------- pinia/src/main.js | 16 ++- pinia/vite.config.js | 10 +- router-pinia-with-tests/package.json | 14 +- router-pinia-with-tests/src/App.vue | 30 +++-- .../src/components/HelloWorld.vue | 2 +- .../src/components/TheWelcome.vue | 126 +++++++++--------- .../components/__tests__/HelloWorld.spec.js | 4 +- router-pinia-with-tests/src/main.js | 17 ++- router-pinia-with-tests/src/router/index.js | 10 +- router-pinia-with-tests/vite.config.js | 10 +- router-pinia/package.json | 12 +- router-pinia/src/App.vue | 30 +++-- router-pinia/src/components/HelloWorld.vue | 2 +- router-pinia/src/components/TheWelcome.vue | 126 +++++++++--------- router-pinia/src/main.js | 17 ++- router-pinia/src/router/index.js | 10 +- router-pinia/vite.config.js | 10 +- router-with-tests/package.json | 14 +- router-with-tests/src/App.vue | 30 +++-- .../src/components/HelloWorld.vue | 2 +- .../src/components/TheWelcome.vue | 126 +++++++++--------- .../components/__tests__/HelloWorld.spec.js | 4 +- router-with-tests/src/main.js | 13 +- router-with-tests/src/router/index.js | 10 +- router-with-tests/vite.config.js | 10 +- router/package.json | 12 +- router/src/App.vue | 30 +++-- router/src/components/HelloWorld.vue | 2 +- router/src/components/TheWelcome.vue | 126 +++++++++--------- router/src/main.js | 13 +- router/src/router/index.js | 10 +- router/vite.config.js | 10 +- typescript-jsx-pinia-with-tests/.gitignore | 27 ---- typescript-jsx-pinia-with-tests/README.md | 48 ------- typescript-jsx-pinia-with-tests/cypress.json | 7 - .../cypress/fixtures/example.json | 5 - .../cypress/integration/example.spec.ts | 8 -- .../cypress/plugins/index.ts | 28 ---- .../cypress/support/commands.ts | 25 ---- .../cypress/support/index.ts | 20 --- .../cypress/tsconfig.json | 8 -- typescript-jsx-pinia-with-tests/env.d.ts | 8 -- typescript-jsx-pinia-with-tests/index.html | 13 -- typescript-jsx-pinia-with-tests/package.json | 30 ----- .../public/favicon.ico | Bin 4286 -> 0 bytes typescript-jsx-pinia-with-tests/src/App.vue | 81 ----------- .../src/assets/base.css | 74 ---------- .../src/assets/logo.svg | 1 - .../src/components/HelloWorld.vue | 41 ------ .../src/components/TheWelcome.vue | 84 ------------ .../src/components/WelcomeItem.vue | 86 ------------ .../components/__tests__/HelloWorld.spec.ts | 13 -- .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- typescript-jsx-pinia-with-tests/src/main.ts | 9 -- .../src/stores/counter.ts | 16 --- typescript-jsx-pinia-with-tests/tsconfig.json | 21 --- .../vite.config.ts | 15 --- typescript-jsx-pinia/.gitignore | 27 ---- typescript-jsx-pinia/README.md | 35 ----- typescript-jsx-pinia/env.d.ts | 8 -- typescript-jsx-pinia/index.html | 13 -- typescript-jsx-pinia/package.json | 22 --- typescript-jsx-pinia/public/favicon.ico | Bin 4286 -> 0 bytes typescript-jsx-pinia/src/App.vue | 81 ----------- typescript-jsx-pinia/src/assets/base.css | 74 ---------- typescript-jsx-pinia/src/assets/logo.svg | 1 - .../src/components/HelloWorld.vue | 41 ------ .../src/components/TheWelcome.vue | 84 ------------ .../src/components/WelcomeItem.vue | 86 ------------ .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- typescript-jsx-pinia/src/main.ts | 9 -- typescript-jsx-pinia/src/stores/counter.ts | 16 --- typescript-jsx-pinia/tsconfig.json | 21 --- typescript-jsx-pinia/vite.config.ts | 15 --- .../.gitignore | 27 ---- .../README.md | 48 ------- .../cypress.json | 7 - .../cypress/fixtures/example.json | 5 - .../cypress/integration/example.spec.ts | 13 -- .../cypress/plugins/index.ts | 28 ---- .../cypress/support/commands.ts | 25 ---- .../cypress/support/index.ts | 20 --- .../cypress/tsconfig.json | 8 -- .../env.d.ts | 8 -- .../index.html | 13 -- .../package.json | 31 ----- .../public/favicon.ico | Bin 4286 -> 0 bytes .../src/App.vue | 118 ---------------- .../src/assets/base.css | 74 ---------- .../src/assets/logo.svg | 1 - .../src/components/HelloWorld.vue | 41 ------ .../src/components/TheWelcome.vue | 84 ------------ .../src/components/WelcomeItem.vue | 86 ------------ .../components/__tests__/HelloWorld.spec.ts | 13 -- .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- .../src/main.ts | 12 -- .../src/router/index.ts | 23 ---- .../src/stores/counter.ts | 16 --- .../src/views/AboutView.vue | 15 --- .../src/views/HomeView.vue | 9 -- .../tsconfig.json | 21 --- .../vite.config.ts | 15 --- typescript-jsx-router-pinia/.gitignore | 27 ---- typescript-jsx-router-pinia/README.md | 35 ----- typescript-jsx-router-pinia/env.d.ts | 8 -- typescript-jsx-router-pinia/index.html | 13 -- typescript-jsx-router-pinia/package.json | 23 ---- .../public/favicon.ico | Bin 4286 -> 0 bytes typescript-jsx-router-pinia/src/App.vue | 118 ---------------- .../src/assets/base.css | 74 ---------- .../src/assets/logo.svg | 1 - .../src/components/HelloWorld.vue | 41 ------ .../src/components/TheWelcome.vue | 84 ------------ .../src/components/WelcomeItem.vue | 86 ------------ .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- typescript-jsx-router-pinia/src/main.ts | 12 -- .../src/router/index.ts | 23 ---- .../src/stores/counter.ts | 16 --- .../src/views/AboutView.vue | 15 --- .../src/views/HomeView.vue | 9 -- typescript-jsx-router-pinia/tsconfig.json | 21 --- typescript-jsx-router-pinia/vite.config.ts | 15 --- typescript-jsx-router-with-tests/.gitignore | 27 ---- typescript-jsx-router-with-tests/README.md | 48 ------- typescript-jsx-router-with-tests/cypress.json | 7 - .../cypress/fixtures/example.json | 5 - .../cypress/integration/example.spec.ts | 13 -- .../cypress/plugins/index.ts | 28 ---- .../cypress/support/commands.ts | 25 ---- .../cypress/support/index.ts | 20 --- .../cypress/tsconfig.json | 8 -- typescript-jsx-router-with-tests/env.d.ts | 8 -- typescript-jsx-router-with-tests/index.html | 13 -- typescript-jsx-router-with-tests/package.json | 30 ----- .../public/favicon.ico | Bin 4286 -> 0 bytes typescript-jsx-router-with-tests/src/App.vue | 118 ---------------- .../src/assets/base.css | 74 ---------- .../src/assets/logo.svg | 1 - .../src/components/HelloWorld.vue | 41 ------ .../src/components/TheWelcome.vue | 84 ------------ .../src/components/WelcomeItem.vue | 86 ------------ .../components/__tests__/HelloWorld.spec.ts | 13 -- .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- typescript-jsx-router-with-tests/src/main.ts | 9 -- .../src/router/index.ts | 23 ---- .../src/views/AboutView.vue | 15 --- .../src/views/HomeView.vue | 9 -- .../tsconfig.json | 21 --- .../vite.config.ts | 15 --- typescript-jsx-router/.gitignore | 27 ---- typescript-jsx-router/README.md | 35 ----- typescript-jsx-router/env.d.ts | 8 -- typescript-jsx-router/index.html | 13 -- typescript-jsx-router/package.json | 22 --- typescript-jsx-router/public/favicon.ico | Bin 4286 -> 0 bytes typescript-jsx-router/src/App.vue | 118 ---------------- typescript-jsx-router/src/assets/base.css | 74 ---------- typescript-jsx-router/src/assets/logo.svg | 1 - .../src/components/HelloWorld.vue | 41 ------ .../src/components/TheWelcome.vue | 84 ------------ .../src/components/WelcomeItem.vue | 86 ------------ .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- typescript-jsx-router/src/main.ts | 9 -- typescript-jsx-router/src/router/index.ts | 23 ---- typescript-jsx-router/src/views/AboutView.vue | 15 --- typescript-jsx-router/src/views/HomeView.vue | 9 -- typescript-jsx-router/tsconfig.json | 21 --- typescript-jsx-router/vite.config.ts | 15 --- typescript-jsx-with-tests/.gitignore | 27 ---- typescript-jsx-with-tests/README.md | 48 ------- typescript-jsx-with-tests/cypress.json | 7 - .../cypress/fixtures/example.json | 5 - .../cypress/integration/example.spec.ts | 8 -- .../cypress/plugins/index.ts | 28 ---- .../cypress/support/commands.ts | 25 ---- .../cypress/support/index.ts | 20 --- .../cypress/tsconfig.json | 8 -- typescript-jsx-with-tests/env.d.ts | 8 -- typescript-jsx-with-tests/index.html | 13 -- typescript-jsx-with-tests/package.json | 29 ---- typescript-jsx-with-tests/public/favicon.ico | Bin 4286 -> 0 bytes typescript-jsx-with-tests/src/App.vue | 81 ----------- typescript-jsx-with-tests/src/assets/base.css | 74 ---------- typescript-jsx-with-tests/src/assets/logo.svg | 1 - .../src/components/HelloWorld.vue | 41 ------ .../src/components/TheWelcome.vue | 84 ------------ .../src/components/WelcomeItem.vue | 86 ------------ .../components/__tests__/HelloWorld.spec.ts | 13 -- .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- typescript-jsx-with-tests/src/main.ts | 4 - typescript-jsx-with-tests/tsconfig.json | 21 --- typescript-jsx-with-tests/vite.config.ts | 15 --- typescript-jsx/.gitignore | 27 ---- typescript-jsx/README.md | 35 ----- typescript-jsx/env.d.ts | 8 -- typescript-jsx/index.html | 13 -- typescript-jsx/package.json | 21 --- typescript-jsx/public/favicon.ico | Bin 4286 -> 0 bytes typescript-jsx/src/App.vue | 81 ----------- typescript-jsx/src/assets/base.css | 74 ---------- typescript-jsx/src/assets/logo.svg | 1 - typescript-jsx/src/components/HelloWorld.vue | 41 ------ typescript-jsx/src/components/TheWelcome.vue | 84 ------------ typescript-jsx/src/components/WelcomeItem.vue | 86 ------------ .../src/components/icons/IconCommunity.vue | 7 - .../components/icons/IconDocumentation.vue | 7 - .../src/components/icons/IconEcosystem.vue | 7 - .../src/components/icons/IconSupport.vue | 7 - .../src/components/icons/IconTooling.vue | 19 --- typescript-jsx/src/main.ts | 4 - typescript-jsx/tsconfig.json | 21 --- typescript-jsx/vite.config.ts | 15 --- typescript-pinia-with-tests/env.d.ts | 16 ++- typescript-pinia-with-tests/package.json | 10 +- typescript-pinia-with-tests/src/App.vue | 20 +-- .../src/components/HelloWorld.vue | 2 +- .../src/components/TheWelcome.vue | 126 +++++++++--------- .../components/__tests__/HelloWorld.spec.ts | 4 +- typescript-pinia-with-tests/src/main.ts | 16 ++- typescript-pinia-with-tests/tsconfig.json | 3 + typescript-pinia-with-tests/vite.config.ts | 10 +- typescript-pinia/env.d.ts | 16 ++- typescript-pinia/package.json | 8 +- typescript-pinia/src/App.vue | 20 +-- .../src/components/HelloWorld.vue | 2 +- .../src/components/TheWelcome.vue | 126 +++++++++--------- typescript-pinia/src/main.ts | 16 ++- typescript-pinia/tsconfig.json | 3 + typescript-pinia/vite.config.ts | 10 +- typescript-router-pinia-with-tests/env.d.ts | 16 ++- .../package.json | 12 +- .../src/App.vue | 30 +++-- .../src/components/HelloWorld.vue | 2 +- .../src/components/TheWelcome.vue | 126 +++++++++--------- .../components/__tests__/HelloWorld.spec.ts | 4 +- .../src/main.ts | 17 ++- .../src/router/index.ts | 10 +- .../tsconfig.json | 3 + .../vite.config.ts | 10 +- typescript-router-pinia/env.d.ts | 16 ++- typescript-router-pinia/package.json | 10 +- typescript-router-pinia/src/App.vue | 30 +++-- .../src/components/HelloWorld.vue | 2 +- .../src/components/TheWelcome.vue | 126 +++++++++--------- typescript-router-pinia/src/main.ts | 17 ++- typescript-router-pinia/src/router/index.ts | 10 +- typescript-router-pinia/tsconfig.json | 3 + typescript-router-pinia/vite.config.ts | 10 +- typescript-router-with-tests/env.d.ts | 16 ++- typescript-router-with-tests/package.json | 12 +- typescript-router-with-tests/src/App.vue | 30 +++-- .../src/components/HelloWorld.vue | 2 +- .../src/components/TheWelcome.vue | 126 +++++++++--------- .../components/__tests__/HelloWorld.spec.ts | 4 +- typescript-router-with-tests/src/main.ts | 13 +- .../src/router/index.ts | 10 +- typescript-router-with-tests/tsconfig.json | 3 + typescript-router-with-tests/vite.config.ts | 10 +- typescript-router/env.d.ts | 16 ++- typescript-router/package.json | 10 +- typescript-router/src/App.vue | 30 +++-- .../src/components/HelloWorld.vue | 2 +- .../src/components/TheWelcome.vue | 126 +++++++++--------- typescript-router/src/main.ts | 13 +- typescript-router/src/router/index.ts | 10 +- typescript-router/tsconfig.json | 3 + typescript-router/vite.config.ts | 10 +- typescript-with-tests/env.d.ts | 16 ++- typescript-with-tests/package.json | 10 +- typescript-with-tests/src/App.vue | 20 +-- .../src/components/HelloWorld.vue | 2 +- .../src/components/TheWelcome.vue | 126 +++++++++--------- .../components/__tests__/HelloWorld.spec.ts | 4 +- typescript-with-tests/src/main.ts | 12 +- typescript-with-tests/tsconfig.json | 3 + typescript-with-tests/vite.config.ts | 10 +- typescript/env.d.ts | 16 ++- typescript/package.json | 8 +- typescript/src/App.vue | 20 +-- typescript/src/components/HelloWorld.vue | 2 +- typescript/src/components/TheWelcome.vue | 126 +++++++++--------- typescript/src/main.ts | 12 +- typescript/tsconfig.json | 3 + typescript/vite.config.ts | 10 +- with-tests/package.json | 12 +- with-tests/src/App.vue | 20 +-- with-tests/src/components/HelloWorld.vue | 2 +- with-tests/src/components/TheWelcome.vue | 126 +++++++++--------- .../components/__tests__/HelloWorld.spec.js | 4 +- with-tests/src/main.js | 12 +- with-tests/vite.config.js | 10 +- 528 files changed, 1860 insertions(+), 12048 deletions(-) delete mode 100644 jsx-pinia-with-tests/.gitignore delete mode 100644 jsx-pinia-with-tests/README.md delete mode 100644 jsx-pinia-with-tests/cypress.json delete mode 100644 jsx-pinia-with-tests/cypress/fixtures/example.json delete mode 100644 jsx-pinia-with-tests/cypress/integration/example.spec.js delete mode 100644 jsx-pinia-with-tests/cypress/jsconfig.json delete mode 100644 jsx-pinia-with-tests/cypress/plugins/index.js delete mode 100644 jsx-pinia-with-tests/cypress/support/commands.js delete mode 100644 jsx-pinia-with-tests/cypress/support/index.js delete mode 100644 jsx-pinia-with-tests/index.html delete mode 100644 jsx-pinia-with-tests/package.json delete mode 100644 jsx-pinia-with-tests/public/favicon.ico delete mode 100644 jsx-pinia-with-tests/src/App.vue delete mode 100644 jsx-pinia-with-tests/src/assets/base.css delete mode 100644 jsx-pinia-with-tests/src/assets/logo.svg delete mode 100644 jsx-pinia-with-tests/src/components/HelloWorld.vue delete mode 100644 jsx-pinia-with-tests/src/components/TheWelcome.vue delete mode 100644 jsx-pinia-with-tests/src/components/WelcomeItem.vue delete mode 100644 jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js delete mode 100644 jsx-pinia-with-tests/src/components/icons/IconCommunity.vue delete mode 100644 jsx-pinia-with-tests/src/components/icons/IconDocumentation.vue delete mode 100644 jsx-pinia-with-tests/src/components/icons/IconEcosystem.vue delete mode 100644 jsx-pinia-with-tests/src/components/icons/IconSupport.vue delete mode 100644 jsx-pinia-with-tests/src/components/icons/IconTooling.vue delete mode 100644 jsx-pinia-with-tests/src/main.js delete mode 100644 jsx-pinia-with-tests/src/stores/counter.js delete mode 100644 jsx-pinia-with-tests/vite.config.js delete mode 100644 jsx-pinia/.gitignore delete mode 100644 jsx-pinia/README.md delete mode 100644 jsx-pinia/index.html delete mode 100644 jsx-pinia/package.json delete mode 100644 jsx-pinia/public/favicon.ico delete mode 100644 jsx-pinia/src/App.vue delete mode 100644 jsx-pinia/src/assets/base.css delete mode 100644 jsx-pinia/src/assets/logo.svg delete mode 100644 jsx-pinia/src/components/HelloWorld.vue delete mode 100644 jsx-pinia/src/components/TheWelcome.vue delete mode 100644 jsx-pinia/src/components/WelcomeItem.vue delete mode 100644 jsx-pinia/src/components/icons/IconCommunity.vue delete mode 100644 jsx-pinia/src/components/icons/IconDocumentation.vue delete mode 100644 jsx-pinia/src/components/icons/IconEcosystem.vue delete mode 100644 jsx-pinia/src/components/icons/IconSupport.vue delete mode 100644 jsx-pinia/src/components/icons/IconTooling.vue delete mode 100644 jsx-pinia/src/main.js delete mode 100644 jsx-pinia/src/stores/counter.js delete mode 100644 jsx-pinia/vite.config.js delete mode 100644 jsx-router-pinia-with-tests/.gitignore delete mode 100644 jsx-router-pinia-with-tests/README.md delete mode 100644 jsx-router-pinia-with-tests/cypress.json delete mode 100644 jsx-router-pinia-with-tests/cypress/fixtures/example.json delete mode 100644 jsx-router-pinia-with-tests/cypress/integration/example.spec.js delete mode 100644 jsx-router-pinia-with-tests/cypress/jsconfig.json delete mode 100644 jsx-router-pinia-with-tests/cypress/plugins/index.js delete mode 100644 jsx-router-pinia-with-tests/cypress/support/commands.js delete mode 100644 jsx-router-pinia-with-tests/cypress/support/index.js delete mode 100644 jsx-router-pinia-with-tests/index.html delete mode 100644 jsx-router-pinia-with-tests/package.json delete mode 100644 jsx-router-pinia-with-tests/public/favicon.ico delete mode 100644 jsx-router-pinia-with-tests/src/App.vue delete mode 100644 jsx-router-pinia-with-tests/src/assets/base.css delete mode 100644 jsx-router-pinia-with-tests/src/assets/logo.svg delete mode 100644 jsx-router-pinia-with-tests/src/components/HelloWorld.vue delete mode 100644 jsx-router-pinia-with-tests/src/components/TheWelcome.vue delete mode 100644 jsx-router-pinia-with-tests/src/components/WelcomeItem.vue delete mode 100644 jsx-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js delete mode 100644 jsx-router-pinia-with-tests/src/components/icons/IconCommunity.vue delete mode 100644 jsx-router-pinia-with-tests/src/components/icons/IconDocumentation.vue delete mode 100644 jsx-router-pinia-with-tests/src/components/icons/IconEcosystem.vue delete mode 100644 jsx-router-pinia-with-tests/src/components/icons/IconSupport.vue delete mode 100644 jsx-router-pinia-with-tests/src/components/icons/IconTooling.vue delete mode 100644 jsx-router-pinia-with-tests/src/main.js delete mode 100644 jsx-router-pinia-with-tests/src/router/index.js delete mode 100644 jsx-router-pinia-with-tests/src/stores/counter.js delete mode 100644 jsx-router-pinia-with-tests/src/views/AboutView.vue delete mode 100644 jsx-router-pinia-with-tests/src/views/HomeView.vue delete mode 100644 jsx-router-pinia-with-tests/vite.config.js delete mode 100644 jsx-router-pinia/.gitignore delete mode 100644 jsx-router-pinia/README.md delete mode 100644 jsx-router-pinia/index.html delete mode 100644 jsx-router-pinia/package.json delete mode 100644 jsx-router-pinia/public/favicon.ico delete mode 100644 jsx-router-pinia/src/App.vue delete mode 100644 jsx-router-pinia/src/assets/base.css delete mode 100644 jsx-router-pinia/src/assets/logo.svg delete mode 100644 jsx-router-pinia/src/components/HelloWorld.vue delete mode 100644 jsx-router-pinia/src/components/TheWelcome.vue delete mode 100644 jsx-router-pinia/src/components/WelcomeItem.vue delete mode 100644 jsx-router-pinia/src/components/icons/IconCommunity.vue delete mode 100644 jsx-router-pinia/src/components/icons/IconDocumentation.vue delete mode 100644 jsx-router-pinia/src/components/icons/IconEcosystem.vue delete mode 100644 jsx-router-pinia/src/components/icons/IconSupport.vue delete mode 100644 jsx-router-pinia/src/components/icons/IconTooling.vue delete mode 100644 jsx-router-pinia/src/main.js delete mode 100644 jsx-router-pinia/src/router/index.js delete mode 100644 jsx-router-pinia/src/stores/counter.js delete mode 100644 jsx-router-pinia/src/views/AboutView.vue delete mode 100644 jsx-router-pinia/src/views/HomeView.vue delete mode 100644 jsx-router-pinia/vite.config.js delete mode 100644 jsx-router-with-tests/.gitignore delete mode 100644 jsx-router-with-tests/README.md delete mode 100644 jsx-router-with-tests/cypress.json delete mode 100644 jsx-router-with-tests/cypress/fixtures/example.json delete mode 100644 jsx-router-with-tests/cypress/integration/example.spec.js delete mode 100644 jsx-router-with-tests/cypress/jsconfig.json delete mode 100644 jsx-router-with-tests/cypress/plugins/index.js delete mode 100644 jsx-router-with-tests/cypress/support/commands.js delete mode 100644 jsx-router-with-tests/cypress/support/index.js delete mode 100644 jsx-router-with-tests/index.html delete mode 100644 jsx-router-with-tests/package.json delete mode 100644 jsx-router-with-tests/public/favicon.ico delete mode 100644 jsx-router-with-tests/src/App.vue delete mode 100644 jsx-router-with-tests/src/assets/base.css delete mode 100644 jsx-router-with-tests/src/assets/logo.svg delete mode 100644 jsx-router-with-tests/src/components/HelloWorld.vue delete mode 100644 jsx-router-with-tests/src/components/TheWelcome.vue delete mode 100644 jsx-router-with-tests/src/components/WelcomeItem.vue delete mode 100644 jsx-router-with-tests/src/components/__tests__/HelloWorld.spec.js delete mode 100644 jsx-router-with-tests/src/components/icons/IconCommunity.vue delete mode 100644 jsx-router-with-tests/src/components/icons/IconDocumentation.vue delete mode 100644 jsx-router-with-tests/src/components/icons/IconEcosystem.vue delete mode 100644 jsx-router-with-tests/src/components/icons/IconSupport.vue delete mode 100644 jsx-router-with-tests/src/components/icons/IconTooling.vue delete mode 100644 jsx-router-with-tests/src/main.js delete mode 100644 jsx-router-with-tests/src/router/index.js delete mode 100644 jsx-router-with-tests/src/views/AboutView.vue delete mode 100644 jsx-router-with-tests/src/views/HomeView.vue delete mode 100644 jsx-router-with-tests/vite.config.js delete mode 100644 jsx-router/.gitignore delete mode 100644 jsx-router/README.md delete mode 100644 jsx-router/index.html delete mode 100644 jsx-router/package.json delete mode 100644 jsx-router/public/favicon.ico delete mode 100644 jsx-router/src/App.vue delete mode 100644 jsx-router/src/assets/base.css delete mode 100644 jsx-router/src/assets/logo.svg delete mode 100644 jsx-router/src/components/HelloWorld.vue delete mode 100644 jsx-router/src/components/TheWelcome.vue delete mode 100644 jsx-router/src/components/WelcomeItem.vue delete mode 100644 jsx-router/src/components/icons/IconCommunity.vue delete mode 100644 jsx-router/src/components/icons/IconDocumentation.vue delete mode 100644 jsx-router/src/components/icons/IconEcosystem.vue delete mode 100644 jsx-router/src/components/icons/IconSupport.vue delete mode 100644 jsx-router/src/components/icons/IconTooling.vue delete mode 100644 jsx-router/src/main.js delete mode 100644 jsx-router/src/router/index.js delete mode 100644 jsx-router/src/views/AboutView.vue delete mode 100644 jsx-router/src/views/HomeView.vue delete mode 100644 jsx-router/vite.config.js delete mode 100644 jsx-with-tests/.gitignore delete mode 100644 jsx-with-tests/README.md delete mode 100644 jsx-with-tests/cypress.json delete mode 100644 jsx-with-tests/cypress/fixtures/example.json delete mode 100644 jsx-with-tests/cypress/integration/example.spec.js delete mode 100644 jsx-with-tests/cypress/jsconfig.json delete mode 100644 jsx-with-tests/cypress/plugins/index.js delete mode 100644 jsx-with-tests/cypress/support/commands.js delete mode 100644 jsx-with-tests/cypress/support/index.js delete mode 100644 jsx-with-tests/index.html delete mode 100644 jsx-with-tests/package.json delete mode 100644 jsx-with-tests/public/favicon.ico delete mode 100644 jsx-with-tests/src/App.vue delete mode 100644 jsx-with-tests/src/assets/base.css delete mode 100644 jsx-with-tests/src/assets/logo.svg delete mode 100644 jsx-with-tests/src/components/HelloWorld.vue delete mode 100644 jsx-with-tests/src/components/TheWelcome.vue delete mode 100644 jsx-with-tests/src/components/WelcomeItem.vue delete mode 100644 jsx-with-tests/src/components/__tests__/HelloWorld.spec.js delete mode 100644 jsx-with-tests/src/components/icons/IconCommunity.vue delete mode 100644 jsx-with-tests/src/components/icons/IconDocumentation.vue delete mode 100644 jsx-with-tests/src/components/icons/IconEcosystem.vue delete mode 100644 jsx-with-tests/src/components/icons/IconSupport.vue delete mode 100644 jsx-with-tests/src/components/icons/IconTooling.vue delete mode 100644 jsx-with-tests/src/main.js delete mode 100644 jsx-with-tests/vite.config.js delete mode 100644 jsx/.gitignore delete mode 100644 jsx/README.md delete mode 100644 jsx/index.html delete mode 100644 jsx/package.json delete mode 100644 jsx/public/favicon.ico delete mode 100644 jsx/src/App.vue delete mode 100644 jsx/src/assets/base.css delete mode 100644 jsx/src/assets/logo.svg delete mode 100644 jsx/src/components/HelloWorld.vue delete mode 100644 jsx/src/components/TheWelcome.vue delete mode 100644 jsx/src/components/WelcomeItem.vue delete mode 100644 jsx/src/components/icons/IconCommunity.vue delete mode 100644 jsx/src/components/icons/IconDocumentation.vue delete mode 100644 jsx/src/components/icons/IconEcosystem.vue delete mode 100644 jsx/src/components/icons/IconSupport.vue delete mode 100644 jsx/src/components/icons/IconTooling.vue delete mode 100644 jsx/src/main.js delete mode 100644 jsx/vite.config.js delete mode 100644 typescript-jsx-pinia-with-tests/.gitignore delete mode 100644 typescript-jsx-pinia-with-tests/README.md delete mode 100644 typescript-jsx-pinia-with-tests/cypress.json delete mode 100644 typescript-jsx-pinia-with-tests/cypress/fixtures/example.json delete mode 100644 typescript-jsx-pinia-with-tests/cypress/integration/example.spec.ts delete mode 100644 typescript-jsx-pinia-with-tests/cypress/plugins/index.ts delete mode 100644 typescript-jsx-pinia-with-tests/cypress/support/commands.ts delete mode 100644 typescript-jsx-pinia-with-tests/cypress/support/index.ts delete mode 100644 typescript-jsx-pinia-with-tests/cypress/tsconfig.json delete mode 100644 typescript-jsx-pinia-with-tests/env.d.ts delete mode 100644 typescript-jsx-pinia-with-tests/index.html delete mode 100644 typescript-jsx-pinia-with-tests/package.json delete mode 100644 typescript-jsx-pinia-with-tests/public/favicon.ico delete mode 100644 typescript-jsx-pinia-with-tests/src/App.vue delete mode 100644 typescript-jsx-pinia-with-tests/src/assets/base.css delete mode 100644 typescript-jsx-pinia-with-tests/src/assets/logo.svg delete mode 100644 typescript-jsx-pinia-with-tests/src/components/HelloWorld.vue delete mode 100644 typescript-jsx-pinia-with-tests/src/components/TheWelcome.vue delete mode 100644 typescript-jsx-pinia-with-tests/src/components/WelcomeItem.vue delete mode 100644 typescript-jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts delete mode 100644 typescript-jsx-pinia-with-tests/src/components/icons/IconCommunity.vue delete mode 100644 typescript-jsx-pinia-with-tests/src/components/icons/IconDocumentation.vue delete mode 100644 typescript-jsx-pinia-with-tests/src/components/icons/IconEcosystem.vue delete mode 100644 typescript-jsx-pinia-with-tests/src/components/icons/IconSupport.vue delete mode 100644 typescript-jsx-pinia-with-tests/src/components/icons/IconTooling.vue delete mode 100644 typescript-jsx-pinia-with-tests/src/main.ts delete mode 100644 typescript-jsx-pinia-with-tests/src/stores/counter.ts delete mode 100644 typescript-jsx-pinia-with-tests/tsconfig.json delete mode 100644 typescript-jsx-pinia-with-tests/vite.config.ts delete mode 100644 typescript-jsx-pinia/.gitignore delete mode 100644 typescript-jsx-pinia/README.md delete mode 100644 typescript-jsx-pinia/env.d.ts delete mode 100644 typescript-jsx-pinia/index.html delete mode 100644 typescript-jsx-pinia/package.json delete mode 100644 typescript-jsx-pinia/public/favicon.ico delete mode 100644 typescript-jsx-pinia/src/App.vue delete mode 100644 typescript-jsx-pinia/src/assets/base.css delete mode 100644 typescript-jsx-pinia/src/assets/logo.svg delete mode 100644 typescript-jsx-pinia/src/components/HelloWorld.vue delete mode 100644 typescript-jsx-pinia/src/components/TheWelcome.vue delete mode 100644 typescript-jsx-pinia/src/components/WelcomeItem.vue delete mode 100644 typescript-jsx-pinia/src/components/icons/IconCommunity.vue delete mode 100644 typescript-jsx-pinia/src/components/icons/IconDocumentation.vue delete mode 100644 typescript-jsx-pinia/src/components/icons/IconEcosystem.vue delete mode 100644 typescript-jsx-pinia/src/components/icons/IconSupport.vue delete mode 100644 typescript-jsx-pinia/src/components/icons/IconTooling.vue delete mode 100644 typescript-jsx-pinia/src/main.ts delete mode 100644 typescript-jsx-pinia/src/stores/counter.ts delete mode 100644 typescript-jsx-pinia/tsconfig.json delete mode 100644 typescript-jsx-pinia/vite.config.ts delete mode 100644 typescript-jsx-router-pinia-with-tests/.gitignore delete mode 100644 typescript-jsx-router-pinia-with-tests/README.md delete mode 100644 typescript-jsx-router-pinia-with-tests/cypress.json delete mode 100644 typescript-jsx-router-pinia-with-tests/cypress/fixtures/example.json delete mode 100644 typescript-jsx-router-pinia-with-tests/cypress/integration/example.spec.ts delete mode 100644 typescript-jsx-router-pinia-with-tests/cypress/plugins/index.ts delete mode 100644 typescript-jsx-router-pinia-with-tests/cypress/support/commands.ts delete mode 100644 typescript-jsx-router-pinia-with-tests/cypress/support/index.ts delete mode 100644 typescript-jsx-router-pinia-with-tests/cypress/tsconfig.json delete mode 100644 typescript-jsx-router-pinia-with-tests/env.d.ts delete mode 100644 typescript-jsx-router-pinia-with-tests/index.html delete mode 100644 typescript-jsx-router-pinia-with-tests/package.json delete mode 100644 typescript-jsx-router-pinia-with-tests/public/favicon.ico delete mode 100644 typescript-jsx-router-pinia-with-tests/src/App.vue delete mode 100644 typescript-jsx-router-pinia-with-tests/src/assets/base.css delete mode 100644 typescript-jsx-router-pinia-with-tests/src/assets/logo.svg delete mode 100644 typescript-jsx-router-pinia-with-tests/src/components/HelloWorld.vue delete mode 100644 typescript-jsx-router-pinia-with-tests/src/components/TheWelcome.vue delete mode 100644 typescript-jsx-router-pinia-with-tests/src/components/WelcomeItem.vue delete mode 100644 typescript-jsx-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts delete mode 100644 typescript-jsx-router-pinia-with-tests/src/components/icons/IconCommunity.vue delete mode 100644 typescript-jsx-router-pinia-with-tests/src/components/icons/IconDocumentation.vue delete mode 100644 typescript-jsx-router-pinia-with-tests/src/components/icons/IconEcosystem.vue delete mode 100644 typescript-jsx-router-pinia-with-tests/src/components/icons/IconSupport.vue delete mode 100644 typescript-jsx-router-pinia-with-tests/src/components/icons/IconTooling.vue delete mode 100644 typescript-jsx-router-pinia-with-tests/src/main.ts delete mode 100644 typescript-jsx-router-pinia-with-tests/src/router/index.ts delete mode 100644 typescript-jsx-router-pinia-with-tests/src/stores/counter.ts delete mode 100644 typescript-jsx-router-pinia-with-tests/src/views/AboutView.vue delete mode 100644 typescript-jsx-router-pinia-with-tests/src/views/HomeView.vue delete mode 100644 typescript-jsx-router-pinia-with-tests/tsconfig.json delete mode 100644 typescript-jsx-router-pinia-with-tests/vite.config.ts delete mode 100644 typescript-jsx-router-pinia/.gitignore delete mode 100644 typescript-jsx-router-pinia/README.md delete mode 100644 typescript-jsx-router-pinia/env.d.ts delete mode 100644 typescript-jsx-router-pinia/index.html delete mode 100644 typescript-jsx-router-pinia/package.json delete mode 100644 typescript-jsx-router-pinia/public/favicon.ico delete mode 100644 typescript-jsx-router-pinia/src/App.vue delete mode 100644 typescript-jsx-router-pinia/src/assets/base.css delete mode 100644 typescript-jsx-router-pinia/src/assets/logo.svg delete mode 100644 typescript-jsx-router-pinia/src/components/HelloWorld.vue delete mode 100644 typescript-jsx-router-pinia/src/components/TheWelcome.vue delete mode 100644 typescript-jsx-router-pinia/src/components/WelcomeItem.vue delete mode 100644 typescript-jsx-router-pinia/src/components/icons/IconCommunity.vue delete mode 100644 typescript-jsx-router-pinia/src/components/icons/IconDocumentation.vue delete mode 100644 typescript-jsx-router-pinia/src/components/icons/IconEcosystem.vue delete mode 100644 typescript-jsx-router-pinia/src/components/icons/IconSupport.vue delete mode 100644 typescript-jsx-router-pinia/src/components/icons/IconTooling.vue delete mode 100644 typescript-jsx-router-pinia/src/main.ts delete mode 100644 typescript-jsx-router-pinia/src/router/index.ts delete mode 100644 typescript-jsx-router-pinia/src/stores/counter.ts delete mode 100644 typescript-jsx-router-pinia/src/views/AboutView.vue delete mode 100644 typescript-jsx-router-pinia/src/views/HomeView.vue delete mode 100644 typescript-jsx-router-pinia/tsconfig.json delete mode 100644 typescript-jsx-router-pinia/vite.config.ts delete mode 100644 typescript-jsx-router-with-tests/.gitignore delete mode 100644 typescript-jsx-router-with-tests/README.md delete mode 100644 typescript-jsx-router-with-tests/cypress.json delete mode 100644 typescript-jsx-router-with-tests/cypress/fixtures/example.json delete mode 100644 typescript-jsx-router-with-tests/cypress/integration/example.spec.ts delete mode 100644 typescript-jsx-router-with-tests/cypress/plugins/index.ts delete mode 100644 typescript-jsx-router-with-tests/cypress/support/commands.ts delete mode 100644 typescript-jsx-router-with-tests/cypress/support/index.ts delete mode 100644 typescript-jsx-router-with-tests/cypress/tsconfig.json delete mode 100644 typescript-jsx-router-with-tests/env.d.ts delete mode 100644 typescript-jsx-router-with-tests/index.html delete mode 100644 typescript-jsx-router-with-tests/package.json delete mode 100644 typescript-jsx-router-with-tests/public/favicon.ico delete mode 100644 typescript-jsx-router-with-tests/src/App.vue delete mode 100644 typescript-jsx-router-with-tests/src/assets/base.css delete mode 100644 typescript-jsx-router-with-tests/src/assets/logo.svg delete mode 100644 typescript-jsx-router-with-tests/src/components/HelloWorld.vue delete mode 100644 typescript-jsx-router-with-tests/src/components/TheWelcome.vue delete mode 100644 typescript-jsx-router-with-tests/src/components/WelcomeItem.vue delete mode 100644 typescript-jsx-router-with-tests/src/components/__tests__/HelloWorld.spec.ts delete mode 100644 typescript-jsx-router-with-tests/src/components/icons/IconCommunity.vue delete mode 100644 typescript-jsx-router-with-tests/src/components/icons/IconDocumentation.vue delete mode 100644 typescript-jsx-router-with-tests/src/components/icons/IconEcosystem.vue delete mode 100644 typescript-jsx-router-with-tests/src/components/icons/IconSupport.vue delete mode 100644 typescript-jsx-router-with-tests/src/components/icons/IconTooling.vue delete mode 100644 typescript-jsx-router-with-tests/src/main.ts delete mode 100644 typescript-jsx-router-with-tests/src/router/index.ts delete mode 100644 typescript-jsx-router-with-tests/src/views/AboutView.vue delete mode 100644 typescript-jsx-router-with-tests/src/views/HomeView.vue delete mode 100644 typescript-jsx-router-with-tests/tsconfig.json delete mode 100644 typescript-jsx-router-with-tests/vite.config.ts delete mode 100644 typescript-jsx-router/.gitignore delete mode 100644 typescript-jsx-router/README.md delete mode 100644 typescript-jsx-router/env.d.ts delete mode 100644 typescript-jsx-router/index.html delete mode 100644 typescript-jsx-router/package.json delete mode 100644 typescript-jsx-router/public/favicon.ico delete mode 100644 typescript-jsx-router/src/App.vue delete mode 100644 typescript-jsx-router/src/assets/base.css delete mode 100644 typescript-jsx-router/src/assets/logo.svg delete mode 100644 typescript-jsx-router/src/components/HelloWorld.vue delete mode 100644 typescript-jsx-router/src/components/TheWelcome.vue delete mode 100644 typescript-jsx-router/src/components/WelcomeItem.vue delete mode 100644 typescript-jsx-router/src/components/icons/IconCommunity.vue delete mode 100644 typescript-jsx-router/src/components/icons/IconDocumentation.vue delete mode 100644 typescript-jsx-router/src/components/icons/IconEcosystem.vue delete mode 100644 typescript-jsx-router/src/components/icons/IconSupport.vue delete mode 100644 typescript-jsx-router/src/components/icons/IconTooling.vue delete mode 100644 typescript-jsx-router/src/main.ts delete mode 100644 typescript-jsx-router/src/router/index.ts delete mode 100644 typescript-jsx-router/src/views/AboutView.vue delete mode 100644 typescript-jsx-router/src/views/HomeView.vue delete mode 100644 typescript-jsx-router/tsconfig.json delete mode 100644 typescript-jsx-router/vite.config.ts delete mode 100644 typescript-jsx-with-tests/.gitignore delete mode 100644 typescript-jsx-with-tests/README.md delete mode 100644 typescript-jsx-with-tests/cypress.json delete mode 100644 typescript-jsx-with-tests/cypress/fixtures/example.json delete mode 100644 typescript-jsx-with-tests/cypress/integration/example.spec.ts delete mode 100644 typescript-jsx-with-tests/cypress/plugins/index.ts delete mode 100644 typescript-jsx-with-tests/cypress/support/commands.ts delete mode 100644 typescript-jsx-with-tests/cypress/support/index.ts delete mode 100644 typescript-jsx-with-tests/cypress/tsconfig.json delete mode 100644 typescript-jsx-with-tests/env.d.ts delete mode 100644 typescript-jsx-with-tests/index.html delete mode 100644 typescript-jsx-with-tests/package.json delete mode 100644 typescript-jsx-with-tests/public/favicon.ico delete mode 100644 typescript-jsx-with-tests/src/App.vue delete mode 100644 typescript-jsx-with-tests/src/assets/base.css delete mode 100644 typescript-jsx-with-tests/src/assets/logo.svg delete mode 100644 typescript-jsx-with-tests/src/components/HelloWorld.vue delete mode 100644 typescript-jsx-with-tests/src/components/TheWelcome.vue delete mode 100644 typescript-jsx-with-tests/src/components/WelcomeItem.vue delete mode 100644 typescript-jsx-with-tests/src/components/__tests__/HelloWorld.spec.ts delete mode 100644 typescript-jsx-with-tests/src/components/icons/IconCommunity.vue delete mode 100644 typescript-jsx-with-tests/src/components/icons/IconDocumentation.vue delete mode 100644 typescript-jsx-with-tests/src/components/icons/IconEcosystem.vue delete mode 100644 typescript-jsx-with-tests/src/components/icons/IconSupport.vue delete mode 100644 typescript-jsx-with-tests/src/components/icons/IconTooling.vue delete mode 100644 typescript-jsx-with-tests/src/main.ts delete mode 100644 typescript-jsx-with-tests/tsconfig.json delete mode 100644 typescript-jsx-with-tests/vite.config.ts delete mode 100644 typescript-jsx/.gitignore delete mode 100644 typescript-jsx/README.md delete mode 100644 typescript-jsx/env.d.ts delete mode 100644 typescript-jsx/index.html delete mode 100644 typescript-jsx/package.json delete mode 100644 typescript-jsx/public/favicon.ico delete mode 100644 typescript-jsx/src/App.vue delete mode 100644 typescript-jsx/src/assets/base.css delete mode 100644 typescript-jsx/src/assets/logo.svg delete mode 100644 typescript-jsx/src/components/HelloWorld.vue delete mode 100644 typescript-jsx/src/components/TheWelcome.vue delete mode 100644 typescript-jsx/src/components/WelcomeItem.vue delete mode 100644 typescript-jsx/src/components/icons/IconCommunity.vue delete mode 100644 typescript-jsx/src/components/icons/IconDocumentation.vue delete mode 100644 typescript-jsx/src/components/icons/IconEcosystem.vue delete mode 100644 typescript-jsx/src/components/icons/IconSupport.vue delete mode 100644 typescript-jsx/src/components/icons/IconTooling.vue delete mode 100644 typescript-jsx/src/main.ts delete mode 100644 typescript-jsx/tsconfig.json delete mode 100644 typescript-jsx/vite.config.ts diff --git a/default/package.json b/default/package.json index 0a390125..113d62f4 100644 --- a/default/package.json +++ b/default/package.json @@ -7,10 +7,14 @@ "preview": "vite preview --port 5050" }, "dependencies": { - "vue": "^3.2.22" + "@vue/composition-api": "^1.4.0", + "vue": "^2.6.14" }, "devDependencies": { - "@vitejs/plugin-vue": "^1.10.0", - "vite": "^2.6.14" + "@vue/runtime-dom": "^3.2.22", + "unplugin-vue2-script-setup": "^0.7.1", + "vite": "^2.6.14", + "vite-plugin-vue2": "^1.9.0", + "vue-template-compiler": "^2.6.14" } } diff --git a/default/src/App.vue b/default/src/App.vue index b0b6901b..099c613b 100644 --- a/default/src/App.vue +++ b/default/src/App.vue @@ -4,17 +4,19 @@ import TheWelcome from './components/TheWelcome.vue' diff --git a/jsx-pinia-with-tests/src/assets/base.css b/jsx-pinia-with-tests/src/assets/base.css deleted file mode 100644 index 5427a030..00000000 --- a/jsx-pinia-with-tests/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/jsx-pinia-with-tests/src/assets/logo.svg b/jsx-pinia-with-tests/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/jsx-pinia-with-tests/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/jsx-pinia-with-tests/src/components/HelloWorld.vue b/jsx-pinia-with-tests/src/components/HelloWorld.vue deleted file mode 100644 index aa16fa1f..00000000 --- a/jsx-pinia-with-tests/src/components/HelloWorld.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - - - diff --git a/jsx-pinia-with-tests/src/components/TheWelcome.vue b/jsx-pinia-with-tests/src/components/TheWelcome.vue deleted file mode 100644 index 1d003f86..00000000 --- a/jsx-pinia-with-tests/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/jsx-pinia-with-tests/src/components/WelcomeItem.vue b/jsx-pinia-with-tests/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/jsx-pinia-with-tests/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js b/jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js deleted file mode 100644 index a69f3a9d..00000000 --- a/jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js +++ /dev/null @@ -1,13 +0,0 @@ -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') - }) -}) diff --git a/jsx-pinia-with-tests/src/components/icons/IconCommunity.vue b/jsx-pinia-with-tests/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/jsx-pinia-with-tests/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-pinia-with-tests/src/components/icons/IconDocumentation.vue b/jsx-pinia-with-tests/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/jsx-pinia-with-tests/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-pinia-with-tests/src/components/icons/IconEcosystem.vue b/jsx-pinia-with-tests/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/jsx-pinia-with-tests/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-pinia-with-tests/src/components/icons/IconSupport.vue b/jsx-pinia-with-tests/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/jsx-pinia-with-tests/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-pinia-with-tests/src/components/icons/IconTooling.vue b/jsx-pinia-with-tests/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/jsx-pinia-with-tests/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/jsx-pinia-with-tests/src/main.js b/jsx-pinia-with-tests/src/main.js deleted file mode 100644 index 5f77a891..00000000 --- a/jsx-pinia-with-tests/src/main.js +++ /dev/null @@ -1,9 +0,0 @@ -import { createApp } from 'vue' -import { createPinia } from 'pinia' -import App from './App.vue' - -const app = createApp(App) - -app.use(createPinia()) - -app.mount('#app') diff --git a/jsx-pinia-with-tests/src/stores/counter.js b/jsx-pinia-with-tests/src/stores/counter.js deleted file mode 100644 index 4a2d2427..00000000 --- a/jsx-pinia-with-tests/src/stores/counter.js +++ /dev/null @@ -1,16 +0,0 @@ -import { defineStore } from 'pinia' - -export const useCounterStore = defineStore({ - id: 'counter', - state: () => ({ - counter: 0 - }), - getters: { - doubleCount: (state) => state.counter * 2 - }, - actions: { - increment() { - this.counter++ - } - } -}) diff --git a/jsx-pinia-with-tests/vite.config.js b/jsx-pinia-with-tests/vite.config.js deleted file mode 100644 index f140f276..00000000 --- a/jsx-pinia-with-tests/vite.config.js +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/jsx-pinia/.gitignore b/jsx-pinia/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/jsx-pinia/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# 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/jsx-pinia/README.md b/jsx-pinia/README.md deleted file mode 100644 index 4f10fb57..00000000 --- a/jsx-pinia/README.md +++ /dev/null @@ -1,29 +0,0 @@ -# jsx-pinia - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -pnpm install -``` - -### Compile and Hot-Reload for Development - -```sh -pnpm dev -``` - -### Compile and Minify for Production - -```sh -pnpm build -``` diff --git a/jsx-pinia/index.html b/jsx-pinia/index.html deleted file mode 100644 index 030a6ff5..00000000 --- a/jsx-pinia/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/jsx-pinia/package.json b/jsx-pinia/package.json deleted file mode 100644 index 36d69f1e..00000000 --- a/jsx-pinia/package.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "jsx-pinia", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview --port 5050" - }, - "dependencies": { - "pinia": "^2.0.4", - "vue": "^3.2.22" - }, - "devDependencies": { - "@vitejs/plugin-vue": "^1.10.0", - "@vitejs/plugin-vue-jsx": "^1.3.0", - "vite": "^2.6.14" - } -} diff --git a/jsx-pinia/public/favicon.ico b/jsx-pinia/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/jsx-pinia/src/App.vue b/jsx-pinia/src/App.vue deleted file mode 100644 index b0b6901b..00000000 --- a/jsx-pinia/src/App.vue +++ /dev/null @@ -1,81 +0,0 @@ - - - - - diff --git a/jsx-pinia/src/assets/base.css b/jsx-pinia/src/assets/base.css deleted file mode 100644 index 5427a030..00000000 --- a/jsx-pinia/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/jsx-pinia/src/assets/logo.svg b/jsx-pinia/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/jsx-pinia/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/jsx-pinia/src/components/HelloWorld.vue b/jsx-pinia/src/components/HelloWorld.vue deleted file mode 100644 index aa16fa1f..00000000 --- a/jsx-pinia/src/components/HelloWorld.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - - - diff --git a/jsx-pinia/src/components/TheWelcome.vue b/jsx-pinia/src/components/TheWelcome.vue deleted file mode 100644 index 1d003f86..00000000 --- a/jsx-pinia/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/jsx-pinia/src/components/WelcomeItem.vue b/jsx-pinia/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/jsx-pinia/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/jsx-pinia/src/components/icons/IconCommunity.vue b/jsx-pinia/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/jsx-pinia/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-pinia/src/components/icons/IconDocumentation.vue b/jsx-pinia/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/jsx-pinia/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-pinia/src/components/icons/IconEcosystem.vue b/jsx-pinia/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/jsx-pinia/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-pinia/src/components/icons/IconSupport.vue b/jsx-pinia/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/jsx-pinia/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-pinia/src/components/icons/IconTooling.vue b/jsx-pinia/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/jsx-pinia/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/jsx-pinia/src/main.js b/jsx-pinia/src/main.js deleted file mode 100644 index 5f77a891..00000000 --- a/jsx-pinia/src/main.js +++ /dev/null @@ -1,9 +0,0 @@ -import { createApp } from 'vue' -import { createPinia } from 'pinia' -import App from './App.vue' - -const app = createApp(App) - -app.use(createPinia()) - -app.mount('#app') diff --git a/jsx-pinia/src/stores/counter.js b/jsx-pinia/src/stores/counter.js deleted file mode 100644 index 4a2d2427..00000000 --- a/jsx-pinia/src/stores/counter.js +++ /dev/null @@ -1,16 +0,0 @@ -import { defineStore } from 'pinia' - -export const useCounterStore = defineStore({ - id: 'counter', - state: () => ({ - counter: 0 - }), - getters: { - doubleCount: (state) => state.counter * 2 - }, - actions: { - increment() { - this.counter++ - } - } -}) diff --git a/jsx-pinia/vite.config.js b/jsx-pinia/vite.config.js deleted file mode 100644 index f140f276..00000000 --- a/jsx-pinia/vite.config.js +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/jsx-router-pinia-with-tests/.gitignore b/jsx-router-pinia-with-tests/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/jsx-router-pinia-with-tests/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# 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/jsx-router-pinia-with-tests/README.md b/jsx-router-pinia-with-tests/README.md deleted file mode 100644 index 10533b71..00000000 --- a/jsx-router-pinia-with-tests/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# jsx-router-pinia-with-tests - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -pnpm install -``` - -### Compile and Hot-Reload for Development - -```sh -pnpm dev -``` - -### Compile and Minify for Production - -```sh -pnpm build -``` - -### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction) - -```sh -pnpm test:unit # or `pnpm test:unit:ci` for headless testing -``` - -### Run End-to-End Tests with [Cypress](https://www.cypress.io/) - -```sh -pnpm build -pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing -``` diff --git a/jsx-router-pinia-with-tests/cypress.json b/jsx-router-pinia-with-tests/cypress.json deleted file mode 100644 index 3d372252..00000000 --- a/jsx-router-pinia-with-tests/cypress.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "baseUrl": "http://localhost:5050/", - "component": { - "componentFolder": "src", - "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" - } -} diff --git a/jsx-router-pinia-with-tests/cypress/fixtures/example.json b/jsx-router-pinia-with-tests/cypress/fixtures/example.json deleted file mode 100644 index 02e42543..00000000 --- a/jsx-router-pinia-with-tests/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "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/jsx-router-pinia-with-tests/cypress/integration/example.spec.js b/jsx-router-pinia-with-tests/cypress/integration/example.spec.js deleted file mode 100644 index 13a2922b..00000000 --- a/jsx-router-pinia-with-tests/cypress/integration/example.spec.js +++ /dev/null @@ -1,13 +0,0 @@ -// https://docs.cypress.io/api/introduction/api.html - -describe('My First Test', () => { - it('visits the app root url', () => { - cy.visit('/') - cy.contains('h1', 'You did it!') - }) - - it('navigates to the about page', () => { - cy.visit('/about') - cy.contains('h1', 'This is an about page') - }) -}) diff --git a/jsx-router-pinia-with-tests/cypress/jsconfig.json b/jsx-router-pinia-with-tests/cypress/jsconfig.json deleted file mode 100644 index b5b2f972..00000000 --- a/jsx-router-pinia-with-tests/cypress/jsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["es5", "dom"], - "types": ["cypress"] - }, - "include": ["./**/*"] -} diff --git a/jsx-router-pinia-with-tests/cypress/plugins/index.js b/jsx-router-pinia-with-tests/cypress/plugins/index.js deleted file mode 100644 index ad2e351d..00000000 --- a/jsx-router-pinia-with-tests/cypress/plugins/index.js +++ /dev/null @@ -1,28 +0,0 @@ -/// -// *********************************************************** -// 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/jsx-router-pinia-with-tests/cypress/support/commands.js b/jsx-router-pinia-with-tests/cypress/support/commands.js deleted file mode 100644 index 119ab03f..00000000 --- a/jsx-router-pinia-with-tests/cypress/support/commands.js +++ /dev/null @@ -1,25 +0,0 @@ -// *********************************************** -// 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/jsx-router-pinia-with-tests/cypress/support/index.js b/jsx-router-pinia-with-tests/cypress/support/index.js deleted file mode 100644 index d68db96d..00000000 --- a/jsx-router-pinia-with-tests/cypress/support/index.js +++ /dev/null @@ -1,20 +0,0 @@ -// *********************************************************** -// 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/jsx-router-pinia-with-tests/index.html b/jsx-router-pinia-with-tests/index.html deleted file mode 100644 index 030a6ff5..00000000 --- a/jsx-router-pinia-with-tests/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/jsx-router-pinia-with-tests/package.json b/jsx-router-pinia-with-tests/package.json deleted file mode 100644 index a6a9f686..00000000 --- a/jsx-router-pinia-with-tests/package.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "name": "jsx-router-pinia-with-tests", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview --port 5050", - "test:unit": "cypress open-ct", - "test:unit:ci": "cypress run-ct --quiet --reporter spec", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'" - }, - "dependencies": { - "pinia": "^2.0.4", - "vue": "^3.2.22", - "vue-router": "^4.0.12" - }, - "devDependencies": { - "@cypress/vite-dev-server": "^2.2.1", - "@cypress/vue": "^3.0.5", - "@vitejs/plugin-vue": "^1.10.0", - "@vitejs/plugin-vue-jsx": "^1.3.0", - "cypress": "^8.7.0", - "start-server-and-test": "^1.14.0", - "vite": "^2.6.14" - } -} diff --git a/jsx-router-pinia-with-tests/public/favicon.ico b/jsx-router-pinia-with-tests/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/jsx-router-pinia-with-tests/src/App.vue b/jsx-router-pinia-with-tests/src/App.vue deleted file mode 100644 index 37edbaf4..00000000 --- a/jsx-router-pinia-with-tests/src/App.vue +++ /dev/null @@ -1,118 +0,0 @@ - - - - - diff --git a/jsx-router-pinia-with-tests/src/assets/base.css b/jsx-router-pinia-with-tests/src/assets/base.css deleted file mode 100644 index 71dc55a3..00000000 --- a/jsx-router-pinia-with-tests/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/jsx-router-pinia-with-tests/src/assets/logo.svg b/jsx-router-pinia-with-tests/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/jsx-router-pinia-with-tests/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/jsx-router-pinia-with-tests/src/components/HelloWorld.vue b/jsx-router-pinia-with-tests/src/components/HelloWorld.vue deleted file mode 100644 index aa16fa1f..00000000 --- a/jsx-router-pinia-with-tests/src/components/HelloWorld.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - - - diff --git a/jsx-router-pinia-with-tests/src/components/TheWelcome.vue b/jsx-router-pinia-with-tests/src/components/TheWelcome.vue deleted file mode 100644 index 1d003f86..00000000 --- a/jsx-router-pinia-with-tests/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/jsx-router-pinia-with-tests/src/components/WelcomeItem.vue b/jsx-router-pinia-with-tests/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/jsx-router-pinia-with-tests/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/jsx-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js b/jsx-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js deleted file mode 100644 index a69f3a9d..00000000 --- a/jsx-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js +++ /dev/null @@ -1,13 +0,0 @@ -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') - }) -}) diff --git a/jsx-router-pinia-with-tests/src/components/icons/IconCommunity.vue b/jsx-router-pinia-with-tests/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/jsx-router-pinia-with-tests/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router-pinia-with-tests/src/components/icons/IconDocumentation.vue b/jsx-router-pinia-with-tests/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/jsx-router-pinia-with-tests/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router-pinia-with-tests/src/components/icons/IconEcosystem.vue b/jsx-router-pinia-with-tests/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/jsx-router-pinia-with-tests/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router-pinia-with-tests/src/components/icons/IconSupport.vue b/jsx-router-pinia-with-tests/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/jsx-router-pinia-with-tests/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router-pinia-with-tests/src/components/icons/IconTooling.vue b/jsx-router-pinia-with-tests/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/jsx-router-pinia-with-tests/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/jsx-router-pinia-with-tests/src/main.js b/jsx-router-pinia-with-tests/src/main.js deleted file mode 100644 index fda1e6e3..00000000 --- a/jsx-router-pinia-with-tests/src/main.js +++ /dev/null @@ -1,12 +0,0 @@ -import { createApp } from 'vue' -import { createPinia } from 'pinia' - -import App from './App.vue' -import router from './router' - -const app = createApp(App) - -app.use(createPinia()) -app.use(router) - -app.mount('#app') diff --git a/jsx-router-pinia-with-tests/src/router/index.js b/jsx-router-pinia-with-tests/src/router/index.js deleted file mode 100644 index a49ae507..00000000 --- a/jsx-router-pinia-with-tests/src/router/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' - -const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - name: 'home', - component: HomeView - }, - { - 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/AboutView.vue') - } - ] -}) - -export default router diff --git a/jsx-router-pinia-with-tests/src/stores/counter.js b/jsx-router-pinia-with-tests/src/stores/counter.js deleted file mode 100644 index 4a2d2427..00000000 --- a/jsx-router-pinia-with-tests/src/stores/counter.js +++ /dev/null @@ -1,16 +0,0 @@ -import { defineStore } from 'pinia' - -export const useCounterStore = defineStore({ - id: 'counter', - state: () => ({ - counter: 0 - }), - getters: { - doubleCount: (state) => state.counter * 2 - }, - actions: { - increment() { - this.counter++ - } - } -}) diff --git a/jsx-router-pinia-with-tests/src/views/AboutView.vue b/jsx-router-pinia-with-tests/src/views/AboutView.vue deleted file mode 100644 index 756ad2a1..00000000 --- a/jsx-router-pinia-with-tests/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/jsx-router-pinia-with-tests/src/views/HomeView.vue b/jsx-router-pinia-with-tests/src/views/HomeView.vue deleted file mode 100644 index 6555a646..00000000 --- a/jsx-router-pinia-with-tests/src/views/HomeView.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/jsx-router-pinia-with-tests/vite.config.js b/jsx-router-pinia-with-tests/vite.config.js deleted file mode 100644 index f140f276..00000000 --- a/jsx-router-pinia-with-tests/vite.config.js +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/jsx-router-pinia/.gitignore b/jsx-router-pinia/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/jsx-router-pinia/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# 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/jsx-router-pinia/README.md b/jsx-router-pinia/README.md deleted file mode 100644 index 5fec2b3c..00000000 --- a/jsx-router-pinia/README.md +++ /dev/null @@ -1,29 +0,0 @@ -# jsx-router-pinia - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -pnpm install -``` - -### Compile and Hot-Reload for Development - -```sh -pnpm dev -``` - -### Compile and Minify for Production - -```sh -pnpm build -``` diff --git a/jsx-router-pinia/index.html b/jsx-router-pinia/index.html deleted file mode 100644 index 030a6ff5..00000000 --- a/jsx-router-pinia/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/jsx-router-pinia/package.json b/jsx-router-pinia/package.json deleted file mode 100644 index e310b7b2..00000000 --- a/jsx-router-pinia/package.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "jsx-router-pinia", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview --port 5050" - }, - "dependencies": { - "pinia": "^2.0.4", - "vue": "^3.2.22", - "vue-router": "^4.0.12" - }, - "devDependencies": { - "@vitejs/plugin-vue": "^1.10.0", - "@vitejs/plugin-vue-jsx": "^1.3.0", - "vite": "^2.6.14" - } -} diff --git a/jsx-router-pinia/public/favicon.ico b/jsx-router-pinia/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/jsx-router-pinia/src/App.vue b/jsx-router-pinia/src/App.vue deleted file mode 100644 index 37edbaf4..00000000 --- a/jsx-router-pinia/src/App.vue +++ /dev/null @@ -1,118 +0,0 @@ - - - - - diff --git a/jsx-router-pinia/src/assets/base.css b/jsx-router-pinia/src/assets/base.css deleted file mode 100644 index 71dc55a3..00000000 --- a/jsx-router-pinia/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/jsx-router-pinia/src/assets/logo.svg b/jsx-router-pinia/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/jsx-router-pinia/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/jsx-router-pinia/src/components/HelloWorld.vue b/jsx-router-pinia/src/components/HelloWorld.vue deleted file mode 100644 index aa16fa1f..00000000 --- a/jsx-router-pinia/src/components/HelloWorld.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - - - diff --git a/jsx-router-pinia/src/components/TheWelcome.vue b/jsx-router-pinia/src/components/TheWelcome.vue deleted file mode 100644 index 1d003f86..00000000 --- a/jsx-router-pinia/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/jsx-router-pinia/src/components/WelcomeItem.vue b/jsx-router-pinia/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/jsx-router-pinia/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/jsx-router-pinia/src/components/icons/IconCommunity.vue b/jsx-router-pinia/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/jsx-router-pinia/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router-pinia/src/components/icons/IconDocumentation.vue b/jsx-router-pinia/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/jsx-router-pinia/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router-pinia/src/components/icons/IconEcosystem.vue b/jsx-router-pinia/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/jsx-router-pinia/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router-pinia/src/components/icons/IconSupport.vue b/jsx-router-pinia/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/jsx-router-pinia/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router-pinia/src/components/icons/IconTooling.vue b/jsx-router-pinia/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/jsx-router-pinia/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/jsx-router-pinia/src/main.js b/jsx-router-pinia/src/main.js deleted file mode 100644 index fda1e6e3..00000000 --- a/jsx-router-pinia/src/main.js +++ /dev/null @@ -1,12 +0,0 @@ -import { createApp } from 'vue' -import { createPinia } from 'pinia' - -import App from './App.vue' -import router from './router' - -const app = createApp(App) - -app.use(createPinia()) -app.use(router) - -app.mount('#app') diff --git a/jsx-router-pinia/src/router/index.js b/jsx-router-pinia/src/router/index.js deleted file mode 100644 index a49ae507..00000000 --- a/jsx-router-pinia/src/router/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' - -const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - name: 'home', - component: HomeView - }, - { - 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/AboutView.vue') - } - ] -}) - -export default router diff --git a/jsx-router-pinia/src/stores/counter.js b/jsx-router-pinia/src/stores/counter.js deleted file mode 100644 index 4a2d2427..00000000 --- a/jsx-router-pinia/src/stores/counter.js +++ /dev/null @@ -1,16 +0,0 @@ -import { defineStore } from 'pinia' - -export const useCounterStore = defineStore({ - id: 'counter', - state: () => ({ - counter: 0 - }), - getters: { - doubleCount: (state) => state.counter * 2 - }, - actions: { - increment() { - this.counter++ - } - } -}) diff --git a/jsx-router-pinia/src/views/AboutView.vue b/jsx-router-pinia/src/views/AboutView.vue deleted file mode 100644 index 756ad2a1..00000000 --- a/jsx-router-pinia/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/jsx-router-pinia/src/views/HomeView.vue b/jsx-router-pinia/src/views/HomeView.vue deleted file mode 100644 index 6555a646..00000000 --- a/jsx-router-pinia/src/views/HomeView.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/jsx-router-pinia/vite.config.js b/jsx-router-pinia/vite.config.js deleted file mode 100644 index f140f276..00000000 --- a/jsx-router-pinia/vite.config.js +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/jsx-router-with-tests/.gitignore b/jsx-router-with-tests/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/jsx-router-with-tests/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# 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/jsx-router-with-tests/README.md b/jsx-router-with-tests/README.md deleted file mode 100644 index 45cc392b..00000000 --- a/jsx-router-with-tests/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# jsx-router-with-tests - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -pnpm install -``` - -### Compile and Hot-Reload for Development - -```sh -pnpm dev -``` - -### Compile and Minify for Production - -```sh -pnpm build -``` - -### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction) - -```sh -pnpm test:unit # or `pnpm test:unit:ci` for headless testing -``` - -### Run End-to-End Tests with [Cypress](https://www.cypress.io/) - -```sh -pnpm build -pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing -``` diff --git a/jsx-router-with-tests/cypress.json b/jsx-router-with-tests/cypress.json deleted file mode 100644 index 3d372252..00000000 --- a/jsx-router-with-tests/cypress.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "baseUrl": "http://localhost:5050/", - "component": { - "componentFolder": "src", - "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" - } -} diff --git a/jsx-router-with-tests/cypress/fixtures/example.json b/jsx-router-with-tests/cypress/fixtures/example.json deleted file mode 100644 index 02e42543..00000000 --- a/jsx-router-with-tests/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "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/jsx-router-with-tests/cypress/integration/example.spec.js b/jsx-router-with-tests/cypress/integration/example.spec.js deleted file mode 100644 index 13a2922b..00000000 --- a/jsx-router-with-tests/cypress/integration/example.spec.js +++ /dev/null @@ -1,13 +0,0 @@ -// https://docs.cypress.io/api/introduction/api.html - -describe('My First Test', () => { - it('visits the app root url', () => { - cy.visit('/') - cy.contains('h1', 'You did it!') - }) - - it('navigates to the about page', () => { - cy.visit('/about') - cy.contains('h1', 'This is an about page') - }) -}) diff --git a/jsx-router-with-tests/cypress/jsconfig.json b/jsx-router-with-tests/cypress/jsconfig.json deleted file mode 100644 index b5b2f972..00000000 --- a/jsx-router-with-tests/cypress/jsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["es5", "dom"], - "types": ["cypress"] - }, - "include": ["./**/*"] -} diff --git a/jsx-router-with-tests/cypress/plugins/index.js b/jsx-router-with-tests/cypress/plugins/index.js deleted file mode 100644 index ad2e351d..00000000 --- a/jsx-router-with-tests/cypress/plugins/index.js +++ /dev/null @@ -1,28 +0,0 @@ -/// -// *********************************************************** -// 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/jsx-router-with-tests/cypress/support/commands.js b/jsx-router-with-tests/cypress/support/commands.js deleted file mode 100644 index 119ab03f..00000000 --- a/jsx-router-with-tests/cypress/support/commands.js +++ /dev/null @@ -1,25 +0,0 @@ -// *********************************************** -// 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/jsx-router-with-tests/cypress/support/index.js b/jsx-router-with-tests/cypress/support/index.js deleted file mode 100644 index d68db96d..00000000 --- a/jsx-router-with-tests/cypress/support/index.js +++ /dev/null @@ -1,20 +0,0 @@ -// *********************************************************** -// 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/jsx-router-with-tests/index.html b/jsx-router-with-tests/index.html deleted file mode 100644 index 030a6ff5..00000000 --- a/jsx-router-with-tests/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/jsx-router-with-tests/package.json b/jsx-router-with-tests/package.json deleted file mode 100644 index 124dd6b4..00000000 --- a/jsx-router-with-tests/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "jsx-router-with-tests", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview --port 5050", - "test:unit": "cypress open-ct", - "test:unit:ci": "cypress run-ct --quiet --reporter spec", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'" - }, - "dependencies": { - "vue": "^3.2.22", - "vue-router": "^4.0.12" - }, - "devDependencies": { - "@cypress/vite-dev-server": "^2.2.1", - "@cypress/vue": "^3.0.5", - "@vitejs/plugin-vue": "^1.10.0", - "@vitejs/plugin-vue-jsx": "^1.3.0", - "cypress": "^8.7.0", - "start-server-and-test": "^1.14.0", - "vite": "^2.6.14" - } -} diff --git a/jsx-router-with-tests/public/favicon.ico b/jsx-router-with-tests/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/jsx-router-with-tests/src/App.vue b/jsx-router-with-tests/src/App.vue deleted file mode 100644 index 37edbaf4..00000000 --- a/jsx-router-with-tests/src/App.vue +++ /dev/null @@ -1,118 +0,0 @@ - - - - - diff --git a/jsx-router-with-tests/src/assets/base.css b/jsx-router-with-tests/src/assets/base.css deleted file mode 100644 index 71dc55a3..00000000 --- a/jsx-router-with-tests/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/jsx-router-with-tests/src/assets/logo.svg b/jsx-router-with-tests/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/jsx-router-with-tests/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/jsx-router-with-tests/src/components/HelloWorld.vue b/jsx-router-with-tests/src/components/HelloWorld.vue deleted file mode 100644 index aa16fa1f..00000000 --- a/jsx-router-with-tests/src/components/HelloWorld.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - - - diff --git a/jsx-router-with-tests/src/components/TheWelcome.vue b/jsx-router-with-tests/src/components/TheWelcome.vue deleted file mode 100644 index 1d003f86..00000000 --- a/jsx-router-with-tests/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/jsx-router-with-tests/src/components/WelcomeItem.vue b/jsx-router-with-tests/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/jsx-router-with-tests/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/jsx-router-with-tests/src/components/__tests__/HelloWorld.spec.js b/jsx-router-with-tests/src/components/__tests__/HelloWorld.spec.js deleted file mode 100644 index a69f3a9d..00000000 --- a/jsx-router-with-tests/src/components/__tests__/HelloWorld.spec.js +++ /dev/null @@ -1,13 +0,0 @@ -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') - }) -}) diff --git a/jsx-router-with-tests/src/components/icons/IconCommunity.vue b/jsx-router-with-tests/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/jsx-router-with-tests/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router-with-tests/src/components/icons/IconDocumentation.vue b/jsx-router-with-tests/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/jsx-router-with-tests/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router-with-tests/src/components/icons/IconEcosystem.vue b/jsx-router-with-tests/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/jsx-router-with-tests/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router-with-tests/src/components/icons/IconSupport.vue b/jsx-router-with-tests/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/jsx-router-with-tests/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router-with-tests/src/components/icons/IconTooling.vue b/jsx-router-with-tests/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/jsx-router-with-tests/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/jsx-router-with-tests/src/main.js b/jsx-router-with-tests/src/main.js deleted file mode 100644 index c8e37b03..00000000 --- a/jsx-router-with-tests/src/main.js +++ /dev/null @@ -1,9 +0,0 @@ -import { createApp } from 'vue' -import App from './App.vue' -import router from './router' - -const app = createApp(App) - -app.use(router) - -app.mount('#app') diff --git a/jsx-router-with-tests/src/router/index.js b/jsx-router-with-tests/src/router/index.js deleted file mode 100644 index a49ae507..00000000 --- a/jsx-router-with-tests/src/router/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' - -const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - name: 'home', - component: HomeView - }, - { - 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/AboutView.vue') - } - ] -}) - -export default router diff --git a/jsx-router-with-tests/src/views/AboutView.vue b/jsx-router-with-tests/src/views/AboutView.vue deleted file mode 100644 index 756ad2a1..00000000 --- a/jsx-router-with-tests/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/jsx-router-with-tests/src/views/HomeView.vue b/jsx-router-with-tests/src/views/HomeView.vue deleted file mode 100644 index 6555a646..00000000 --- a/jsx-router-with-tests/src/views/HomeView.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/jsx-router-with-tests/vite.config.js b/jsx-router-with-tests/vite.config.js deleted file mode 100644 index f140f276..00000000 --- a/jsx-router-with-tests/vite.config.js +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/jsx-router/.gitignore b/jsx-router/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/jsx-router/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# 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/jsx-router/README.md b/jsx-router/README.md deleted file mode 100644 index 67c8371f..00000000 --- a/jsx-router/README.md +++ /dev/null @@ -1,29 +0,0 @@ -# jsx-router - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -pnpm install -``` - -### Compile and Hot-Reload for Development - -```sh -pnpm dev -``` - -### Compile and Minify for Production - -```sh -pnpm build -``` diff --git a/jsx-router/index.html b/jsx-router/index.html deleted file mode 100644 index 030a6ff5..00000000 --- a/jsx-router/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/jsx-router/package.json b/jsx-router/package.json deleted file mode 100644 index 7281e7e6..00000000 --- a/jsx-router/package.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "jsx-router", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview --port 5050" - }, - "dependencies": { - "vue": "^3.2.22", - "vue-router": "^4.0.12" - }, - "devDependencies": { - "@vitejs/plugin-vue": "^1.10.0", - "@vitejs/plugin-vue-jsx": "^1.3.0", - "vite": "^2.6.14" - } -} diff --git a/jsx-router/public/favicon.ico b/jsx-router/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/jsx-router/src/App.vue b/jsx-router/src/App.vue deleted file mode 100644 index 37edbaf4..00000000 --- a/jsx-router/src/App.vue +++ /dev/null @@ -1,118 +0,0 @@ - - - - - diff --git a/jsx-router/src/assets/base.css b/jsx-router/src/assets/base.css deleted file mode 100644 index 71dc55a3..00000000 --- a/jsx-router/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/jsx-router/src/assets/logo.svg b/jsx-router/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/jsx-router/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/jsx-router/src/components/HelloWorld.vue b/jsx-router/src/components/HelloWorld.vue deleted file mode 100644 index aa16fa1f..00000000 --- a/jsx-router/src/components/HelloWorld.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - - - diff --git a/jsx-router/src/components/TheWelcome.vue b/jsx-router/src/components/TheWelcome.vue deleted file mode 100644 index 1d003f86..00000000 --- a/jsx-router/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/jsx-router/src/components/WelcomeItem.vue b/jsx-router/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/jsx-router/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/jsx-router/src/components/icons/IconCommunity.vue b/jsx-router/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/jsx-router/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router/src/components/icons/IconDocumentation.vue b/jsx-router/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/jsx-router/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router/src/components/icons/IconEcosystem.vue b/jsx-router/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/jsx-router/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router/src/components/icons/IconSupport.vue b/jsx-router/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/jsx-router/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-router/src/components/icons/IconTooling.vue b/jsx-router/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/jsx-router/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/jsx-router/src/main.js b/jsx-router/src/main.js deleted file mode 100644 index c8e37b03..00000000 --- a/jsx-router/src/main.js +++ /dev/null @@ -1,9 +0,0 @@ -import { createApp } from 'vue' -import App from './App.vue' -import router from './router' - -const app = createApp(App) - -app.use(router) - -app.mount('#app') diff --git a/jsx-router/src/router/index.js b/jsx-router/src/router/index.js deleted file mode 100644 index a49ae507..00000000 --- a/jsx-router/src/router/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' - -const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - name: 'home', - component: HomeView - }, - { - 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/AboutView.vue') - } - ] -}) - -export default router diff --git a/jsx-router/src/views/AboutView.vue b/jsx-router/src/views/AboutView.vue deleted file mode 100644 index 756ad2a1..00000000 --- a/jsx-router/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/jsx-router/src/views/HomeView.vue b/jsx-router/src/views/HomeView.vue deleted file mode 100644 index 6555a646..00000000 --- a/jsx-router/src/views/HomeView.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/jsx-router/vite.config.js b/jsx-router/vite.config.js deleted file mode 100644 index f140f276..00000000 --- a/jsx-router/vite.config.js +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/jsx-with-tests/.gitignore b/jsx-with-tests/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/jsx-with-tests/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# 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/jsx-with-tests/README.md b/jsx-with-tests/README.md deleted file mode 100644 index 336d942c..00000000 --- a/jsx-with-tests/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# jsx-with-tests - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -pnpm install -``` - -### Compile and Hot-Reload for Development - -```sh -pnpm dev -``` - -### Compile and Minify for Production - -```sh -pnpm build -``` - -### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction) - -```sh -pnpm test:unit # or `pnpm test:unit:ci` for headless testing -``` - -### Run End-to-End Tests with [Cypress](https://www.cypress.io/) - -```sh -pnpm build -pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing -``` diff --git a/jsx-with-tests/cypress.json b/jsx-with-tests/cypress.json deleted file mode 100644 index 3d372252..00000000 --- a/jsx-with-tests/cypress.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "baseUrl": "http://localhost:5050/", - "component": { - "componentFolder": "src", - "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" - } -} diff --git a/jsx-with-tests/cypress/fixtures/example.json b/jsx-with-tests/cypress/fixtures/example.json deleted file mode 100644 index 02e42543..00000000 --- a/jsx-with-tests/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "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/jsx-with-tests/cypress/integration/example.spec.js b/jsx-with-tests/cypress/integration/example.spec.js deleted file mode 100644 index 7a8c909f..00000000 --- a/jsx-with-tests/cypress/integration/example.spec.js +++ /dev/null @@ -1,8 +0,0 @@ -// https://docs.cypress.io/api/introduction/api.html - -describe('My First Test', () => { - it('visits the app root url', () => { - cy.visit('/') - cy.contains('h1', 'You did it!') - }) -}) diff --git a/jsx-with-tests/cypress/jsconfig.json b/jsx-with-tests/cypress/jsconfig.json deleted file mode 100644 index b5b2f972..00000000 --- a/jsx-with-tests/cypress/jsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["es5", "dom"], - "types": ["cypress"] - }, - "include": ["./**/*"] -} diff --git a/jsx-with-tests/cypress/plugins/index.js b/jsx-with-tests/cypress/plugins/index.js deleted file mode 100644 index ad2e351d..00000000 --- a/jsx-with-tests/cypress/plugins/index.js +++ /dev/null @@ -1,28 +0,0 @@ -/// -// *********************************************************** -// 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/jsx-with-tests/cypress/support/commands.js b/jsx-with-tests/cypress/support/commands.js deleted file mode 100644 index 119ab03f..00000000 --- a/jsx-with-tests/cypress/support/commands.js +++ /dev/null @@ -1,25 +0,0 @@ -// *********************************************** -// 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/jsx-with-tests/cypress/support/index.js b/jsx-with-tests/cypress/support/index.js deleted file mode 100644 index d68db96d..00000000 --- a/jsx-with-tests/cypress/support/index.js +++ /dev/null @@ -1,20 +0,0 @@ -// *********************************************************** -// 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/jsx-with-tests/index.html b/jsx-with-tests/index.html deleted file mode 100644 index 030a6ff5..00000000 --- a/jsx-with-tests/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/jsx-with-tests/package.json b/jsx-with-tests/package.json deleted file mode 100644 index 740b9bcb..00000000 --- a/jsx-with-tests/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "jsx-with-tests", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview --port 5050", - "test:unit": "cypress open-ct", - "test:unit:ci": "cypress run-ct --quiet --reporter spec", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'" - }, - "dependencies": { - "vue": "^3.2.22" - }, - "devDependencies": { - "@cypress/vite-dev-server": "^2.2.1", - "@cypress/vue": "^3.0.5", - "@vitejs/plugin-vue": "^1.10.0", - "@vitejs/plugin-vue-jsx": "^1.3.0", - "cypress": "^8.7.0", - "start-server-and-test": "^1.14.0", - "vite": "^2.6.14" - } -} diff --git a/jsx-with-tests/public/favicon.ico b/jsx-with-tests/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/jsx-with-tests/src/App.vue b/jsx-with-tests/src/App.vue deleted file mode 100644 index b0b6901b..00000000 --- a/jsx-with-tests/src/App.vue +++ /dev/null @@ -1,81 +0,0 @@ - - - - - diff --git a/jsx-with-tests/src/assets/base.css b/jsx-with-tests/src/assets/base.css deleted file mode 100644 index 5427a030..00000000 --- a/jsx-with-tests/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/jsx-with-tests/src/assets/logo.svg b/jsx-with-tests/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/jsx-with-tests/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/jsx-with-tests/src/components/HelloWorld.vue b/jsx-with-tests/src/components/HelloWorld.vue deleted file mode 100644 index aa16fa1f..00000000 --- a/jsx-with-tests/src/components/HelloWorld.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - - - diff --git a/jsx-with-tests/src/components/TheWelcome.vue b/jsx-with-tests/src/components/TheWelcome.vue deleted file mode 100644 index 1d003f86..00000000 --- a/jsx-with-tests/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/jsx-with-tests/src/components/WelcomeItem.vue b/jsx-with-tests/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/jsx-with-tests/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/jsx-with-tests/src/components/__tests__/HelloWorld.spec.js b/jsx-with-tests/src/components/__tests__/HelloWorld.spec.js deleted file mode 100644 index a69f3a9d..00000000 --- a/jsx-with-tests/src/components/__tests__/HelloWorld.spec.js +++ /dev/null @@ -1,13 +0,0 @@ -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') - }) -}) diff --git a/jsx-with-tests/src/components/icons/IconCommunity.vue b/jsx-with-tests/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/jsx-with-tests/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-with-tests/src/components/icons/IconDocumentation.vue b/jsx-with-tests/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/jsx-with-tests/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-with-tests/src/components/icons/IconEcosystem.vue b/jsx-with-tests/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/jsx-with-tests/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-with-tests/src/components/icons/IconSupport.vue b/jsx-with-tests/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/jsx-with-tests/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx-with-tests/src/components/icons/IconTooling.vue b/jsx-with-tests/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/jsx-with-tests/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/jsx-with-tests/src/main.js b/jsx-with-tests/src/main.js deleted file mode 100644 index 01433bca..00000000 --- a/jsx-with-tests/src/main.js +++ /dev/null @@ -1,4 +0,0 @@ -import { createApp } from 'vue' -import App from './App.vue' - -createApp(App).mount('#app') diff --git a/jsx-with-tests/vite.config.js b/jsx-with-tests/vite.config.js deleted file mode 100644 index f140f276..00000000 --- a/jsx-with-tests/vite.config.js +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/jsx/.gitignore b/jsx/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/jsx/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# 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/jsx/README.md b/jsx/README.md deleted file mode 100644 index d689403f..00000000 --- a/jsx/README.md +++ /dev/null @@ -1,29 +0,0 @@ -# jsx - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -pnpm install -``` - -### Compile and Hot-Reload for Development - -```sh -pnpm dev -``` - -### Compile and Minify for Production - -```sh -pnpm build -``` diff --git a/jsx/index.html b/jsx/index.html deleted file mode 100644 index 030a6ff5..00000000 --- a/jsx/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/jsx/package.json b/jsx/package.json deleted file mode 100644 index 95ca2e19..00000000 --- a/jsx/package.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "name": "jsx", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview --port 5050" - }, - "dependencies": { - "vue": "^3.2.22" - }, - "devDependencies": { - "@vitejs/plugin-vue": "^1.10.0", - "@vitejs/plugin-vue-jsx": "^1.3.0", - "vite": "^2.6.14" - } -} diff --git a/jsx/public/favicon.ico b/jsx/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/jsx/src/App.vue b/jsx/src/App.vue deleted file mode 100644 index b0b6901b..00000000 --- a/jsx/src/App.vue +++ /dev/null @@ -1,81 +0,0 @@ - - - - - diff --git a/jsx/src/assets/base.css b/jsx/src/assets/base.css deleted file mode 100644 index 5427a030..00000000 --- a/jsx/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/jsx/src/assets/logo.svg b/jsx/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/jsx/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/jsx/src/components/HelloWorld.vue b/jsx/src/components/HelloWorld.vue deleted file mode 100644 index aa16fa1f..00000000 --- a/jsx/src/components/HelloWorld.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - - - diff --git a/jsx/src/components/TheWelcome.vue b/jsx/src/components/TheWelcome.vue deleted file mode 100644 index 1d003f86..00000000 --- a/jsx/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/jsx/src/components/WelcomeItem.vue b/jsx/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/jsx/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/jsx/src/components/icons/IconCommunity.vue b/jsx/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/jsx/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx/src/components/icons/IconDocumentation.vue b/jsx/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/jsx/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx/src/components/icons/IconEcosystem.vue b/jsx/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/jsx/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx/src/components/icons/IconSupport.vue b/jsx/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/jsx/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/jsx/src/components/icons/IconTooling.vue b/jsx/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/jsx/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/jsx/src/main.js b/jsx/src/main.js deleted file mode 100644 index 01433bca..00000000 --- a/jsx/src/main.js +++ /dev/null @@ -1,4 +0,0 @@ -import { createApp } from 'vue' -import App from './App.vue' - -createApp(App).mount('#app') diff --git a/jsx/vite.config.js b/jsx/vite.config.js deleted file mode 100644 index f140f276..00000000 --- a/jsx/vite.config.js +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/pinia-with-tests/package.json b/pinia-with-tests/package.json index a7a70523..f3212607 100644 --- a/pinia-with-tests/package.json +++ b/pinia-with-tests/package.json @@ -11,15 +11,19 @@ "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'" }, "dependencies": { + "@vue/composition-api": "^1.4.0", "pinia": "^2.0.4", - "vue": "^3.2.22" + "vue": "^2.6.14" }, "devDependencies": { "@cypress/vite-dev-server": "^2.2.1", - "@cypress/vue": "^3.0.5", - "@vitejs/plugin-vue": "^1.10.0", + "@cypress/vue": "^2.2.4", + "@vue/runtime-dom": "^3.2.22", "cypress": "^8.7.0", "start-server-and-test": "^1.14.0", - "vite": "^2.6.14" + "unplugin-vue2-script-setup": "^0.7.1", + "vite": "^2.6.14", + "vite-plugin-vue2": "^1.9.0", + "vue-template-compiler": "^2.6.14" } } diff --git a/pinia-with-tests/src/App.vue b/pinia-with-tests/src/App.vue index b0b6901b..099c613b 100644 --- a/pinia-with-tests/src/App.vue +++ b/pinia-with-tests/src/App.vue @@ -4,17 +4,19 @@ import TheWelcome from './components/TheWelcome.vue' diff --git a/typescript-jsx-pinia-with-tests/src/assets/base.css b/typescript-jsx-pinia-with-tests/src/assets/base.css deleted file mode 100644 index 5427a030..00000000 --- a/typescript-jsx-pinia-with-tests/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/typescript-jsx-pinia-with-tests/src/assets/logo.svg b/typescript-jsx-pinia-with-tests/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/typescript-jsx-pinia-with-tests/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/typescript-jsx-pinia-with-tests/src/components/HelloWorld.vue b/typescript-jsx-pinia-with-tests/src/components/HelloWorld.vue deleted file mode 100644 index 01118cd9..00000000 --- a/typescript-jsx-pinia-with-tests/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/typescript-jsx-pinia-with-tests/src/components/TheWelcome.vue b/typescript-jsx-pinia-with-tests/src/components/TheWelcome.vue deleted file mode 100644 index b91a8edd..00000000 --- a/typescript-jsx-pinia-with-tests/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/typescript-jsx-pinia-with-tests/src/components/WelcomeItem.vue b/typescript-jsx-pinia-with-tests/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/typescript-jsx-pinia-with-tests/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/typescript-jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts deleted file mode 100644 index a69f3a9d..00000000 --- a/typescript-jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts +++ /dev/null @@ -1,13 +0,0 @@ -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') - }) -}) diff --git a/typescript-jsx-pinia-with-tests/src/components/icons/IconCommunity.vue b/typescript-jsx-pinia-with-tests/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/typescript-jsx-pinia-with-tests/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-pinia-with-tests/src/components/icons/IconDocumentation.vue b/typescript-jsx-pinia-with-tests/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/typescript-jsx-pinia-with-tests/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-pinia-with-tests/src/components/icons/IconEcosystem.vue b/typescript-jsx-pinia-with-tests/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/typescript-jsx-pinia-with-tests/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-pinia-with-tests/src/components/icons/IconSupport.vue b/typescript-jsx-pinia-with-tests/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/typescript-jsx-pinia-with-tests/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-pinia-with-tests/src/components/icons/IconTooling.vue b/typescript-jsx-pinia-with-tests/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/typescript-jsx-pinia-with-tests/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/typescript-jsx-pinia-with-tests/src/main.ts b/typescript-jsx-pinia-with-tests/src/main.ts deleted file mode 100644 index 5f77a891..00000000 --- a/typescript-jsx-pinia-with-tests/src/main.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createApp } from 'vue' -import { createPinia } from 'pinia' -import App from './App.vue' - -const app = createApp(App) - -app.use(createPinia()) - -app.mount('#app') diff --git a/typescript-jsx-pinia-with-tests/src/stores/counter.ts b/typescript-jsx-pinia-with-tests/src/stores/counter.ts deleted file mode 100644 index 4a2d2427..00000000 --- a/typescript-jsx-pinia-with-tests/src/stores/counter.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { defineStore } from 'pinia' - -export const useCounterStore = defineStore({ - id: 'counter', - state: () => ({ - counter: 0 - }), - getters: { - doubleCount: (state) => state.counter * 2 - }, - actions: { - increment() { - this.counter++ - } - } -}) diff --git a/typescript-jsx-pinia-with-tests/tsconfig.json b/typescript-jsx-pinia-with-tests/tsconfig.json deleted file mode 100644 index 8c707192..00000000 --- a/typescript-jsx-pinia-with-tests/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, - "paths": { - "@/*": ["src/*"] - }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] -} diff --git a/typescript-jsx-pinia-with-tests/vite.config.ts b/typescript-jsx-pinia-with-tests/vite.config.ts deleted file mode 100644 index f140f276..00000000 --- a/typescript-jsx-pinia-with-tests/vite.config.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/typescript-jsx-pinia/.gitignore b/typescript-jsx-pinia/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/typescript-jsx-pinia/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# 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/typescript-jsx-pinia/README.md b/typescript-jsx-pinia/README.md deleted file mode 100644 index b8c8b93a..00000000 --- a/typescript-jsx-pinia/README.md +++ /dev/null @@ -1,35 +0,0 @@ -# typescript-jsx-pinia - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). - -## Type Support for `.vue` Imports in TS - -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. - -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -pnpm install -``` - -### Compile and Hot-Reload for Development - -```sh -pnpm dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -pnpm build -``` diff --git a/typescript-jsx-pinia/env.d.ts b/typescript-jsx-pinia/env.d.ts deleted file mode 100644 index 636d9c3f..00000000 --- a/typescript-jsx-pinia/env.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -/// - -declare module '*.vue' { - import { DefineComponent } from 'vue' - // eslint-disable-next-line - const component: DefineComponent<{}, {}, any> - export default component -} diff --git a/typescript-jsx-pinia/index.html b/typescript-jsx-pinia/index.html deleted file mode 100644 index 11603f87..00000000 --- a/typescript-jsx-pinia/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/typescript-jsx-pinia/package.json b/typescript-jsx-pinia/package.json deleted file mode 100644 index b7436763..00000000 --- a/typescript-jsx-pinia/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "typescript-jsx-pinia", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "typecheck": "vue-tsc --noEmit" - }, - "dependencies": { - "pinia": "^2.0.4", - "vue": "^3.2.22" - }, - "devDependencies": { - "@types/node": "^16.11.10", - "@vitejs/plugin-vue": "^1.10.0", - "@vitejs/plugin-vue-jsx": "^1.3.0", - "typescript": "~4.4.4", - "vite": "^2.6.14", - "vue-tsc": "^0.29.6" - } -} diff --git a/typescript-jsx-pinia/public/favicon.ico b/typescript-jsx-pinia/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/typescript-jsx-pinia/src/App.vue b/typescript-jsx-pinia/src/App.vue deleted file mode 100644 index d91eefc4..00000000 --- a/typescript-jsx-pinia/src/App.vue +++ /dev/null @@ -1,81 +0,0 @@ - - - - - diff --git a/typescript-jsx-pinia/src/assets/base.css b/typescript-jsx-pinia/src/assets/base.css deleted file mode 100644 index 5427a030..00000000 --- a/typescript-jsx-pinia/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/typescript-jsx-pinia/src/assets/logo.svg b/typescript-jsx-pinia/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/typescript-jsx-pinia/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/typescript-jsx-pinia/src/components/HelloWorld.vue b/typescript-jsx-pinia/src/components/HelloWorld.vue deleted file mode 100644 index 01118cd9..00000000 --- a/typescript-jsx-pinia/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/typescript-jsx-pinia/src/components/TheWelcome.vue b/typescript-jsx-pinia/src/components/TheWelcome.vue deleted file mode 100644 index b91a8edd..00000000 --- a/typescript-jsx-pinia/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/typescript-jsx-pinia/src/components/WelcomeItem.vue b/typescript-jsx-pinia/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/typescript-jsx-pinia/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/typescript-jsx-pinia/src/components/icons/IconCommunity.vue b/typescript-jsx-pinia/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/typescript-jsx-pinia/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-pinia/src/components/icons/IconDocumentation.vue b/typescript-jsx-pinia/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/typescript-jsx-pinia/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-pinia/src/components/icons/IconEcosystem.vue b/typescript-jsx-pinia/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/typescript-jsx-pinia/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-pinia/src/components/icons/IconSupport.vue b/typescript-jsx-pinia/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/typescript-jsx-pinia/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-pinia/src/components/icons/IconTooling.vue b/typescript-jsx-pinia/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/typescript-jsx-pinia/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/typescript-jsx-pinia/src/main.ts b/typescript-jsx-pinia/src/main.ts deleted file mode 100644 index 5f77a891..00000000 --- a/typescript-jsx-pinia/src/main.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createApp } from 'vue' -import { createPinia } from 'pinia' -import App from './App.vue' - -const app = createApp(App) - -app.use(createPinia()) - -app.mount('#app') diff --git a/typescript-jsx-pinia/src/stores/counter.ts b/typescript-jsx-pinia/src/stores/counter.ts deleted file mode 100644 index 4a2d2427..00000000 --- a/typescript-jsx-pinia/src/stores/counter.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { defineStore } from 'pinia' - -export const useCounterStore = defineStore({ - id: 'counter', - state: () => ({ - counter: 0 - }), - getters: { - doubleCount: (state) => state.counter * 2 - }, - actions: { - increment() { - this.counter++ - } - } -}) diff --git a/typescript-jsx-pinia/tsconfig.json b/typescript-jsx-pinia/tsconfig.json deleted file mode 100644 index 8c707192..00000000 --- a/typescript-jsx-pinia/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, - "paths": { - "@/*": ["src/*"] - }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] -} diff --git a/typescript-jsx-pinia/vite.config.ts b/typescript-jsx-pinia/vite.config.ts deleted file mode 100644 index f140f276..00000000 --- a/typescript-jsx-pinia/vite.config.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/typescript-jsx-router-pinia-with-tests/.gitignore b/typescript-jsx-router-pinia-with-tests/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/typescript-jsx-router-pinia-with-tests/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# 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/typescript-jsx-router-pinia-with-tests/README.md b/typescript-jsx-router-pinia-with-tests/README.md deleted file mode 100644 index 4353bb53..00000000 --- a/typescript-jsx-router-pinia-with-tests/README.md +++ /dev/null @@ -1,48 +0,0 @@ -# typescript-jsx-router-pinia-with-tests - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). - -## Type Support for `.vue` Imports in TS - -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. - -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -pnpm install -``` - -### Compile and Hot-Reload for Development - -```sh -pnpm dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -pnpm build -``` - -### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction) - -```sh -pnpm test:unit # or `pnpm test:unit:ci` for headless testing -``` - -### Run End-to-End Tests with [Cypress](https://www.cypress.io/) - -```sh -pnpm build -pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing -``` diff --git a/typescript-jsx-router-pinia-with-tests/cypress.json b/typescript-jsx-router-pinia-with-tests/cypress.json deleted file mode 100644 index 3d372252..00000000 --- a/typescript-jsx-router-pinia-with-tests/cypress.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "baseUrl": "http://localhost:5050/", - "component": { - "componentFolder": "src", - "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" - } -} diff --git a/typescript-jsx-router-pinia-with-tests/cypress/fixtures/example.json b/typescript-jsx-router-pinia-with-tests/cypress/fixtures/example.json deleted file mode 100644 index 02e42543..00000000 --- a/typescript-jsx-router-pinia-with-tests/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "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/typescript-jsx-router-pinia-with-tests/cypress/integration/example.spec.ts b/typescript-jsx-router-pinia-with-tests/cypress/integration/example.spec.ts deleted file mode 100644 index 13a2922b..00000000 --- a/typescript-jsx-router-pinia-with-tests/cypress/integration/example.spec.ts +++ /dev/null @@ -1,13 +0,0 @@ -// https://docs.cypress.io/api/introduction/api.html - -describe('My First Test', () => { - it('visits the app root url', () => { - cy.visit('/') - cy.contains('h1', 'You did it!') - }) - - it('navigates to the about page', () => { - cy.visit('/about') - cy.contains('h1', 'This is an about page') - }) -}) diff --git a/typescript-jsx-router-pinia-with-tests/cypress/plugins/index.ts b/typescript-jsx-router-pinia-with-tests/cypress/plugins/index.ts deleted file mode 100644 index ad2e351d..00000000 --- a/typescript-jsx-router-pinia-with-tests/cypress/plugins/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -/// -// *********************************************************** -// 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/typescript-jsx-router-pinia-with-tests/cypress/support/commands.ts b/typescript-jsx-router-pinia-with-tests/cypress/support/commands.ts deleted file mode 100644 index 119ab03f..00000000 --- a/typescript-jsx-router-pinia-with-tests/cypress/support/commands.ts +++ /dev/null @@ -1,25 +0,0 @@ -// *********************************************** -// 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/typescript-jsx-router-pinia-with-tests/cypress/support/index.ts b/typescript-jsx-router-pinia-with-tests/cypress/support/index.ts deleted file mode 100644 index d68db96d..00000000 --- a/typescript-jsx-router-pinia-with-tests/cypress/support/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -// *********************************************************** -// 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/typescript-jsx-router-pinia-with-tests/cypress/tsconfig.json b/typescript-jsx-router-pinia-with-tests/cypress/tsconfig.json deleted file mode 100644 index b5b2f972..00000000 --- a/typescript-jsx-router-pinia-with-tests/cypress/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["es5", "dom"], - "types": ["cypress"] - }, - "include": ["./**/*"] -} diff --git a/typescript-jsx-router-pinia-with-tests/env.d.ts b/typescript-jsx-router-pinia-with-tests/env.d.ts deleted file mode 100644 index 636d9c3f..00000000 --- a/typescript-jsx-router-pinia-with-tests/env.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -/// - -declare module '*.vue' { - import { DefineComponent } from 'vue' - // eslint-disable-next-line - const component: DefineComponent<{}, {}, any> - export default component -} diff --git a/typescript-jsx-router-pinia-with-tests/index.html b/typescript-jsx-router-pinia-with-tests/index.html deleted file mode 100644 index 11603f87..00000000 --- a/typescript-jsx-router-pinia-with-tests/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/typescript-jsx-router-pinia-with-tests/package.json b/typescript-jsx-router-pinia-with-tests/package.json deleted file mode 100644 index bf68ad2a..00000000 --- a/typescript-jsx-router-pinia-with-tests/package.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "name": "typescript-jsx-router-pinia-with-tests", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "test:unit": "cypress open-ct", - "test:unit:ci": "cypress run-ct --quiet --reporter spec", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'", - "typecheck": "vue-tsc --noEmit" - }, - "dependencies": { - "pinia": "^2.0.4", - "vue": "^3.2.22", - "vue-router": "^4.0.12" - }, - "devDependencies": { - "@cypress/vite-dev-server": "^2.2.1", - "@cypress/vue": "^3.0.5", - "@types/node": "^16.11.10", - "@vitejs/plugin-vue": "^1.10.0", - "@vitejs/plugin-vue-jsx": "^1.3.0", - "cypress": "^8.7.0", - "start-server-and-test": "^1.14.0", - "typescript": "~4.4.4", - "vite": "^2.6.14", - "vue-tsc": "^0.29.6" - } -} diff --git a/typescript-jsx-router-pinia-with-tests/public/favicon.ico b/typescript-jsx-router-pinia-with-tests/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/typescript-jsx-router-pinia-with-tests/src/App.vue b/typescript-jsx-router-pinia-with-tests/src/App.vue deleted file mode 100644 index 8a1e9b19..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/App.vue +++ /dev/null @@ -1,118 +0,0 @@ - - - - - diff --git a/typescript-jsx-router-pinia-with-tests/src/assets/base.css b/typescript-jsx-router-pinia-with-tests/src/assets/base.css deleted file mode 100644 index 71dc55a3..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/typescript-jsx-router-pinia-with-tests/src/assets/logo.svg b/typescript-jsx-router-pinia-with-tests/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/typescript-jsx-router-pinia-with-tests/src/components/HelloWorld.vue b/typescript-jsx-router-pinia-with-tests/src/components/HelloWorld.vue deleted file mode 100644 index 987adb9f..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/typescript-jsx-router-pinia-with-tests/src/components/TheWelcome.vue b/typescript-jsx-router-pinia-with-tests/src/components/TheWelcome.vue deleted file mode 100644 index b91a8edd..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/typescript-jsx-router-pinia-with-tests/src/components/WelcomeItem.vue b/typescript-jsx-router-pinia-with-tests/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/typescript-jsx-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts deleted file mode 100644 index a69f3a9d..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts +++ /dev/null @@ -1,13 +0,0 @@ -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') - }) -}) diff --git a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconCommunity.vue b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconDocumentation.vue b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconEcosystem.vue b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconSupport.vue b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconTooling.vue b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/typescript-jsx-router-pinia-with-tests/src/main.ts b/typescript-jsx-router-pinia-with-tests/src/main.ts deleted file mode 100644 index fda1e6e3..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { createApp } from 'vue' -import { createPinia } from 'pinia' - -import App from './App.vue' -import router from './router' - -const app = createApp(App) - -app.use(createPinia()) -app.use(router) - -app.mount('#app') diff --git a/typescript-jsx-router-pinia-with-tests/src/router/index.ts b/typescript-jsx-router-pinia-with-tests/src/router/index.ts deleted file mode 100644 index a49ae507..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/router/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' - -const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - name: 'home', - component: HomeView - }, - { - 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/AboutView.vue') - } - ] -}) - -export default router diff --git a/typescript-jsx-router-pinia-with-tests/src/stores/counter.ts b/typescript-jsx-router-pinia-with-tests/src/stores/counter.ts deleted file mode 100644 index 4a2d2427..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/stores/counter.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { defineStore } from 'pinia' - -export const useCounterStore = defineStore({ - id: 'counter', - state: () => ({ - counter: 0 - }), - getters: { - doubleCount: (state) => state.counter * 2 - }, - actions: { - increment() { - this.counter++ - } - } -}) diff --git a/typescript-jsx-router-pinia-with-tests/src/views/AboutView.vue b/typescript-jsx-router-pinia-with-tests/src/views/AboutView.vue deleted file mode 100644 index 756ad2a1..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/typescript-jsx-router-pinia-with-tests/src/views/HomeView.vue b/typescript-jsx-router-pinia-with-tests/src/views/HomeView.vue deleted file mode 100644 index 6555a646..00000000 --- a/typescript-jsx-router-pinia-with-tests/src/views/HomeView.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/typescript-jsx-router-pinia-with-tests/tsconfig.json b/typescript-jsx-router-pinia-with-tests/tsconfig.json deleted file mode 100644 index 8c707192..00000000 --- a/typescript-jsx-router-pinia-with-tests/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, - "paths": { - "@/*": ["src/*"] - }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] -} diff --git a/typescript-jsx-router-pinia-with-tests/vite.config.ts b/typescript-jsx-router-pinia-with-tests/vite.config.ts deleted file mode 100644 index f140f276..00000000 --- a/typescript-jsx-router-pinia-with-tests/vite.config.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/typescript-jsx-router-pinia/.gitignore b/typescript-jsx-router-pinia/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/typescript-jsx-router-pinia/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# 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/typescript-jsx-router-pinia/README.md b/typescript-jsx-router-pinia/README.md deleted file mode 100644 index a17dd346..00000000 --- a/typescript-jsx-router-pinia/README.md +++ /dev/null @@ -1,35 +0,0 @@ -# typescript-jsx-router-pinia - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). - -## Type Support for `.vue` Imports in TS - -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. - -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -pnpm install -``` - -### Compile and Hot-Reload for Development - -```sh -pnpm dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -pnpm build -``` diff --git a/typescript-jsx-router-pinia/env.d.ts b/typescript-jsx-router-pinia/env.d.ts deleted file mode 100644 index 636d9c3f..00000000 --- a/typescript-jsx-router-pinia/env.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -/// - -declare module '*.vue' { - import { DefineComponent } from 'vue' - // eslint-disable-next-line - const component: DefineComponent<{}, {}, any> - export default component -} diff --git a/typescript-jsx-router-pinia/index.html b/typescript-jsx-router-pinia/index.html deleted file mode 100644 index 11603f87..00000000 --- a/typescript-jsx-router-pinia/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/typescript-jsx-router-pinia/package.json b/typescript-jsx-router-pinia/package.json deleted file mode 100644 index 621a41a1..00000000 --- a/typescript-jsx-router-pinia/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "typescript-jsx-router-pinia", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "typecheck": "vue-tsc --noEmit" - }, - "dependencies": { - "pinia": "^2.0.4", - "vue": "^3.2.22", - "vue-router": "^4.0.12" - }, - "devDependencies": { - "@types/node": "^16.11.10", - "@vitejs/plugin-vue": "^1.10.0", - "@vitejs/plugin-vue-jsx": "^1.3.0", - "typescript": "~4.4.4", - "vite": "^2.6.14", - "vue-tsc": "^0.29.6" - } -} diff --git a/typescript-jsx-router-pinia/public/favicon.ico b/typescript-jsx-router-pinia/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/typescript-jsx-router-pinia/src/App.vue b/typescript-jsx-router-pinia/src/App.vue deleted file mode 100644 index 8a1e9b19..00000000 --- a/typescript-jsx-router-pinia/src/App.vue +++ /dev/null @@ -1,118 +0,0 @@ - - - - - diff --git a/typescript-jsx-router-pinia/src/assets/base.css b/typescript-jsx-router-pinia/src/assets/base.css deleted file mode 100644 index 71dc55a3..00000000 --- a/typescript-jsx-router-pinia/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/typescript-jsx-router-pinia/src/assets/logo.svg b/typescript-jsx-router-pinia/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/typescript-jsx-router-pinia/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/typescript-jsx-router-pinia/src/components/HelloWorld.vue b/typescript-jsx-router-pinia/src/components/HelloWorld.vue deleted file mode 100644 index 987adb9f..00000000 --- a/typescript-jsx-router-pinia/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/typescript-jsx-router-pinia/src/components/TheWelcome.vue b/typescript-jsx-router-pinia/src/components/TheWelcome.vue deleted file mode 100644 index b91a8edd..00000000 --- a/typescript-jsx-router-pinia/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/typescript-jsx-router-pinia/src/components/WelcomeItem.vue b/typescript-jsx-router-pinia/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/typescript-jsx-router-pinia/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/typescript-jsx-router-pinia/src/components/icons/IconCommunity.vue b/typescript-jsx-router-pinia/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/typescript-jsx-router-pinia/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router-pinia/src/components/icons/IconDocumentation.vue b/typescript-jsx-router-pinia/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/typescript-jsx-router-pinia/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router-pinia/src/components/icons/IconEcosystem.vue b/typescript-jsx-router-pinia/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/typescript-jsx-router-pinia/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router-pinia/src/components/icons/IconSupport.vue b/typescript-jsx-router-pinia/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/typescript-jsx-router-pinia/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router-pinia/src/components/icons/IconTooling.vue b/typescript-jsx-router-pinia/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/typescript-jsx-router-pinia/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/typescript-jsx-router-pinia/src/main.ts b/typescript-jsx-router-pinia/src/main.ts deleted file mode 100644 index fda1e6e3..00000000 --- a/typescript-jsx-router-pinia/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { createApp } from 'vue' -import { createPinia } from 'pinia' - -import App from './App.vue' -import router from './router' - -const app = createApp(App) - -app.use(createPinia()) -app.use(router) - -app.mount('#app') diff --git a/typescript-jsx-router-pinia/src/router/index.ts b/typescript-jsx-router-pinia/src/router/index.ts deleted file mode 100644 index a49ae507..00000000 --- a/typescript-jsx-router-pinia/src/router/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' - -const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - name: 'home', - component: HomeView - }, - { - 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/AboutView.vue') - } - ] -}) - -export default router diff --git a/typescript-jsx-router-pinia/src/stores/counter.ts b/typescript-jsx-router-pinia/src/stores/counter.ts deleted file mode 100644 index 4a2d2427..00000000 --- a/typescript-jsx-router-pinia/src/stores/counter.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { defineStore } from 'pinia' - -export const useCounterStore = defineStore({ - id: 'counter', - state: () => ({ - counter: 0 - }), - getters: { - doubleCount: (state) => state.counter * 2 - }, - actions: { - increment() { - this.counter++ - } - } -}) diff --git a/typescript-jsx-router-pinia/src/views/AboutView.vue b/typescript-jsx-router-pinia/src/views/AboutView.vue deleted file mode 100644 index 756ad2a1..00000000 --- a/typescript-jsx-router-pinia/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/typescript-jsx-router-pinia/src/views/HomeView.vue b/typescript-jsx-router-pinia/src/views/HomeView.vue deleted file mode 100644 index 6555a646..00000000 --- a/typescript-jsx-router-pinia/src/views/HomeView.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/typescript-jsx-router-pinia/tsconfig.json b/typescript-jsx-router-pinia/tsconfig.json deleted file mode 100644 index 8c707192..00000000 --- a/typescript-jsx-router-pinia/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, - "paths": { - "@/*": ["src/*"] - }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] -} diff --git a/typescript-jsx-router-pinia/vite.config.ts b/typescript-jsx-router-pinia/vite.config.ts deleted file mode 100644 index f140f276..00000000 --- a/typescript-jsx-router-pinia/vite.config.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/typescript-jsx-router-with-tests/.gitignore b/typescript-jsx-router-with-tests/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/typescript-jsx-router-with-tests/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# 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/typescript-jsx-router-with-tests/README.md b/typescript-jsx-router-with-tests/README.md deleted file mode 100644 index d75a9773..00000000 --- a/typescript-jsx-router-with-tests/README.md +++ /dev/null @@ -1,48 +0,0 @@ -# typescript-jsx-router-with-tests - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). - -## Type Support for `.vue` Imports in TS - -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. - -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -pnpm install -``` - -### Compile and Hot-Reload for Development - -```sh -pnpm dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -pnpm build -``` - -### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction) - -```sh -pnpm test:unit # or `pnpm test:unit:ci` for headless testing -``` - -### Run End-to-End Tests with [Cypress](https://www.cypress.io/) - -```sh -pnpm build -pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing -``` diff --git a/typescript-jsx-router-with-tests/cypress.json b/typescript-jsx-router-with-tests/cypress.json deleted file mode 100644 index 3d372252..00000000 --- a/typescript-jsx-router-with-tests/cypress.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "baseUrl": "http://localhost:5050/", - "component": { - "componentFolder": "src", - "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" - } -} diff --git a/typescript-jsx-router-with-tests/cypress/fixtures/example.json b/typescript-jsx-router-with-tests/cypress/fixtures/example.json deleted file mode 100644 index 02e42543..00000000 --- a/typescript-jsx-router-with-tests/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "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/typescript-jsx-router-with-tests/cypress/integration/example.spec.ts b/typescript-jsx-router-with-tests/cypress/integration/example.spec.ts deleted file mode 100644 index 13a2922b..00000000 --- a/typescript-jsx-router-with-tests/cypress/integration/example.spec.ts +++ /dev/null @@ -1,13 +0,0 @@ -// https://docs.cypress.io/api/introduction/api.html - -describe('My First Test', () => { - it('visits the app root url', () => { - cy.visit('/') - cy.contains('h1', 'You did it!') - }) - - it('navigates to the about page', () => { - cy.visit('/about') - cy.contains('h1', 'This is an about page') - }) -}) diff --git a/typescript-jsx-router-with-tests/cypress/plugins/index.ts b/typescript-jsx-router-with-tests/cypress/plugins/index.ts deleted file mode 100644 index ad2e351d..00000000 --- a/typescript-jsx-router-with-tests/cypress/plugins/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -/// -// *********************************************************** -// 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/typescript-jsx-router-with-tests/cypress/support/commands.ts b/typescript-jsx-router-with-tests/cypress/support/commands.ts deleted file mode 100644 index 119ab03f..00000000 --- a/typescript-jsx-router-with-tests/cypress/support/commands.ts +++ /dev/null @@ -1,25 +0,0 @@ -// *********************************************** -// 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/typescript-jsx-router-with-tests/cypress/support/index.ts b/typescript-jsx-router-with-tests/cypress/support/index.ts deleted file mode 100644 index d68db96d..00000000 --- a/typescript-jsx-router-with-tests/cypress/support/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -// *********************************************************** -// 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/typescript-jsx-router-with-tests/cypress/tsconfig.json b/typescript-jsx-router-with-tests/cypress/tsconfig.json deleted file mode 100644 index b5b2f972..00000000 --- a/typescript-jsx-router-with-tests/cypress/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["es5", "dom"], - "types": ["cypress"] - }, - "include": ["./**/*"] -} diff --git a/typescript-jsx-router-with-tests/env.d.ts b/typescript-jsx-router-with-tests/env.d.ts deleted file mode 100644 index 636d9c3f..00000000 --- a/typescript-jsx-router-with-tests/env.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -/// - -declare module '*.vue' { - import { DefineComponent } from 'vue' - // eslint-disable-next-line - const component: DefineComponent<{}, {}, any> - export default component -} diff --git a/typescript-jsx-router-with-tests/index.html b/typescript-jsx-router-with-tests/index.html deleted file mode 100644 index 11603f87..00000000 --- a/typescript-jsx-router-with-tests/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/typescript-jsx-router-with-tests/package.json b/typescript-jsx-router-with-tests/package.json deleted file mode 100644 index cc74af24..00000000 --- a/typescript-jsx-router-with-tests/package.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "name": "typescript-jsx-router-with-tests", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "test:unit": "cypress open-ct", - "test:unit:ci": "cypress run-ct --quiet --reporter spec", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'", - "typecheck": "vue-tsc --noEmit" - }, - "dependencies": { - "vue": "^3.2.22", - "vue-router": "^4.0.12" - }, - "devDependencies": { - "@cypress/vite-dev-server": "^2.2.1", - "@cypress/vue": "^3.0.5", - "@types/node": "^16.11.10", - "@vitejs/plugin-vue": "^1.10.0", - "@vitejs/plugin-vue-jsx": "^1.3.0", - "cypress": "^8.7.0", - "start-server-and-test": "^1.14.0", - "typescript": "~4.4.4", - "vite": "^2.6.14", - "vue-tsc": "^0.29.6" - } -} diff --git a/typescript-jsx-router-with-tests/public/favicon.ico b/typescript-jsx-router-with-tests/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/typescript-jsx-router-with-tests/src/App.vue b/typescript-jsx-router-with-tests/src/App.vue deleted file mode 100644 index 8a1e9b19..00000000 --- a/typescript-jsx-router-with-tests/src/App.vue +++ /dev/null @@ -1,118 +0,0 @@ - - - - - diff --git a/typescript-jsx-router-with-tests/src/assets/base.css b/typescript-jsx-router-with-tests/src/assets/base.css deleted file mode 100644 index 71dc55a3..00000000 --- a/typescript-jsx-router-with-tests/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/typescript-jsx-router-with-tests/src/assets/logo.svg b/typescript-jsx-router-with-tests/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/typescript-jsx-router-with-tests/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/typescript-jsx-router-with-tests/src/components/HelloWorld.vue b/typescript-jsx-router-with-tests/src/components/HelloWorld.vue deleted file mode 100644 index 987adb9f..00000000 --- a/typescript-jsx-router-with-tests/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/typescript-jsx-router-with-tests/src/components/TheWelcome.vue b/typescript-jsx-router-with-tests/src/components/TheWelcome.vue deleted file mode 100644 index b91a8edd..00000000 --- a/typescript-jsx-router-with-tests/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/typescript-jsx-router-with-tests/src/components/WelcomeItem.vue b/typescript-jsx-router-with-tests/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/typescript-jsx-router-with-tests/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/typescript-jsx-router-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-router-with-tests/src/components/__tests__/HelloWorld.spec.ts deleted file mode 100644 index a69f3a9d..00000000 --- a/typescript-jsx-router-with-tests/src/components/__tests__/HelloWorld.spec.ts +++ /dev/null @@ -1,13 +0,0 @@ -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') - }) -}) diff --git a/typescript-jsx-router-with-tests/src/components/icons/IconCommunity.vue b/typescript-jsx-router-with-tests/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/typescript-jsx-router-with-tests/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router-with-tests/src/components/icons/IconDocumentation.vue b/typescript-jsx-router-with-tests/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/typescript-jsx-router-with-tests/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router-with-tests/src/components/icons/IconEcosystem.vue b/typescript-jsx-router-with-tests/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/typescript-jsx-router-with-tests/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router-with-tests/src/components/icons/IconSupport.vue b/typescript-jsx-router-with-tests/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/typescript-jsx-router-with-tests/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router-with-tests/src/components/icons/IconTooling.vue b/typescript-jsx-router-with-tests/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/typescript-jsx-router-with-tests/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/typescript-jsx-router-with-tests/src/main.ts b/typescript-jsx-router-with-tests/src/main.ts deleted file mode 100644 index c8e37b03..00000000 --- a/typescript-jsx-router-with-tests/src/main.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createApp } from 'vue' -import App from './App.vue' -import router from './router' - -const app = createApp(App) - -app.use(router) - -app.mount('#app') diff --git a/typescript-jsx-router-with-tests/src/router/index.ts b/typescript-jsx-router-with-tests/src/router/index.ts deleted file mode 100644 index a49ae507..00000000 --- a/typescript-jsx-router-with-tests/src/router/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' - -const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - name: 'home', - component: HomeView - }, - { - 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/AboutView.vue') - } - ] -}) - -export default router diff --git a/typescript-jsx-router-with-tests/src/views/AboutView.vue b/typescript-jsx-router-with-tests/src/views/AboutView.vue deleted file mode 100644 index 756ad2a1..00000000 --- a/typescript-jsx-router-with-tests/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/typescript-jsx-router-with-tests/src/views/HomeView.vue b/typescript-jsx-router-with-tests/src/views/HomeView.vue deleted file mode 100644 index 6555a646..00000000 --- a/typescript-jsx-router-with-tests/src/views/HomeView.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/typescript-jsx-router-with-tests/tsconfig.json b/typescript-jsx-router-with-tests/tsconfig.json deleted file mode 100644 index 8c707192..00000000 --- a/typescript-jsx-router-with-tests/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, - "paths": { - "@/*": ["src/*"] - }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] -} diff --git a/typescript-jsx-router-with-tests/vite.config.ts b/typescript-jsx-router-with-tests/vite.config.ts deleted file mode 100644 index f140f276..00000000 --- a/typescript-jsx-router-with-tests/vite.config.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/typescript-jsx-router/.gitignore b/typescript-jsx-router/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/typescript-jsx-router/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# 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/typescript-jsx-router/README.md b/typescript-jsx-router/README.md deleted file mode 100644 index 1b2118a3..00000000 --- a/typescript-jsx-router/README.md +++ /dev/null @@ -1,35 +0,0 @@ -# typescript-jsx-router - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). - -## Type Support for `.vue` Imports in TS - -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. - -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -pnpm install -``` - -### Compile and Hot-Reload for Development - -```sh -pnpm dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -pnpm build -``` diff --git a/typescript-jsx-router/env.d.ts b/typescript-jsx-router/env.d.ts deleted file mode 100644 index 636d9c3f..00000000 --- a/typescript-jsx-router/env.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -/// - -declare module '*.vue' { - import { DefineComponent } from 'vue' - // eslint-disable-next-line - const component: DefineComponent<{}, {}, any> - export default component -} diff --git a/typescript-jsx-router/index.html b/typescript-jsx-router/index.html deleted file mode 100644 index 11603f87..00000000 --- a/typescript-jsx-router/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/typescript-jsx-router/package.json b/typescript-jsx-router/package.json deleted file mode 100644 index d54b04ca..00000000 --- a/typescript-jsx-router/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "typescript-jsx-router", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "typecheck": "vue-tsc --noEmit" - }, - "dependencies": { - "vue": "^3.2.22", - "vue-router": "^4.0.12" - }, - "devDependencies": { - "@types/node": "^16.11.10", - "@vitejs/plugin-vue": "^1.10.0", - "@vitejs/plugin-vue-jsx": "^1.3.0", - "typescript": "~4.4.4", - "vite": "^2.6.14", - "vue-tsc": "^0.29.6" - } -} diff --git a/typescript-jsx-router/public/favicon.ico b/typescript-jsx-router/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/typescript-jsx-router/src/App.vue b/typescript-jsx-router/src/App.vue deleted file mode 100644 index 8a1e9b19..00000000 --- a/typescript-jsx-router/src/App.vue +++ /dev/null @@ -1,118 +0,0 @@ - - - - - diff --git a/typescript-jsx-router/src/assets/base.css b/typescript-jsx-router/src/assets/base.css deleted file mode 100644 index 71dc55a3..00000000 --- a/typescript-jsx-router/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/typescript-jsx-router/src/assets/logo.svg b/typescript-jsx-router/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/typescript-jsx-router/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/typescript-jsx-router/src/components/HelloWorld.vue b/typescript-jsx-router/src/components/HelloWorld.vue deleted file mode 100644 index 987adb9f..00000000 --- a/typescript-jsx-router/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/typescript-jsx-router/src/components/TheWelcome.vue b/typescript-jsx-router/src/components/TheWelcome.vue deleted file mode 100644 index b91a8edd..00000000 --- a/typescript-jsx-router/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/typescript-jsx-router/src/components/WelcomeItem.vue b/typescript-jsx-router/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/typescript-jsx-router/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/typescript-jsx-router/src/components/icons/IconCommunity.vue b/typescript-jsx-router/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/typescript-jsx-router/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router/src/components/icons/IconDocumentation.vue b/typescript-jsx-router/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/typescript-jsx-router/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router/src/components/icons/IconEcosystem.vue b/typescript-jsx-router/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/typescript-jsx-router/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router/src/components/icons/IconSupport.vue b/typescript-jsx-router/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/typescript-jsx-router/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-router/src/components/icons/IconTooling.vue b/typescript-jsx-router/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/typescript-jsx-router/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/typescript-jsx-router/src/main.ts b/typescript-jsx-router/src/main.ts deleted file mode 100644 index c8e37b03..00000000 --- a/typescript-jsx-router/src/main.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createApp } from 'vue' -import App from './App.vue' -import router from './router' - -const app = createApp(App) - -app.use(router) - -app.mount('#app') diff --git a/typescript-jsx-router/src/router/index.ts b/typescript-jsx-router/src/router/index.ts deleted file mode 100644 index a49ae507..00000000 --- a/typescript-jsx-router/src/router/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' - -const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - name: 'home', - component: HomeView - }, - { - 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/AboutView.vue') - } - ] -}) - -export default router diff --git a/typescript-jsx-router/src/views/AboutView.vue b/typescript-jsx-router/src/views/AboutView.vue deleted file mode 100644 index 756ad2a1..00000000 --- a/typescript-jsx-router/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/typescript-jsx-router/src/views/HomeView.vue b/typescript-jsx-router/src/views/HomeView.vue deleted file mode 100644 index 6555a646..00000000 --- a/typescript-jsx-router/src/views/HomeView.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/typescript-jsx-router/tsconfig.json b/typescript-jsx-router/tsconfig.json deleted file mode 100644 index 8c707192..00000000 --- a/typescript-jsx-router/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, - "paths": { - "@/*": ["src/*"] - }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] -} diff --git a/typescript-jsx-router/vite.config.ts b/typescript-jsx-router/vite.config.ts deleted file mode 100644 index f140f276..00000000 --- a/typescript-jsx-router/vite.config.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/typescript-jsx-with-tests/.gitignore b/typescript-jsx-with-tests/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/typescript-jsx-with-tests/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# 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/typescript-jsx-with-tests/README.md b/typescript-jsx-with-tests/README.md deleted file mode 100644 index d6d8250f..00000000 --- a/typescript-jsx-with-tests/README.md +++ /dev/null @@ -1,48 +0,0 @@ -# typescript-jsx-with-tests - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). - -## Type Support for `.vue` Imports in TS - -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. - -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -pnpm install -``` - -### Compile and Hot-Reload for Development - -```sh -pnpm dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -pnpm build -``` - -### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction) - -```sh -pnpm test:unit # or `pnpm test:unit:ci` for headless testing -``` - -### Run End-to-End Tests with [Cypress](https://www.cypress.io/) - -```sh -pnpm build -pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing -``` diff --git a/typescript-jsx-with-tests/cypress.json b/typescript-jsx-with-tests/cypress.json deleted file mode 100644 index 3d372252..00000000 --- a/typescript-jsx-with-tests/cypress.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "baseUrl": "http://localhost:5050/", - "component": { - "componentFolder": "src", - "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" - } -} diff --git a/typescript-jsx-with-tests/cypress/fixtures/example.json b/typescript-jsx-with-tests/cypress/fixtures/example.json deleted file mode 100644 index 02e42543..00000000 --- a/typescript-jsx-with-tests/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "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/typescript-jsx-with-tests/cypress/integration/example.spec.ts b/typescript-jsx-with-tests/cypress/integration/example.spec.ts deleted file mode 100644 index 7a8c909f..00000000 --- a/typescript-jsx-with-tests/cypress/integration/example.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -// https://docs.cypress.io/api/introduction/api.html - -describe('My First Test', () => { - it('visits the app root url', () => { - cy.visit('/') - cy.contains('h1', 'You did it!') - }) -}) diff --git a/typescript-jsx-with-tests/cypress/plugins/index.ts b/typescript-jsx-with-tests/cypress/plugins/index.ts deleted file mode 100644 index ad2e351d..00000000 --- a/typescript-jsx-with-tests/cypress/plugins/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -/// -// *********************************************************** -// 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/typescript-jsx-with-tests/cypress/support/commands.ts b/typescript-jsx-with-tests/cypress/support/commands.ts deleted file mode 100644 index 119ab03f..00000000 --- a/typescript-jsx-with-tests/cypress/support/commands.ts +++ /dev/null @@ -1,25 +0,0 @@ -// *********************************************** -// 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/typescript-jsx-with-tests/cypress/support/index.ts b/typescript-jsx-with-tests/cypress/support/index.ts deleted file mode 100644 index d68db96d..00000000 --- a/typescript-jsx-with-tests/cypress/support/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -// *********************************************************** -// 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/typescript-jsx-with-tests/cypress/tsconfig.json b/typescript-jsx-with-tests/cypress/tsconfig.json deleted file mode 100644 index b5b2f972..00000000 --- a/typescript-jsx-with-tests/cypress/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["es5", "dom"], - "types": ["cypress"] - }, - "include": ["./**/*"] -} diff --git a/typescript-jsx-with-tests/env.d.ts b/typescript-jsx-with-tests/env.d.ts deleted file mode 100644 index 636d9c3f..00000000 --- a/typescript-jsx-with-tests/env.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -/// - -declare module '*.vue' { - import { DefineComponent } from 'vue' - // eslint-disable-next-line - const component: DefineComponent<{}, {}, any> - export default component -} diff --git a/typescript-jsx-with-tests/index.html b/typescript-jsx-with-tests/index.html deleted file mode 100644 index 11603f87..00000000 --- a/typescript-jsx-with-tests/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/typescript-jsx-with-tests/package.json b/typescript-jsx-with-tests/package.json deleted file mode 100644 index 7c397df0..00000000 --- a/typescript-jsx-with-tests/package.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "name": "typescript-jsx-with-tests", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "test:unit": "cypress open-ct", - "test:unit:ci": "cypress run-ct --quiet --reporter spec", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'", - "typecheck": "vue-tsc --noEmit" - }, - "dependencies": { - "vue": "^3.2.22" - }, - "devDependencies": { - "@cypress/vite-dev-server": "^2.2.1", - "@cypress/vue": "^3.0.5", - "@types/node": "^16.11.10", - "@vitejs/plugin-vue": "^1.10.0", - "@vitejs/plugin-vue-jsx": "^1.3.0", - "cypress": "^8.7.0", - "start-server-and-test": "^1.14.0", - "typescript": "~4.4.4", - "vite": "^2.6.14", - "vue-tsc": "^0.29.6" - } -} diff --git a/typescript-jsx-with-tests/public/favicon.ico b/typescript-jsx-with-tests/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/typescript-jsx-with-tests/src/App.vue b/typescript-jsx-with-tests/src/App.vue deleted file mode 100644 index d91eefc4..00000000 --- a/typescript-jsx-with-tests/src/App.vue +++ /dev/null @@ -1,81 +0,0 @@ - - - - - diff --git a/typescript-jsx-with-tests/src/assets/base.css b/typescript-jsx-with-tests/src/assets/base.css deleted file mode 100644 index 5427a030..00000000 --- a/typescript-jsx-with-tests/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/typescript-jsx-with-tests/src/assets/logo.svg b/typescript-jsx-with-tests/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/typescript-jsx-with-tests/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/typescript-jsx-with-tests/src/components/HelloWorld.vue b/typescript-jsx-with-tests/src/components/HelloWorld.vue deleted file mode 100644 index 01118cd9..00000000 --- a/typescript-jsx-with-tests/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/typescript-jsx-with-tests/src/components/TheWelcome.vue b/typescript-jsx-with-tests/src/components/TheWelcome.vue deleted file mode 100644 index b91a8edd..00000000 --- a/typescript-jsx-with-tests/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/typescript-jsx-with-tests/src/components/WelcomeItem.vue b/typescript-jsx-with-tests/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/typescript-jsx-with-tests/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/typescript-jsx-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-with-tests/src/components/__tests__/HelloWorld.spec.ts deleted file mode 100644 index a69f3a9d..00000000 --- a/typescript-jsx-with-tests/src/components/__tests__/HelloWorld.spec.ts +++ /dev/null @@ -1,13 +0,0 @@ -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') - }) -}) diff --git a/typescript-jsx-with-tests/src/components/icons/IconCommunity.vue b/typescript-jsx-with-tests/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/typescript-jsx-with-tests/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-with-tests/src/components/icons/IconDocumentation.vue b/typescript-jsx-with-tests/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/typescript-jsx-with-tests/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-with-tests/src/components/icons/IconEcosystem.vue b/typescript-jsx-with-tests/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/typescript-jsx-with-tests/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-with-tests/src/components/icons/IconSupport.vue b/typescript-jsx-with-tests/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/typescript-jsx-with-tests/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx-with-tests/src/components/icons/IconTooling.vue b/typescript-jsx-with-tests/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/typescript-jsx-with-tests/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/typescript-jsx-with-tests/src/main.ts b/typescript-jsx-with-tests/src/main.ts deleted file mode 100644 index 01433bca..00000000 --- a/typescript-jsx-with-tests/src/main.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { createApp } from 'vue' -import App from './App.vue' - -createApp(App).mount('#app') diff --git a/typescript-jsx-with-tests/tsconfig.json b/typescript-jsx-with-tests/tsconfig.json deleted file mode 100644 index 8c707192..00000000 --- a/typescript-jsx-with-tests/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, - "paths": { - "@/*": ["src/*"] - }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] -} diff --git a/typescript-jsx-with-tests/vite.config.ts b/typescript-jsx-with-tests/vite.config.ts deleted file mode 100644 index f140f276..00000000 --- a/typescript-jsx-with-tests/vite.config.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/typescript-jsx/.gitignore b/typescript-jsx/.gitignore deleted file mode 100644 index 133da84e..00000000 --- a/typescript-jsx/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# 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/typescript-jsx/README.md b/typescript-jsx/README.md deleted file mode 100644 index 0b75eadb..00000000 --- a/typescript-jsx/README.md +++ /dev/null @@ -1,35 +0,0 @@ -# typescript-jsx - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). - -## Type Support for `.vue` Imports in TS - -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. - -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -pnpm install -``` - -### Compile and Hot-Reload for Development - -```sh -pnpm dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -pnpm build -``` diff --git a/typescript-jsx/env.d.ts b/typescript-jsx/env.d.ts deleted file mode 100644 index 636d9c3f..00000000 --- a/typescript-jsx/env.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -/// - -declare module '*.vue' { - import { DefineComponent } from 'vue' - // eslint-disable-next-line - const component: DefineComponent<{}, {}, any> - export default component -} diff --git a/typescript-jsx/index.html b/typescript-jsx/index.html deleted file mode 100644 index 11603f87..00000000 --- a/typescript-jsx/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/typescript-jsx/package.json b/typescript-jsx/package.json deleted file mode 100644 index 54f115c4..00000000 --- a/typescript-jsx/package.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "typescript-jsx", - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "typecheck": "vue-tsc --noEmit" - }, - "dependencies": { - "vue": "^3.2.22" - }, - "devDependencies": { - "@types/node": "^16.11.10", - "@vitejs/plugin-vue": "^1.10.0", - "@vitejs/plugin-vue-jsx": "^1.3.0", - "typescript": "~4.4.4", - "vite": "^2.6.14", - "vue-tsc": "^0.29.6" - } -} diff --git a/typescript-jsx/public/favicon.ico b/typescript-jsx/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/typescript-jsx/src/App.vue b/typescript-jsx/src/App.vue deleted file mode 100644 index d91eefc4..00000000 --- a/typescript-jsx/src/App.vue +++ /dev/null @@ -1,81 +0,0 @@ - - - - - diff --git a/typescript-jsx/src/assets/base.css b/typescript-jsx/src/assets/base.css deleted file mode 100644 index 5427a030..00000000 --- a/typescript-jsx/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/typescript-jsx/src/assets/logo.svg b/typescript-jsx/src/assets/logo.svg deleted file mode 100644 index bc826fed..00000000 --- a/typescript-jsx/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/typescript-jsx/src/components/HelloWorld.vue b/typescript-jsx/src/components/HelloWorld.vue deleted file mode 100644 index 01118cd9..00000000 --- a/typescript-jsx/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/typescript-jsx/src/components/TheWelcome.vue b/typescript-jsx/src/components/TheWelcome.vue deleted file mode 100644 index b91a8edd..00000000 --- a/typescript-jsx/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/typescript-jsx/src/components/WelcomeItem.vue b/typescript-jsx/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33..00000000 --- a/typescript-jsx/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/typescript-jsx/src/components/icons/IconCommunity.vue b/typescript-jsx/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/typescript-jsx/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx/src/components/icons/IconDocumentation.vue b/typescript-jsx/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/typescript-jsx/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx/src/components/icons/IconEcosystem.vue b/typescript-jsx/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/typescript-jsx/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx/src/components/icons/IconSupport.vue b/typescript-jsx/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/typescript-jsx/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/typescript-jsx/src/components/icons/IconTooling.vue b/typescript-jsx/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/typescript-jsx/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/typescript-jsx/src/main.ts b/typescript-jsx/src/main.ts deleted file mode 100644 index 01433bca..00000000 --- a/typescript-jsx/src/main.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { createApp } from 'vue' -import App from './App.vue' - -createApp(App).mount('#app') diff --git a/typescript-jsx/tsconfig.json b/typescript-jsx/tsconfig.json deleted file mode 100644 index 8c707192..00000000 --- a/typescript-jsx/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, - "paths": { - "@/*": ["src/*"] - }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] -} diff --git a/typescript-jsx/vite.config.ts b/typescript-jsx/vite.config.ts deleted file mode 100644 index f140f276..00000000 --- a/typescript-jsx/vite.config.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { fileURLToPath } from 'url' - -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: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) diff --git a/typescript-pinia-with-tests/env.d.ts b/typescript-pinia-with-tests/env.d.ts index 636d9c3f..dc50f12e 100644 --- a/typescript-pinia-with-tests/env.d.ts +++ b/typescript-pinia-with-tests/env.d.ts @@ -1,8 +1,16 @@ /// declare module '*.vue' { - import { DefineComponent } from 'vue' - // eslint-disable-next-line - const component: DefineComponent<{}, {}, any> - export default component + import Vue from 'vue' + export default Vue +} + +declare global { + namespace JSX { + interface Element extends VNode {} + interface ElementClass extends Vue {} + interface IntrinsicElements { + [elem: string]: any + } + } } diff --git a/typescript-pinia-with-tests/package.json b/typescript-pinia-with-tests/package.json index 405f42e2..8d08c4db 100644 --- a/typescript-pinia-with-tests/package.json +++ b/typescript-pinia-with-tests/package.json @@ -12,18 +12,22 @@ "typecheck": "vue-tsc --noEmit" }, "dependencies": { + "@vue/composition-api": "^1.4.0", "pinia": "^2.0.4", - "vue": "^3.2.22" + "vue": "^2.6.14" }, "devDependencies": { "@cypress/vite-dev-server": "^2.2.1", - "@cypress/vue": "^3.0.5", + "@cypress/vue": "^2.2.4", "@types/node": "^16.11.10", - "@vitejs/plugin-vue": "^1.10.0", + "@vue/runtime-dom": "^3.2.22", "cypress": "^8.7.0", "start-server-and-test": "^1.14.0", "typescript": "~4.4.4", + "unplugin-vue2-script-setup": "^0.7.1", "vite": "^2.6.14", + "vite-plugin-vue2": "^1.9.0", + "vue-template-compiler": "^2.6.14", "vue-tsc": "^0.29.6" } } diff --git a/typescript-pinia-with-tests/src/App.vue b/typescript-pinia-with-tests/src/App.vue index d91eefc4..794bc449 100644 --- a/typescript-pinia-with-tests/src/App.vue +++ b/typescript-pinia-with-tests/src/App.vue @@ -4,17 +4,19 @@ import TheWelcome from './components/TheWelcome.vue' diff --git a/cypress/src/assets/base.css b/cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/cypress/src/assets/logo.svg b/cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cypress/src/components/HelloWorld.vue b/cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/cypress/src/components/TheWelcome.vue b/cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/cypress/src/components/WelcomeItem.vue b/cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/cypress/src/components/__tests__/HelloWorld.cy.js b/cypress/src/components/__tests__/HelloWorld.cy.js new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/cypress/src/components/__tests__/HelloWorld.cy.js @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/cypress/src/components/icons/IconCommunity.vue b/cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/cypress/src/components/icons/IconDocumentation.vue b/cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/cypress/src/components/icons/IconEcosystem.vue b/cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/cypress/src/components/icons/IconSupport.vue b/cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/cypress/src/components/icons/IconTooling.vue b/cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/cypress/src/main.js b/cypress/src/main.js new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/cypress/src/main.js @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/cypress/vite.config.js b/cypress/vite.config.js new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/cypress/vite.config.js @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/default/README.md b/default/README.md index 02fe0be7..46c62b77 100644 --- a/default/README.md +++ b/default/README.md @@ -1,10 +1,10 @@ # default -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Customize configuration diff --git a/default/package.json b/default/package.json index 74e5c7a0..fbd0a36f 100644 --- a/default/package.json +++ b/default/package.json @@ -4,14 +4,14 @@ "scripts": { "dev": "vite", "build": "vite build", - "preview": "vite preview --port 5050" + "preview": "vite preview --port 4173" }, "dependencies": { - "vue": "^2.7.0-0" + "vue": "^2.7.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "vite": "^2.8.4" + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "vite": "^2.9.14" } } diff --git a/jsx-cypress/.gitignore b/jsx-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-cypress/.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/jsx-cypress/README.md b/jsx-cypress/README.md new file mode 100644 index 00000000..0759480a --- /dev/null +++ b/jsx-cypress/README.md @@ -0,0 +1,42 @@ +# jsx-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/jsx-cypress/cypress.config.js b/jsx-cypress/cypress.config.js new file mode 100644 index 00000000..c3aba743 --- /dev/null +++ b/jsx-cypress/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' + } + } +}) diff --git a/typescript-pinia-with-tests/cypress/integration/example.spec.ts b/jsx-cypress/cypress/e2e/example.cy.js similarity index 100% rename from typescript-pinia-with-tests/cypress/integration/example.spec.ts rename to jsx-cypress/cypress/e2e/example.cy.js diff --git a/pinia-with-tests/cypress/jsconfig.json b/jsx-cypress/cypress/e2e/jsconfig.json similarity index 70% rename from pinia-with-tests/cypress/jsconfig.json rename to jsx-cypress/cypress/e2e/jsconfig.json index b5b2f972..c790a70d 100644 --- a/pinia-with-tests/cypress/jsconfig.json +++ b/jsx-cypress/cypress/e2e/jsconfig.json @@ -4,5 +4,5 @@ "lib": ["es5", "dom"], "types": ["cypress"] }, - "include": ["./**/*"] + "include": ["./**/*", "../support/**/*"] } diff --git a/jsx-cypress/cypress/fixtures/example.json b/jsx-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/jsx-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/jsx-cypress/cypress/support/commands.js b/jsx-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/jsx-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/jsx-cypress/cypress/support/component-index.html b/jsx-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/jsx-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/jsx-cypress/cypress/support/component.js b/jsx-cypress/cypress/support/component.js new file mode 100644 index 00000000..3d1a3d22 --- /dev/null +++ b/jsx-cypress/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/vue2' + +Cypress.Commands.add('mount', mount) + +// Example use: +// cy.mount(MyComponent) diff --git a/router-pinia-with-tests/cypress/support/index.js b/jsx-cypress/cypress/support/e2e.js similarity index 100% rename from router-pinia-with-tests/cypress/support/index.js rename to jsx-cypress/cypress/support/e2e.js diff --git a/jsx-cypress/index.html b/jsx-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-cypress/package.json b/jsx-cypress/package.json new file mode 100644 index 00000000..d63fdc7b --- /dev/null +++ b/jsx-cypress/package.json @@ -0,0 +1,24 @@ +{ + "name": "jsx-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "cypress": "^10.3.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14" + } +} diff --git a/jsx-cypress/public/favicon.ico b/jsx-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-cypress/src/App.vue b/jsx-cypress/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/jsx-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/jsx-cypress/src/assets/base.css b/jsx-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/jsx-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-cypress/src/assets/logo.svg b/jsx-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-cypress/src/components/HelloWorld.vue b/jsx-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-cypress/src/components/TheWelcome.vue b/jsx-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-cypress/src/components/WelcomeItem.vue b/jsx-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-cypress/src/components/__tests__/HelloWorld.cy.js b/jsx-cypress/src/components/__tests__/HelloWorld.cy.js new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/jsx-cypress/src/components/__tests__/HelloWorld.cy.js @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/jsx-cypress/src/components/icons/IconCommunity.vue b/jsx-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-cypress/src/components/icons/IconDocumentation.vue b/jsx-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-cypress/src/components/icons/IconEcosystem.vue b/jsx-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-cypress/src/components/icons/IconSupport.vue b/jsx-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-cypress/src/components/icons/IconTooling.vue b/jsx-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-cypress/src/main.js b/jsx-cypress/src/main.js new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/jsx-cypress/src/main.js @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-cypress/vite.config.js b/jsx-cypress/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-cypress/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-pinia-cypress/.gitignore b/jsx-pinia-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-pinia-cypress/.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/jsx-pinia-cypress/README.md b/jsx-pinia-cypress/README.md new file mode 100644 index 00000000..1ce12c70 --- /dev/null +++ b/jsx-pinia-cypress/README.md @@ -0,0 +1,42 @@ +# jsx-pinia-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/jsx-pinia-cypress/cypress.config.js b/jsx-pinia-cypress/cypress.config.js new file mode 100644 index 00000000..c3aba743 --- /dev/null +++ b/jsx-pinia-cypress/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' + } + } +}) diff --git a/typescript-with-tests/cypress/integration/example.spec.ts b/jsx-pinia-cypress/cypress/e2e/example.cy.js similarity index 100% rename from typescript-with-tests/cypress/integration/example.spec.ts rename to jsx-pinia-cypress/cypress/e2e/example.cy.js diff --git a/router-pinia-with-tests/cypress/jsconfig.json b/jsx-pinia-cypress/cypress/e2e/jsconfig.json similarity index 70% rename from router-pinia-with-tests/cypress/jsconfig.json rename to jsx-pinia-cypress/cypress/e2e/jsconfig.json index b5b2f972..c790a70d 100644 --- a/router-pinia-with-tests/cypress/jsconfig.json +++ b/jsx-pinia-cypress/cypress/e2e/jsconfig.json @@ -4,5 +4,5 @@ "lib": ["es5", "dom"], "types": ["cypress"] }, - "include": ["./**/*"] + "include": ["./**/*", "../support/**/*"] } diff --git a/jsx-pinia-cypress/cypress/fixtures/example.json b/jsx-pinia-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/jsx-pinia-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/jsx-pinia-cypress/cypress/support/commands.js b/jsx-pinia-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/jsx-pinia-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/jsx-pinia-cypress/cypress/support/component-index.html b/jsx-pinia-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/jsx-pinia-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/jsx-pinia-cypress/cypress/support/component.js b/jsx-pinia-cypress/cypress/support/component.js new file mode 100644 index 00000000..3d1a3d22 --- /dev/null +++ b/jsx-pinia-cypress/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/vue2' + +Cypress.Commands.add('mount', mount) + +// Example use: +// cy.mount(MyComponent) diff --git a/router-with-tests/cypress/support/index.js b/jsx-pinia-cypress/cypress/support/e2e.js similarity index 100% rename from router-with-tests/cypress/support/index.js rename to jsx-pinia-cypress/cypress/support/e2e.js diff --git a/jsx-pinia-cypress/index.html b/jsx-pinia-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-pinia-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-pinia-cypress/package.json b/jsx-pinia-cypress/package.json new file mode 100644 index 00000000..707e5213 --- /dev/null +++ b/jsx-pinia-cypress/package.json @@ -0,0 +1,25 @@ +{ + "name": "jsx-pinia-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "cypress": "^10.3.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14" + } +} diff --git a/jsx-pinia-cypress/public/favicon.ico b/jsx-pinia-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-pinia-cypress/src/App.vue b/jsx-pinia-cypress/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/jsx-pinia-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/jsx-pinia-cypress/src/assets/base.css b/jsx-pinia-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/jsx-pinia-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-pinia-cypress/src/assets/logo.svg b/jsx-pinia-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-pinia-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-pinia-cypress/src/components/HelloWorld.vue b/jsx-pinia-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-pinia-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-pinia-cypress/src/components/TheWelcome.vue b/jsx-pinia-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-pinia-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-pinia-cypress/src/components/WelcomeItem.vue b/jsx-pinia-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-pinia-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-pinia-cypress/src/components/__tests__/HelloWorld.cy.js b/jsx-pinia-cypress/src/components/__tests__/HelloWorld.cy.js new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/jsx-pinia-cypress/src/components/__tests__/HelloWorld.cy.js @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/jsx-pinia-cypress/src/components/icons/IconCommunity.vue b/jsx-pinia-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-pinia-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-cypress/src/components/icons/IconDocumentation.vue b/jsx-pinia-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-pinia-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-cypress/src/components/icons/IconEcosystem.vue b/jsx-pinia-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-pinia-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-cypress/src/components/icons/IconSupport.vue b/jsx-pinia-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-pinia-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-cypress/src/components/icons/IconTooling.vue b/jsx-pinia-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-pinia-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-pinia-cypress/src/main.js b/jsx-pinia-cypress/src/main.js new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/jsx-pinia-cypress/src/main.js @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-pinia-cypress/src/stores/counter.js b/jsx-pinia-cypress/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/jsx-pinia-cypress/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/jsx-pinia-cypress/vite.config.js b/jsx-pinia-cypress/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-pinia-cypress/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-pinia-vitest-cypress/.gitignore b/jsx-pinia-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-pinia-vitest-cypress/.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/jsx-pinia-vitest-cypress/README.md b/jsx-pinia-vitest-cypress/README.md new file mode 100644 index 00000000..be67a1bd --- /dev/null +++ b/jsx-pinia-vitest-cypress/README.md @@ -0,0 +1,42 @@ +# jsx-pinia-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/jsx-pinia-vitest-cypress/cypress.config.js b/jsx-pinia-vitest-cypress/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/jsx-pinia-vitest-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/' + } +}) diff --git a/with-tests/cypress/integration/example.spec.js b/jsx-pinia-vitest-cypress/cypress/e2e/example.cy.js similarity index 100% rename from with-tests/cypress/integration/example.spec.js rename to jsx-pinia-vitest-cypress/cypress/e2e/example.cy.js diff --git a/with-tests/cypress/jsconfig.json b/jsx-pinia-vitest-cypress/cypress/e2e/jsconfig.json similarity index 70% rename from with-tests/cypress/jsconfig.json rename to jsx-pinia-vitest-cypress/cypress/e2e/jsconfig.json index b5b2f972..c790a70d 100644 --- a/with-tests/cypress/jsconfig.json +++ b/jsx-pinia-vitest-cypress/cypress/e2e/jsconfig.json @@ -4,5 +4,5 @@ "lib": ["es5", "dom"], "types": ["cypress"] }, - "include": ["./**/*"] + "include": ["./**/*", "../support/**/*"] } diff --git a/jsx-pinia-vitest-cypress/cypress/fixtures/example.json b/jsx-pinia-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/jsx-pinia-vitest-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/jsx-pinia-vitest-cypress/cypress/support/commands.js b/jsx-pinia-vitest-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/jsx-pinia-vitest-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/typescript-pinia-with-tests/cypress/support/index.ts b/jsx-pinia-vitest-cypress/cypress/support/e2e.js similarity index 100% rename from typescript-pinia-with-tests/cypress/support/index.ts rename to jsx-pinia-vitest-cypress/cypress/support/e2e.js diff --git a/jsx-pinia-vitest-cypress/index.html b/jsx-pinia-vitest-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-pinia-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-pinia-vitest-cypress/package.json b/jsx-pinia-vitest-cypress/package.json new file mode 100644 index 00000000..98884e20 --- /dev/null +++ b/jsx-pinia-vitest-cypress/package.json @@ -0,0 +1,28 @@ +{ + "name": "jsx-pinia-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/jsx-pinia-vitest-cypress/public/favicon.ico b/jsx-pinia-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-pinia-vitest-cypress/src/App.vue b/jsx-pinia-vitest-cypress/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/jsx-pinia-vitest-cypress/src/assets/base.css b/jsx-pinia-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-pinia-vitest-cypress/src/assets/logo.svg b/jsx-pinia-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-pinia-vitest-cypress/src/components/HelloWorld.vue b/jsx-pinia-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-pinia-vitest-cypress/src/components/TheWelcome.vue b/jsx-pinia-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-pinia-vitest-cypress/src/components/WelcomeItem.vue b/jsx-pinia-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.js b/jsx-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/jsx-pinia-vitest-cypress/src/components/icons/IconCommunity.vue b/jsx-pinia-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue b/jsx-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue b/jsx-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-vitest-cypress/src/components/icons/IconSupport.vue b/jsx-pinia-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-vitest-cypress/src/components/icons/IconTooling.vue b/jsx-pinia-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-pinia-vitest-cypress/src/main.js b/jsx-pinia-vitest-cypress/src/main.js new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/main.js @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-pinia-vitest-cypress/src/stores/counter.js b/jsx-pinia-vitest-cypress/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/jsx-pinia-vitest-cypress/vite.config.js b/jsx-pinia-vitest-cypress/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-pinia-vitest-cypress/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-pinia-vitest/.gitignore b/jsx-pinia-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-pinia-vitest/.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/jsx-pinia-vitest/README.md b/jsx-pinia-vitest/README.md new file mode 100644 index 00000000..51625a96 --- /dev/null +++ b/jsx-pinia-vitest/README.md @@ -0,0 +1,35 @@ +# jsx-pinia-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/jsx-pinia-vitest/index.html b/jsx-pinia-vitest/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-pinia-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-pinia-vitest/package.json b/jsx-pinia-vitest/package.json new file mode 100644 index 00000000..31787ad0 --- /dev/null +++ b/jsx-pinia-vitest/package.json @@ -0,0 +1,24 @@ +{ + "name": "jsx-pinia-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "jsdom": "^20.0.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/jsx-pinia-vitest/public/favicon.ico b/jsx-pinia-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-pinia-vitest/src/App.vue b/jsx-pinia-vitest/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/jsx-pinia-vitest/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/jsx-pinia-vitest/src/assets/base.css b/jsx-pinia-vitest/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/jsx-pinia-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-pinia-vitest/src/assets/logo.svg b/jsx-pinia-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-pinia-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-pinia-vitest/src/components/HelloWorld.vue b/jsx-pinia-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-pinia-vitest/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-pinia-vitest/src/components/TheWelcome.vue b/jsx-pinia-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-pinia-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-pinia-vitest/src/components/WelcomeItem.vue b/jsx-pinia-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-pinia-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-pinia-vitest/src/components/__tests__/HelloWorld.spec.js b/jsx-pinia-vitest/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/jsx-pinia-vitest/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/jsx-pinia-vitest/src/components/icons/IconCommunity.vue b/jsx-pinia-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-pinia-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-vitest/src/components/icons/IconDocumentation.vue b/jsx-pinia-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-pinia-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-vitest/src/components/icons/IconEcosystem.vue b/jsx-pinia-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-pinia-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-vitest/src/components/icons/IconSupport.vue b/jsx-pinia-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-pinia-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-vitest/src/components/icons/IconTooling.vue b/jsx-pinia-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-pinia-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-pinia-vitest/src/main.js b/jsx-pinia-vitest/src/main.js new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/jsx-pinia-vitest/src/main.js @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-pinia-vitest/src/stores/counter.js b/jsx-pinia-vitest/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/jsx-pinia-vitest/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/jsx-pinia-vitest/vite.config.js b/jsx-pinia-vitest/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-pinia-vitest/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-pinia-with-tests/.gitignore b/jsx-pinia-with-tests/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-pinia-with-tests/.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/jsx-pinia-with-tests/README.md b/jsx-pinia-with-tests/README.md new file mode 100644 index 00000000..f71ec1da --- /dev/null +++ b/jsx-pinia-with-tests/README.md @@ -0,0 +1,42 @@ +# jsx-pinia-with-tests + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/jsx-pinia-with-tests/cypress.config.js b/jsx-pinia-with-tests/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/jsx-pinia-with-tests/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/' + } +}) diff --git a/router-pinia-with-tests/cypress/integration/example.spec.js b/jsx-pinia-with-tests/cypress/e2e/example.cy.js similarity index 61% rename from router-pinia-with-tests/cypress/integration/example.spec.js rename to jsx-pinia-with-tests/cypress/e2e/example.cy.js index 13a2922b..7a8c909f 100644 --- a/router-pinia-with-tests/cypress/integration/example.spec.js +++ b/jsx-pinia-with-tests/cypress/e2e/example.cy.js @@ -5,9 +5,4 @@ describe('My First Test', () => { cy.visit('/') cy.contains('h1', 'You did it!') }) - - it('navigates to the about page', () => { - cy.visit('/about') - cy.contains('h1', 'This is an about page') - }) }) diff --git a/jsx-pinia-with-tests/cypress/e2e/jsconfig.json b/jsx-pinia-with-tests/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/jsx-pinia-with-tests/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/jsx-pinia-with-tests/cypress/fixtures/example.json b/jsx-pinia-with-tests/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/jsx-pinia-with-tests/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/jsx-pinia-with-tests/cypress/support/commands.js b/jsx-pinia-with-tests/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/jsx-pinia-with-tests/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/typescript-router-pinia-with-tests/cypress/support/index.ts b/jsx-pinia-with-tests/cypress/support/e2e.js similarity index 100% rename from typescript-router-pinia-with-tests/cypress/support/index.ts rename to jsx-pinia-with-tests/cypress/support/e2e.js diff --git a/jsx-pinia-with-tests/index.html b/jsx-pinia-with-tests/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-pinia-with-tests/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-pinia-with-tests/package.json b/jsx-pinia-with-tests/package.json new file mode 100644 index 00000000..4ee6ee7f --- /dev/null +++ b/jsx-pinia-with-tests/package.json @@ -0,0 +1,28 @@ +{ + "name": "jsx-pinia-with-tests", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/jsx-pinia-with-tests/public/favicon.ico b/jsx-pinia-with-tests/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-pinia-with-tests/src/App.vue b/jsx-pinia-with-tests/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/jsx-pinia-with-tests/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/jsx-pinia-with-tests/src/assets/base.css b/jsx-pinia-with-tests/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/jsx-pinia-with-tests/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-pinia-with-tests/src/assets/logo.svg b/jsx-pinia-with-tests/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-pinia-with-tests/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-pinia-with-tests/src/components/HelloWorld.vue b/jsx-pinia-with-tests/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-pinia-with-tests/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-pinia-with-tests/src/components/TheWelcome.vue b/jsx-pinia-with-tests/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-pinia-with-tests/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-pinia-with-tests/src/components/WelcomeItem.vue b/jsx-pinia-with-tests/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-pinia-with-tests/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js b/jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/jsx-pinia-with-tests/src/components/icons/IconCommunity.vue b/jsx-pinia-with-tests/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-pinia-with-tests/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-with-tests/src/components/icons/IconDocumentation.vue b/jsx-pinia-with-tests/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-pinia-with-tests/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-with-tests/src/components/icons/IconEcosystem.vue b/jsx-pinia-with-tests/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-pinia-with-tests/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-with-tests/src/components/icons/IconSupport.vue b/jsx-pinia-with-tests/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-pinia-with-tests/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia-with-tests/src/components/icons/IconTooling.vue b/jsx-pinia-with-tests/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-pinia-with-tests/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-pinia-with-tests/src/main.js b/jsx-pinia-with-tests/src/main.js new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/jsx-pinia-with-tests/src/main.js @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-pinia-with-tests/src/stores/counter.js b/jsx-pinia-with-tests/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/jsx-pinia-with-tests/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/jsx-pinia-with-tests/vite.config.js b/jsx-pinia-with-tests/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-pinia-with-tests/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-pinia/.gitignore b/jsx-pinia/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-pinia/.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/jsx-pinia/README.md b/jsx-pinia/README.md new file mode 100644 index 00000000..5e367cb1 --- /dev/null +++ b/jsx-pinia/README.md @@ -0,0 +1,29 @@ +# jsx-pinia + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` diff --git a/jsx-pinia/index.html b/jsx-pinia/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-pinia/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-pinia/package.json b/jsx-pinia/package.json new file mode 100644 index 00000000..3b75ce26 --- /dev/null +++ b/jsx-pinia/package.json @@ -0,0 +1,19 @@ +{ + "name": "jsx-pinia", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "vite": "^2.9.14" + } +} diff --git a/jsx-pinia/public/favicon.ico b/jsx-pinia/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-pinia/src/App.vue b/jsx-pinia/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/jsx-pinia/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/jsx-pinia/src/assets/base.css b/jsx-pinia/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/jsx-pinia/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-pinia/src/assets/logo.svg b/jsx-pinia/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-pinia/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-pinia/src/components/HelloWorld.vue b/jsx-pinia/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-pinia/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-pinia/src/components/TheWelcome.vue b/jsx-pinia/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-pinia/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-pinia/src/components/WelcomeItem.vue b/jsx-pinia/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-pinia/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-pinia/src/components/icons/IconCommunity.vue b/jsx-pinia/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-pinia/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia/src/components/icons/IconDocumentation.vue b/jsx-pinia/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-pinia/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia/src/components/icons/IconEcosystem.vue b/jsx-pinia/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-pinia/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia/src/components/icons/IconSupport.vue b/jsx-pinia/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-pinia/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-pinia/src/components/icons/IconTooling.vue b/jsx-pinia/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-pinia/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-pinia/src/main.js b/jsx-pinia/src/main.js new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/jsx-pinia/src/main.js @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-pinia/src/stores/counter.js b/jsx-pinia/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/jsx-pinia/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/jsx-pinia/vite.config.js b/jsx-pinia/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-pinia/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-router-cypress/.gitignore b/jsx-router-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-router-cypress/.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/jsx-router-cypress/README.md b/jsx-router-cypress/README.md new file mode 100644 index 00000000..a52feb39 --- /dev/null +++ b/jsx-router-cypress/README.md @@ -0,0 +1,42 @@ +# jsx-router-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/jsx-router-cypress/cypress.config.js b/jsx-router-cypress/cypress.config.js new file mode 100644 index 00000000..c3aba743 --- /dev/null +++ b/jsx-router-cypress/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' + } + } +}) diff --git a/router-with-tests/cypress/integration/example.spec.js b/jsx-router-cypress/cypress/e2e/example.cy.js similarity index 61% rename from router-with-tests/cypress/integration/example.spec.js rename to jsx-router-cypress/cypress/e2e/example.cy.js index 13a2922b..7a8c909f 100644 --- a/router-with-tests/cypress/integration/example.spec.js +++ b/jsx-router-cypress/cypress/e2e/example.cy.js @@ -5,9 +5,4 @@ describe('My First Test', () => { cy.visit('/') cy.contains('h1', 'You did it!') }) - - it('navigates to the about page', () => { - cy.visit('/about') - cy.contains('h1', 'This is an about page') - }) }) diff --git a/jsx-router-cypress/cypress/e2e/jsconfig.json b/jsx-router-cypress/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/jsx-router-cypress/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/jsx-router-cypress/cypress/fixtures/example.json b/jsx-router-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/jsx-router-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/jsx-router-cypress/cypress/support/commands.js b/jsx-router-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/jsx-router-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/jsx-router-cypress/cypress/support/component-index.html b/jsx-router-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/jsx-router-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/jsx-router-cypress/cypress/support/component.js b/jsx-router-cypress/cypress/support/component.js new file mode 100644 index 00000000..3d1a3d22 --- /dev/null +++ b/jsx-router-cypress/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/vue2' + +Cypress.Commands.add('mount', mount) + +// Example use: +// cy.mount(MyComponent) diff --git a/typescript-router-with-tests/cypress/support/index.ts b/jsx-router-cypress/cypress/support/e2e.js similarity index 100% rename from typescript-router-with-tests/cypress/support/index.ts rename to jsx-router-cypress/cypress/support/e2e.js diff --git a/jsx-router-cypress/index.html b/jsx-router-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-router-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-router-cypress/package.json b/jsx-router-cypress/package.json new file mode 100644 index 00000000..c1ffa7d9 --- /dev/null +++ b/jsx-router-cypress/package.json @@ -0,0 +1,25 @@ +{ + "name": "jsx-router-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "cypress": "^10.3.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14" + } +} diff --git a/jsx-router-cypress/public/favicon.ico b/jsx-router-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-router-cypress/src/App.vue b/jsx-router-cypress/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/jsx-router-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/jsx-router-cypress/src/assets/base.css b/jsx-router-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/jsx-router-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-router-cypress/src/assets/logo.svg b/jsx-router-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-router-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-router-cypress/src/components/HelloWorld.vue b/jsx-router-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-router-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-router-cypress/src/components/TheWelcome.vue b/jsx-router-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-router-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-cypress/src/components/WelcomeItem.vue b/jsx-router-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-router-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-cypress/src/components/__tests__/HelloWorld.cy.js b/jsx-router-cypress/src/components/__tests__/HelloWorld.cy.js new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/jsx-router-cypress/src/components/__tests__/HelloWorld.cy.js @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/jsx-router-cypress/src/components/icons/IconCommunity.vue b/jsx-router-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-router-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-cypress/src/components/icons/IconDocumentation.vue b/jsx-router-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-router-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-cypress/src/components/icons/IconEcosystem.vue b/jsx-router-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-router-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-cypress/src/components/icons/IconSupport.vue b/jsx-router-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-router-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-cypress/src/components/icons/IconTooling.vue b/jsx-router-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-router-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-router-cypress/src/main.js b/jsx-router-cypress/src/main.js new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/jsx-router-cypress/src/main.js @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-router-cypress/src/router/index.js b/jsx-router-cypress/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/jsx-router-cypress/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/jsx-router-cypress/src/views/AboutView.vue b/jsx-router-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/jsx-router-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/jsx-router-cypress/src/views/HomeView.vue b/jsx-router-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/jsx-router-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/jsx-router-cypress/vite.config.js b/jsx-router-cypress/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-router-cypress/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-router-pinia-cypress/.gitignore b/jsx-router-pinia-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-router-pinia-cypress/.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/jsx-router-pinia-cypress/README.md b/jsx-router-pinia-cypress/README.md new file mode 100644 index 00000000..2c518d60 --- /dev/null +++ b/jsx-router-pinia-cypress/README.md @@ -0,0 +1,42 @@ +# jsx-router-pinia-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/jsx-router-pinia-cypress/cypress.config.js b/jsx-router-pinia-cypress/cypress.config.js new file mode 100644 index 00000000..c3aba743 --- /dev/null +++ b/jsx-router-pinia-cypress/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' + } + } +}) diff --git a/typescript-router-pinia-with-tests/cypress/integration/example.spec.ts b/jsx-router-pinia-cypress/cypress/e2e/example.cy.js similarity index 61% rename from typescript-router-pinia-with-tests/cypress/integration/example.spec.ts rename to jsx-router-pinia-cypress/cypress/e2e/example.cy.js index 13a2922b..7a8c909f 100644 --- a/typescript-router-pinia-with-tests/cypress/integration/example.spec.ts +++ b/jsx-router-pinia-cypress/cypress/e2e/example.cy.js @@ -5,9 +5,4 @@ describe('My First Test', () => { cy.visit('/') cy.contains('h1', 'You did it!') }) - - it('navigates to the about page', () => { - cy.visit('/about') - cy.contains('h1', 'This is an about page') - }) }) diff --git a/jsx-router-pinia-cypress/cypress/e2e/jsconfig.json b/jsx-router-pinia-cypress/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/jsx-router-pinia-cypress/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/jsx-router-pinia-cypress/cypress/fixtures/example.json b/jsx-router-pinia-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/jsx-router-pinia-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/jsx-router-pinia-cypress/cypress/support/commands.js b/jsx-router-pinia-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/jsx-router-pinia-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/jsx-router-pinia-cypress/cypress/support/component-index.html b/jsx-router-pinia-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/jsx-router-pinia-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/jsx-router-pinia-cypress/cypress/support/component.js b/jsx-router-pinia-cypress/cypress/support/component.js new file mode 100644 index 00000000..3d1a3d22 --- /dev/null +++ b/jsx-router-pinia-cypress/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/vue2' + +Cypress.Commands.add('mount', mount) + +// Example use: +// cy.mount(MyComponent) diff --git a/typescript-with-tests/cypress/support/index.ts b/jsx-router-pinia-cypress/cypress/support/e2e.js similarity index 100% rename from typescript-with-tests/cypress/support/index.ts rename to jsx-router-pinia-cypress/cypress/support/e2e.js diff --git a/jsx-router-pinia-cypress/index.html b/jsx-router-pinia-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-router-pinia-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-router-pinia-cypress/package.json b/jsx-router-pinia-cypress/package.json new file mode 100644 index 00000000..3420f79e --- /dev/null +++ b/jsx-router-pinia-cypress/package.json @@ -0,0 +1,26 @@ +{ + "name": "jsx-router-pinia-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "cypress": "^10.3.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14" + } +} diff --git a/jsx-router-pinia-cypress/public/favicon.ico b/jsx-router-pinia-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-router-pinia-cypress/src/App.vue b/jsx-router-pinia-cypress/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/jsx-router-pinia-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/jsx-router-pinia-cypress/src/assets/base.css b/jsx-router-pinia-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/jsx-router-pinia-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-router-pinia-cypress/src/assets/logo.svg b/jsx-router-pinia-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-router-pinia-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-router-pinia-cypress/src/components/HelloWorld.vue b/jsx-router-pinia-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-router-pinia-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-router-pinia-cypress/src/components/TheWelcome.vue b/jsx-router-pinia-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-router-pinia-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-pinia-cypress/src/components/WelcomeItem.vue b/jsx-router-pinia-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-router-pinia-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-pinia-cypress/src/components/__tests__/HelloWorld.cy.js b/jsx-router-pinia-cypress/src/components/__tests__/HelloWorld.cy.js new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/jsx-router-pinia-cypress/src/components/__tests__/HelloWorld.cy.js @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/jsx-router-pinia-cypress/src/components/icons/IconCommunity.vue b/jsx-router-pinia-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-router-pinia-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-cypress/src/components/icons/IconDocumentation.vue b/jsx-router-pinia-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-router-pinia-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-cypress/src/components/icons/IconEcosystem.vue b/jsx-router-pinia-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-router-pinia-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-cypress/src/components/icons/IconSupport.vue b/jsx-router-pinia-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-router-pinia-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-cypress/src/components/icons/IconTooling.vue b/jsx-router-pinia-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-router-pinia-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-router-pinia-cypress/src/main.js b/jsx-router-pinia-cypress/src/main.js new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/jsx-router-pinia-cypress/src/main.js @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-router-pinia-cypress/src/router/index.js b/jsx-router-pinia-cypress/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/jsx-router-pinia-cypress/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/jsx-router-pinia-cypress/src/stores/counter.js b/jsx-router-pinia-cypress/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/jsx-router-pinia-cypress/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/jsx-router-pinia-cypress/src/views/AboutView.vue b/jsx-router-pinia-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/jsx-router-pinia-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/jsx-router-pinia-cypress/src/views/HomeView.vue b/jsx-router-pinia-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/jsx-router-pinia-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/jsx-router-pinia-cypress/vite.config.js b/jsx-router-pinia-cypress/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-router-pinia-cypress/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-router-pinia-vitest-cypress/.gitignore b/jsx-router-pinia-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/.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/jsx-router-pinia-vitest-cypress/README.md b/jsx-router-pinia-vitest-cypress/README.md new file mode 100644 index 00000000..7a8130ad --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/README.md @@ -0,0 +1,42 @@ +# jsx-router-pinia-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/jsx-router-pinia-vitest-cypress/cypress.config.js b/jsx-router-pinia-vitest-cypress/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/jsx-router-pinia-vitest-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/' + } +}) diff --git a/typescript-router-with-tests/cypress/integration/example.spec.ts b/jsx-router-pinia-vitest-cypress/cypress/e2e/example.cy.js similarity index 61% rename from typescript-router-with-tests/cypress/integration/example.spec.ts rename to jsx-router-pinia-vitest-cypress/cypress/e2e/example.cy.js index 13a2922b..7a8c909f 100644 --- a/typescript-router-with-tests/cypress/integration/example.spec.ts +++ b/jsx-router-pinia-vitest-cypress/cypress/e2e/example.cy.js @@ -5,9 +5,4 @@ describe('My First Test', () => { cy.visit('/') cy.contains('h1', 'You did it!') }) - - it('navigates to the about page', () => { - cy.visit('/about') - cy.contains('h1', 'This is an about page') - }) }) diff --git a/jsx-router-pinia-vitest-cypress/cypress/e2e/jsconfig.json b/jsx-router-pinia-vitest-cypress/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/jsx-router-pinia-vitest-cypress/cypress/fixtures/example.json b/jsx-router-pinia-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/jsx-router-pinia-vitest-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/jsx-router-pinia-vitest-cypress/cypress/support/commands.js b/jsx-router-pinia-vitest-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/jsx-router-pinia-vitest-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/with-tests/cypress/support/index.js b/jsx-router-pinia-vitest-cypress/cypress/support/e2e.js similarity index 100% rename from with-tests/cypress/support/index.js rename to jsx-router-pinia-vitest-cypress/cypress/support/e2e.js diff --git a/jsx-router-pinia-vitest-cypress/index.html b/jsx-router-pinia-vitest-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-router-pinia-vitest-cypress/package.json b/jsx-router-pinia-vitest-cypress/package.json new file mode 100644 index 00000000..7818ada8 --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/package.json @@ -0,0 +1,29 @@ +{ + "name": "jsx-router-pinia-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/jsx-router-pinia-vitest-cypress/public/favicon.ico b/jsx-router-pinia-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-router-pinia-vitest-cypress/src/App.vue b/jsx-router-pinia-vitest-cypress/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/jsx-router-pinia-vitest-cypress/src/assets/base.css b/jsx-router-pinia-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-router-pinia-vitest-cypress/src/assets/logo.svg b/jsx-router-pinia-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-router-pinia-vitest-cypress/src/components/HelloWorld.vue b/jsx-router-pinia-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-router-pinia-vitest-cypress/src/components/TheWelcome.vue b/jsx-router-pinia-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-pinia-vitest-cypress/src/components/WelcomeItem.vue b/jsx-router-pinia-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.js b/jsx-router-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/jsx-router-pinia-vitest-cypress/src/components/icons/IconCommunity.vue b/jsx-router-pinia-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue b/jsx-router-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue b/jsx-router-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-vitest-cypress/src/components/icons/IconSupport.vue b/jsx-router-pinia-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-vitest-cypress/src/components/icons/IconTooling.vue b/jsx-router-pinia-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-router-pinia-vitest-cypress/src/main.js b/jsx-router-pinia-vitest-cypress/src/main.js new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/main.js @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-router-pinia-vitest-cypress/src/router/index.js b/jsx-router-pinia-vitest-cypress/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/jsx-router-pinia-vitest-cypress/src/stores/counter.js b/jsx-router-pinia-vitest-cypress/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/jsx-router-pinia-vitest-cypress/src/views/AboutView.vue b/jsx-router-pinia-vitest-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/jsx-router-pinia-vitest-cypress/src/views/HomeView.vue b/jsx-router-pinia-vitest-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/jsx-router-pinia-vitest-cypress/vite.config.js b/jsx-router-pinia-vitest-cypress/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-router-pinia-vitest-cypress/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-router-pinia-vitest/.gitignore b/jsx-router-pinia-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-router-pinia-vitest/.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/jsx-router-pinia-vitest/README.md b/jsx-router-pinia-vitest/README.md new file mode 100644 index 00000000..8421cc83 --- /dev/null +++ b/jsx-router-pinia-vitest/README.md @@ -0,0 +1,35 @@ +# jsx-router-pinia-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/jsx-router-pinia-vitest/index.html b/jsx-router-pinia-vitest/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-router-pinia-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-router-pinia-vitest/package.json b/jsx-router-pinia-vitest/package.json new file mode 100644 index 00000000..8ac10431 --- /dev/null +++ b/jsx-router-pinia-vitest/package.json @@ -0,0 +1,25 @@ +{ + "name": "jsx-router-pinia-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "jsdom": "^20.0.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/jsx-router-pinia-vitest/public/favicon.ico b/jsx-router-pinia-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-router-pinia-vitest/src/App.vue b/jsx-router-pinia-vitest/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/jsx-router-pinia-vitest/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/jsx-router-pinia-vitest/src/assets/base.css b/jsx-router-pinia-vitest/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/jsx-router-pinia-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-router-pinia-vitest/src/assets/logo.svg b/jsx-router-pinia-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-router-pinia-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-router-pinia-vitest/src/components/HelloWorld.vue b/jsx-router-pinia-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-router-pinia-vitest/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-router-pinia-vitest/src/components/TheWelcome.vue b/jsx-router-pinia-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-router-pinia-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-pinia-vitest/src/components/WelcomeItem.vue b/jsx-router-pinia-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-router-pinia-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-pinia-vitest/src/components/__tests__/HelloWorld.spec.js b/jsx-router-pinia-vitest/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/jsx-router-pinia-vitest/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/jsx-router-pinia-vitest/src/components/icons/IconCommunity.vue b/jsx-router-pinia-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-router-pinia-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-vitest/src/components/icons/IconDocumentation.vue b/jsx-router-pinia-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-router-pinia-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-vitest/src/components/icons/IconEcosystem.vue b/jsx-router-pinia-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-router-pinia-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-vitest/src/components/icons/IconSupport.vue b/jsx-router-pinia-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-router-pinia-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-vitest/src/components/icons/IconTooling.vue b/jsx-router-pinia-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-router-pinia-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-router-pinia-vitest/src/main.js b/jsx-router-pinia-vitest/src/main.js new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/jsx-router-pinia-vitest/src/main.js @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-router-pinia-vitest/src/router/index.js b/jsx-router-pinia-vitest/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/jsx-router-pinia-vitest/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/jsx-router-pinia-vitest/src/stores/counter.js b/jsx-router-pinia-vitest/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/jsx-router-pinia-vitest/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/jsx-router-pinia-vitest/src/views/AboutView.vue b/jsx-router-pinia-vitest/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/jsx-router-pinia-vitest/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/jsx-router-pinia-vitest/src/views/HomeView.vue b/jsx-router-pinia-vitest/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/jsx-router-pinia-vitest/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/jsx-router-pinia-vitest/vite.config.js b/jsx-router-pinia-vitest/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-router-pinia-vitest/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-router-pinia-with-tests/.gitignore b/jsx-router-pinia-with-tests/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-router-pinia-with-tests/.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/jsx-router-pinia-with-tests/README.md b/jsx-router-pinia-with-tests/README.md new file mode 100644 index 00000000..1921e130 --- /dev/null +++ b/jsx-router-pinia-with-tests/README.md @@ -0,0 +1,42 @@ +# jsx-router-pinia-with-tests + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/jsx-router-pinia-with-tests/cypress.config.js b/jsx-router-pinia-with-tests/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/jsx-router-pinia-with-tests/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/' + } +}) diff --git a/jsx-router-pinia-with-tests/cypress/e2e/example.cy.js b/jsx-router-pinia-with-tests/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/jsx-router-pinia-with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/jsx-router-pinia-with-tests/cypress/e2e/jsconfig.json b/jsx-router-pinia-with-tests/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/jsx-router-pinia-with-tests/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/jsx-router-pinia-with-tests/cypress/fixtures/example.json b/jsx-router-pinia-with-tests/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/jsx-router-pinia-with-tests/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/jsx-router-pinia-with-tests/cypress/support/commands.js b/jsx-router-pinia-with-tests/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/jsx-router-pinia-with-tests/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/jsx-router-pinia-with-tests/cypress/support/e2e.js b/jsx-router-pinia-with-tests/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/jsx-router-pinia-with-tests/cypress/support/e2e.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/jsx-router-pinia-with-tests/index.html b/jsx-router-pinia-with-tests/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-router-pinia-with-tests/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-router-pinia-with-tests/package.json b/jsx-router-pinia-with-tests/package.json new file mode 100644 index 00000000..c596dacd --- /dev/null +++ b/jsx-router-pinia-with-tests/package.json @@ -0,0 +1,29 @@ +{ + "name": "jsx-router-pinia-with-tests", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/jsx-router-pinia-with-tests/public/favicon.ico b/jsx-router-pinia-with-tests/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-router-pinia-with-tests/src/App.vue b/jsx-router-pinia-with-tests/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/jsx-router-pinia-with-tests/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/jsx-router-pinia-with-tests/src/assets/base.css b/jsx-router-pinia-with-tests/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/jsx-router-pinia-with-tests/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-router-pinia-with-tests/src/assets/logo.svg b/jsx-router-pinia-with-tests/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-router-pinia-with-tests/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-router-pinia-with-tests/src/components/HelloWorld.vue b/jsx-router-pinia-with-tests/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-router-pinia-with-tests/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-router-pinia-with-tests/src/components/TheWelcome.vue b/jsx-router-pinia-with-tests/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-router-pinia-with-tests/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-pinia-with-tests/src/components/WelcomeItem.vue b/jsx-router-pinia-with-tests/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-router-pinia-with-tests/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js b/jsx-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/jsx-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/jsx-router-pinia-with-tests/src/components/icons/IconCommunity.vue b/jsx-router-pinia-with-tests/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-router-pinia-with-tests/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-with-tests/src/components/icons/IconDocumentation.vue b/jsx-router-pinia-with-tests/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-router-pinia-with-tests/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-with-tests/src/components/icons/IconEcosystem.vue b/jsx-router-pinia-with-tests/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-router-pinia-with-tests/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-with-tests/src/components/icons/IconSupport.vue b/jsx-router-pinia-with-tests/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-router-pinia-with-tests/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia-with-tests/src/components/icons/IconTooling.vue b/jsx-router-pinia-with-tests/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-router-pinia-with-tests/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-router-pinia-with-tests/src/main.js b/jsx-router-pinia-with-tests/src/main.js new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/jsx-router-pinia-with-tests/src/main.js @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-router-pinia-with-tests/src/router/index.js b/jsx-router-pinia-with-tests/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/jsx-router-pinia-with-tests/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/jsx-router-pinia-with-tests/src/stores/counter.js b/jsx-router-pinia-with-tests/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/jsx-router-pinia-with-tests/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/jsx-router-pinia-with-tests/src/views/AboutView.vue b/jsx-router-pinia-with-tests/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/jsx-router-pinia-with-tests/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/jsx-router-pinia-with-tests/src/views/HomeView.vue b/jsx-router-pinia-with-tests/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/jsx-router-pinia-with-tests/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/jsx-router-pinia-with-tests/vite.config.js b/jsx-router-pinia-with-tests/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-router-pinia-with-tests/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-router-pinia/.gitignore b/jsx-router-pinia/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-router-pinia/.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/jsx-router-pinia/README.md b/jsx-router-pinia/README.md new file mode 100644 index 00000000..a13324e4 --- /dev/null +++ b/jsx-router-pinia/README.md @@ -0,0 +1,29 @@ +# jsx-router-pinia + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` diff --git a/jsx-router-pinia/index.html b/jsx-router-pinia/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-router-pinia/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-router-pinia/package.json b/jsx-router-pinia/package.json new file mode 100644 index 00000000..e94a01c6 --- /dev/null +++ b/jsx-router-pinia/package.json @@ -0,0 +1,20 @@ +{ + "name": "jsx-router-pinia", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "vite": "^2.9.14" + } +} diff --git a/jsx-router-pinia/public/favicon.ico b/jsx-router-pinia/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-router-pinia/src/App.vue b/jsx-router-pinia/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/jsx-router-pinia/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/jsx-router-pinia/src/assets/base.css b/jsx-router-pinia/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/jsx-router-pinia/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-router-pinia/src/assets/logo.svg b/jsx-router-pinia/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-router-pinia/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-router-pinia/src/components/HelloWorld.vue b/jsx-router-pinia/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-router-pinia/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-router-pinia/src/components/TheWelcome.vue b/jsx-router-pinia/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-router-pinia/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-pinia/src/components/WelcomeItem.vue b/jsx-router-pinia/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-router-pinia/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-pinia/src/components/icons/IconCommunity.vue b/jsx-router-pinia/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-router-pinia/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia/src/components/icons/IconDocumentation.vue b/jsx-router-pinia/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-router-pinia/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia/src/components/icons/IconEcosystem.vue b/jsx-router-pinia/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-router-pinia/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia/src/components/icons/IconSupport.vue b/jsx-router-pinia/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-router-pinia/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-pinia/src/components/icons/IconTooling.vue b/jsx-router-pinia/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-router-pinia/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-router-pinia/src/main.js b/jsx-router-pinia/src/main.js new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/jsx-router-pinia/src/main.js @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-router-pinia/src/router/index.js b/jsx-router-pinia/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/jsx-router-pinia/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/jsx-router-pinia/src/stores/counter.js b/jsx-router-pinia/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/jsx-router-pinia/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/jsx-router-pinia/src/views/AboutView.vue b/jsx-router-pinia/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/jsx-router-pinia/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/jsx-router-pinia/src/views/HomeView.vue b/jsx-router-pinia/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/jsx-router-pinia/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/jsx-router-pinia/vite.config.js b/jsx-router-pinia/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-router-pinia/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-router-vitest-cypress/.gitignore b/jsx-router-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-router-vitest-cypress/.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/jsx-router-vitest-cypress/README.md b/jsx-router-vitest-cypress/README.md new file mode 100644 index 00000000..7b95556d --- /dev/null +++ b/jsx-router-vitest-cypress/README.md @@ -0,0 +1,42 @@ +# jsx-router-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/jsx-router-vitest-cypress/cypress.config.js b/jsx-router-vitest-cypress/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/jsx-router-vitest-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/' + } +}) diff --git a/jsx-router-vitest-cypress/cypress/e2e/example.cy.js b/jsx-router-vitest-cypress/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/jsx-router-vitest-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/jsx-router-vitest-cypress/cypress/e2e/jsconfig.json b/jsx-router-vitest-cypress/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/jsx-router-vitest-cypress/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/jsx-router-vitest-cypress/cypress/fixtures/example.json b/jsx-router-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/jsx-router-vitest-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/jsx-router-vitest-cypress/cypress/support/commands.js b/jsx-router-vitest-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/jsx-router-vitest-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/jsx-router-vitest-cypress/cypress/support/e2e.js b/jsx-router-vitest-cypress/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/jsx-router-vitest-cypress/cypress/support/e2e.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/jsx-router-vitest-cypress/index.html b/jsx-router-vitest-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-router-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-router-vitest-cypress/package.json b/jsx-router-vitest-cypress/package.json new file mode 100644 index 00000000..61c75abd --- /dev/null +++ b/jsx-router-vitest-cypress/package.json @@ -0,0 +1,28 @@ +{ + "name": "jsx-router-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/jsx-router-vitest-cypress/public/favicon.ico b/jsx-router-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-router-vitest-cypress/src/App.vue b/jsx-router-vitest-cypress/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/jsx-router-vitest-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/jsx-router-vitest-cypress/src/assets/base.css b/jsx-router-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/jsx-router-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-router-vitest-cypress/src/assets/logo.svg b/jsx-router-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-router-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-router-vitest-cypress/src/components/HelloWorld.vue b/jsx-router-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-router-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-router-vitest-cypress/src/components/TheWelcome.vue b/jsx-router-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-router-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-vitest-cypress/src/components/WelcomeItem.vue b/jsx-router-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-router-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-vitest-cypress/src/components/__tests__/HelloWorld.spec.js b/jsx-router-vitest-cypress/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/jsx-router-vitest-cypress/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/jsx-router-vitest-cypress/src/components/icons/IconCommunity.vue b/jsx-router-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-router-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-vitest-cypress/src/components/icons/IconDocumentation.vue b/jsx-router-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-router-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-vitest-cypress/src/components/icons/IconEcosystem.vue b/jsx-router-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-router-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-vitest-cypress/src/components/icons/IconSupport.vue b/jsx-router-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-router-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-vitest-cypress/src/components/icons/IconTooling.vue b/jsx-router-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-router-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-router-vitest-cypress/src/main.js b/jsx-router-vitest-cypress/src/main.js new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/jsx-router-vitest-cypress/src/main.js @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-router-vitest-cypress/src/router/index.js b/jsx-router-vitest-cypress/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/jsx-router-vitest-cypress/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/jsx-router-vitest-cypress/src/views/AboutView.vue b/jsx-router-vitest-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/jsx-router-vitest-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/jsx-router-vitest-cypress/src/views/HomeView.vue b/jsx-router-vitest-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/jsx-router-vitest-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/jsx-router-vitest-cypress/vite.config.js b/jsx-router-vitest-cypress/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-router-vitest-cypress/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-router-vitest/.gitignore b/jsx-router-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-router-vitest/.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/jsx-router-vitest/README.md b/jsx-router-vitest/README.md new file mode 100644 index 00000000..c2aa1a5c --- /dev/null +++ b/jsx-router-vitest/README.md @@ -0,0 +1,35 @@ +# jsx-router-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/jsx-router-vitest/index.html b/jsx-router-vitest/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-router-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-router-vitest/package.json b/jsx-router-vitest/package.json new file mode 100644 index 00000000..b003b73b --- /dev/null +++ b/jsx-router-vitest/package.json @@ -0,0 +1,24 @@ +{ + "name": "jsx-router-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "jsdom": "^20.0.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/jsx-router-vitest/public/favicon.ico b/jsx-router-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-router-vitest/src/App.vue b/jsx-router-vitest/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/jsx-router-vitest/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/jsx-router-vitest/src/assets/base.css b/jsx-router-vitest/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/jsx-router-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-router-vitest/src/assets/logo.svg b/jsx-router-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-router-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-router-vitest/src/components/HelloWorld.vue b/jsx-router-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-router-vitest/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-router-vitest/src/components/TheWelcome.vue b/jsx-router-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-router-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-vitest/src/components/WelcomeItem.vue b/jsx-router-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-router-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-vitest/src/components/__tests__/HelloWorld.spec.js b/jsx-router-vitest/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/jsx-router-vitest/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/jsx-router-vitest/src/components/icons/IconCommunity.vue b/jsx-router-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-router-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-vitest/src/components/icons/IconDocumentation.vue b/jsx-router-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-router-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-vitest/src/components/icons/IconEcosystem.vue b/jsx-router-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-router-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-vitest/src/components/icons/IconSupport.vue b/jsx-router-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-router-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-vitest/src/components/icons/IconTooling.vue b/jsx-router-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-router-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-router-vitest/src/main.js b/jsx-router-vitest/src/main.js new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/jsx-router-vitest/src/main.js @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-router-vitest/src/router/index.js b/jsx-router-vitest/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/jsx-router-vitest/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/jsx-router-vitest/src/views/AboutView.vue b/jsx-router-vitest/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/jsx-router-vitest/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/jsx-router-vitest/src/views/HomeView.vue b/jsx-router-vitest/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/jsx-router-vitest/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/jsx-router-vitest/vite.config.js b/jsx-router-vitest/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-router-vitest/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-router-with-tests/.gitignore b/jsx-router-with-tests/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-router-with-tests/.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/jsx-router-with-tests/README.md b/jsx-router-with-tests/README.md new file mode 100644 index 00000000..6ee984f5 --- /dev/null +++ b/jsx-router-with-tests/README.md @@ -0,0 +1,42 @@ +# jsx-router-with-tests + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/jsx-router-with-tests/cypress.config.js b/jsx-router-with-tests/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/jsx-router-with-tests/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/' + } +}) diff --git a/jsx-router-with-tests/cypress/e2e/example.cy.js b/jsx-router-with-tests/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/jsx-router-with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/jsx-router-with-tests/cypress/e2e/jsconfig.json b/jsx-router-with-tests/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/jsx-router-with-tests/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/jsx-router-with-tests/cypress/fixtures/example.json b/jsx-router-with-tests/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/jsx-router-with-tests/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/jsx-router-with-tests/cypress/support/commands.js b/jsx-router-with-tests/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/jsx-router-with-tests/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/jsx-router-with-tests/cypress/support/e2e.js b/jsx-router-with-tests/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/jsx-router-with-tests/cypress/support/e2e.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/jsx-router-with-tests/index.html b/jsx-router-with-tests/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-router-with-tests/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-router-with-tests/package.json b/jsx-router-with-tests/package.json new file mode 100644 index 00000000..bc45b261 --- /dev/null +++ b/jsx-router-with-tests/package.json @@ -0,0 +1,28 @@ +{ + "name": "jsx-router-with-tests", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/jsx-router-with-tests/public/favicon.ico b/jsx-router-with-tests/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-router-with-tests/src/App.vue b/jsx-router-with-tests/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/jsx-router-with-tests/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/jsx-router-with-tests/src/assets/base.css b/jsx-router-with-tests/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/jsx-router-with-tests/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-router-with-tests/src/assets/logo.svg b/jsx-router-with-tests/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-router-with-tests/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-router-with-tests/src/components/HelloWorld.vue b/jsx-router-with-tests/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-router-with-tests/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-router-with-tests/src/components/TheWelcome.vue b/jsx-router-with-tests/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-router-with-tests/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-with-tests/src/components/WelcomeItem.vue b/jsx-router-with-tests/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-router-with-tests/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router-with-tests/src/components/__tests__/HelloWorld.spec.js b/jsx-router-with-tests/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/jsx-router-with-tests/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/jsx-router-with-tests/src/components/icons/IconCommunity.vue b/jsx-router-with-tests/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-router-with-tests/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-with-tests/src/components/icons/IconDocumentation.vue b/jsx-router-with-tests/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-router-with-tests/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-with-tests/src/components/icons/IconEcosystem.vue b/jsx-router-with-tests/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-router-with-tests/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-with-tests/src/components/icons/IconSupport.vue b/jsx-router-with-tests/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-router-with-tests/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router-with-tests/src/components/icons/IconTooling.vue b/jsx-router-with-tests/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-router-with-tests/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-router-with-tests/src/main.js b/jsx-router-with-tests/src/main.js new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/jsx-router-with-tests/src/main.js @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-router-with-tests/src/router/index.js b/jsx-router-with-tests/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/jsx-router-with-tests/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/jsx-router-with-tests/src/views/AboutView.vue b/jsx-router-with-tests/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/jsx-router-with-tests/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/jsx-router-with-tests/src/views/HomeView.vue b/jsx-router-with-tests/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/jsx-router-with-tests/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/jsx-router-with-tests/vite.config.js b/jsx-router-with-tests/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-router-with-tests/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-router/.gitignore b/jsx-router/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-router/.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/jsx-router/README.md b/jsx-router/README.md new file mode 100644 index 00000000..ffa39006 --- /dev/null +++ b/jsx-router/README.md @@ -0,0 +1,29 @@ +# jsx-router + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` diff --git a/jsx-router/index.html b/jsx-router/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-router/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-router/package.json b/jsx-router/package.json new file mode 100644 index 00000000..358e9a7d --- /dev/null +++ b/jsx-router/package.json @@ -0,0 +1,19 @@ +{ + "name": "jsx-router", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "vite": "^2.9.14" + } +} diff --git a/jsx-router/public/favicon.ico b/jsx-router/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-router/src/App.vue b/jsx-router/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/jsx-router/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/jsx-router/src/assets/base.css b/jsx-router/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/jsx-router/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-router/src/assets/logo.svg b/jsx-router/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-router/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-router/src/components/HelloWorld.vue b/jsx-router/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-router/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-router/src/components/TheWelcome.vue b/jsx-router/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-router/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router/src/components/WelcomeItem.vue b/jsx-router/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-router/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-router/src/components/icons/IconCommunity.vue b/jsx-router/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-router/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router/src/components/icons/IconDocumentation.vue b/jsx-router/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-router/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router/src/components/icons/IconEcosystem.vue b/jsx-router/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-router/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router/src/components/icons/IconSupport.vue b/jsx-router/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-router/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-router/src/components/icons/IconTooling.vue b/jsx-router/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-router/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-router/src/main.js b/jsx-router/src/main.js new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/jsx-router/src/main.js @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-router/src/router/index.js b/jsx-router/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/jsx-router/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/jsx-router/src/views/AboutView.vue b/jsx-router/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/jsx-router/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/jsx-router/src/views/HomeView.vue b/jsx-router/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/jsx-router/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/jsx-router/vite.config.js b/jsx-router/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-router/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-vitest-cypress/.gitignore b/jsx-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-vitest-cypress/.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/jsx-vitest-cypress/README.md b/jsx-vitest-cypress/README.md new file mode 100644 index 00000000..1ec67c43 --- /dev/null +++ b/jsx-vitest-cypress/README.md @@ -0,0 +1,42 @@ +# jsx-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/jsx-vitest-cypress/cypress.config.js b/jsx-vitest-cypress/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/jsx-vitest-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/' + } +}) diff --git a/jsx-vitest-cypress/cypress/e2e/example.cy.js b/jsx-vitest-cypress/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/jsx-vitest-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/jsx-vitest-cypress/cypress/e2e/jsconfig.json b/jsx-vitest-cypress/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/jsx-vitest-cypress/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/jsx-vitest-cypress/cypress/fixtures/example.json b/jsx-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/jsx-vitest-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/jsx-vitest-cypress/cypress/support/commands.js b/jsx-vitest-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/jsx-vitest-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/jsx-vitest-cypress/cypress/support/e2e.js b/jsx-vitest-cypress/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/jsx-vitest-cypress/cypress/support/e2e.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/jsx-vitest-cypress/index.html b/jsx-vitest-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-vitest-cypress/package.json b/jsx-vitest-cypress/package.json new file mode 100644 index 00000000..4f48adef --- /dev/null +++ b/jsx-vitest-cypress/package.json @@ -0,0 +1,27 @@ +{ + "name": "jsx-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/jsx-vitest-cypress/public/favicon.ico b/jsx-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-vitest-cypress/src/App.vue b/jsx-vitest-cypress/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/jsx-vitest-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/jsx-vitest-cypress/src/assets/base.css b/jsx-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/jsx-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-vitest-cypress/src/assets/logo.svg b/jsx-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-vitest-cypress/src/components/HelloWorld.vue b/jsx-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-vitest-cypress/src/components/TheWelcome.vue b/jsx-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-vitest-cypress/src/components/WelcomeItem.vue b/jsx-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-vitest-cypress/src/components/__tests__/HelloWorld.spec.js b/jsx-vitest-cypress/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/jsx-vitest-cypress/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/jsx-vitest-cypress/src/components/icons/IconCommunity.vue b/jsx-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-vitest-cypress/src/components/icons/IconDocumentation.vue b/jsx-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-vitest-cypress/src/components/icons/IconEcosystem.vue b/jsx-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-vitest-cypress/src/components/icons/IconSupport.vue b/jsx-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-vitest-cypress/src/components/icons/IconTooling.vue b/jsx-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-vitest-cypress/src/main.js b/jsx-vitest-cypress/src/main.js new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/jsx-vitest-cypress/src/main.js @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-vitest-cypress/vite.config.js b/jsx-vitest-cypress/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-vitest-cypress/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-vitest/.gitignore b/jsx-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-vitest/.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/jsx-vitest/README.md b/jsx-vitest/README.md new file mode 100644 index 00000000..bb1f0cc2 --- /dev/null +++ b/jsx-vitest/README.md @@ -0,0 +1,35 @@ +# jsx-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/jsx-vitest/index.html b/jsx-vitest/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-vitest/package.json b/jsx-vitest/package.json new file mode 100644 index 00000000..0fcf6b50 --- /dev/null +++ b/jsx-vitest/package.json @@ -0,0 +1,23 @@ +{ + "name": "jsx-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "jsdom": "^20.0.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/jsx-vitest/public/favicon.ico b/jsx-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-vitest/src/App.vue b/jsx-vitest/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/jsx-vitest/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/jsx-vitest/src/assets/base.css b/jsx-vitest/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/jsx-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-vitest/src/assets/logo.svg b/jsx-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-vitest/src/components/HelloWorld.vue b/jsx-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-vitest/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-vitest/src/components/TheWelcome.vue b/jsx-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-vitest/src/components/WelcomeItem.vue b/jsx-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-vitest/src/components/__tests__/HelloWorld.spec.js b/jsx-vitest/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/jsx-vitest/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/jsx-vitest/src/components/icons/IconCommunity.vue b/jsx-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-vitest/src/components/icons/IconDocumentation.vue b/jsx-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-vitest/src/components/icons/IconEcosystem.vue b/jsx-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-vitest/src/components/icons/IconSupport.vue b/jsx-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-vitest/src/components/icons/IconTooling.vue b/jsx-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-vitest/src/main.js b/jsx-vitest/src/main.js new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/jsx-vitest/src/main.js @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-vitest/vite.config.js b/jsx-vitest/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-vitest/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx-with-tests/.gitignore b/jsx-with-tests/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx-with-tests/.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/jsx-with-tests/README.md b/jsx-with-tests/README.md new file mode 100644 index 00000000..7c801cbd --- /dev/null +++ b/jsx-with-tests/README.md @@ -0,0 +1,42 @@ +# jsx-with-tests + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/jsx-with-tests/cypress.config.js b/jsx-with-tests/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/jsx-with-tests/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/' + } +}) diff --git a/jsx-with-tests/cypress/e2e/example.cy.js b/jsx-with-tests/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/jsx-with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/jsx-with-tests/cypress/e2e/jsconfig.json b/jsx-with-tests/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/jsx-with-tests/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/jsx-with-tests/cypress/fixtures/example.json b/jsx-with-tests/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/jsx-with-tests/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/jsx-with-tests/cypress/support/commands.js b/jsx-with-tests/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/jsx-with-tests/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/jsx-with-tests/cypress/support/e2e.js b/jsx-with-tests/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/jsx-with-tests/cypress/support/e2e.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/jsx-with-tests/index.html b/jsx-with-tests/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx-with-tests/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx-with-tests/package.json b/jsx-with-tests/package.json new file mode 100644 index 00000000..5f12fe6f --- /dev/null +++ b/jsx-with-tests/package.json @@ -0,0 +1,27 @@ +{ + "name": "jsx-with-tests", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/jsx-with-tests/public/favicon.ico b/jsx-with-tests/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx-with-tests/src/App.vue b/jsx-with-tests/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/jsx-with-tests/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/jsx-with-tests/src/assets/base.css b/jsx-with-tests/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/jsx-with-tests/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx-with-tests/src/assets/logo.svg b/jsx-with-tests/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx-with-tests/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx-with-tests/src/components/HelloWorld.vue b/jsx-with-tests/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx-with-tests/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx-with-tests/src/components/TheWelcome.vue b/jsx-with-tests/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx-with-tests/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-with-tests/src/components/WelcomeItem.vue b/jsx-with-tests/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx-with-tests/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx-with-tests/src/components/__tests__/HelloWorld.spec.js b/jsx-with-tests/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/jsx-with-tests/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/jsx-with-tests/src/components/icons/IconCommunity.vue b/jsx-with-tests/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx-with-tests/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-with-tests/src/components/icons/IconDocumentation.vue b/jsx-with-tests/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx-with-tests/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-with-tests/src/components/icons/IconEcosystem.vue b/jsx-with-tests/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx-with-tests/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-with-tests/src/components/icons/IconSupport.vue b/jsx-with-tests/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx-with-tests/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx-with-tests/src/components/icons/IconTooling.vue b/jsx-with-tests/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx-with-tests/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx-with-tests/src/main.js b/jsx-with-tests/src/main.js new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/jsx-with-tests/src/main.js @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx-with-tests/vite.config.js b/jsx-with-tests/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx-with-tests/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/jsx/.gitignore b/jsx/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/jsx/.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/jsx/README.md b/jsx/README.md new file mode 100644 index 00000000..a6df1922 --- /dev/null +++ b/jsx/README.md @@ -0,0 +1,29 @@ +# jsx + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` diff --git a/jsx/index.html b/jsx/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/jsx/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/jsx/package.json b/jsx/package.json new file mode 100644 index 00000000..9a7be6c1 --- /dev/null +++ b/jsx/package.json @@ -0,0 +1,18 @@ +{ + "name": "jsx", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "vite": "^2.9.14" + } +} diff --git a/jsx/public/favicon.ico b/jsx/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/jsx/src/App.vue b/jsx/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/jsx/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/jsx/src/assets/base.css b/jsx/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/jsx/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/jsx/src/assets/logo.svg b/jsx/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/jsx/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/jsx/src/components/HelloWorld.vue b/jsx/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/jsx/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/jsx/src/components/TheWelcome.vue b/jsx/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/jsx/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx/src/components/WelcomeItem.vue b/jsx/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/jsx/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/jsx/src/components/icons/IconCommunity.vue b/jsx/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/jsx/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/jsx/src/components/icons/IconDocumentation.vue b/jsx/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/jsx/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/jsx/src/components/icons/IconEcosystem.vue b/jsx/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/jsx/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/jsx/src/components/icons/IconSupport.vue b/jsx/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/jsx/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/jsx/src/components/icons/IconTooling.vue b/jsx/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/jsx/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/jsx/src/main.js b/jsx/src/main.js new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/jsx/src/main.js @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/jsx/vite.config.js b/jsx/vite.config.js new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/jsx/vite.config.js @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/pinia-cypress/.gitignore b/pinia-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/pinia-cypress/.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/pinia-cypress/README.md b/pinia-cypress/README.md new file mode 100644 index 00000000..3d498038 --- /dev/null +++ b/pinia-cypress/README.md @@ -0,0 +1,42 @@ +# pinia-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/pinia-cypress/cypress.config.js b/pinia-cypress/cypress.config.js new file mode 100644 index 00000000..c3aba743 --- /dev/null +++ b/pinia-cypress/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' + } + } +}) diff --git a/pinia-cypress/cypress/e2e/example.cy.js b/pinia-cypress/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/pinia-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/pinia-cypress/cypress/e2e/jsconfig.json b/pinia-cypress/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/pinia-cypress/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/pinia-cypress/cypress/fixtures/example.json b/pinia-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/pinia-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/pinia-cypress/cypress/support/commands.js b/pinia-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/pinia-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/pinia-cypress/cypress/support/component-index.html b/pinia-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/pinia-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/pinia-cypress/cypress/support/component.js b/pinia-cypress/cypress/support/component.js new file mode 100644 index 00000000..3d1a3d22 --- /dev/null +++ b/pinia-cypress/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/vue2' + +Cypress.Commands.add('mount', mount) + +// Example use: +// cy.mount(MyComponent) diff --git a/pinia-cypress/cypress/support/e2e.js b/pinia-cypress/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/pinia-cypress/cypress/support/e2e.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/pinia-cypress/index.html b/pinia-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/pinia-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/pinia-cypress/package.json b/pinia-cypress/package.json new file mode 100644 index 00000000..ae477053 --- /dev/null +++ b/pinia-cypress/package.json @@ -0,0 +1,24 @@ +{ + "name": "pinia-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "cypress": "^10.3.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14" + } +} diff --git a/pinia-cypress/public/favicon.ico b/pinia-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/pinia-cypress/src/App.vue b/pinia-cypress/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/pinia-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/pinia-cypress/src/assets/base.css b/pinia-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/pinia-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/pinia-cypress/src/assets/logo.svg b/pinia-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/pinia-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pinia-cypress/src/components/HelloWorld.vue b/pinia-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/pinia-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/pinia-cypress/src/components/TheWelcome.vue b/pinia-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/pinia-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/pinia-cypress/src/components/WelcomeItem.vue b/pinia-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/pinia-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/pinia-cypress/src/components/__tests__/HelloWorld.cy.js b/pinia-cypress/src/components/__tests__/HelloWorld.cy.js new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/pinia-cypress/src/components/__tests__/HelloWorld.cy.js @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/pinia-cypress/src/components/icons/IconCommunity.vue b/pinia-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/pinia-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/pinia-cypress/src/components/icons/IconDocumentation.vue b/pinia-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/pinia-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/pinia-cypress/src/components/icons/IconEcosystem.vue b/pinia-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/pinia-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/pinia-cypress/src/components/icons/IconSupport.vue b/pinia-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/pinia-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/pinia-cypress/src/components/icons/IconTooling.vue b/pinia-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/pinia-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/pinia-cypress/src/main.js b/pinia-cypress/src/main.js new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/pinia-cypress/src/main.js @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/pinia-cypress/src/stores/counter.js b/pinia-cypress/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/pinia-cypress/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/pinia-cypress/vite.config.js b/pinia-cypress/vite.config.js new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/pinia-cypress/vite.config.js @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/pinia-vitest-cypress/.gitignore b/pinia-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/pinia-vitest-cypress/.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/pinia-vitest-cypress/README.md b/pinia-vitest-cypress/README.md new file mode 100644 index 00000000..9601475a --- /dev/null +++ b/pinia-vitest-cypress/README.md @@ -0,0 +1,42 @@ +# pinia-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/pinia-vitest-cypress/cypress.config.js b/pinia-vitest-cypress/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/pinia-vitest-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/' + } +}) diff --git a/pinia-vitest-cypress/cypress/e2e/example.cy.js b/pinia-vitest-cypress/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/pinia-vitest-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/pinia-vitest-cypress/cypress/e2e/jsconfig.json b/pinia-vitest-cypress/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/pinia-vitest-cypress/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/pinia-vitest-cypress/cypress/fixtures/example.json b/pinia-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/pinia-vitest-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/pinia-vitest-cypress/cypress/support/commands.js b/pinia-vitest-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/pinia-vitest-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/pinia-vitest-cypress/cypress/support/e2e.js b/pinia-vitest-cypress/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/pinia-vitest-cypress/cypress/support/e2e.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/pinia-vitest-cypress/index.html b/pinia-vitest-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/pinia-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/pinia-vitest-cypress/package.json b/pinia-vitest-cypress/package.json new file mode 100644 index 00000000..6dcfe861 --- /dev/null +++ b/pinia-vitest-cypress/package.json @@ -0,0 +1,27 @@ +{ + "name": "pinia-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/pinia-vitest-cypress/public/favicon.ico b/pinia-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/pinia-vitest-cypress/src/App.vue b/pinia-vitest-cypress/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/pinia-vitest-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/pinia-vitest-cypress/src/assets/base.css b/pinia-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/pinia-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/pinia-vitest-cypress/src/assets/logo.svg b/pinia-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/pinia-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pinia-vitest-cypress/src/components/HelloWorld.vue b/pinia-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/pinia-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/pinia-vitest-cypress/src/components/TheWelcome.vue b/pinia-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/pinia-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/pinia-vitest-cypress/src/components/WelcomeItem.vue b/pinia-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/pinia-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.js b/pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/pinia-vitest-cypress/src/components/icons/IconCommunity.vue b/pinia-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/pinia-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/pinia-vitest-cypress/src/components/icons/IconDocumentation.vue b/pinia-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/pinia-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/pinia-vitest-cypress/src/components/icons/IconEcosystem.vue b/pinia-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/pinia-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/pinia-vitest-cypress/src/components/icons/IconSupport.vue b/pinia-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/pinia-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/pinia-vitest-cypress/src/components/icons/IconTooling.vue b/pinia-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/pinia-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/pinia-vitest-cypress/src/main.js b/pinia-vitest-cypress/src/main.js new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/pinia-vitest-cypress/src/main.js @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/pinia-vitest-cypress/src/stores/counter.js b/pinia-vitest-cypress/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/pinia-vitest-cypress/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/pinia-vitest-cypress/vite.config.js b/pinia-vitest-cypress/vite.config.js new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/pinia-vitest-cypress/vite.config.js @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/pinia-vitest/.gitignore b/pinia-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/pinia-vitest/.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/pinia-vitest/README.md b/pinia-vitest/README.md new file mode 100644 index 00000000..366e7cd1 --- /dev/null +++ b/pinia-vitest/README.md @@ -0,0 +1,35 @@ +# pinia-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/pinia-vitest/index.html b/pinia-vitest/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/pinia-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/pinia-vitest/package.json b/pinia-vitest/package.json new file mode 100644 index 00000000..2cc7d742 --- /dev/null +++ b/pinia-vitest/package.json @@ -0,0 +1,23 @@ +{ + "name": "pinia-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "jsdom": "^20.0.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/pinia-vitest/public/favicon.ico b/pinia-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/pinia-vitest/src/App.vue b/pinia-vitest/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/pinia-vitest/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/pinia-vitest/src/assets/base.css b/pinia-vitest/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/pinia-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/pinia-vitest/src/assets/logo.svg b/pinia-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/pinia-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pinia-vitest/src/components/HelloWorld.vue b/pinia-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/pinia-vitest/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/pinia-vitest/src/components/TheWelcome.vue b/pinia-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/pinia-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/pinia-vitest/src/components/WelcomeItem.vue b/pinia-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/pinia-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/pinia-vitest/src/components/__tests__/HelloWorld.spec.js b/pinia-vitest/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/pinia-vitest/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/pinia-vitest/src/components/icons/IconCommunity.vue b/pinia-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/pinia-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/pinia-vitest/src/components/icons/IconDocumentation.vue b/pinia-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/pinia-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/pinia-vitest/src/components/icons/IconEcosystem.vue b/pinia-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/pinia-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/pinia-vitest/src/components/icons/IconSupport.vue b/pinia-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/pinia-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/pinia-vitest/src/components/icons/IconTooling.vue b/pinia-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/pinia-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/pinia-vitest/src/main.js b/pinia-vitest/src/main.js new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/pinia-vitest/src/main.js @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/pinia-vitest/src/stores/counter.js b/pinia-vitest/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/pinia-vitest/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/pinia-vitest/vite.config.js b/pinia-vitest/vite.config.js new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/pinia-vitest/vite.config.js @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/pinia-with-tests/README.md b/pinia-with-tests/README.md index 1d559a05..6e06c101 100644 --- a/pinia-with-tests/README.md +++ b/pinia-with-tests/README.md @@ -1,10 +1,10 @@ # pinia-with-tests -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Customize configuration @@ -28,10 +28,10 @@ pnpm dev pnpm build ``` -### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction) +### Run Unit Tests with [Vitest](https://vitest.dev/) ```sh -pnpm test:unit # or `pnpm test:unit:ci` for headless testing +pnpm test:unit ``` ### Run End-to-End Tests with [Cypress](https://www.cypress.io/) diff --git a/pinia-with-tests/cypress.config.js b/pinia-with-tests/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/pinia-with-tests/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/' + } +}) diff --git a/pinia-with-tests/cypress.json b/pinia-with-tests/cypress.json deleted file mode 100644 index 3d372252..00000000 --- a/pinia-with-tests/cypress.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "baseUrl": "http://localhost:5050/", - "component": { - "componentFolder": "src", - "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" - } -} diff --git a/pinia-with-tests/cypress/e2e/example.cy.js b/pinia-with-tests/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/pinia-with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/pinia-with-tests/cypress/e2e/jsconfig.json b/pinia-with-tests/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/pinia-with-tests/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/pinia-with-tests/cypress/plugins/index.js b/pinia-with-tests/cypress/plugins/index.js deleted file mode 100644 index ad2e351d..00000000 --- a/pinia-with-tests/cypress/plugins/index.js +++ /dev/null @@ -1,28 +0,0 @@ -/// -// *********************************************************** -// 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/pinia-with-tests/cypress/support/e2e.js b/pinia-with-tests/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/pinia-with-tests/cypress/support/e2e.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/pinia-with-tests/package.json b/pinia-with-tests/package.json index 558adbb2..ea8f441f 100644 --- a/pinia-with-tests/package.json +++ b/pinia-with-tests/package.json @@ -4,24 +4,24 @@ "scripts": { "dev": "vite", "build": "vite build", - "preview": "vite preview --port 5050", - "test:unit": "cypress open-ct", - "test:unit:ci": "cypress run-ct --quiet --reporter spec", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'" + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" }, "dependencies": { - "pinia": "^2.0.11", - "vue": "^2.7.0-0" + "pinia": "^2.0.14", + "vue": "^2.7.4" }, "devDependencies": { - "@cypress/vite-dev-server": "^2.2.2", - "@cypress/vue": "^2.2.4", - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "cypress": "^9.5.0", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.8.4", - "vue-template-compiler": "^2.7.0-0" + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" } } diff --git a/pinia-with-tests/src/components/__tests__/HelloWorld.spec.js b/pinia-with-tests/src/components/__tests__/HelloWorld.spec.js index d6fb360b..293bf197 100644 --- a/pinia-with-tests/src/components/__tests__/HelloWorld.spec.js +++ b/pinia-with-tests/src/components/__tests__/HelloWorld.spec.js @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/pinia/README.md b/pinia/README.md index 37089835..f9e2c8ef 100644 --- a/pinia/README.md +++ b/pinia/README.md @@ -1,10 +1,10 @@ # pinia -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Customize configuration diff --git a/pinia/package.json b/pinia/package.json index 067579e6..9d079552 100644 --- a/pinia/package.json +++ b/pinia/package.json @@ -4,15 +4,15 @@ "scripts": { "dev": "vite", "build": "vite build", - "preview": "vite preview --port 5050" + "preview": "vite preview --port 4173" }, "dependencies": { - "pinia": "^2.0.11", - "vue": "^2.7.0-0" + "pinia": "^2.0.14", + "vue": "^2.7.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "vite": "^2.8.4" + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "vite": "^2.9.14" } } diff --git a/router-cypress/.gitignore b/router-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/router-cypress/.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/router-cypress/README.md b/router-cypress/README.md new file mode 100644 index 00000000..ed53dfb7 --- /dev/null +++ b/router-cypress/README.md @@ -0,0 +1,42 @@ +# router-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/router-cypress/cypress.config.js b/router-cypress/cypress.config.js new file mode 100644 index 00000000..c3aba743 --- /dev/null +++ b/router-cypress/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' + } + } +}) diff --git a/router-cypress/cypress/e2e/example.cy.js b/router-cypress/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/router-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/router-cypress/cypress/e2e/jsconfig.json b/router-cypress/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/router-cypress/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/router-cypress/cypress/fixtures/example.json b/router-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/router-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/router-cypress/cypress/support/commands.js b/router-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/router-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/router-cypress/cypress/support/component-index.html b/router-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/router-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/router-cypress/cypress/support/component.js b/router-cypress/cypress/support/component.js new file mode 100644 index 00000000..3d1a3d22 --- /dev/null +++ b/router-cypress/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/vue2' + +Cypress.Commands.add('mount', mount) + +// Example use: +// cy.mount(MyComponent) diff --git a/router-cypress/cypress/support/e2e.js b/router-cypress/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/router-cypress/cypress/support/e2e.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/router-cypress/index.html b/router-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/router-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/router-cypress/package.json b/router-cypress/package.json new file mode 100644 index 00000000..b4646bfb --- /dev/null +++ b/router-cypress/package.json @@ -0,0 +1,24 @@ +{ + "name": "router-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "cypress": "^10.3.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14" + } +} diff --git a/router-cypress/public/favicon.ico b/router-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/router-cypress/src/App.vue b/router-cypress/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/router-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/router-cypress/src/assets/base.css b/router-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/router-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/router-cypress/src/assets/logo.svg b/router-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/router-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/router-cypress/src/components/HelloWorld.vue b/router-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/router-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/router-cypress/src/components/TheWelcome.vue b/router-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/router-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/router-cypress/src/components/WelcomeItem.vue b/router-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/router-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/router-cypress/src/components/__tests__/HelloWorld.cy.js b/router-cypress/src/components/__tests__/HelloWorld.cy.js new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/router-cypress/src/components/__tests__/HelloWorld.cy.js @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/router-cypress/src/components/icons/IconCommunity.vue b/router-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/router-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/router-cypress/src/components/icons/IconDocumentation.vue b/router-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/router-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/router-cypress/src/components/icons/IconEcosystem.vue b/router-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/router-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/router-cypress/src/components/icons/IconSupport.vue b/router-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/router-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/router-cypress/src/components/icons/IconTooling.vue b/router-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/router-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/router-cypress/src/main.js b/router-cypress/src/main.js new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/router-cypress/src/main.js @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/router-cypress/src/router/index.js b/router-cypress/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/router-cypress/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/router-cypress/src/views/AboutView.vue b/router-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/router-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/router-cypress/src/views/HomeView.vue b/router-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/router-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/router-cypress/vite.config.js b/router-cypress/vite.config.js new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/router-cypress/vite.config.js @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/router-pinia-cypress/.gitignore b/router-pinia-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/router-pinia-cypress/.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/router-pinia-cypress/README.md b/router-pinia-cypress/README.md new file mode 100644 index 00000000..f92db849 --- /dev/null +++ b/router-pinia-cypress/README.md @@ -0,0 +1,42 @@ +# router-pinia-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/router-pinia-cypress/cypress.config.js b/router-pinia-cypress/cypress.config.js new file mode 100644 index 00000000..c3aba743 --- /dev/null +++ b/router-pinia-cypress/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' + } + } +}) diff --git a/router-pinia-cypress/cypress/e2e/example.cy.js b/router-pinia-cypress/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/router-pinia-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/router-pinia-cypress/cypress/e2e/jsconfig.json b/router-pinia-cypress/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/router-pinia-cypress/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/router-pinia-cypress/cypress/fixtures/example.json b/router-pinia-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/router-pinia-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/router-pinia-cypress/cypress/support/commands.js b/router-pinia-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/router-pinia-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/router-pinia-cypress/cypress/support/component-index.html b/router-pinia-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/router-pinia-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/router-pinia-cypress/cypress/support/component.js b/router-pinia-cypress/cypress/support/component.js new file mode 100644 index 00000000..3d1a3d22 --- /dev/null +++ b/router-pinia-cypress/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/vue2' + +Cypress.Commands.add('mount', mount) + +// Example use: +// cy.mount(MyComponent) diff --git a/router-pinia-cypress/cypress/support/e2e.js b/router-pinia-cypress/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/router-pinia-cypress/cypress/support/e2e.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/router-pinia-cypress/index.html b/router-pinia-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/router-pinia-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/router-pinia-cypress/package.json b/router-pinia-cypress/package.json new file mode 100644 index 00000000..57bb7ec3 --- /dev/null +++ b/router-pinia-cypress/package.json @@ -0,0 +1,25 @@ +{ + "name": "router-pinia-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "cypress": "^10.3.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14" + } +} diff --git a/router-pinia-cypress/public/favicon.ico b/router-pinia-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/router-pinia-cypress/src/App.vue b/router-pinia-cypress/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/router-pinia-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/router-pinia-cypress/src/assets/base.css b/router-pinia-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/router-pinia-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/router-pinia-cypress/src/assets/logo.svg b/router-pinia-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/router-pinia-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/router-pinia-cypress/src/components/HelloWorld.vue b/router-pinia-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/router-pinia-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/router-pinia-cypress/src/components/TheWelcome.vue b/router-pinia-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/router-pinia-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/router-pinia-cypress/src/components/WelcomeItem.vue b/router-pinia-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/router-pinia-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/router-pinia-cypress/src/components/__tests__/HelloWorld.cy.js b/router-pinia-cypress/src/components/__tests__/HelloWorld.cy.js new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/router-pinia-cypress/src/components/__tests__/HelloWorld.cy.js @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/router-pinia-cypress/src/components/icons/IconCommunity.vue b/router-pinia-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/router-pinia-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/router-pinia-cypress/src/components/icons/IconDocumentation.vue b/router-pinia-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/router-pinia-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/router-pinia-cypress/src/components/icons/IconEcosystem.vue b/router-pinia-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/router-pinia-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/router-pinia-cypress/src/components/icons/IconSupport.vue b/router-pinia-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/router-pinia-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/router-pinia-cypress/src/components/icons/IconTooling.vue b/router-pinia-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/router-pinia-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/router-pinia-cypress/src/main.js b/router-pinia-cypress/src/main.js new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/router-pinia-cypress/src/main.js @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/router-pinia-cypress/src/router/index.js b/router-pinia-cypress/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/router-pinia-cypress/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/router-pinia-cypress/src/stores/counter.js b/router-pinia-cypress/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/router-pinia-cypress/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/router-pinia-cypress/src/views/AboutView.vue b/router-pinia-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/router-pinia-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/router-pinia-cypress/src/views/HomeView.vue b/router-pinia-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/router-pinia-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/router-pinia-cypress/vite.config.js b/router-pinia-cypress/vite.config.js new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/router-pinia-cypress/vite.config.js @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/router-pinia-vitest-cypress/.gitignore b/router-pinia-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/router-pinia-vitest-cypress/.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/router-pinia-vitest-cypress/README.md b/router-pinia-vitest-cypress/README.md new file mode 100644 index 00000000..71f01420 --- /dev/null +++ b/router-pinia-vitest-cypress/README.md @@ -0,0 +1,42 @@ +# router-pinia-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/router-pinia-vitest-cypress/cypress.config.js b/router-pinia-vitest-cypress/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/router-pinia-vitest-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/' + } +}) diff --git a/router-pinia-vitest-cypress/cypress/e2e/example.cy.js b/router-pinia-vitest-cypress/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/router-pinia-vitest-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/router-pinia-vitest-cypress/cypress/e2e/jsconfig.json b/router-pinia-vitest-cypress/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/router-pinia-vitest-cypress/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/router-pinia-vitest-cypress/cypress/fixtures/example.json b/router-pinia-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/router-pinia-vitest-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/router-pinia-vitest-cypress/cypress/support/commands.js b/router-pinia-vitest-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/router-pinia-vitest-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/router-pinia-vitest-cypress/cypress/support/e2e.js b/router-pinia-vitest-cypress/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/router-pinia-vitest-cypress/cypress/support/e2e.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/router-pinia-vitest-cypress/index.html b/router-pinia-vitest-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/router-pinia-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/router-pinia-vitest-cypress/package.json b/router-pinia-vitest-cypress/package.json new file mode 100644 index 00000000..a5ed98ba --- /dev/null +++ b/router-pinia-vitest-cypress/package.json @@ -0,0 +1,28 @@ +{ + "name": "router-pinia-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/router-pinia-vitest-cypress/public/favicon.ico b/router-pinia-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/router-pinia-vitest-cypress/src/App.vue b/router-pinia-vitest-cypress/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/router-pinia-vitest-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/router-pinia-vitest-cypress/src/assets/base.css b/router-pinia-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/router-pinia-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/router-pinia-vitest-cypress/src/assets/logo.svg b/router-pinia-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/router-pinia-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/router-pinia-vitest-cypress/src/components/HelloWorld.vue b/router-pinia-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/router-pinia-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/router-pinia-vitest-cypress/src/components/TheWelcome.vue b/router-pinia-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/router-pinia-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/router-pinia-vitest-cypress/src/components/WelcomeItem.vue b/router-pinia-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/router-pinia-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/router-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.js b/router-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/router-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/router-pinia-vitest-cypress/src/components/icons/IconCommunity.vue b/router-pinia-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/router-pinia-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/router-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue b/router-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/router-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/router-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue b/router-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/router-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/router-pinia-vitest-cypress/src/components/icons/IconSupport.vue b/router-pinia-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/router-pinia-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/router-pinia-vitest-cypress/src/components/icons/IconTooling.vue b/router-pinia-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/router-pinia-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/router-pinia-vitest-cypress/src/main.js b/router-pinia-vitest-cypress/src/main.js new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/router-pinia-vitest-cypress/src/main.js @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/router-pinia-vitest-cypress/src/router/index.js b/router-pinia-vitest-cypress/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/router-pinia-vitest-cypress/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/router-pinia-vitest-cypress/src/stores/counter.js b/router-pinia-vitest-cypress/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/router-pinia-vitest-cypress/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/router-pinia-vitest-cypress/src/views/AboutView.vue b/router-pinia-vitest-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/router-pinia-vitest-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/router-pinia-vitest-cypress/src/views/HomeView.vue b/router-pinia-vitest-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/router-pinia-vitest-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/router-pinia-vitest-cypress/vite.config.js b/router-pinia-vitest-cypress/vite.config.js new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/router-pinia-vitest-cypress/vite.config.js @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/router-pinia-vitest/.gitignore b/router-pinia-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/router-pinia-vitest/.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/router-pinia-vitest/README.md b/router-pinia-vitest/README.md new file mode 100644 index 00000000..471aea4b --- /dev/null +++ b/router-pinia-vitest/README.md @@ -0,0 +1,35 @@ +# router-pinia-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/router-pinia-vitest/index.html b/router-pinia-vitest/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/router-pinia-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/router-pinia-vitest/package.json b/router-pinia-vitest/package.json new file mode 100644 index 00000000..3dd2f07a --- /dev/null +++ b/router-pinia-vitest/package.json @@ -0,0 +1,24 @@ +{ + "name": "router-pinia-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "jsdom": "^20.0.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/router-pinia-vitest/public/favicon.ico b/router-pinia-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/router-pinia-vitest/src/App.vue b/router-pinia-vitest/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/router-pinia-vitest/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/router-pinia-vitest/src/assets/base.css b/router-pinia-vitest/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/router-pinia-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/router-pinia-vitest/src/assets/logo.svg b/router-pinia-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/router-pinia-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/router-pinia-vitest/src/components/HelloWorld.vue b/router-pinia-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/router-pinia-vitest/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/router-pinia-vitest/src/components/TheWelcome.vue b/router-pinia-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/router-pinia-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/router-pinia-vitest/src/components/WelcomeItem.vue b/router-pinia-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/router-pinia-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/router-pinia-vitest/src/components/__tests__/HelloWorld.spec.js b/router-pinia-vitest/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/router-pinia-vitest/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/router-pinia-vitest/src/components/icons/IconCommunity.vue b/router-pinia-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/router-pinia-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/router-pinia-vitest/src/components/icons/IconDocumentation.vue b/router-pinia-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/router-pinia-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/router-pinia-vitest/src/components/icons/IconEcosystem.vue b/router-pinia-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/router-pinia-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/router-pinia-vitest/src/components/icons/IconSupport.vue b/router-pinia-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/router-pinia-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/router-pinia-vitest/src/components/icons/IconTooling.vue b/router-pinia-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/router-pinia-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/router-pinia-vitest/src/main.js b/router-pinia-vitest/src/main.js new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/router-pinia-vitest/src/main.js @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/router-pinia-vitest/src/router/index.js b/router-pinia-vitest/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/router-pinia-vitest/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/router-pinia-vitest/src/stores/counter.js b/router-pinia-vitest/src/stores/counter.js new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/router-pinia-vitest/src/stores/counter.js @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/router-pinia-vitest/src/views/AboutView.vue b/router-pinia-vitest/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/router-pinia-vitest/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/router-pinia-vitest/src/views/HomeView.vue b/router-pinia-vitest/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/router-pinia-vitest/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/router-pinia-vitest/vite.config.js b/router-pinia-vitest/vite.config.js new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/router-pinia-vitest/vite.config.js @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/router-pinia-with-tests/README.md b/router-pinia-with-tests/README.md index 7b87e89e..fd1dfcfb 100644 --- a/router-pinia-with-tests/README.md +++ b/router-pinia-with-tests/README.md @@ -1,10 +1,10 @@ # router-pinia-with-tests -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Customize configuration @@ -28,10 +28,10 @@ pnpm dev pnpm build ``` -### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction) +### Run Unit Tests with [Vitest](https://vitest.dev/) ```sh -pnpm test:unit # or `pnpm test:unit:ci` for headless testing +pnpm test:unit ``` ### Run End-to-End Tests with [Cypress](https://www.cypress.io/) diff --git a/router-pinia-with-tests/cypress.config.js b/router-pinia-with-tests/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/router-pinia-with-tests/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/' + } +}) diff --git a/router-pinia-with-tests/cypress.json b/router-pinia-with-tests/cypress.json deleted file mode 100644 index 3d372252..00000000 --- a/router-pinia-with-tests/cypress.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "baseUrl": "http://localhost:5050/", - "component": { - "componentFolder": "src", - "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" - } -} diff --git a/router-pinia-with-tests/cypress/e2e/example.cy.js b/router-pinia-with-tests/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/router-pinia-with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/router-pinia-with-tests/cypress/e2e/jsconfig.json b/router-pinia-with-tests/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/router-pinia-with-tests/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/router-pinia-with-tests/cypress/plugins/index.js b/router-pinia-with-tests/cypress/plugins/index.js deleted file mode 100644 index ad2e351d..00000000 --- a/router-pinia-with-tests/cypress/plugins/index.js +++ /dev/null @@ -1,28 +0,0 @@ -/// -// *********************************************************** -// 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/router-pinia-with-tests/cypress/support/e2e.js b/router-pinia-with-tests/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/router-pinia-with-tests/cypress/support/e2e.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/router-pinia-with-tests/package.json b/router-pinia-with-tests/package.json index 1204f0c3..fa6bb298 100644 --- a/router-pinia-with-tests/package.json +++ b/router-pinia-with-tests/package.json @@ -4,25 +4,25 @@ "scripts": { "dev": "vite", "build": "vite build", - "preview": "vite preview --port 5050", - "test:unit": "cypress open-ct", - "test:unit:ci": "cypress run-ct --quiet --reporter spec", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'" + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" }, "dependencies": { - "pinia": "^2.0.11", - "vue": "^2.7.0-0", - "vue-router": "^3.5.3" + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" }, "devDependencies": { - "@cypress/vite-dev-server": "^2.2.2", - "@cypress/vue": "^2.2.4", - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "cypress": "^9.5.0", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.8.4", - "vue-template-compiler": "^2.7.0-0" + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" } } diff --git a/router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js b/router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js index d6fb360b..293bf197 100644 --- a/router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js +++ b/router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.js @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/router-pinia/README.md b/router-pinia/README.md index 8ec2ec94..514afe14 100644 --- a/router-pinia/README.md +++ b/router-pinia/README.md @@ -1,10 +1,10 @@ # router-pinia -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Customize configuration diff --git a/router-pinia/package.json b/router-pinia/package.json index ada5f03b..9fb495b9 100644 --- a/router-pinia/package.json +++ b/router-pinia/package.json @@ -4,16 +4,16 @@ "scripts": { "dev": "vite", "build": "vite build", - "preview": "vite preview --port 5050" + "preview": "vite preview --port 4173" }, "dependencies": { - "pinia": "^2.0.11", - "vue": "^2.7.0-0", - "vue-router": "^3.5.3" + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "vite": "^2.8.4" + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "vite": "^2.9.14" } } diff --git a/router-vitest-cypress/.gitignore b/router-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/router-vitest-cypress/.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/router-vitest-cypress/README.md b/router-vitest-cypress/README.md new file mode 100644 index 00000000..6f489d9e --- /dev/null +++ b/router-vitest-cypress/README.md @@ -0,0 +1,42 @@ +# router-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/router-vitest-cypress/cypress.config.js b/router-vitest-cypress/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/router-vitest-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/' + } +}) diff --git a/router-vitest-cypress/cypress/e2e/example.cy.js b/router-vitest-cypress/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/router-vitest-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/router-vitest-cypress/cypress/e2e/jsconfig.json b/router-vitest-cypress/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/router-vitest-cypress/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/router-vitest-cypress/cypress/fixtures/example.json b/router-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/router-vitest-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/router-vitest-cypress/cypress/support/commands.js b/router-vitest-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/router-vitest-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/router-vitest-cypress/cypress/support/e2e.js b/router-vitest-cypress/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/router-vitest-cypress/cypress/support/e2e.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/router-vitest-cypress/index.html b/router-vitest-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/router-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/router-vitest-cypress/package.json b/router-vitest-cypress/package.json new file mode 100644 index 00000000..8e76795a --- /dev/null +++ b/router-vitest-cypress/package.json @@ -0,0 +1,27 @@ +{ + "name": "router-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/router-vitest-cypress/public/favicon.ico b/router-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/router-vitest-cypress/src/App.vue b/router-vitest-cypress/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/router-vitest-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/router-vitest-cypress/src/assets/base.css b/router-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/router-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/router-vitest-cypress/src/assets/logo.svg b/router-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/router-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/router-vitest-cypress/src/components/HelloWorld.vue b/router-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/router-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/router-vitest-cypress/src/components/TheWelcome.vue b/router-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/router-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/router-vitest-cypress/src/components/WelcomeItem.vue b/router-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/router-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/router-vitest-cypress/src/components/__tests__/HelloWorld.spec.js b/router-vitest-cypress/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/router-vitest-cypress/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/router-vitest-cypress/src/components/icons/IconCommunity.vue b/router-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/router-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/router-vitest-cypress/src/components/icons/IconDocumentation.vue b/router-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/router-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/router-vitest-cypress/src/components/icons/IconEcosystem.vue b/router-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/router-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/router-vitest-cypress/src/components/icons/IconSupport.vue b/router-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/router-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/router-vitest-cypress/src/components/icons/IconTooling.vue b/router-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/router-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/router-vitest-cypress/src/main.js b/router-vitest-cypress/src/main.js new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/router-vitest-cypress/src/main.js @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/router-vitest-cypress/src/router/index.js b/router-vitest-cypress/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/router-vitest-cypress/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/router-vitest-cypress/src/views/AboutView.vue b/router-vitest-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/router-vitest-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/router-vitest-cypress/src/views/HomeView.vue b/router-vitest-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/router-vitest-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/router-vitest-cypress/vite.config.js b/router-vitest-cypress/vite.config.js new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/router-vitest-cypress/vite.config.js @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/router-vitest/.gitignore b/router-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/router-vitest/.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/router-vitest/README.md b/router-vitest/README.md new file mode 100644 index 00000000..25e8bcb7 --- /dev/null +++ b/router-vitest/README.md @@ -0,0 +1,35 @@ +# router-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/router-vitest/index.html b/router-vitest/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/router-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/router-vitest/package.json b/router-vitest/package.json new file mode 100644 index 00000000..6dc5c66d --- /dev/null +++ b/router-vitest/package.json @@ -0,0 +1,23 @@ +{ + "name": "router-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "jsdom": "^20.0.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/router-vitest/public/favicon.ico b/router-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/router-vitest/src/App.vue b/router-vitest/src/App.vue new file mode 100644 index 00000000..eac0e1bb --- /dev/null +++ b/router-vitest/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/router-vitest/src/assets/base.css b/router-vitest/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/router-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/router-vitest/src/assets/logo.svg b/router-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/router-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/router-vitest/src/components/HelloWorld.vue b/router-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/router-vitest/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/router-vitest/src/components/TheWelcome.vue b/router-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/router-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/router-vitest/src/components/WelcomeItem.vue b/router-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/router-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/router-vitest/src/components/__tests__/HelloWorld.spec.js b/router-vitest/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/router-vitest/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/router-vitest/src/components/icons/IconCommunity.vue b/router-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/router-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/router-vitest/src/components/icons/IconDocumentation.vue b/router-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/router-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/router-vitest/src/components/icons/IconEcosystem.vue b/router-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/router-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/router-vitest/src/components/icons/IconSupport.vue b/router-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/router-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/router-vitest/src/components/icons/IconTooling.vue b/router-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/router-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/router-vitest/src/main.js b/router-vitest/src/main.js new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/router-vitest/src/main.js @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/router-vitest/src/router/index.js b/router-vitest/src/router/index.js new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/router-vitest/src/router/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/router-vitest/src/views/AboutView.vue b/router-vitest/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/router-vitest/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/router-vitest/src/views/HomeView.vue b/router-vitest/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/router-vitest/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/router-vitest/vite.config.js b/router-vitest/vite.config.js new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/router-vitest/vite.config.js @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/router-with-tests/README.md b/router-with-tests/README.md index 8de21b47..df90e7f1 100644 --- a/router-with-tests/README.md +++ b/router-with-tests/README.md @@ -1,10 +1,10 @@ # router-with-tests -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Customize configuration @@ -28,10 +28,10 @@ pnpm dev pnpm build ``` -### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction) +### Run Unit Tests with [Vitest](https://vitest.dev/) ```sh -pnpm test:unit # or `pnpm test:unit:ci` for headless testing +pnpm test:unit ``` ### Run End-to-End Tests with [Cypress](https://www.cypress.io/) diff --git a/router-with-tests/cypress.config.js b/router-with-tests/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/router-with-tests/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/' + } +}) diff --git a/router-with-tests/cypress.json b/router-with-tests/cypress.json deleted file mode 100644 index 3d372252..00000000 --- a/router-with-tests/cypress.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "baseUrl": "http://localhost:5050/", - "component": { - "componentFolder": "src", - "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" - } -} diff --git a/router-with-tests/cypress/e2e/example.cy.js b/router-with-tests/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/router-with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/router-with-tests/cypress/e2e/jsconfig.json b/router-with-tests/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/router-with-tests/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/router-with-tests/cypress/plugins/index.js b/router-with-tests/cypress/plugins/index.js deleted file mode 100644 index ad2e351d..00000000 --- a/router-with-tests/cypress/plugins/index.js +++ /dev/null @@ -1,28 +0,0 @@ -/// -// *********************************************************** -// 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/router-with-tests/cypress/support/e2e.js b/router-with-tests/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/router-with-tests/cypress/support/e2e.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/router-with-tests/package.json b/router-with-tests/package.json index be995efd..aab73db5 100644 --- a/router-with-tests/package.json +++ b/router-with-tests/package.json @@ -4,24 +4,24 @@ "scripts": { "dev": "vite", "build": "vite build", - "preview": "vite preview --port 5050", - "test:unit": "cypress open-ct", - "test:unit:ci": "cypress run-ct --quiet --reporter spec", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'" + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" }, "dependencies": { - "vue": "^2.7.0-0", - "vue-router": "^3.5.3" + "vue": "^2.7.4", + "vue-router": "^3.5.4" }, "devDependencies": { - "@cypress/vite-dev-server": "^2.2.2", - "@cypress/vue": "^2.2.4", - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "cypress": "^9.5.0", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.8.4", - "vue-template-compiler": "^2.7.0-0" + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" } } diff --git a/router-with-tests/src/components/__tests__/HelloWorld.spec.js b/router-with-tests/src/components/__tests__/HelloWorld.spec.js index d6fb360b..293bf197 100644 --- a/router-with-tests/src/components/__tests__/HelloWorld.spec.js +++ b/router-with-tests/src/components/__tests__/HelloWorld.spec.js @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/router/README.md b/router/README.md index 049ddce0..333dacc6 100644 --- a/router/README.md +++ b/router/README.md @@ -1,10 +1,10 @@ # router -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Customize configuration diff --git a/router/package.json b/router/package.json index dd2cf52c..d9471c3a 100644 --- a/router/package.json +++ b/router/package.json @@ -4,15 +4,15 @@ "scripts": { "dev": "vite", "build": "vite build", - "preview": "vite preview --port 5050" + "preview": "vite preview --port 4173" }, "dependencies": { - "vue": "^2.7.0-0", - "vue-router": "^3.5.3" + "vue": "^2.7.4", + "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "vite": "^2.8.4" + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "vite": "^2.9.14" } } diff --git a/typescript-cypress/.gitignore b/typescript-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-cypress/.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/typescript-cypress/README.md b/typescript-cypress/README.md new file mode 100644 index 00000000..b2771aaf --- /dev/null +++ b/typescript-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-cypress/cypress.config.ts b/typescript-cypress/cypress.config.ts new file mode 100644 index 00000000..c8fac129 --- /dev/null +++ b/typescript-cypress/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' + } + } +}) diff --git a/typescript-cypress/cypress/e2e/example.cy.ts b/typescript-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-cypress/cypress/e2e/tsconfig.json b/typescript-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-cypress/cypress/fixtures/example.json b/typescript-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-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/typescript-cypress/cypress/support/commands.ts b/typescript-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-cypress/cypress/support/component-index.html b/typescript-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/typescript-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/typescript-cypress/cypress/support/component.ts b/typescript-cypress/cypress/support/component.ts new file mode 100644 index 00000000..c56a294a --- /dev/null +++ b/typescript-cypress/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/vue2' + +// Augment the Cypress namespace to include type definitions for +// your custom command. +// Alternatively, can be defined in cypress/support/component.d.ts +// with a 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) diff --git a/typescript-cypress/cypress/support/e2e.ts b/typescript-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-cypress/cypress/support/e2e.ts @@ -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/typescript-cypress/env.d.ts b/typescript-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-cypress/index.html b/typescript-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-cypress/package.json b/typescript-cypress/package.json new file mode 100644 index 00000000..fbeed2f0 --- /dev/null +++ b/typescript-cypress/package.json @@ -0,0 +1,30 @@ +{ + "name": "typescript-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-cypress/public/favicon.ico b/typescript-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-cypress/src/App.vue b/typescript-cypress/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-cypress/src/assets/base.css b/typescript-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-cypress/src/assets/logo.svg b/typescript-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-cypress/src/components/HelloWorld.vue b/typescript-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-cypress/src/components/TheWelcome.vue b/typescript-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-cypress/src/components/WelcomeItem.vue b/typescript-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-cypress/src/components/__tests__/HelloWorld.cy.ts b/typescript-cypress/src/components/__tests__/HelloWorld.cy.ts new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/typescript-cypress/src/components/__tests__/HelloWorld.cy.ts @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/typescript-cypress/src/components/icons/IconCommunity.vue b/typescript-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-cypress/src/components/icons/IconDocumentation.vue b/typescript-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-cypress/src/components/icons/IconEcosystem.vue b/typescript-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-cypress/src/components/icons/IconSupport.vue b/typescript-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-cypress/src/components/icons/IconTooling.vue b/typescript-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-cypress/src/main.ts b/typescript-cypress/src/main.ts new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/typescript-cypress/src/main.ts @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-cypress/tsconfig.app.json b/typescript-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-cypress/tsconfig.config.json b/typescript-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-cypress/tsconfig.cypress-ct.json b/typescript-cypress/tsconfig.cypress-ct.json new file mode 100644 index 00000000..29cbaa47 --- /dev/null +++ b/typescript-cypress/tsconfig.cypress-ct.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.app.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "cypress/support/component.*"], + "exclude": [], + "compilerOptions": { + "composite": true + } +} diff --git a/typescript-cypress/tsconfig.json b/typescript-cypress/tsconfig.json new file mode 100644 index 00000000..040665bb --- /dev/null +++ b/typescript-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.cypress-ct.json" + } + ] +} diff --git a/typescript-cypress/vite.config.ts b/typescript-cypress/vite.config.ts new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/typescript-cypress/vite.config.ts @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-cypress/.gitignore b/typescript-jsx-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-cypress/.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/typescript-jsx-cypress/README.md b/typescript-jsx-cypress/README.md new file mode 100644 index 00000000..00562935 --- /dev/null +++ b/typescript-jsx-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-jsx-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-jsx-cypress/cypress.config.ts b/typescript-jsx-cypress/cypress.config.ts new file mode 100644 index 00000000..c8fac129 --- /dev/null +++ b/typescript-jsx-cypress/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' + } + } +}) diff --git a/typescript-jsx-cypress/cypress/e2e/example.cy.ts b/typescript-jsx-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-jsx-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-jsx-cypress/cypress/e2e/tsconfig.json b/typescript-jsx-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-jsx-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-jsx-cypress/cypress/fixtures/example.json b/typescript-jsx-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-jsx-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/typescript-jsx-cypress/cypress/support/commands.ts b/typescript-jsx-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-jsx-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-jsx-cypress/cypress/support/component-index.html b/typescript-jsx-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/typescript-jsx-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/typescript-jsx-cypress/cypress/support/component.ts b/typescript-jsx-cypress/cypress/support/component.ts new file mode 100644 index 00000000..c56a294a --- /dev/null +++ b/typescript-jsx-cypress/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/vue2' + +// Augment the Cypress namespace to include type definitions for +// your custom command. +// Alternatively, can be defined in cypress/support/component.d.ts +// with a 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) diff --git a/typescript-jsx-cypress/cypress/support/e2e.ts b/typescript-jsx-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-jsx-cypress/cypress/support/e2e.ts @@ -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/typescript-jsx-cypress/env.d.ts b/typescript-jsx-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-cypress/index.html b/typescript-jsx-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-cypress/package.json b/typescript-jsx-cypress/package.json new file mode 100644 index 00000000..c95e2777 --- /dev/null +++ b/typescript-jsx-cypress/package.json @@ -0,0 +1,31 @@ +{ + "name": "typescript-jsx-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-cypress/public/favicon.ico b/typescript-jsx-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-cypress/src/App.vue b/typescript-jsx-cypress/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-jsx-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-jsx-cypress/src/assets/base.css b/typescript-jsx-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-jsx-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-cypress/src/assets/logo.svg b/typescript-jsx-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-cypress/src/components/HelloWorld.vue b/typescript-jsx-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-jsx-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-cypress/src/components/TheWelcome.vue b/typescript-jsx-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-cypress/src/components/WelcomeItem.vue b/typescript-jsx-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-cypress/src/components/__tests__/HelloWorld.cy.ts b/typescript-jsx-cypress/src/components/__tests__/HelloWorld.cy.ts new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/typescript-jsx-cypress/src/components/__tests__/HelloWorld.cy.ts @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/typescript-jsx-cypress/src/components/icons/IconCommunity.vue b/typescript-jsx-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-cypress/src/components/icons/IconDocumentation.vue b/typescript-jsx-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-cypress/src/components/icons/IconEcosystem.vue b/typescript-jsx-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-cypress/src/components/icons/IconSupport.vue b/typescript-jsx-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-cypress/src/components/icons/IconTooling.vue b/typescript-jsx-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-cypress/src/main.ts b/typescript-jsx-cypress/src/main.ts new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/typescript-jsx-cypress/src/main.ts @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-cypress/tsconfig.app.json b/typescript-jsx-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-cypress/tsconfig.config.json b/typescript-jsx-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-cypress/tsconfig.cypress-ct.json b/typescript-jsx-cypress/tsconfig.cypress-ct.json new file mode 100644 index 00000000..29cbaa47 --- /dev/null +++ b/typescript-jsx-cypress/tsconfig.cypress-ct.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.app.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "cypress/support/component.*"], + "exclude": [], + "compilerOptions": { + "composite": true + } +} diff --git a/typescript-jsx-cypress/tsconfig.json b/typescript-jsx-cypress/tsconfig.json new file mode 100644 index 00000000..040665bb --- /dev/null +++ b/typescript-jsx-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.cypress-ct.json" + } + ] +} diff --git a/typescript-jsx-cypress/vite.config.ts b/typescript-jsx-cypress/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-cypress/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-pinia-cypress/.gitignore b/typescript-jsx-pinia-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-pinia-cypress/.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/typescript-jsx-pinia-cypress/README.md b/typescript-jsx-pinia-cypress/README.md new file mode 100644 index 00000000..8c2e630c --- /dev/null +++ b/typescript-jsx-pinia-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-jsx-pinia-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-jsx-pinia-cypress/cypress.config.ts b/typescript-jsx-pinia-cypress/cypress.config.ts new file mode 100644 index 00000000..c8fac129 --- /dev/null +++ b/typescript-jsx-pinia-cypress/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' + } + } +}) diff --git a/typescript-jsx-pinia-cypress/cypress/e2e/example.cy.ts b/typescript-jsx-pinia-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-jsx-pinia-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-jsx-pinia-cypress/cypress/e2e/tsconfig.json b/typescript-jsx-pinia-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-jsx-pinia-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-jsx-pinia-cypress/cypress/fixtures/example.json b/typescript-jsx-pinia-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-jsx-pinia-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/typescript-jsx-pinia-cypress/cypress/support/commands.ts b/typescript-jsx-pinia-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-jsx-pinia-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-jsx-pinia-cypress/cypress/support/component-index.html b/typescript-jsx-pinia-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/typescript-jsx-pinia-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/typescript-jsx-pinia-cypress/cypress/support/component.ts b/typescript-jsx-pinia-cypress/cypress/support/component.ts new file mode 100644 index 00000000..c56a294a --- /dev/null +++ b/typescript-jsx-pinia-cypress/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/vue2' + +// Augment the Cypress namespace to include type definitions for +// your custom command. +// Alternatively, can be defined in cypress/support/component.d.ts +// with a 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) diff --git a/typescript-jsx-pinia-cypress/cypress/support/e2e.ts b/typescript-jsx-pinia-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-jsx-pinia-cypress/cypress/support/e2e.ts @@ -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/typescript-jsx-pinia-cypress/env.d.ts b/typescript-jsx-pinia-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-pinia-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-pinia-cypress/index.html b/typescript-jsx-pinia-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-pinia-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-pinia-cypress/package.json b/typescript-jsx-pinia-cypress/package.json new file mode 100644 index 00000000..67221f6e --- /dev/null +++ b/typescript-jsx-pinia-cypress/package.json @@ -0,0 +1,32 @@ +{ + "name": "typescript-jsx-pinia-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-pinia-cypress/public/favicon.ico b/typescript-jsx-pinia-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-pinia-cypress/src/App.vue b/typescript-jsx-pinia-cypress/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-jsx-pinia-cypress/src/assets/base.css b/typescript-jsx-pinia-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-pinia-cypress/src/assets/logo.svg b/typescript-jsx-pinia-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-pinia-cypress/src/components/HelloWorld.vue b/typescript-jsx-pinia-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-pinia-cypress/src/components/TheWelcome.vue b/typescript-jsx-pinia-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-pinia-cypress/src/components/WelcomeItem.vue b/typescript-jsx-pinia-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-pinia-cypress/src/components/__tests__/HelloWorld.cy.ts b/typescript-jsx-pinia-cypress/src/components/__tests__/HelloWorld.cy.ts new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/components/__tests__/HelloWorld.cy.ts @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/typescript-jsx-pinia-cypress/src/components/icons/IconCommunity.vue b/typescript-jsx-pinia-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-cypress/src/components/icons/IconDocumentation.vue b/typescript-jsx-pinia-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-cypress/src/components/icons/IconEcosystem.vue b/typescript-jsx-pinia-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-cypress/src/components/icons/IconSupport.vue b/typescript-jsx-pinia-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-cypress/src/components/icons/IconTooling.vue b/typescript-jsx-pinia-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-pinia-cypress/src/main.ts b/typescript-jsx-pinia-cypress/src/main.ts new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/main.ts @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-pinia-cypress/src/stores/counter.ts b/typescript-jsx-pinia-cypress/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-jsx-pinia-cypress/tsconfig.app.json b/typescript-jsx-pinia-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-pinia-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-pinia-cypress/tsconfig.config.json b/typescript-jsx-pinia-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-pinia-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-pinia-cypress/tsconfig.cypress-ct.json b/typescript-jsx-pinia-cypress/tsconfig.cypress-ct.json new file mode 100644 index 00000000..29cbaa47 --- /dev/null +++ b/typescript-jsx-pinia-cypress/tsconfig.cypress-ct.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.app.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "cypress/support/component.*"], + "exclude": [], + "compilerOptions": { + "composite": true + } +} diff --git a/typescript-jsx-pinia-cypress/tsconfig.json b/typescript-jsx-pinia-cypress/tsconfig.json new file mode 100644 index 00000000..040665bb --- /dev/null +++ b/typescript-jsx-pinia-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.cypress-ct.json" + } + ] +} diff --git a/typescript-jsx-pinia-cypress/vite.config.ts b/typescript-jsx-pinia-cypress/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-pinia-cypress/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-pinia-vitest-cypress/.gitignore b/typescript-jsx-pinia-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/.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/typescript-jsx-pinia-vitest-cypress/README.md b/typescript-jsx-pinia-vitest-cypress/README.md new file mode 100644 index 00000000..52e3107d --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-jsx-pinia-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-jsx-pinia-vitest-cypress/cypress.config.ts b/typescript-jsx-pinia-vitest-cypress/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-jsx-pinia-vitest-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/' + } +}) diff --git a/typescript-jsx-pinia-vitest-cypress/cypress/e2e/example.cy.ts b/typescript-jsx-pinia-vitest-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-jsx-pinia-vitest-cypress/cypress/e2e/tsconfig.json b/typescript-jsx-pinia-vitest-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-jsx-pinia-vitest-cypress/cypress/fixtures/example.json b/typescript-jsx-pinia-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-jsx-pinia-vitest-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/typescript-jsx-pinia-vitest-cypress/cypress/support/commands.ts b/typescript-jsx-pinia-vitest-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-jsx-pinia-vitest-cypress/cypress/support/e2e.ts b/typescript-jsx-pinia-vitest-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/cypress/support/e2e.ts @@ -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/typescript-jsx-pinia-vitest-cypress/env.d.ts b/typescript-jsx-pinia-vitest-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-pinia-vitest-cypress/index.html b/typescript-jsx-pinia-vitest-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-pinia-vitest-cypress/package.json b/typescript-jsx-pinia-vitest-cypress/package.json new file mode 100644 index 00000000..64b411eb --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/package.json @@ -0,0 +1,36 @@ +{ + "name": "typescript-jsx-pinia-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-pinia-vitest-cypress/public/favicon.ico b/typescript-jsx-pinia-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-pinia-vitest-cypress/src/App.vue b/typescript-jsx-pinia-vitest-cypress/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-jsx-pinia-vitest-cypress/src/assets/base.css b/typescript-jsx-pinia-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-pinia-vitest-cypress/src/assets/logo.svg b/typescript-jsx-pinia-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-pinia-vitest-cypress/src/components/HelloWorld.vue b/typescript-jsx-pinia-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-pinia-vitest-cypress/src/components/TheWelcome.vue b/typescript-jsx-pinia-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-pinia-vitest-cypress/src/components/WelcomeItem.vue b/typescript-jsx-pinia-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconCommunity.vue b/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue b/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue b/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconSupport.vue b/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconTooling.vue b/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-pinia-vitest-cypress/src/main.ts b/typescript-jsx-pinia-vitest-cypress/src/main.ts new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/main.ts @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-pinia-vitest-cypress/src/stores/counter.ts b/typescript-jsx-pinia-vitest-cypress/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-jsx-pinia-vitest-cypress/tsconfig.app.json b/typescript-jsx-pinia-vitest-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-pinia-vitest-cypress/tsconfig.config.json b/typescript-jsx-pinia-vitest-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-pinia-vitest-cypress/tsconfig.json b/typescript-jsx-pinia-vitest-cypress/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-jsx-pinia-vitest-cypress/tsconfig.vitest.json b/typescript-jsx-pinia-vitest-cypress/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-jsx-pinia-vitest-cypress/vite.config.ts b/typescript-jsx-pinia-vitest-cypress/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-pinia-vitest/.gitignore b/typescript-jsx-pinia-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-pinia-vitest/.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/typescript-jsx-pinia-vitest/README.md b/typescript-jsx-pinia-vitest/README.md new file mode 100644 index 00000000..016c52b6 --- /dev/null +++ b/typescript-jsx-pinia-vitest/README.md @@ -0,0 +1,46 @@ +# typescript-jsx-pinia-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/typescript-jsx-pinia-vitest/env.d.ts b/typescript-jsx-pinia-vitest/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-pinia-vitest/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-pinia-vitest/index.html b/typescript-jsx-pinia-vitest/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-pinia-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-pinia-vitest/package.json b/typescript-jsx-pinia-vitest/package.json new file mode 100644 index 00000000..6135a4ce --- /dev/null +++ b/typescript-jsx-pinia-vitest/package.json @@ -0,0 +1,32 @@ +{ + "name": "typescript-jsx-pinia-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-pinia-vitest/public/favicon.ico b/typescript-jsx-pinia-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-pinia-vitest/src/App.vue b/typescript-jsx-pinia-vitest/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-jsx-pinia-vitest/src/assets/base.css b/typescript-jsx-pinia-vitest/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-pinia-vitest/src/assets/logo.svg b/typescript-jsx-pinia-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-pinia-vitest/src/components/HelloWorld.vue b/typescript-jsx-pinia-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-pinia-vitest/src/components/TheWelcome.vue b/typescript-jsx-pinia-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-pinia-vitest/src/components/WelcomeItem.vue b/typescript-jsx-pinia-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-pinia-vitest/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-pinia-vitest/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-jsx-pinia-vitest/src/components/icons/IconCommunity.vue b/typescript-jsx-pinia-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-vitest/src/components/icons/IconDocumentation.vue b/typescript-jsx-pinia-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-vitest/src/components/icons/IconEcosystem.vue b/typescript-jsx-pinia-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-vitest/src/components/icons/IconSupport.vue b/typescript-jsx-pinia-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-vitest/src/components/icons/IconTooling.vue b/typescript-jsx-pinia-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-pinia-vitest/src/main.ts b/typescript-jsx-pinia-vitest/src/main.ts new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/main.ts @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-pinia-vitest/src/stores/counter.ts b/typescript-jsx-pinia-vitest/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-jsx-pinia-vitest/tsconfig.app.json b/typescript-jsx-pinia-vitest/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-pinia-vitest/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-pinia-vitest/tsconfig.config.json b/typescript-jsx-pinia-vitest/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-pinia-vitest/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-pinia-vitest/tsconfig.json b/typescript-jsx-pinia-vitest/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-jsx-pinia-vitest/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-jsx-pinia-vitest/tsconfig.vitest.json b/typescript-jsx-pinia-vitest/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-jsx-pinia-vitest/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-jsx-pinia-vitest/vite.config.ts b/typescript-jsx-pinia-vitest/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-pinia-vitest/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-pinia-with-tests/.gitignore b/typescript-jsx-pinia-with-tests/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-pinia-with-tests/.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/typescript-jsx-pinia-with-tests/README.md b/typescript-jsx-pinia-with-tests/README.md new file mode 100644 index 00000000..a3d3d35b --- /dev/null +++ b/typescript-jsx-pinia-with-tests/README.md @@ -0,0 +1,53 @@ +# typescript-jsx-pinia-with-tests + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-jsx-pinia-with-tests/cypress.config.ts b/typescript-jsx-pinia-with-tests/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-jsx-pinia-with-tests/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/' + } +}) diff --git a/typescript-jsx-pinia-with-tests/cypress/e2e/example.cy.ts b/typescript-jsx-pinia-with-tests/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-jsx-pinia-with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-jsx-pinia-with-tests/cypress/e2e/tsconfig.json b/typescript-jsx-pinia-with-tests/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-jsx-pinia-with-tests/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-jsx-pinia-with-tests/cypress/fixtures/example.json b/typescript-jsx-pinia-with-tests/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/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/typescript-jsx-pinia-with-tests/cypress/support/commands.ts b/typescript-jsx-pinia-with-tests/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-jsx-pinia-with-tests/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-jsx-pinia-with-tests/cypress/support/e2e.ts b/typescript-jsx-pinia-with-tests/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-jsx-pinia-with-tests/cypress/support/e2e.ts @@ -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/typescript-jsx-pinia-with-tests/env.d.ts b/typescript-jsx-pinia-with-tests/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-pinia-with-tests/index.html b/typescript-jsx-pinia-with-tests/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-pinia-with-tests/package.json b/typescript-jsx-pinia-with-tests/package.json new file mode 100644 index 00000000..94edeab3 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/package.json @@ -0,0 +1,36 @@ +{ + "name": "typescript-jsx-pinia-with-tests", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-pinia-with-tests/public/favicon.ico b/typescript-jsx-pinia-with-tests/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-pinia-with-tests/src/App.vue b/typescript-jsx-pinia-with-tests/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-jsx-pinia-with-tests/src/assets/base.css b/typescript-jsx-pinia-with-tests/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-pinia-with-tests/src/assets/logo.svg b/typescript-jsx-pinia-with-tests/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-pinia-with-tests/src/components/HelloWorld.vue b/typescript-jsx-pinia-with-tests/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-pinia-with-tests/src/components/TheWelcome.vue b/typescript-jsx-pinia-with-tests/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-pinia-with-tests/src/components/WelcomeItem.vue b/typescript-jsx-pinia-with-tests/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-jsx-pinia-with-tests/src/components/icons/IconCommunity.vue b/typescript-jsx-pinia-with-tests/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-with-tests/src/components/icons/IconDocumentation.vue b/typescript-jsx-pinia-with-tests/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-with-tests/src/components/icons/IconEcosystem.vue b/typescript-jsx-pinia-with-tests/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-with-tests/src/components/icons/IconSupport.vue b/typescript-jsx-pinia-with-tests/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia-with-tests/src/components/icons/IconTooling.vue b/typescript-jsx-pinia-with-tests/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-pinia-with-tests/src/main.ts b/typescript-jsx-pinia-with-tests/src/main.ts new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/main.ts @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-pinia-with-tests/src/stores/counter.ts b/typescript-jsx-pinia-with-tests/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-jsx-pinia-with-tests/tsconfig.app.json b/typescript-jsx-pinia-with-tests/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-pinia-with-tests/tsconfig.config.json b/typescript-jsx-pinia-with-tests/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-pinia-with-tests/tsconfig.json b/typescript-jsx-pinia-with-tests/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-jsx-pinia-with-tests/tsconfig.vitest.json b/typescript-jsx-pinia-with-tests/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-jsx-pinia-with-tests/vite.config.ts b/typescript-jsx-pinia-with-tests/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-pinia-with-tests/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-pinia/.gitignore b/typescript-jsx-pinia/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-pinia/.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/typescript-jsx-pinia/README.md b/typescript-jsx-pinia/README.md new file mode 100644 index 00000000..3edce380 --- /dev/null +++ b/typescript-jsx-pinia/README.md @@ -0,0 +1,40 @@ +# typescript-jsx-pinia + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` diff --git a/typescript-jsx-pinia/env.d.ts b/typescript-jsx-pinia/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-pinia/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-pinia/index.html b/typescript-jsx-pinia/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-pinia/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-pinia/package.json b/typescript-jsx-pinia/package.json new file mode 100644 index 00000000..6cba1c8d --- /dev/null +++ b/typescript-jsx-pinia/package.json @@ -0,0 +1,26 @@ +{ + "name": "typescript-jsx-pinia", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/tsconfig": "^0.1.3", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-pinia/public/favicon.ico b/typescript-jsx-pinia/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-pinia/src/App.vue b/typescript-jsx-pinia/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-jsx-pinia/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-jsx-pinia/src/assets/base.css b/typescript-jsx-pinia/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-jsx-pinia/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-pinia/src/assets/logo.svg b/typescript-jsx-pinia/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-pinia/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-pinia/src/components/HelloWorld.vue b/typescript-jsx-pinia/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-jsx-pinia/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-pinia/src/components/TheWelcome.vue b/typescript-jsx-pinia/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-pinia/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-pinia/src/components/WelcomeItem.vue b/typescript-jsx-pinia/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-pinia/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-pinia/src/components/icons/IconCommunity.vue b/typescript-jsx-pinia/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-pinia/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia/src/components/icons/IconDocumentation.vue b/typescript-jsx-pinia/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-pinia/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia/src/components/icons/IconEcosystem.vue b/typescript-jsx-pinia/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-pinia/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia/src/components/icons/IconSupport.vue b/typescript-jsx-pinia/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-pinia/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-pinia/src/components/icons/IconTooling.vue b/typescript-jsx-pinia/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-pinia/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-pinia/src/main.ts b/typescript-jsx-pinia/src/main.ts new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/typescript-jsx-pinia/src/main.ts @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-pinia/src/stores/counter.ts b/typescript-jsx-pinia/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-jsx-pinia/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-jsx-pinia/tsconfig.config.json b/typescript-jsx-pinia/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-pinia/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-pinia/tsconfig.json b/typescript-jsx-pinia/tsconfig.json new file mode 100644 index 00000000..8d235999 --- /dev/null +++ b/typescript-jsx-pinia/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + }, + + "references": [ + { + "path": "./tsconfig.config.json" + } + ] +} diff --git a/typescript-jsx-pinia/vite.config.ts b/typescript-jsx-pinia/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-pinia/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-router-cypress/.gitignore b/typescript-jsx-router-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-router-cypress/.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/typescript-jsx-router-cypress/README.md b/typescript-jsx-router-cypress/README.md new file mode 100644 index 00000000..20fb13bd --- /dev/null +++ b/typescript-jsx-router-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-jsx-router-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-jsx-router-cypress/cypress.config.ts b/typescript-jsx-router-cypress/cypress.config.ts new file mode 100644 index 00000000..c8fac129 --- /dev/null +++ b/typescript-jsx-router-cypress/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' + } + } +}) diff --git a/typescript-jsx-router-cypress/cypress/e2e/example.cy.ts b/typescript-jsx-router-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-jsx-router-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-jsx-router-cypress/cypress/e2e/tsconfig.json b/typescript-jsx-router-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-jsx-router-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-jsx-router-cypress/cypress/fixtures/example.json b/typescript-jsx-router-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-jsx-router-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/typescript-jsx-router-cypress/cypress/support/commands.ts b/typescript-jsx-router-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-jsx-router-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-jsx-router-cypress/cypress/support/component-index.html b/typescript-jsx-router-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/typescript-jsx-router-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/typescript-jsx-router-cypress/cypress/support/component.ts b/typescript-jsx-router-cypress/cypress/support/component.ts new file mode 100644 index 00000000..c56a294a --- /dev/null +++ b/typescript-jsx-router-cypress/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/vue2' + +// Augment the Cypress namespace to include type definitions for +// your custom command. +// Alternatively, can be defined in cypress/support/component.d.ts +// with a 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) diff --git a/typescript-jsx-router-cypress/cypress/support/e2e.ts b/typescript-jsx-router-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-jsx-router-cypress/cypress/support/e2e.ts @@ -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/typescript-jsx-router-cypress/env.d.ts b/typescript-jsx-router-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-router-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-router-cypress/index.html b/typescript-jsx-router-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-router-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-router-cypress/package.json b/typescript-jsx-router-cypress/package.json new file mode 100644 index 00000000..e8fef068 --- /dev/null +++ b/typescript-jsx-router-cypress/package.json @@ -0,0 +1,32 @@ +{ + "name": "typescript-jsx-router-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-router-cypress/public/favicon.ico b/typescript-jsx-router-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-router-cypress/src/App.vue b/typescript-jsx-router-cypress/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-jsx-router-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-jsx-router-cypress/src/assets/base.css b/typescript-jsx-router-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-jsx-router-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-router-cypress/src/assets/logo.svg b/typescript-jsx-router-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-router-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-router-cypress/src/components/HelloWorld.vue b/typescript-jsx-router-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-jsx-router-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-router-cypress/src/components/TheWelcome.vue b/typescript-jsx-router-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-router-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-cypress/src/components/WelcomeItem.vue b/typescript-jsx-router-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-router-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-cypress/src/components/__tests__/HelloWorld.cy.ts b/typescript-jsx-router-cypress/src/components/__tests__/HelloWorld.cy.ts new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/typescript-jsx-router-cypress/src/components/__tests__/HelloWorld.cy.ts @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/typescript-jsx-router-cypress/src/components/icons/IconCommunity.vue b/typescript-jsx-router-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-router-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-cypress/src/components/icons/IconDocumentation.vue b/typescript-jsx-router-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-router-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-cypress/src/components/icons/IconEcosystem.vue b/typescript-jsx-router-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-router-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-cypress/src/components/icons/IconSupport.vue b/typescript-jsx-router-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-router-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-cypress/src/components/icons/IconTooling.vue b/typescript-jsx-router-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-router-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-router-cypress/src/main.ts b/typescript-jsx-router-cypress/src/main.ts new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/typescript-jsx-router-cypress/src/main.ts @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-router-cypress/src/router/index.ts b/typescript-jsx-router-cypress/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-jsx-router-cypress/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-jsx-router-cypress/src/views/AboutView.vue b/typescript-jsx-router-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-jsx-router-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-jsx-router-cypress/src/views/HomeView.vue b/typescript-jsx-router-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-jsx-router-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-jsx-router-cypress/tsconfig.app.json b/typescript-jsx-router-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-router-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-router-cypress/tsconfig.config.json b/typescript-jsx-router-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-router-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-router-cypress/tsconfig.cypress-ct.json b/typescript-jsx-router-cypress/tsconfig.cypress-ct.json new file mode 100644 index 00000000..29cbaa47 --- /dev/null +++ b/typescript-jsx-router-cypress/tsconfig.cypress-ct.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.app.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "cypress/support/component.*"], + "exclude": [], + "compilerOptions": { + "composite": true + } +} diff --git a/typescript-jsx-router-cypress/tsconfig.json b/typescript-jsx-router-cypress/tsconfig.json new file mode 100644 index 00000000..040665bb --- /dev/null +++ b/typescript-jsx-router-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.cypress-ct.json" + } + ] +} diff --git a/typescript-jsx-router-cypress/vite.config.ts b/typescript-jsx-router-cypress/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-router-cypress/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-router-pinia-cypress/.gitignore b/typescript-jsx-router-pinia-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/.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/typescript-jsx-router-pinia-cypress/README.md b/typescript-jsx-router-pinia-cypress/README.md new file mode 100644 index 00000000..404704a9 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-jsx-router-pinia-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-jsx-router-pinia-cypress/cypress.config.ts b/typescript-jsx-router-pinia-cypress/cypress.config.ts new file mode 100644 index 00000000..c8fac129 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/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' + } + } +}) diff --git a/typescript-jsx-router-pinia-cypress/cypress/e2e/example.cy.ts b/typescript-jsx-router-pinia-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-jsx-router-pinia-cypress/cypress/e2e/tsconfig.json b/typescript-jsx-router-pinia-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-jsx-router-pinia-cypress/cypress/fixtures/example.json b/typescript-jsx-router-pinia-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-jsx-router-pinia-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/typescript-jsx-router-pinia-cypress/cypress/support/commands.ts b/typescript-jsx-router-pinia-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-jsx-router-pinia-cypress/cypress/support/component-index.html b/typescript-jsx-router-pinia-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/typescript-jsx-router-pinia-cypress/cypress/support/component.ts b/typescript-jsx-router-pinia-cypress/cypress/support/component.ts new file mode 100644 index 00000000..c56a294a --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/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/vue2' + +// Augment the Cypress namespace to include type definitions for +// your custom command. +// Alternatively, can be defined in cypress/support/component.d.ts +// with a 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) diff --git a/typescript-jsx-router-pinia-cypress/cypress/support/e2e.ts b/typescript-jsx-router-pinia-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/cypress/support/e2e.ts @@ -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/typescript-jsx-router-pinia-cypress/env.d.ts b/typescript-jsx-router-pinia-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-router-pinia-cypress/index.html b/typescript-jsx-router-pinia-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-router-pinia-cypress/package.json b/typescript-jsx-router-pinia-cypress/package.json new file mode 100644 index 00000000..992f1a0e --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/package.json @@ -0,0 +1,33 @@ +{ + "name": "typescript-jsx-router-pinia-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-router-pinia-cypress/public/favicon.ico b/typescript-jsx-router-pinia-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-router-pinia-cypress/src/App.vue b/typescript-jsx-router-pinia-cypress/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-jsx-router-pinia-cypress/src/assets/base.css b/typescript-jsx-router-pinia-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-router-pinia-cypress/src/assets/logo.svg b/typescript-jsx-router-pinia-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-router-pinia-cypress/src/components/HelloWorld.vue b/typescript-jsx-router-pinia-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-router-pinia-cypress/src/components/TheWelcome.vue b/typescript-jsx-router-pinia-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-pinia-cypress/src/components/WelcomeItem.vue b/typescript-jsx-router-pinia-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-pinia-cypress/src/components/__tests__/HelloWorld.cy.ts b/typescript-jsx-router-pinia-cypress/src/components/__tests__/HelloWorld.cy.ts new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/components/__tests__/HelloWorld.cy.ts @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/typescript-jsx-router-pinia-cypress/src/components/icons/IconCommunity.vue b/typescript-jsx-router-pinia-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-cypress/src/components/icons/IconDocumentation.vue b/typescript-jsx-router-pinia-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-cypress/src/components/icons/IconEcosystem.vue b/typescript-jsx-router-pinia-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-cypress/src/components/icons/IconSupport.vue b/typescript-jsx-router-pinia-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-cypress/src/components/icons/IconTooling.vue b/typescript-jsx-router-pinia-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-router-pinia-cypress/src/main.ts b/typescript-jsx-router-pinia-cypress/src/main.ts new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/main.ts @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-router-pinia-cypress/src/router/index.ts b/typescript-jsx-router-pinia-cypress/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-jsx-router-pinia-cypress/src/stores/counter.ts b/typescript-jsx-router-pinia-cypress/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-jsx-router-pinia-cypress/src/views/AboutView.vue b/typescript-jsx-router-pinia-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-jsx-router-pinia-cypress/src/views/HomeView.vue b/typescript-jsx-router-pinia-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-jsx-router-pinia-cypress/tsconfig.app.json b/typescript-jsx-router-pinia-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-router-pinia-cypress/tsconfig.config.json b/typescript-jsx-router-pinia-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-router-pinia-cypress/tsconfig.cypress-ct.json b/typescript-jsx-router-pinia-cypress/tsconfig.cypress-ct.json new file mode 100644 index 00000000..29cbaa47 --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/tsconfig.cypress-ct.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.app.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "cypress/support/component.*"], + "exclude": [], + "compilerOptions": { + "composite": true + } +} diff --git a/typescript-jsx-router-pinia-cypress/tsconfig.json b/typescript-jsx-router-pinia-cypress/tsconfig.json new file mode 100644 index 00000000..040665bb --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.cypress-ct.json" + } + ] +} diff --git a/typescript-jsx-router-pinia-cypress/vite.config.ts b/typescript-jsx-router-pinia-cypress/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-router-pinia-cypress/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-router-pinia-vitest-cypress/.gitignore b/typescript-jsx-router-pinia-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/.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/typescript-jsx-router-pinia-vitest-cypress/README.md b/typescript-jsx-router-pinia-vitest-cypress/README.md new file mode 100644 index 00000000..5c430d29 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-jsx-router-pinia-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-jsx-router-pinia-vitest-cypress/cypress.config.ts b/typescript-jsx-router-pinia-vitest-cypress/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-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/' + } +}) diff --git a/typescript-jsx-router-pinia-vitest-cypress/cypress/e2e/example.cy.ts b/typescript-jsx-router-pinia-vitest-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-jsx-router-pinia-vitest-cypress/cypress/e2e/tsconfig.json b/typescript-jsx-router-pinia-vitest-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-jsx-router-pinia-vitest-cypress/cypress/fixtures/example.json b/typescript-jsx-router-pinia-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-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/typescript-jsx-router-pinia-vitest-cypress/cypress/support/commands.ts b/typescript-jsx-router-pinia-vitest-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-jsx-router-pinia-vitest-cypress/cypress/support/e2e.ts b/typescript-jsx-router-pinia-vitest-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/cypress/support/e2e.ts @@ -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/typescript-jsx-router-pinia-vitest-cypress/env.d.ts b/typescript-jsx-router-pinia-vitest-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-router-pinia-vitest-cypress/index.html b/typescript-jsx-router-pinia-vitest-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-router-pinia-vitest-cypress/package.json b/typescript-jsx-router-pinia-vitest-cypress/package.json new file mode 100644 index 00000000..a90d4433 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/package.json @@ -0,0 +1,37 @@ +{ + "name": "typescript-jsx-router-pinia-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-router-pinia-vitest-cypress/public/favicon.ico b/typescript-jsx-router-pinia-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/App.vue b/typescript-jsx-router-pinia-vitest-cypress/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/assets/base.css b/typescript-jsx-router-pinia-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/assets/logo.svg b/typescript-jsx-router-pinia-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/components/HelloWorld.vue b/typescript-jsx-router-pinia-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/components/TheWelcome.vue b/typescript-jsx-router-pinia-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/components/WelcomeItem.vue b/typescript-jsx-router-pinia-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-router-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconCommunity.vue b/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue b/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue b/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconSupport.vue b/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconTooling.vue b/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/main.ts b/typescript-jsx-router-pinia-vitest-cypress/src/main.ts new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/main.ts @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/router/index.ts b/typescript-jsx-router-pinia-vitest-cypress/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/stores/counter.ts b/typescript-jsx-router-pinia-vitest-cypress/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/views/AboutView.vue b/typescript-jsx-router-pinia-vitest-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-jsx-router-pinia-vitest-cypress/src/views/HomeView.vue b/typescript-jsx-router-pinia-vitest-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-jsx-router-pinia-vitest-cypress/tsconfig.app.json b/typescript-jsx-router-pinia-vitest-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-router-pinia-vitest-cypress/tsconfig.config.json b/typescript-jsx-router-pinia-vitest-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-router-pinia-vitest-cypress/tsconfig.json b/typescript-jsx-router-pinia-vitest-cypress/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-jsx-router-pinia-vitest-cypress/tsconfig.vitest.json b/typescript-jsx-router-pinia-vitest-cypress/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-jsx-router-pinia-vitest-cypress/vite.config.ts b/typescript-jsx-router-pinia-vitest-cypress/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-router-pinia-vitest-cypress/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-router-pinia-vitest/.gitignore b/typescript-jsx-router-pinia-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/.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/typescript-jsx-router-pinia-vitest/README.md b/typescript-jsx-router-pinia-vitest/README.md new file mode 100644 index 00000000..6561c331 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/README.md @@ -0,0 +1,46 @@ +# typescript-jsx-router-pinia-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/typescript-jsx-router-pinia-vitest/env.d.ts b/typescript-jsx-router-pinia-vitest/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-router-pinia-vitest/index.html b/typescript-jsx-router-pinia-vitest/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-router-pinia-vitest/package.json b/typescript-jsx-router-pinia-vitest/package.json new file mode 100644 index 00000000..ab06458b --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/package.json @@ -0,0 +1,33 @@ +{ + "name": "typescript-jsx-router-pinia-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-router-pinia-vitest/public/favicon.ico b/typescript-jsx-router-pinia-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-router-pinia-vitest/src/App.vue b/typescript-jsx-router-pinia-vitest/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-jsx-router-pinia-vitest/src/assets/base.css b/typescript-jsx-router-pinia-vitest/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-router-pinia-vitest/src/assets/logo.svg b/typescript-jsx-router-pinia-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-router-pinia-vitest/src/components/HelloWorld.vue b/typescript-jsx-router-pinia-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-router-pinia-vitest/src/components/TheWelcome.vue b/typescript-jsx-router-pinia-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-pinia-vitest/src/components/WelcomeItem.vue b/typescript-jsx-router-pinia-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-pinia-vitest/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-router-pinia-vitest/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-jsx-router-pinia-vitest/src/components/icons/IconCommunity.vue b/typescript-jsx-router-pinia-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-vitest/src/components/icons/IconDocumentation.vue b/typescript-jsx-router-pinia-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-vitest/src/components/icons/IconEcosystem.vue b/typescript-jsx-router-pinia-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-vitest/src/components/icons/IconSupport.vue b/typescript-jsx-router-pinia-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-vitest/src/components/icons/IconTooling.vue b/typescript-jsx-router-pinia-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-router-pinia-vitest/src/main.ts b/typescript-jsx-router-pinia-vitest/src/main.ts new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/main.ts @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-router-pinia-vitest/src/router/index.ts b/typescript-jsx-router-pinia-vitest/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-jsx-router-pinia-vitest/src/stores/counter.ts b/typescript-jsx-router-pinia-vitest/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-jsx-router-pinia-vitest/src/views/AboutView.vue b/typescript-jsx-router-pinia-vitest/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-jsx-router-pinia-vitest/src/views/HomeView.vue b/typescript-jsx-router-pinia-vitest/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-jsx-router-pinia-vitest/tsconfig.app.json b/typescript-jsx-router-pinia-vitest/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-router-pinia-vitest/tsconfig.config.json b/typescript-jsx-router-pinia-vitest/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-router-pinia-vitest/tsconfig.json b/typescript-jsx-router-pinia-vitest/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-jsx-router-pinia-vitest/tsconfig.vitest.json b/typescript-jsx-router-pinia-vitest/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-jsx-router-pinia-vitest/vite.config.ts b/typescript-jsx-router-pinia-vitest/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-router-pinia-vitest/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-router-pinia-with-tests/.gitignore b/typescript-jsx-router-pinia-with-tests/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/.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/typescript-jsx-router-pinia-with-tests/README.md b/typescript-jsx-router-pinia-with-tests/README.md new file mode 100644 index 00000000..37e8a5aa --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/README.md @@ -0,0 +1,53 @@ +# typescript-jsx-router-pinia-with-tests + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-jsx-router-pinia-with-tests/cypress.config.ts b/typescript-jsx-router-pinia-with-tests/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/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/' + } +}) diff --git a/typescript-jsx-router-pinia-with-tests/cypress/e2e/example.cy.ts b/typescript-jsx-router-pinia-with-tests/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-jsx-router-pinia-with-tests/cypress/e2e/tsconfig.json b/typescript-jsx-router-pinia-with-tests/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-jsx-router-pinia-with-tests/cypress/fixtures/example.json b/typescript-jsx-router-pinia-with-tests/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/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/typescript-jsx-router-pinia-with-tests/cypress/support/commands.ts b/typescript-jsx-router-pinia-with-tests/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-jsx-router-pinia-with-tests/cypress/support/e2e.ts b/typescript-jsx-router-pinia-with-tests/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/cypress/support/e2e.ts @@ -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/typescript-jsx-router-pinia-with-tests/env.d.ts b/typescript-jsx-router-pinia-with-tests/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-router-pinia-with-tests/index.html b/typescript-jsx-router-pinia-with-tests/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-router-pinia-with-tests/package.json b/typescript-jsx-router-pinia-with-tests/package.json new file mode 100644 index 00000000..595228c3 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/package.json @@ -0,0 +1,37 @@ +{ + "name": "typescript-jsx-router-pinia-with-tests", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-router-pinia-with-tests/public/favicon.ico b/typescript-jsx-router-pinia-with-tests/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-router-pinia-with-tests/src/App.vue b/typescript-jsx-router-pinia-with-tests/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-jsx-router-pinia-with-tests/src/assets/base.css b/typescript-jsx-router-pinia-with-tests/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-router-pinia-with-tests/src/assets/logo.svg b/typescript-jsx-router-pinia-with-tests/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-router-pinia-with-tests/src/components/HelloWorld.vue b/typescript-jsx-router-pinia-with-tests/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-router-pinia-with-tests/src/components/TheWelcome.vue b/typescript-jsx-router-pinia-with-tests/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-pinia-with-tests/src/components/WelcomeItem.vue b/typescript-jsx-router-pinia-with-tests/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconCommunity.vue b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconDocumentation.vue b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconEcosystem.vue b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconSupport.vue b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia-with-tests/src/components/icons/IconTooling.vue b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-router-pinia-with-tests/src/main.ts b/typescript-jsx-router-pinia-with-tests/src/main.ts new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/main.ts @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-router-pinia-with-tests/src/router/index.ts b/typescript-jsx-router-pinia-with-tests/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-jsx-router-pinia-with-tests/src/stores/counter.ts b/typescript-jsx-router-pinia-with-tests/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-jsx-router-pinia-with-tests/src/views/AboutView.vue b/typescript-jsx-router-pinia-with-tests/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-jsx-router-pinia-with-tests/src/views/HomeView.vue b/typescript-jsx-router-pinia-with-tests/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-jsx-router-pinia-with-tests/tsconfig.app.json b/typescript-jsx-router-pinia-with-tests/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-router-pinia-with-tests/tsconfig.config.json b/typescript-jsx-router-pinia-with-tests/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-router-pinia-with-tests/tsconfig.json b/typescript-jsx-router-pinia-with-tests/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-jsx-router-pinia-with-tests/tsconfig.vitest.json b/typescript-jsx-router-pinia-with-tests/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-jsx-router-pinia-with-tests/vite.config.ts b/typescript-jsx-router-pinia-with-tests/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-router-pinia-with-tests/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-router-pinia/.gitignore b/typescript-jsx-router-pinia/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-router-pinia/.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/typescript-jsx-router-pinia/README.md b/typescript-jsx-router-pinia/README.md new file mode 100644 index 00000000..dc923bd0 --- /dev/null +++ b/typescript-jsx-router-pinia/README.md @@ -0,0 +1,40 @@ +# typescript-jsx-router-pinia + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` diff --git a/typescript-jsx-router-pinia/env.d.ts b/typescript-jsx-router-pinia/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-router-pinia/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-router-pinia/index.html b/typescript-jsx-router-pinia/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-router-pinia/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-router-pinia/package.json b/typescript-jsx-router-pinia/package.json new file mode 100644 index 00000000..ff3701b5 --- /dev/null +++ b/typescript-jsx-router-pinia/package.json @@ -0,0 +1,27 @@ +{ + "name": "typescript-jsx-router-pinia", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/tsconfig": "^0.1.3", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-router-pinia/public/favicon.ico b/typescript-jsx-router-pinia/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-router-pinia/src/App.vue b/typescript-jsx-router-pinia/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-jsx-router-pinia/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-jsx-router-pinia/src/assets/base.css b/typescript-jsx-router-pinia/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-jsx-router-pinia/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-router-pinia/src/assets/logo.svg b/typescript-jsx-router-pinia/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-router-pinia/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-router-pinia/src/components/HelloWorld.vue b/typescript-jsx-router-pinia/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-jsx-router-pinia/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-router-pinia/src/components/TheWelcome.vue b/typescript-jsx-router-pinia/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-router-pinia/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-pinia/src/components/WelcomeItem.vue b/typescript-jsx-router-pinia/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-router-pinia/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-pinia/src/components/icons/IconCommunity.vue b/typescript-jsx-router-pinia/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-router-pinia/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia/src/components/icons/IconDocumentation.vue b/typescript-jsx-router-pinia/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-router-pinia/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia/src/components/icons/IconEcosystem.vue b/typescript-jsx-router-pinia/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-router-pinia/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia/src/components/icons/IconSupport.vue b/typescript-jsx-router-pinia/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-router-pinia/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-pinia/src/components/icons/IconTooling.vue b/typescript-jsx-router-pinia/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-router-pinia/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-router-pinia/src/main.ts b/typescript-jsx-router-pinia/src/main.ts new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/typescript-jsx-router-pinia/src/main.ts @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-router-pinia/src/router/index.ts b/typescript-jsx-router-pinia/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-jsx-router-pinia/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-jsx-router-pinia/src/stores/counter.ts b/typescript-jsx-router-pinia/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-jsx-router-pinia/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-jsx-router-pinia/src/views/AboutView.vue b/typescript-jsx-router-pinia/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-jsx-router-pinia/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-jsx-router-pinia/src/views/HomeView.vue b/typescript-jsx-router-pinia/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-jsx-router-pinia/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-jsx-router-pinia/tsconfig.config.json b/typescript-jsx-router-pinia/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-router-pinia/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-router-pinia/tsconfig.json b/typescript-jsx-router-pinia/tsconfig.json new file mode 100644 index 00000000..8d235999 --- /dev/null +++ b/typescript-jsx-router-pinia/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + }, + + "references": [ + { + "path": "./tsconfig.config.json" + } + ] +} diff --git a/typescript-jsx-router-pinia/vite.config.ts b/typescript-jsx-router-pinia/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-router-pinia/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-router-vitest-cypress/.gitignore b/typescript-jsx-router-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/.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/typescript-jsx-router-vitest-cypress/README.md b/typescript-jsx-router-vitest-cypress/README.md new file mode 100644 index 00000000..139059e5 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-jsx-router-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-jsx-router-vitest-cypress/cypress.config.ts b/typescript-jsx-router-vitest-cypress/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-jsx-router-vitest-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/' + } +}) diff --git a/typescript-jsx-router-vitest-cypress/cypress/e2e/example.cy.ts b/typescript-jsx-router-vitest-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-jsx-router-vitest-cypress/cypress/e2e/tsconfig.json b/typescript-jsx-router-vitest-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-jsx-router-vitest-cypress/cypress/fixtures/example.json b/typescript-jsx-router-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-jsx-router-vitest-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/typescript-jsx-router-vitest-cypress/cypress/support/commands.ts b/typescript-jsx-router-vitest-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-jsx-router-vitest-cypress/cypress/support/e2e.ts b/typescript-jsx-router-vitest-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/cypress/support/e2e.ts @@ -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/typescript-jsx-router-vitest-cypress/env.d.ts b/typescript-jsx-router-vitest-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-router-vitest-cypress/index.html b/typescript-jsx-router-vitest-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-router-vitest-cypress/package.json b/typescript-jsx-router-vitest-cypress/package.json new file mode 100644 index 00000000..7185a286 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/package.json @@ -0,0 +1,36 @@ +{ + "name": "typescript-jsx-router-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-router-vitest-cypress/public/favicon.ico b/typescript-jsx-router-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-router-vitest-cypress/src/App.vue b/typescript-jsx-router-vitest-cypress/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-jsx-router-vitest-cypress/src/assets/base.css b/typescript-jsx-router-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-router-vitest-cypress/src/assets/logo.svg b/typescript-jsx-router-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-router-vitest-cypress/src/components/HelloWorld.vue b/typescript-jsx-router-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-router-vitest-cypress/src/components/TheWelcome.vue b/typescript-jsx-router-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-vitest-cypress/src/components/WelcomeItem.vue b/typescript-jsx-router-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-router-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-jsx-router-vitest-cypress/src/components/icons/IconCommunity.vue b/typescript-jsx-router-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-vitest-cypress/src/components/icons/IconDocumentation.vue b/typescript-jsx-router-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-vitest-cypress/src/components/icons/IconEcosystem.vue b/typescript-jsx-router-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-vitest-cypress/src/components/icons/IconSupport.vue b/typescript-jsx-router-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-vitest-cypress/src/components/icons/IconTooling.vue b/typescript-jsx-router-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-router-vitest-cypress/src/main.ts b/typescript-jsx-router-vitest-cypress/src/main.ts new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/main.ts @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-router-vitest-cypress/src/router/index.ts b/typescript-jsx-router-vitest-cypress/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-jsx-router-vitest-cypress/src/views/AboutView.vue b/typescript-jsx-router-vitest-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-jsx-router-vitest-cypress/src/views/HomeView.vue b/typescript-jsx-router-vitest-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-jsx-router-vitest-cypress/tsconfig.app.json b/typescript-jsx-router-vitest-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-router-vitest-cypress/tsconfig.config.json b/typescript-jsx-router-vitest-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-router-vitest-cypress/tsconfig.json b/typescript-jsx-router-vitest-cypress/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-jsx-router-vitest-cypress/tsconfig.vitest.json b/typescript-jsx-router-vitest-cypress/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-jsx-router-vitest-cypress/vite.config.ts b/typescript-jsx-router-vitest-cypress/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-router-vitest-cypress/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-router-vitest/.gitignore b/typescript-jsx-router-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-router-vitest/.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/typescript-jsx-router-vitest/README.md b/typescript-jsx-router-vitest/README.md new file mode 100644 index 00000000..51d21c67 --- /dev/null +++ b/typescript-jsx-router-vitest/README.md @@ -0,0 +1,46 @@ +# typescript-jsx-router-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/typescript-jsx-router-vitest/env.d.ts b/typescript-jsx-router-vitest/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-router-vitest/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-router-vitest/index.html b/typescript-jsx-router-vitest/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-router-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-router-vitest/package.json b/typescript-jsx-router-vitest/package.json new file mode 100644 index 00000000..76bac6bc --- /dev/null +++ b/typescript-jsx-router-vitest/package.json @@ -0,0 +1,32 @@ +{ + "name": "typescript-jsx-router-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-router-vitest/public/favicon.ico b/typescript-jsx-router-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-router-vitest/src/App.vue b/typescript-jsx-router-vitest/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-jsx-router-vitest/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-jsx-router-vitest/src/assets/base.css b/typescript-jsx-router-vitest/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-jsx-router-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-router-vitest/src/assets/logo.svg b/typescript-jsx-router-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-router-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-router-vitest/src/components/HelloWorld.vue b/typescript-jsx-router-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-jsx-router-vitest/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-router-vitest/src/components/TheWelcome.vue b/typescript-jsx-router-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-router-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-vitest/src/components/WelcomeItem.vue b/typescript-jsx-router-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-router-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-vitest/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-router-vitest/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-jsx-router-vitest/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-jsx-router-vitest/src/components/icons/IconCommunity.vue b/typescript-jsx-router-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-router-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-vitest/src/components/icons/IconDocumentation.vue b/typescript-jsx-router-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-router-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-vitest/src/components/icons/IconEcosystem.vue b/typescript-jsx-router-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-router-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-vitest/src/components/icons/IconSupport.vue b/typescript-jsx-router-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-router-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-vitest/src/components/icons/IconTooling.vue b/typescript-jsx-router-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-router-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-router-vitest/src/main.ts b/typescript-jsx-router-vitest/src/main.ts new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/typescript-jsx-router-vitest/src/main.ts @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-router-vitest/src/router/index.ts b/typescript-jsx-router-vitest/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-jsx-router-vitest/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-jsx-router-vitest/src/views/AboutView.vue b/typescript-jsx-router-vitest/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-jsx-router-vitest/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-jsx-router-vitest/src/views/HomeView.vue b/typescript-jsx-router-vitest/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-jsx-router-vitest/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-jsx-router-vitest/tsconfig.app.json b/typescript-jsx-router-vitest/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-router-vitest/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-router-vitest/tsconfig.config.json b/typescript-jsx-router-vitest/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-router-vitest/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-router-vitest/tsconfig.json b/typescript-jsx-router-vitest/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-jsx-router-vitest/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-jsx-router-vitest/tsconfig.vitest.json b/typescript-jsx-router-vitest/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-jsx-router-vitest/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-jsx-router-vitest/vite.config.ts b/typescript-jsx-router-vitest/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-router-vitest/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-router-with-tests/.gitignore b/typescript-jsx-router-with-tests/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-router-with-tests/.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/typescript-jsx-router-with-tests/README.md b/typescript-jsx-router-with-tests/README.md new file mode 100644 index 00000000..79540e7d --- /dev/null +++ b/typescript-jsx-router-with-tests/README.md @@ -0,0 +1,53 @@ +# typescript-jsx-router-with-tests + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-jsx-router-with-tests/cypress.config.ts b/typescript-jsx-router-with-tests/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-jsx-router-with-tests/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/' + } +}) diff --git a/typescript-jsx-router-with-tests/cypress/e2e/example.cy.ts b/typescript-jsx-router-with-tests/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-jsx-router-with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-jsx-router-with-tests/cypress/e2e/tsconfig.json b/typescript-jsx-router-with-tests/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-jsx-router-with-tests/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-jsx-router-with-tests/cypress/fixtures/example.json b/typescript-jsx-router-with-tests/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-jsx-router-with-tests/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/typescript-jsx-router-with-tests/cypress/support/commands.ts b/typescript-jsx-router-with-tests/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-jsx-router-with-tests/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-jsx-router-with-tests/cypress/support/e2e.ts b/typescript-jsx-router-with-tests/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-jsx-router-with-tests/cypress/support/e2e.ts @@ -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/typescript-jsx-router-with-tests/env.d.ts b/typescript-jsx-router-with-tests/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-router-with-tests/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-router-with-tests/index.html b/typescript-jsx-router-with-tests/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-router-with-tests/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-router-with-tests/package.json b/typescript-jsx-router-with-tests/package.json new file mode 100644 index 00000000..25ad02eb --- /dev/null +++ b/typescript-jsx-router-with-tests/package.json @@ -0,0 +1,36 @@ +{ + "name": "typescript-jsx-router-with-tests", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-router-with-tests/public/favicon.ico b/typescript-jsx-router-with-tests/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-router-with-tests/src/App.vue b/typescript-jsx-router-with-tests/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-jsx-router-with-tests/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-jsx-router-with-tests/src/assets/base.css b/typescript-jsx-router-with-tests/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-jsx-router-with-tests/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-router-with-tests/src/assets/logo.svg b/typescript-jsx-router-with-tests/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-router-with-tests/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-router-with-tests/src/components/HelloWorld.vue b/typescript-jsx-router-with-tests/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-jsx-router-with-tests/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-router-with-tests/src/components/TheWelcome.vue b/typescript-jsx-router-with-tests/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-router-with-tests/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-with-tests/src/components/WelcomeItem.vue b/typescript-jsx-router-with-tests/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-router-with-tests/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-router-with-tests/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-jsx-router-with-tests/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-jsx-router-with-tests/src/components/icons/IconCommunity.vue b/typescript-jsx-router-with-tests/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-router-with-tests/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-with-tests/src/components/icons/IconDocumentation.vue b/typescript-jsx-router-with-tests/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-router-with-tests/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-with-tests/src/components/icons/IconEcosystem.vue b/typescript-jsx-router-with-tests/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-router-with-tests/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-with-tests/src/components/icons/IconSupport.vue b/typescript-jsx-router-with-tests/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-router-with-tests/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router-with-tests/src/components/icons/IconTooling.vue b/typescript-jsx-router-with-tests/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-router-with-tests/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-router-with-tests/src/main.ts b/typescript-jsx-router-with-tests/src/main.ts new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/typescript-jsx-router-with-tests/src/main.ts @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-router-with-tests/src/router/index.ts b/typescript-jsx-router-with-tests/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-jsx-router-with-tests/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-jsx-router-with-tests/src/views/AboutView.vue b/typescript-jsx-router-with-tests/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-jsx-router-with-tests/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-jsx-router-with-tests/src/views/HomeView.vue b/typescript-jsx-router-with-tests/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-jsx-router-with-tests/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-jsx-router-with-tests/tsconfig.app.json b/typescript-jsx-router-with-tests/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-router-with-tests/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-router-with-tests/tsconfig.config.json b/typescript-jsx-router-with-tests/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-router-with-tests/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-router-with-tests/tsconfig.json b/typescript-jsx-router-with-tests/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-jsx-router-with-tests/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-jsx-router-with-tests/tsconfig.vitest.json b/typescript-jsx-router-with-tests/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-jsx-router-with-tests/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-jsx-router-with-tests/vite.config.ts b/typescript-jsx-router-with-tests/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-router-with-tests/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-router/.gitignore b/typescript-jsx-router/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-router/.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/typescript-jsx-router/README.md b/typescript-jsx-router/README.md new file mode 100644 index 00000000..1b2c5711 --- /dev/null +++ b/typescript-jsx-router/README.md @@ -0,0 +1,40 @@ +# typescript-jsx-router + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` diff --git a/typescript-jsx-router/env.d.ts b/typescript-jsx-router/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-router/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-router/index.html b/typescript-jsx-router/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-router/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-router/package.json b/typescript-jsx-router/package.json new file mode 100644 index 00000000..f2aefefc --- /dev/null +++ b/typescript-jsx-router/package.json @@ -0,0 +1,26 @@ +{ + "name": "typescript-jsx-router", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/tsconfig": "^0.1.3", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-router/public/favicon.ico b/typescript-jsx-router/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-router/src/App.vue b/typescript-jsx-router/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-jsx-router/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-jsx-router/src/assets/base.css b/typescript-jsx-router/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-jsx-router/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-router/src/assets/logo.svg b/typescript-jsx-router/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-router/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-router/src/components/HelloWorld.vue b/typescript-jsx-router/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-jsx-router/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-router/src/components/TheWelcome.vue b/typescript-jsx-router/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-router/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router/src/components/WelcomeItem.vue b/typescript-jsx-router/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-router/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-router/src/components/icons/IconCommunity.vue b/typescript-jsx-router/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-router/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router/src/components/icons/IconDocumentation.vue b/typescript-jsx-router/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-router/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router/src/components/icons/IconEcosystem.vue b/typescript-jsx-router/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-router/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router/src/components/icons/IconSupport.vue b/typescript-jsx-router/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-router/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-router/src/components/icons/IconTooling.vue b/typescript-jsx-router/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-router/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-router/src/main.ts b/typescript-jsx-router/src/main.ts new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/typescript-jsx-router/src/main.ts @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-router/src/router/index.ts b/typescript-jsx-router/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-jsx-router/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-jsx-router/src/views/AboutView.vue b/typescript-jsx-router/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-jsx-router/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-jsx-router/src/views/HomeView.vue b/typescript-jsx-router/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-jsx-router/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-jsx-router/tsconfig.config.json b/typescript-jsx-router/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-router/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-router/tsconfig.json b/typescript-jsx-router/tsconfig.json new file mode 100644 index 00000000..8d235999 --- /dev/null +++ b/typescript-jsx-router/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + }, + + "references": [ + { + "path": "./tsconfig.config.json" + } + ] +} diff --git a/typescript-jsx-router/vite.config.ts b/typescript-jsx-router/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-router/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-vitest-cypress/.gitignore b/typescript-jsx-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-vitest-cypress/.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/typescript-jsx-vitest-cypress/README.md b/typescript-jsx-vitest-cypress/README.md new file mode 100644 index 00000000..213ebf6c --- /dev/null +++ b/typescript-jsx-vitest-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-jsx-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-jsx-vitest-cypress/cypress.config.ts b/typescript-jsx-vitest-cypress/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-jsx-vitest-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/' + } +}) diff --git a/typescript-jsx-vitest-cypress/cypress/e2e/example.cy.ts b/typescript-jsx-vitest-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-jsx-vitest-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-jsx-vitest-cypress/cypress/e2e/tsconfig.json b/typescript-jsx-vitest-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-jsx-vitest-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-jsx-vitest-cypress/cypress/fixtures/example.json b/typescript-jsx-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-jsx-vitest-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/typescript-jsx-vitest-cypress/cypress/support/commands.ts b/typescript-jsx-vitest-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-jsx-vitest-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-jsx-vitest-cypress/cypress/support/e2e.ts b/typescript-jsx-vitest-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-jsx-vitest-cypress/cypress/support/e2e.ts @@ -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/typescript-jsx-vitest-cypress/env.d.ts b/typescript-jsx-vitest-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-vitest-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-vitest-cypress/index.html b/typescript-jsx-vitest-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-vitest-cypress/package.json b/typescript-jsx-vitest-cypress/package.json new file mode 100644 index 00000000..e2c12b44 --- /dev/null +++ b/typescript-jsx-vitest-cypress/package.json @@ -0,0 +1,35 @@ +{ + "name": "typescript-jsx-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-vitest-cypress/public/favicon.ico b/typescript-jsx-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-vitest-cypress/src/App.vue b/typescript-jsx-vitest-cypress/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-jsx-vitest-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-jsx-vitest-cypress/src/assets/base.css b/typescript-jsx-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-jsx-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-vitest-cypress/src/assets/logo.svg b/typescript-jsx-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-vitest-cypress/src/components/HelloWorld.vue b/typescript-jsx-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-jsx-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-vitest-cypress/src/components/TheWelcome.vue b/typescript-jsx-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-vitest-cypress/src/components/WelcomeItem.vue b/typescript-jsx-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-jsx-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-jsx-vitest-cypress/src/components/icons/IconCommunity.vue b/typescript-jsx-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-vitest-cypress/src/components/icons/IconDocumentation.vue b/typescript-jsx-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-vitest-cypress/src/components/icons/IconEcosystem.vue b/typescript-jsx-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-vitest-cypress/src/components/icons/IconSupport.vue b/typescript-jsx-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-vitest-cypress/src/components/icons/IconTooling.vue b/typescript-jsx-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-vitest-cypress/src/main.ts b/typescript-jsx-vitest-cypress/src/main.ts new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/typescript-jsx-vitest-cypress/src/main.ts @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-vitest-cypress/tsconfig.app.json b/typescript-jsx-vitest-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-vitest-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-vitest-cypress/tsconfig.config.json b/typescript-jsx-vitest-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-vitest-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-vitest-cypress/tsconfig.json b/typescript-jsx-vitest-cypress/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-jsx-vitest-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-jsx-vitest-cypress/tsconfig.vitest.json b/typescript-jsx-vitest-cypress/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-jsx-vitest-cypress/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-jsx-vitest-cypress/vite.config.ts b/typescript-jsx-vitest-cypress/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-vitest-cypress/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-vitest/.gitignore b/typescript-jsx-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-vitest/.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/typescript-jsx-vitest/README.md b/typescript-jsx-vitest/README.md new file mode 100644 index 00000000..9c8e9f01 --- /dev/null +++ b/typescript-jsx-vitest/README.md @@ -0,0 +1,46 @@ +# typescript-jsx-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/typescript-jsx-vitest/env.d.ts b/typescript-jsx-vitest/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-vitest/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-vitest/index.html b/typescript-jsx-vitest/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-vitest/package.json b/typescript-jsx-vitest/package.json new file mode 100644 index 00000000..99122ad0 --- /dev/null +++ b/typescript-jsx-vitest/package.json @@ -0,0 +1,31 @@ +{ + "name": "typescript-jsx-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-vitest/public/favicon.ico b/typescript-jsx-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-vitest/src/App.vue b/typescript-jsx-vitest/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-jsx-vitest/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-jsx-vitest/src/assets/base.css b/typescript-jsx-vitest/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-jsx-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-vitest/src/assets/logo.svg b/typescript-jsx-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-vitest/src/components/HelloWorld.vue b/typescript-jsx-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-jsx-vitest/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-vitest/src/components/TheWelcome.vue b/typescript-jsx-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-vitest/src/components/WelcomeItem.vue b/typescript-jsx-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-vitest/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-vitest/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-jsx-vitest/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-jsx-vitest/src/components/icons/IconCommunity.vue b/typescript-jsx-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-vitest/src/components/icons/IconDocumentation.vue b/typescript-jsx-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-vitest/src/components/icons/IconEcosystem.vue b/typescript-jsx-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-vitest/src/components/icons/IconSupport.vue b/typescript-jsx-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-vitest/src/components/icons/IconTooling.vue b/typescript-jsx-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-vitest/src/main.ts b/typescript-jsx-vitest/src/main.ts new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/typescript-jsx-vitest/src/main.ts @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-vitest/tsconfig.app.json b/typescript-jsx-vitest/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-vitest/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-vitest/tsconfig.config.json b/typescript-jsx-vitest/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-vitest/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-vitest/tsconfig.json b/typescript-jsx-vitest/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-jsx-vitest/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-jsx-vitest/tsconfig.vitest.json b/typescript-jsx-vitest/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-jsx-vitest/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-jsx-vitest/vite.config.ts b/typescript-jsx-vitest/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-vitest/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx-with-tests/.gitignore b/typescript-jsx-with-tests/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx-with-tests/.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/typescript-jsx-with-tests/README.md b/typescript-jsx-with-tests/README.md new file mode 100644 index 00000000..3e211cac --- /dev/null +++ b/typescript-jsx-with-tests/README.md @@ -0,0 +1,53 @@ +# typescript-jsx-with-tests + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-jsx-with-tests/cypress.config.ts b/typescript-jsx-with-tests/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-jsx-with-tests/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/' + } +}) diff --git a/typescript-jsx-with-tests/cypress/e2e/example.cy.ts b/typescript-jsx-with-tests/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-jsx-with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-jsx-with-tests/cypress/e2e/tsconfig.json b/typescript-jsx-with-tests/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-jsx-with-tests/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-jsx-with-tests/cypress/fixtures/example.json b/typescript-jsx-with-tests/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-jsx-with-tests/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/typescript-jsx-with-tests/cypress/support/commands.ts b/typescript-jsx-with-tests/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-jsx-with-tests/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-jsx-with-tests/cypress/support/e2e.ts b/typescript-jsx-with-tests/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-jsx-with-tests/cypress/support/e2e.ts @@ -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/typescript-jsx-with-tests/env.d.ts b/typescript-jsx-with-tests/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx-with-tests/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx-with-tests/index.html b/typescript-jsx-with-tests/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx-with-tests/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx-with-tests/package.json b/typescript-jsx-with-tests/package.json new file mode 100644 index 00000000..ea4dbfc3 --- /dev/null +++ b/typescript-jsx-with-tests/package.json @@ -0,0 +1,35 @@ +{ + "name": "typescript-jsx-with-tests", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx-with-tests/public/favicon.ico b/typescript-jsx-with-tests/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx-with-tests/src/App.vue b/typescript-jsx-with-tests/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-jsx-with-tests/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-jsx-with-tests/src/assets/base.css b/typescript-jsx-with-tests/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-jsx-with-tests/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx-with-tests/src/assets/logo.svg b/typescript-jsx-with-tests/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx-with-tests/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx-with-tests/src/components/HelloWorld.vue b/typescript-jsx-with-tests/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-jsx-with-tests/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx-with-tests/src/components/TheWelcome.vue b/typescript-jsx-with-tests/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx-with-tests/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-with-tests/src/components/WelcomeItem.vue b/typescript-jsx-with-tests/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx-with-tests/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-jsx-with-tests/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-jsx-with-tests/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-jsx-with-tests/src/components/icons/IconCommunity.vue b/typescript-jsx-with-tests/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx-with-tests/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-with-tests/src/components/icons/IconDocumentation.vue b/typescript-jsx-with-tests/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx-with-tests/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-with-tests/src/components/icons/IconEcosystem.vue b/typescript-jsx-with-tests/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx-with-tests/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-with-tests/src/components/icons/IconSupport.vue b/typescript-jsx-with-tests/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx-with-tests/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx-with-tests/src/components/icons/IconTooling.vue b/typescript-jsx-with-tests/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx-with-tests/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx-with-tests/src/main.ts b/typescript-jsx-with-tests/src/main.ts new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/typescript-jsx-with-tests/src/main.ts @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx-with-tests/tsconfig.app.json b/typescript-jsx-with-tests/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-jsx-with-tests/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-jsx-with-tests/tsconfig.config.json b/typescript-jsx-with-tests/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx-with-tests/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx-with-tests/tsconfig.json b/typescript-jsx-with-tests/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-jsx-with-tests/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-jsx-with-tests/tsconfig.vitest.json b/typescript-jsx-with-tests/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-jsx-with-tests/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-jsx-with-tests/vite.config.ts b/typescript-jsx-with-tests/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx-with-tests/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-jsx/.gitignore b/typescript-jsx/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-jsx/.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/typescript-jsx/README.md b/typescript-jsx/README.md new file mode 100644 index 00000000..09436e2e --- /dev/null +++ b/typescript-jsx/README.md @@ -0,0 +1,40 @@ +# typescript-jsx + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` diff --git a/typescript-jsx/env.d.ts b/typescript-jsx/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-jsx/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-jsx/index.html b/typescript-jsx/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-jsx/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-jsx/package.json b/typescript-jsx/package.json new file mode 100644 index 00000000..ce56bc94 --- /dev/null +++ b/typescript-jsx/package.json @@ -0,0 +1,25 @@ +{ + "name": "typescript-jsx", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vue/tsconfig": "^0.1.3", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-jsx/public/favicon.ico b/typescript-jsx/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-jsx/src/App.vue b/typescript-jsx/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-jsx/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-jsx/src/assets/base.css b/typescript-jsx/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-jsx/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-jsx/src/assets/logo.svg b/typescript-jsx/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-jsx/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-jsx/src/components/HelloWorld.vue b/typescript-jsx/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-jsx/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-jsx/src/components/TheWelcome.vue b/typescript-jsx/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-jsx/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx/src/components/WelcomeItem.vue b/typescript-jsx/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-jsx/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-jsx/src/components/icons/IconCommunity.vue b/typescript-jsx/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-jsx/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx/src/components/icons/IconDocumentation.vue b/typescript-jsx/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-jsx/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx/src/components/icons/IconEcosystem.vue b/typescript-jsx/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-jsx/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx/src/components/icons/IconSupport.vue b/typescript-jsx/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-jsx/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-jsx/src/components/icons/IconTooling.vue b/typescript-jsx/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-jsx/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-jsx/src/main.ts b/typescript-jsx/src/main.ts new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/typescript-jsx/src/main.ts @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-jsx/tsconfig.config.json b/typescript-jsx/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-jsx/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-jsx/tsconfig.json b/typescript-jsx/tsconfig.json new file mode 100644 index 00000000..8d235999 --- /dev/null +++ b/typescript-jsx/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + }, + + "references": [ + { + "path": "./tsconfig.config.json" + } + ] +} diff --git a/typescript-jsx/vite.config.ts b/typescript-jsx/vite.config.ts new file mode 100644 index 00000000..7cbd617e --- /dev/null +++ b/typescript-jsx/vite.config.ts @@ -0,0 +1,23 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' +import vue2Jsx from '@vitejs/plugin-vue2-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + vue2Jsx(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-pinia-cypress/.gitignore b/typescript-pinia-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-pinia-cypress/.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/typescript-pinia-cypress/README.md b/typescript-pinia-cypress/README.md new file mode 100644 index 00000000..961e41ac --- /dev/null +++ b/typescript-pinia-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-pinia-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-pinia-cypress/cypress.config.ts b/typescript-pinia-cypress/cypress.config.ts new file mode 100644 index 00000000..c8fac129 --- /dev/null +++ b/typescript-pinia-cypress/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' + } + } +}) diff --git a/typescript-pinia-cypress/cypress/e2e/example.cy.ts b/typescript-pinia-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-pinia-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-pinia-cypress/cypress/e2e/tsconfig.json b/typescript-pinia-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-pinia-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-pinia-cypress/cypress/fixtures/example.json b/typescript-pinia-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-pinia-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/typescript-pinia-cypress/cypress/support/commands.ts b/typescript-pinia-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-pinia-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-pinia-cypress/cypress/support/component-index.html b/typescript-pinia-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/typescript-pinia-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/typescript-pinia-cypress/cypress/support/component.ts b/typescript-pinia-cypress/cypress/support/component.ts new file mode 100644 index 00000000..c56a294a --- /dev/null +++ b/typescript-pinia-cypress/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/vue2' + +// Augment the Cypress namespace to include type definitions for +// your custom command. +// Alternatively, can be defined in cypress/support/component.d.ts +// with a 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) diff --git a/typescript-pinia-cypress/cypress/support/e2e.ts b/typescript-pinia-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-pinia-cypress/cypress/support/e2e.ts @@ -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/typescript-pinia-cypress/env.d.ts b/typescript-pinia-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-pinia-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-pinia-cypress/index.html b/typescript-pinia-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-pinia-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-pinia-cypress/package.json b/typescript-pinia-cypress/package.json new file mode 100644 index 00000000..3ea29565 --- /dev/null +++ b/typescript-pinia-cypress/package.json @@ -0,0 +1,31 @@ +{ + "name": "typescript-pinia-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-pinia-cypress/public/favicon.ico b/typescript-pinia-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-pinia-cypress/src/App.vue b/typescript-pinia-cypress/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-pinia-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-pinia-cypress/src/assets/base.css b/typescript-pinia-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-pinia-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-pinia-cypress/src/assets/logo.svg b/typescript-pinia-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-pinia-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-pinia-cypress/src/components/HelloWorld.vue b/typescript-pinia-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-pinia-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-pinia-cypress/src/components/TheWelcome.vue b/typescript-pinia-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-pinia-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-pinia-cypress/src/components/WelcomeItem.vue b/typescript-pinia-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-pinia-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-pinia-cypress/src/components/__tests__/HelloWorld.cy.ts b/typescript-pinia-cypress/src/components/__tests__/HelloWorld.cy.ts new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/typescript-pinia-cypress/src/components/__tests__/HelloWorld.cy.ts @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/typescript-pinia-cypress/src/components/icons/IconCommunity.vue b/typescript-pinia-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-pinia-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-pinia-cypress/src/components/icons/IconDocumentation.vue b/typescript-pinia-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-pinia-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-pinia-cypress/src/components/icons/IconEcosystem.vue b/typescript-pinia-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-pinia-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-pinia-cypress/src/components/icons/IconSupport.vue b/typescript-pinia-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-pinia-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-pinia-cypress/src/components/icons/IconTooling.vue b/typescript-pinia-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-pinia-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-pinia-cypress/src/main.ts b/typescript-pinia-cypress/src/main.ts new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/typescript-pinia-cypress/src/main.ts @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-pinia-cypress/src/stores/counter.ts b/typescript-pinia-cypress/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-pinia-cypress/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-pinia-cypress/tsconfig.app.json b/typescript-pinia-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-pinia-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-pinia-cypress/tsconfig.config.json b/typescript-pinia-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-pinia-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-pinia-cypress/tsconfig.cypress-ct.json b/typescript-pinia-cypress/tsconfig.cypress-ct.json new file mode 100644 index 00000000..29cbaa47 --- /dev/null +++ b/typescript-pinia-cypress/tsconfig.cypress-ct.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.app.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "cypress/support/component.*"], + "exclude": [], + "compilerOptions": { + "composite": true + } +} diff --git a/typescript-pinia-cypress/tsconfig.json b/typescript-pinia-cypress/tsconfig.json new file mode 100644 index 00000000..040665bb --- /dev/null +++ b/typescript-pinia-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.cypress-ct.json" + } + ] +} diff --git a/typescript-pinia-cypress/vite.config.ts b/typescript-pinia-cypress/vite.config.ts new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/typescript-pinia-cypress/vite.config.ts @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-pinia-vitest-cypress/.gitignore b/typescript-pinia-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-pinia-vitest-cypress/.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/typescript-pinia-vitest-cypress/README.md b/typescript-pinia-vitest-cypress/README.md new file mode 100644 index 00000000..53a2afe8 --- /dev/null +++ b/typescript-pinia-vitest-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-pinia-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-pinia-vitest-cypress/cypress.config.ts b/typescript-pinia-vitest-cypress/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-pinia-vitest-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/' + } +}) diff --git a/typescript-pinia-vitest-cypress/cypress/e2e/example.cy.ts b/typescript-pinia-vitest-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-pinia-vitest-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-pinia-vitest-cypress/cypress/e2e/tsconfig.json b/typescript-pinia-vitest-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-pinia-vitest-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-pinia-vitest-cypress/cypress/fixtures/example.json b/typescript-pinia-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-pinia-vitest-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/typescript-pinia-vitest-cypress/cypress/support/commands.ts b/typescript-pinia-vitest-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-pinia-vitest-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-pinia-vitest-cypress/cypress/support/e2e.ts b/typescript-pinia-vitest-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-pinia-vitest-cypress/cypress/support/e2e.ts @@ -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/typescript-pinia-vitest-cypress/env.d.ts b/typescript-pinia-vitest-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-pinia-vitest-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-pinia-vitest-cypress/index.html b/typescript-pinia-vitest-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-pinia-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-pinia-vitest-cypress/package.json b/typescript-pinia-vitest-cypress/package.json new file mode 100644 index 00000000..b0d0453c --- /dev/null +++ b/typescript-pinia-vitest-cypress/package.json @@ -0,0 +1,35 @@ +{ + "name": "typescript-pinia-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-pinia-vitest-cypress/public/favicon.ico b/typescript-pinia-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-pinia-vitest-cypress/src/App.vue b/typescript-pinia-vitest-cypress/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-pinia-vitest-cypress/src/assets/base.css b/typescript-pinia-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-pinia-vitest-cypress/src/assets/logo.svg b/typescript-pinia-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-pinia-vitest-cypress/src/components/HelloWorld.vue b/typescript-pinia-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-pinia-vitest-cypress/src/components/TheWelcome.vue b/typescript-pinia-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-pinia-vitest-cypress/src/components/WelcomeItem.vue b/typescript-pinia-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts b/typescript-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-pinia-vitest-cypress/src/components/icons/IconCommunity.vue b/typescript-pinia-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue b/typescript-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue b/typescript-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-pinia-vitest-cypress/src/components/icons/IconSupport.vue b/typescript-pinia-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-pinia-vitest-cypress/src/components/icons/IconTooling.vue b/typescript-pinia-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-pinia-vitest-cypress/src/main.ts b/typescript-pinia-vitest-cypress/src/main.ts new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/main.ts @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-pinia-vitest-cypress/src/stores/counter.ts b/typescript-pinia-vitest-cypress/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-pinia-vitest-cypress/tsconfig.app.json b/typescript-pinia-vitest-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-pinia-vitest-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-pinia-vitest-cypress/tsconfig.config.json b/typescript-pinia-vitest-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-pinia-vitest-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-pinia-vitest-cypress/tsconfig.json b/typescript-pinia-vitest-cypress/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-pinia-vitest-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-pinia-vitest-cypress/tsconfig.vitest.json b/typescript-pinia-vitest-cypress/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-pinia-vitest-cypress/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-pinia-vitest-cypress/vite.config.ts b/typescript-pinia-vitest-cypress/vite.config.ts new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/typescript-pinia-vitest-cypress/vite.config.ts @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-pinia-vitest/.gitignore b/typescript-pinia-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-pinia-vitest/.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/typescript-pinia-vitest/README.md b/typescript-pinia-vitest/README.md new file mode 100644 index 00000000..fbe43309 --- /dev/null +++ b/typescript-pinia-vitest/README.md @@ -0,0 +1,46 @@ +# typescript-pinia-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/typescript-pinia-vitest/env.d.ts b/typescript-pinia-vitest/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-pinia-vitest/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-pinia-vitest/index.html b/typescript-pinia-vitest/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-pinia-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-pinia-vitest/package.json b/typescript-pinia-vitest/package.json new file mode 100644 index 00000000..1671f8a2 --- /dev/null +++ b/typescript-pinia-vitest/package.json @@ -0,0 +1,31 @@ +{ + "name": "typescript-pinia-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-pinia-vitest/public/favicon.ico b/typescript-pinia-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-pinia-vitest/src/App.vue b/typescript-pinia-vitest/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-pinia-vitest/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-pinia-vitest/src/assets/base.css b/typescript-pinia-vitest/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-pinia-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-pinia-vitest/src/assets/logo.svg b/typescript-pinia-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-pinia-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-pinia-vitest/src/components/HelloWorld.vue b/typescript-pinia-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-pinia-vitest/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-pinia-vitest/src/components/TheWelcome.vue b/typescript-pinia-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-pinia-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-pinia-vitest/src/components/WelcomeItem.vue b/typescript-pinia-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-pinia-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-pinia-vitest/src/components/__tests__/HelloWorld.spec.ts b/typescript-pinia-vitest/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-pinia-vitest/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-pinia-vitest/src/components/icons/IconCommunity.vue b/typescript-pinia-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-pinia-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-pinia-vitest/src/components/icons/IconDocumentation.vue b/typescript-pinia-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-pinia-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-pinia-vitest/src/components/icons/IconEcosystem.vue b/typescript-pinia-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-pinia-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-pinia-vitest/src/components/icons/IconSupport.vue b/typescript-pinia-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-pinia-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-pinia-vitest/src/components/icons/IconTooling.vue b/typescript-pinia-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-pinia-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-pinia-vitest/src/main.ts b/typescript-pinia-vitest/src/main.ts new file mode 100644 index 00000000..3b85a2ca --- /dev/null +++ b/typescript-pinia-vitest/src/main.ts @@ -0,0 +1,11 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' + +Vue.use(PiniaVuePlugin) + +new Vue({ + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-pinia-vitest/src/stores/counter.ts b/typescript-pinia-vitest/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-pinia-vitest/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-pinia-vitest/tsconfig.app.json b/typescript-pinia-vitest/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-pinia-vitest/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-pinia-vitest/tsconfig.config.json b/typescript-pinia-vitest/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-pinia-vitest/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-pinia-vitest/tsconfig.json b/typescript-pinia-vitest/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-pinia-vitest/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-pinia-vitest/tsconfig.vitest.json b/typescript-pinia-vitest/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-pinia-vitest/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-pinia-vitest/vite.config.ts b/typescript-pinia-vitest/vite.config.ts new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/typescript-pinia-vitest/vite.config.ts @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-pinia-with-tests/README.md b/typescript-pinia-with-tests/README.md index b0e3c8bd..408722e3 100644 --- a/typescript-pinia-with-tests/README.md +++ b/typescript-pinia-with-tests/README.md @@ -1,16 +1,21 @@ # typescript-pinia-with-tests -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Type Support for `.vue` Imports in TS -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. ## Customize configuration @@ -34,10 +39,10 @@ pnpm dev pnpm build ``` -### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction) +### Run Unit Tests with [Vitest](https://vitest.dev/) ```sh -pnpm test:unit # or `pnpm test:unit:ci` for headless testing +pnpm test:unit ``` ### Run End-to-End Tests with [Cypress](https://www.cypress.io/) diff --git a/typescript-pinia-with-tests/cypress.config.ts b/typescript-pinia-with-tests/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-pinia-with-tests/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/' + } +}) diff --git a/typescript-pinia-with-tests/cypress.json b/typescript-pinia-with-tests/cypress.json deleted file mode 100644 index 3d372252..00000000 --- a/typescript-pinia-with-tests/cypress.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "baseUrl": "http://localhost:5050/", - "component": { - "componentFolder": "src", - "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" - } -} diff --git a/typescript-pinia-with-tests/cypress/e2e/example.cy.ts b/typescript-pinia-with-tests/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-pinia-with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-pinia-with-tests/cypress/e2e/tsconfig.json b/typescript-pinia-with-tests/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-pinia-with-tests/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-pinia-with-tests/cypress/plugins/index.ts b/typescript-pinia-with-tests/cypress/plugins/index.ts deleted file mode 100644 index ad2e351d..00000000 --- a/typescript-pinia-with-tests/cypress/plugins/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -/// -// *********************************************************** -// 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/typescript-pinia-with-tests/cypress/support/commands.ts b/typescript-pinia-with-tests/cypress/support/commands.ts index 119ab03f..95857aea 100644 --- a/typescript-pinia-with-tests/cypress/support/commands.ts +++ b/typescript-pinia-with-tests/cypress/support/commands.ts @@ -1,5 +1,6 @@ +/// // *********************************************** -// This example commands.js shows you how to +// This example commands.ts shows you how to // create various custom commands and overwrite // existing commands. // @@ -23,3 +24,14 @@ // // -- 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-pinia-with-tests/cypress/support/e2e.ts b/typescript-pinia-with-tests/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-pinia-with-tests/cypress/support/e2e.ts @@ -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/typescript-pinia-with-tests/cypress/tsconfig.json b/typescript-pinia-with-tests/cypress/tsconfig.json deleted file mode 100644 index b5b2f972..00000000 --- a/typescript-pinia-with-tests/cypress/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["es5", "dom"], - "types": ["cypress"] - }, - "include": ["./**/*"] -} diff --git a/typescript-pinia-with-tests/package.json b/typescript-pinia-with-tests/package.json index d2bdd554..8cd74500 100644 --- a/typescript-pinia-with-tests/package.json +++ b/typescript-pinia-with-tests/package.json @@ -3,29 +3,33 @@ "version": "0.0.0", "scripts": { "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "test:unit": "cypress open-ct", - "test:unit:ci": "cypress run-ct --quiet --reporter spec", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'", - "typecheck": "vue-tsc --noEmit" + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "pinia": "^2.0.11", - "vue": "^2.7.0-0" + "pinia": "^2.0.14", + "vue": "^2.7.4" }, "devDependencies": { - "@cypress/vite-dev-server": "^2.2.2", - "@cypress/vue": "^2.2.4", - "@types/node": "^16.11.25", - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "cypress": "^9.5.0", + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", - "typescript": "~4.7.3", - "vite": "^2.8.4", - "vue-template-compiler": "^2.7.0-0", - "vue-tsc": "^0.38.2" + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" } } diff --git a/typescript-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts index d6fb360b..293bf197 100644 --- a/typescript-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts +++ b/typescript-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/typescript-pinia-with-tests/tsconfig.app.json b/typescript-pinia-with-tests/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-pinia-with-tests/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-pinia-with-tests/tsconfig.config.json b/typescript-pinia-with-tests/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-pinia-with-tests/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-pinia-with-tests/tsconfig.json b/typescript-pinia-with-tests/tsconfig.json index 764a0528..31f90037 100644 --- a/typescript-pinia-with-tests/tsconfig.json +++ b/typescript-pinia-with-tests/tsconfig.json @@ -1,24 +1,14 @@ { - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, - "paths": { - "@/*": ["src/*"] + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true - }, - "vueCompilerOptions": { - "target": 2.7 - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] } diff --git a/typescript-pinia-with-tests/tsconfig.vitest.json b/typescript-pinia-with-tests/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-pinia-with-tests/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-pinia/README.md b/typescript-pinia/README.md index 42e9e259..47428c44 100644 --- a/typescript-pinia/README.md +++ b/typescript-pinia/README.md @@ -1,16 +1,21 @@ # typescript-pinia -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Type Support for `.vue` Imports in TS -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. ## Customize configuration diff --git a/typescript-pinia/package.json b/typescript-pinia/package.json index 0e6a9c2a..bf7e0ec2 100644 --- a/typescript-pinia/package.json +++ b/typescript-pinia/package.json @@ -3,20 +3,23 @@ "version": "0.0.0", "scripts": { "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "typecheck": "vue-tsc --noEmit" + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" }, "dependencies": { - "pinia": "^2.0.11", - "vue": "^2.7.0-0" + "pinia": "^2.0.14", + "vue": "^2.7.4" }, "devDependencies": { - "@types/node": "^16.11.25", - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "typescript": "~4.7.3", - "vite": "^2.8.4", - "vue-tsc": "^0.38.2" + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/tsconfig": "^0.1.3", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" } } diff --git a/typescript-pinia/tsconfig.config.json b/typescript-pinia/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-pinia/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-pinia/tsconfig.json b/typescript-pinia/tsconfig.json index 764a0528..8d235999 100644 --- a/typescript-pinia/tsconfig.json +++ b/typescript-pinia/tsconfig.json @@ -1,24 +1,16 @@ { + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, + "baseUrl": ".", "paths": { - "@/*": ["src/*"] - }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true + "@/*": ["./src/*"] + } }, - "vueCompilerOptions": { - "target": 2.7 - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] + + "references": [ + { + "path": "./tsconfig.config.json" + } + ] } diff --git a/typescript-router-cypress/.gitignore b/typescript-router-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-router-cypress/.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/typescript-router-cypress/README.md b/typescript-router-cypress/README.md new file mode 100644 index 00000000..84f73d07 --- /dev/null +++ b/typescript-router-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-router-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-router-cypress/cypress.config.ts b/typescript-router-cypress/cypress.config.ts new file mode 100644 index 00000000..c8fac129 --- /dev/null +++ b/typescript-router-cypress/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' + } + } +}) diff --git a/typescript-router-cypress/cypress/e2e/example.cy.ts b/typescript-router-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-router-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-router-cypress/cypress/e2e/tsconfig.json b/typescript-router-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-router-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-router-cypress/cypress/fixtures/example.json b/typescript-router-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-router-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/typescript-router-cypress/cypress/support/commands.ts b/typescript-router-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-router-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-router-cypress/cypress/support/component-index.html b/typescript-router-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/typescript-router-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/typescript-router-cypress/cypress/support/component.ts b/typescript-router-cypress/cypress/support/component.ts new file mode 100644 index 00000000..c56a294a --- /dev/null +++ b/typescript-router-cypress/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/vue2' + +// Augment the Cypress namespace to include type definitions for +// your custom command. +// Alternatively, can be defined in cypress/support/component.d.ts +// with a 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) diff --git a/typescript-router-cypress/cypress/support/e2e.ts b/typescript-router-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-router-cypress/cypress/support/e2e.ts @@ -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/typescript-router-cypress/env.d.ts b/typescript-router-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-router-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-router-cypress/index.html b/typescript-router-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-router-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-router-cypress/package.json b/typescript-router-cypress/package.json new file mode 100644 index 00000000..4e4a501e --- /dev/null +++ b/typescript-router-cypress/package.json @@ -0,0 +1,31 @@ +{ + "name": "typescript-router-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-router-cypress/public/favicon.ico b/typescript-router-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-router-cypress/src/App.vue b/typescript-router-cypress/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-router-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-router-cypress/src/assets/base.css b/typescript-router-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-router-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-router-cypress/src/assets/logo.svg b/typescript-router-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-router-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-router-cypress/src/components/HelloWorld.vue b/typescript-router-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-router-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-router-cypress/src/components/TheWelcome.vue b/typescript-router-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-router-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-router-cypress/src/components/WelcomeItem.vue b/typescript-router-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-router-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-router-cypress/src/components/__tests__/HelloWorld.cy.ts b/typescript-router-cypress/src/components/__tests__/HelloWorld.cy.ts new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/typescript-router-cypress/src/components/__tests__/HelloWorld.cy.ts @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/typescript-router-cypress/src/components/icons/IconCommunity.vue b/typescript-router-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-router-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-cypress/src/components/icons/IconDocumentation.vue b/typescript-router-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-router-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-cypress/src/components/icons/IconEcosystem.vue b/typescript-router-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-router-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-cypress/src/components/icons/IconSupport.vue b/typescript-router-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-router-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-cypress/src/components/icons/IconTooling.vue b/typescript-router-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-router-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-router-cypress/src/main.ts b/typescript-router-cypress/src/main.ts new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/typescript-router-cypress/src/main.ts @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-router-cypress/src/router/index.ts b/typescript-router-cypress/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-router-cypress/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-router-cypress/src/views/AboutView.vue b/typescript-router-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-router-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-router-cypress/src/views/HomeView.vue b/typescript-router-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-router-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-router-cypress/tsconfig.app.json b/typescript-router-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-router-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-router-cypress/tsconfig.config.json b/typescript-router-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-router-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-router-cypress/tsconfig.cypress-ct.json b/typescript-router-cypress/tsconfig.cypress-ct.json new file mode 100644 index 00000000..29cbaa47 --- /dev/null +++ b/typescript-router-cypress/tsconfig.cypress-ct.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.app.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "cypress/support/component.*"], + "exclude": [], + "compilerOptions": { + "composite": true + } +} diff --git a/typescript-router-cypress/tsconfig.json b/typescript-router-cypress/tsconfig.json new file mode 100644 index 00000000..040665bb --- /dev/null +++ b/typescript-router-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.cypress-ct.json" + } + ] +} diff --git a/typescript-router-cypress/vite.config.ts b/typescript-router-cypress/vite.config.ts new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/typescript-router-cypress/vite.config.ts @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-router-pinia-cypress/.gitignore b/typescript-router-pinia-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-router-pinia-cypress/.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/typescript-router-pinia-cypress/README.md b/typescript-router-pinia-cypress/README.md new file mode 100644 index 00000000..2bf32fb6 --- /dev/null +++ b/typescript-router-pinia-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-router-pinia-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component) + +```sh +pnpm test:unit # or `pnpm test:unit:ci` for headless testing +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-router-pinia-cypress/cypress.config.ts b/typescript-router-pinia-cypress/cypress.config.ts new file mode 100644 index 00000000..c8fac129 --- /dev/null +++ b/typescript-router-pinia-cypress/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' + } + } +}) diff --git a/typescript-router-pinia-cypress/cypress/e2e/example.cy.ts b/typescript-router-pinia-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-router-pinia-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-router-pinia-cypress/cypress/e2e/tsconfig.json b/typescript-router-pinia-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-router-pinia-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-router-pinia-cypress/cypress/fixtures/example.json b/typescript-router-pinia-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-router-pinia-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/typescript-router-pinia-cypress/cypress/support/commands.ts b/typescript-router-pinia-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-router-pinia-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-router-pinia-cypress/cypress/support/component-index.html b/typescript-router-pinia-cypress/cypress/support/component-index.html new file mode 100644 index 00000000..5f9622ae --- /dev/null +++ b/typescript-router-pinia-cypress/cypress/support/component-index.html @@ -0,0 +1,12 @@ + + + + + + + Components App + + +
+ + diff --git a/typescript-router-pinia-cypress/cypress/support/component.ts b/typescript-router-pinia-cypress/cypress/support/component.ts new file mode 100644 index 00000000..c56a294a --- /dev/null +++ b/typescript-router-pinia-cypress/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/vue2' + +// Augment the Cypress namespace to include type definitions for +// your custom command. +// Alternatively, can be defined in cypress/support/component.d.ts +// with a 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) diff --git a/typescript-router-pinia-cypress/cypress/support/e2e.ts b/typescript-router-pinia-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-router-pinia-cypress/cypress/support/e2e.ts @@ -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/typescript-router-pinia-cypress/env.d.ts b/typescript-router-pinia-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-router-pinia-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-router-pinia-cypress/index.html b/typescript-router-pinia-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-router-pinia-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-router-pinia-cypress/package.json b/typescript-router-pinia-cypress/package.json new file mode 100644 index 00000000..1fdafcf0 --- /dev/null +++ b/typescript-router-pinia-cypress/package.json @@ -0,0 +1,32 @@ +{ + "name": "typescript-router-pinia-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "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'", + "test:unit": "cypress open --component", + "test:unit:ci": "cypress run --component --quiet --reporter spec", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-router-pinia-cypress/public/favicon.ico b/typescript-router-pinia-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-router-pinia-cypress/src/App.vue b/typescript-router-pinia-cypress/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-router-pinia-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-router-pinia-cypress/src/assets/base.css b/typescript-router-pinia-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-router-pinia-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-router-pinia-cypress/src/assets/logo.svg b/typescript-router-pinia-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-router-pinia-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-router-pinia-cypress/src/components/HelloWorld.vue b/typescript-router-pinia-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-router-pinia-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-router-pinia-cypress/src/components/TheWelcome.vue b/typescript-router-pinia-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-router-pinia-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-router-pinia-cypress/src/components/WelcomeItem.vue b/typescript-router-pinia-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-router-pinia-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-router-pinia-cypress/src/components/__tests__/HelloWorld.cy.ts b/typescript-router-pinia-cypress/src/components/__tests__/HelloWorld.cy.ts new file mode 100644 index 00000000..0e0c065a --- /dev/null +++ b/typescript-router-pinia-cypress/src/components/__tests__/HelloWorld.cy.ts @@ -0,0 +1,12 @@ +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('playground', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + }) + + it('renders properly', () => { + cy.mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) + cy.get('h1').should('contain', 'Hello Cypress') + }) +}) diff --git a/typescript-router-pinia-cypress/src/components/icons/IconCommunity.vue b/typescript-router-pinia-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-router-pinia-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-pinia-cypress/src/components/icons/IconDocumentation.vue b/typescript-router-pinia-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-router-pinia-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-pinia-cypress/src/components/icons/IconEcosystem.vue b/typescript-router-pinia-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-router-pinia-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-pinia-cypress/src/components/icons/IconSupport.vue b/typescript-router-pinia-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-router-pinia-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-pinia-cypress/src/components/icons/IconTooling.vue b/typescript-router-pinia-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-router-pinia-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-router-pinia-cypress/src/main.ts b/typescript-router-pinia-cypress/src/main.ts new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/typescript-router-pinia-cypress/src/main.ts @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-router-pinia-cypress/src/router/index.ts b/typescript-router-pinia-cypress/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-router-pinia-cypress/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-router-pinia-cypress/src/stores/counter.ts b/typescript-router-pinia-cypress/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-router-pinia-cypress/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-router-pinia-cypress/src/views/AboutView.vue b/typescript-router-pinia-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-router-pinia-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-router-pinia-cypress/src/views/HomeView.vue b/typescript-router-pinia-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-router-pinia-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-router-pinia-cypress/tsconfig.app.json b/typescript-router-pinia-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-router-pinia-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-router-pinia-cypress/tsconfig.config.json b/typescript-router-pinia-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-router-pinia-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-router-pinia-cypress/tsconfig.cypress-ct.json b/typescript-router-pinia-cypress/tsconfig.cypress-ct.json new file mode 100644 index 00000000..29cbaa47 --- /dev/null +++ b/typescript-router-pinia-cypress/tsconfig.cypress-ct.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.app.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "cypress/support/component.*"], + "exclude": [], + "compilerOptions": { + "composite": true + } +} diff --git a/typescript-router-pinia-cypress/tsconfig.json b/typescript-router-pinia-cypress/tsconfig.json new file mode 100644 index 00000000..040665bb --- /dev/null +++ b/typescript-router-pinia-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.cypress-ct.json" + } + ] +} diff --git a/typescript-router-pinia-cypress/vite.config.ts b/typescript-router-pinia-cypress/vite.config.ts new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/typescript-router-pinia-cypress/vite.config.ts @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-router-pinia-vitest-cypress/.gitignore b/typescript-router-pinia-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/.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/typescript-router-pinia-vitest-cypress/README.md b/typescript-router-pinia-vitest-cypress/README.md new file mode 100644 index 00000000..a97b797b --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-router-pinia-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-router-pinia-vitest-cypress/cypress.config.ts b/typescript-router-pinia-vitest-cypress/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-router-pinia-vitest-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/' + } +}) diff --git a/typescript-router-pinia-vitest-cypress/cypress/e2e/example.cy.ts b/typescript-router-pinia-vitest-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-router-pinia-vitest-cypress/cypress/e2e/tsconfig.json b/typescript-router-pinia-vitest-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-router-pinia-vitest-cypress/cypress/fixtures/example.json b/typescript-router-pinia-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-router-pinia-vitest-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/typescript-router-pinia-vitest-cypress/cypress/support/commands.ts b/typescript-router-pinia-vitest-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-router-pinia-vitest-cypress/cypress/support/e2e.ts b/typescript-router-pinia-vitest-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/cypress/support/e2e.ts @@ -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/typescript-router-pinia-vitest-cypress/env.d.ts b/typescript-router-pinia-vitest-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-router-pinia-vitest-cypress/index.html b/typescript-router-pinia-vitest-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-router-pinia-vitest-cypress/package.json b/typescript-router-pinia-vitest-cypress/package.json new file mode 100644 index 00000000..ab5a36a0 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/package.json @@ -0,0 +1,36 @@ +{ + "name": "typescript-router-pinia-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-router-pinia-vitest-cypress/public/favicon.ico b/typescript-router-pinia-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-router-pinia-vitest-cypress/src/App.vue b/typescript-router-pinia-vitest-cypress/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-router-pinia-vitest-cypress/src/assets/base.css b/typescript-router-pinia-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-router-pinia-vitest-cypress/src/assets/logo.svg b/typescript-router-pinia-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-router-pinia-vitest-cypress/src/components/HelloWorld.vue b/typescript-router-pinia-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-router-pinia-vitest-cypress/src/components/TheWelcome.vue b/typescript-router-pinia-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-router-pinia-vitest-cypress/src/components/WelcomeItem.vue b/typescript-router-pinia-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-router-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts b/typescript-router-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-router-pinia-vitest-cypress/src/components/icons/IconCommunity.vue b/typescript-router-pinia-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue b/typescript-router-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue b/typescript-router-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-pinia-vitest-cypress/src/components/icons/IconSupport.vue b/typescript-router-pinia-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-pinia-vitest-cypress/src/components/icons/IconTooling.vue b/typescript-router-pinia-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-router-pinia-vitest-cypress/src/main.ts b/typescript-router-pinia-vitest-cypress/src/main.ts new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/main.ts @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-router-pinia-vitest-cypress/src/router/index.ts b/typescript-router-pinia-vitest-cypress/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-router-pinia-vitest-cypress/src/stores/counter.ts b/typescript-router-pinia-vitest-cypress/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-router-pinia-vitest-cypress/src/views/AboutView.vue b/typescript-router-pinia-vitest-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-router-pinia-vitest-cypress/src/views/HomeView.vue b/typescript-router-pinia-vitest-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-router-pinia-vitest-cypress/tsconfig.app.json b/typescript-router-pinia-vitest-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-router-pinia-vitest-cypress/tsconfig.config.json b/typescript-router-pinia-vitest-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-router-pinia-vitest-cypress/tsconfig.json b/typescript-router-pinia-vitest-cypress/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-router-pinia-vitest-cypress/tsconfig.vitest.json b/typescript-router-pinia-vitest-cypress/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-router-pinia-vitest-cypress/vite.config.ts b/typescript-router-pinia-vitest-cypress/vite.config.ts new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/typescript-router-pinia-vitest-cypress/vite.config.ts @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-router-pinia-vitest/.gitignore b/typescript-router-pinia-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-router-pinia-vitest/.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/typescript-router-pinia-vitest/README.md b/typescript-router-pinia-vitest/README.md new file mode 100644 index 00000000..5277cebf --- /dev/null +++ b/typescript-router-pinia-vitest/README.md @@ -0,0 +1,46 @@ +# typescript-router-pinia-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/typescript-router-pinia-vitest/env.d.ts b/typescript-router-pinia-vitest/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-router-pinia-vitest/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-router-pinia-vitest/index.html b/typescript-router-pinia-vitest/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-router-pinia-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-router-pinia-vitest/package.json b/typescript-router-pinia-vitest/package.json new file mode 100644 index 00000000..7f598e7a --- /dev/null +++ b/typescript-router-pinia-vitest/package.json @@ -0,0 +1,32 @@ +{ + "name": "typescript-router-pinia-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-router-pinia-vitest/public/favicon.ico b/typescript-router-pinia-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-router-pinia-vitest/src/App.vue b/typescript-router-pinia-vitest/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-router-pinia-vitest/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-router-pinia-vitest/src/assets/base.css b/typescript-router-pinia-vitest/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-router-pinia-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-router-pinia-vitest/src/assets/logo.svg b/typescript-router-pinia-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-router-pinia-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-router-pinia-vitest/src/components/HelloWorld.vue b/typescript-router-pinia-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-router-pinia-vitest/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-router-pinia-vitest/src/components/TheWelcome.vue b/typescript-router-pinia-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-router-pinia-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-router-pinia-vitest/src/components/WelcomeItem.vue b/typescript-router-pinia-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-router-pinia-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-router-pinia-vitest/src/components/__tests__/HelloWorld.spec.ts b/typescript-router-pinia-vitest/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-router-pinia-vitest/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-router-pinia-vitest/src/components/icons/IconCommunity.vue b/typescript-router-pinia-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-router-pinia-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-pinia-vitest/src/components/icons/IconDocumentation.vue b/typescript-router-pinia-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-router-pinia-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-pinia-vitest/src/components/icons/IconEcosystem.vue b/typescript-router-pinia-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-router-pinia-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-pinia-vitest/src/components/icons/IconSupport.vue b/typescript-router-pinia-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-router-pinia-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-pinia-vitest/src/components/icons/IconTooling.vue b/typescript-router-pinia-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-router-pinia-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-router-pinia-vitest/src/main.ts b/typescript-router-pinia-vitest/src/main.ts new file mode 100644 index 00000000..8fa41e80 --- /dev/null +++ b/typescript-router-pinia-vitest/src/main.ts @@ -0,0 +1,13 @@ +import Vue from 'vue' +import { createPinia, PiniaVuePlugin } from 'pinia' + +import App from './App.vue' +import router from './router' + +Vue.use(PiniaVuePlugin) + +new Vue({ + router, + pinia: createPinia(), + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-router-pinia-vitest/src/router/index.ts b/typescript-router-pinia-vitest/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-router-pinia-vitest/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-router-pinia-vitest/src/stores/counter.ts b/typescript-router-pinia-vitest/src/stores/counter.ts new file mode 100644 index 00000000..4a2d2427 --- /dev/null +++ b/typescript-router-pinia-vitest/src/stores/counter.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore({ + id: 'counter', + state: () => ({ + counter: 0 + }), + getters: { + doubleCount: (state) => state.counter * 2 + }, + actions: { + increment() { + this.counter++ + } + } +}) diff --git a/typescript-router-pinia-vitest/src/views/AboutView.vue b/typescript-router-pinia-vitest/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-router-pinia-vitest/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-router-pinia-vitest/src/views/HomeView.vue b/typescript-router-pinia-vitest/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-router-pinia-vitest/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-router-pinia-vitest/tsconfig.app.json b/typescript-router-pinia-vitest/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-router-pinia-vitest/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-router-pinia-vitest/tsconfig.config.json b/typescript-router-pinia-vitest/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-router-pinia-vitest/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-router-pinia-vitest/tsconfig.json b/typescript-router-pinia-vitest/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-router-pinia-vitest/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-router-pinia-vitest/tsconfig.vitest.json b/typescript-router-pinia-vitest/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-router-pinia-vitest/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-router-pinia-vitest/vite.config.ts b/typescript-router-pinia-vitest/vite.config.ts new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/typescript-router-pinia-vitest/vite.config.ts @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-router-pinia-with-tests/README.md b/typescript-router-pinia-with-tests/README.md index dc421902..1e1597b4 100644 --- a/typescript-router-pinia-with-tests/README.md +++ b/typescript-router-pinia-with-tests/README.md @@ -1,16 +1,21 @@ # typescript-router-pinia-with-tests -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Type Support for `.vue` Imports in TS -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. ## Customize configuration @@ -34,10 +39,10 @@ pnpm dev pnpm build ``` -### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction) +### Run Unit Tests with [Vitest](https://vitest.dev/) ```sh -pnpm test:unit # or `pnpm test:unit:ci` for headless testing +pnpm test:unit ``` ### Run End-to-End Tests with [Cypress](https://www.cypress.io/) diff --git a/typescript-router-pinia-with-tests/cypress.config.ts b/typescript-router-pinia-with-tests/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-router-pinia-with-tests/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/' + } +}) diff --git a/typescript-router-pinia-with-tests/cypress.json b/typescript-router-pinia-with-tests/cypress.json deleted file mode 100644 index 3d372252..00000000 --- a/typescript-router-pinia-with-tests/cypress.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "baseUrl": "http://localhost:5050/", - "component": { - "componentFolder": "src", - "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" - } -} diff --git a/typescript-router-pinia-with-tests/cypress/e2e/example.cy.ts b/typescript-router-pinia-with-tests/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-router-pinia-with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-router-pinia-with-tests/cypress/e2e/tsconfig.json b/typescript-router-pinia-with-tests/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-router-pinia-with-tests/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-router-pinia-with-tests/cypress/plugins/index.ts b/typescript-router-pinia-with-tests/cypress/plugins/index.ts deleted file mode 100644 index ad2e351d..00000000 --- a/typescript-router-pinia-with-tests/cypress/plugins/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -/// -// *********************************************************** -// 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/typescript-router-pinia-with-tests/cypress/support/commands.ts b/typescript-router-pinia-with-tests/cypress/support/commands.ts index 119ab03f..95857aea 100644 --- a/typescript-router-pinia-with-tests/cypress/support/commands.ts +++ b/typescript-router-pinia-with-tests/cypress/support/commands.ts @@ -1,5 +1,6 @@ +/// // *********************************************** -// This example commands.js shows you how to +// This example commands.ts shows you how to // create various custom commands and overwrite // existing commands. // @@ -23,3 +24,14 @@ // // -- 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-router-pinia-with-tests/cypress/support/e2e.ts b/typescript-router-pinia-with-tests/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-router-pinia-with-tests/cypress/support/e2e.ts @@ -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/typescript-router-pinia-with-tests/cypress/tsconfig.json b/typescript-router-pinia-with-tests/cypress/tsconfig.json deleted file mode 100644 index b5b2f972..00000000 --- a/typescript-router-pinia-with-tests/cypress/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["es5", "dom"], - "types": ["cypress"] - }, - "include": ["./**/*"] -} diff --git a/typescript-router-pinia-with-tests/package.json b/typescript-router-pinia-with-tests/package.json index 08bfd404..acd14fe2 100644 --- a/typescript-router-pinia-with-tests/package.json +++ b/typescript-router-pinia-with-tests/package.json @@ -3,30 +3,34 @@ "version": "0.0.0", "scripts": { "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "test:unit": "cypress open-ct", - "test:unit:ci": "cypress run-ct --quiet --reporter spec", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'", - "typecheck": "vue-tsc --noEmit" + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "pinia": "^2.0.11", - "vue": "^2.7.0-0", - "vue-router": "^3.5.3" + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" }, "devDependencies": { - "@cypress/vite-dev-server": "^2.2.2", - "@cypress/vue": "^2.2.4", - "@types/node": "^16.11.25", - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "cypress": "^9.5.0", + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", - "typescript": "~4.7.3", - "vite": "^2.8.4", - "vue-template-compiler": "^2.7.0-0", - "vue-tsc": "^0.38.2" + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" } } diff --git a/typescript-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts index d6fb360b..293bf197 100644 --- a/typescript-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts +++ b/typescript-router-pinia-with-tests/src/components/__tests__/HelloWorld.spec.ts @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/typescript-router-pinia-with-tests/tsconfig.app.json b/typescript-router-pinia-with-tests/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-router-pinia-with-tests/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-router-pinia-with-tests/tsconfig.config.json b/typescript-router-pinia-with-tests/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-router-pinia-with-tests/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-router-pinia-with-tests/tsconfig.json b/typescript-router-pinia-with-tests/tsconfig.json index 764a0528..31f90037 100644 --- a/typescript-router-pinia-with-tests/tsconfig.json +++ b/typescript-router-pinia-with-tests/tsconfig.json @@ -1,24 +1,14 @@ { - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, - "paths": { - "@/*": ["src/*"] + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true - }, - "vueCompilerOptions": { - "target": 2.7 - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] } diff --git a/typescript-router-pinia-with-tests/tsconfig.vitest.json b/typescript-router-pinia-with-tests/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-router-pinia-with-tests/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-router-pinia/README.md b/typescript-router-pinia/README.md index cc10bc16..4f731fff 100644 --- a/typescript-router-pinia/README.md +++ b/typescript-router-pinia/README.md @@ -1,16 +1,21 @@ # typescript-router-pinia -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Type Support for `.vue` Imports in TS -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. ## Customize configuration diff --git a/typescript-router-pinia/package.json b/typescript-router-pinia/package.json index 69b9e23b..0cbc0dc8 100644 --- a/typescript-router-pinia/package.json +++ b/typescript-router-pinia/package.json @@ -3,21 +3,24 @@ "version": "0.0.0", "scripts": { "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "typecheck": "vue-tsc --noEmit" + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" }, "dependencies": { - "pinia": "^2.0.11", - "vue": "^2.7.0-0", - "vue-router": "^3.5.3" + "pinia": "^2.0.14", + "vue": "^2.7.4", + "vue-router": "^3.5.4" }, "devDependencies": { - "@types/node": "^16.11.25", - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "typescript": "~4.7.3", - "vite": "^2.8.4", - "vue-tsc": "^0.38.2" + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/tsconfig": "^0.1.3", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" } } diff --git a/typescript-router-pinia/tsconfig.config.json b/typescript-router-pinia/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-router-pinia/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-router-pinia/tsconfig.json b/typescript-router-pinia/tsconfig.json index 764a0528..8d235999 100644 --- a/typescript-router-pinia/tsconfig.json +++ b/typescript-router-pinia/tsconfig.json @@ -1,24 +1,16 @@ { + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, + "baseUrl": ".", "paths": { - "@/*": ["src/*"] - }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true + "@/*": ["./src/*"] + } }, - "vueCompilerOptions": { - "target": 2.7 - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] + + "references": [ + { + "path": "./tsconfig.config.json" + } + ] } diff --git a/typescript-router-vitest-cypress/.gitignore b/typescript-router-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-router-vitest-cypress/.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/typescript-router-vitest-cypress/README.md b/typescript-router-vitest-cypress/README.md new file mode 100644 index 00000000..0c6c9090 --- /dev/null +++ b/typescript-router-vitest-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-router-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-router-vitest-cypress/cypress.config.ts b/typescript-router-vitest-cypress/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-router-vitest-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/' + } +}) diff --git a/typescript-router-vitest-cypress/cypress/e2e/example.cy.ts b/typescript-router-vitest-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-router-vitest-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-router-vitest-cypress/cypress/e2e/tsconfig.json b/typescript-router-vitest-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-router-vitest-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-router-vitest-cypress/cypress/fixtures/example.json b/typescript-router-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-router-vitest-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/typescript-router-vitest-cypress/cypress/support/commands.ts b/typescript-router-vitest-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-router-vitest-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-router-vitest-cypress/cypress/support/e2e.ts b/typescript-router-vitest-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-router-vitest-cypress/cypress/support/e2e.ts @@ -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/typescript-router-vitest-cypress/env.d.ts b/typescript-router-vitest-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-router-vitest-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-router-vitest-cypress/index.html b/typescript-router-vitest-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-router-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-router-vitest-cypress/package.json b/typescript-router-vitest-cypress/package.json new file mode 100644 index 00000000..2e6a4b08 --- /dev/null +++ b/typescript-router-vitest-cypress/package.json @@ -0,0 +1,35 @@ +{ + "name": "typescript-router-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-router-vitest-cypress/public/favicon.ico b/typescript-router-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-router-vitest-cypress/src/App.vue b/typescript-router-vitest-cypress/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-router-vitest-cypress/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-router-vitest-cypress/src/assets/base.css b/typescript-router-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-router-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-router-vitest-cypress/src/assets/logo.svg b/typescript-router-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-router-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-router-vitest-cypress/src/components/HelloWorld.vue b/typescript-router-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-router-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-router-vitest-cypress/src/components/TheWelcome.vue b/typescript-router-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-router-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-router-vitest-cypress/src/components/WelcomeItem.vue b/typescript-router-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-router-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-router-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts b/typescript-router-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-router-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-router-vitest-cypress/src/components/icons/IconCommunity.vue b/typescript-router-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-router-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-vitest-cypress/src/components/icons/IconDocumentation.vue b/typescript-router-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-router-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-vitest-cypress/src/components/icons/IconEcosystem.vue b/typescript-router-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-router-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-vitest-cypress/src/components/icons/IconSupport.vue b/typescript-router-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-router-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-vitest-cypress/src/components/icons/IconTooling.vue b/typescript-router-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-router-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-router-vitest-cypress/src/main.ts b/typescript-router-vitest-cypress/src/main.ts new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/typescript-router-vitest-cypress/src/main.ts @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-router-vitest-cypress/src/router/index.ts b/typescript-router-vitest-cypress/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-router-vitest-cypress/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-router-vitest-cypress/src/views/AboutView.vue b/typescript-router-vitest-cypress/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-router-vitest-cypress/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-router-vitest-cypress/src/views/HomeView.vue b/typescript-router-vitest-cypress/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-router-vitest-cypress/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-router-vitest-cypress/tsconfig.app.json b/typescript-router-vitest-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-router-vitest-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-router-vitest-cypress/tsconfig.config.json b/typescript-router-vitest-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-router-vitest-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-router-vitest-cypress/tsconfig.json b/typescript-router-vitest-cypress/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-router-vitest-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-router-vitest-cypress/tsconfig.vitest.json b/typescript-router-vitest-cypress/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-router-vitest-cypress/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-router-vitest-cypress/vite.config.ts b/typescript-router-vitest-cypress/vite.config.ts new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/typescript-router-vitest-cypress/vite.config.ts @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-router-vitest/.gitignore b/typescript-router-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-router-vitest/.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/typescript-router-vitest/README.md b/typescript-router-vitest/README.md new file mode 100644 index 00000000..730ad8fc --- /dev/null +++ b/typescript-router-vitest/README.md @@ -0,0 +1,46 @@ +# typescript-router-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/typescript-router-vitest/env.d.ts b/typescript-router-vitest/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-router-vitest/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-router-vitest/index.html b/typescript-router-vitest/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-router-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-router-vitest/package.json b/typescript-router-vitest/package.json new file mode 100644 index 00000000..0f7b3e9e --- /dev/null +++ b/typescript-router-vitest/package.json @@ -0,0 +1,31 @@ +{ + "name": "typescript-router-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "vue": "^2.7.4", + "vue-router": "^3.5.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-router-vitest/public/favicon.ico b/typescript-router-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-router-vitest/src/App.vue b/typescript-router-vitest/src/App.vue new file mode 100644 index 00000000..1a9747c3 --- /dev/null +++ b/typescript-router-vitest/src/App.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/typescript-router-vitest/src/assets/base.css b/typescript-router-vitest/src/assets/base.css new file mode 100644 index 00000000..71dc55a3 --- /dev/null +++ b/typescript-router-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-router-vitest/src/assets/logo.svg b/typescript-router-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-router-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-router-vitest/src/components/HelloWorld.vue b/typescript-router-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..bf0a052f --- /dev/null +++ b/typescript-router-vitest/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-router-vitest/src/components/TheWelcome.vue b/typescript-router-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-router-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-router-vitest/src/components/WelcomeItem.vue b/typescript-router-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-router-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-router-vitest/src/components/__tests__/HelloWorld.spec.ts b/typescript-router-vitest/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-router-vitest/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-router-vitest/src/components/icons/IconCommunity.vue b/typescript-router-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-router-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-vitest/src/components/icons/IconDocumentation.vue b/typescript-router-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-router-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-vitest/src/components/icons/IconEcosystem.vue b/typescript-router-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-router-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-vitest/src/components/icons/IconSupport.vue b/typescript-router-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-router-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-router-vitest/src/components/icons/IconTooling.vue b/typescript-router-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-router-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-router-vitest/src/main.ts b/typescript-router-vitest/src/main.ts new file mode 100644 index 00000000..3129ea55 --- /dev/null +++ b/typescript-router-vitest/src/main.ts @@ -0,0 +1,9 @@ +import Vue from 'vue' + +import App from './App.vue' +import router from './router' + +new Vue({ + router, + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-router-vitest/src/router/index.ts b/typescript-router-vitest/src/router/index.ts new file mode 100644 index 00000000..cf9820b0 --- /dev/null +++ b/typescript-router-vitest/src/router/index.ts @@ -0,0 +1,27 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const router = new VueRouter({ + mode: 'history', + base: import.meta.env.BASE_URL, + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } + ] +}) + +export default router diff --git a/typescript-router-vitest/src/views/AboutView.vue b/typescript-router-vitest/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/typescript-router-vitest/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/typescript-router-vitest/src/views/HomeView.vue b/typescript-router-vitest/src/views/HomeView.vue new file mode 100644 index 00000000..6555a646 --- /dev/null +++ b/typescript-router-vitest/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/typescript-router-vitest/tsconfig.app.json b/typescript-router-vitest/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-router-vitest/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-router-vitest/tsconfig.config.json b/typescript-router-vitest/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-router-vitest/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-router-vitest/tsconfig.json b/typescript-router-vitest/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-router-vitest/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-router-vitest/tsconfig.vitest.json b/typescript-router-vitest/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-router-vitest/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-router-vitest/vite.config.ts b/typescript-router-vitest/vite.config.ts new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/typescript-router-vitest/vite.config.ts @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-router-with-tests/README.md b/typescript-router-with-tests/README.md index 486bd2d1..8465939b 100644 --- a/typescript-router-with-tests/README.md +++ b/typescript-router-with-tests/README.md @@ -1,16 +1,21 @@ # typescript-router-with-tests -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Type Support for `.vue` Imports in TS -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. ## Customize configuration @@ -34,10 +39,10 @@ pnpm dev pnpm build ``` -### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction) +### Run Unit Tests with [Vitest](https://vitest.dev/) ```sh -pnpm test:unit # or `pnpm test:unit:ci` for headless testing +pnpm test:unit ``` ### Run End-to-End Tests with [Cypress](https://www.cypress.io/) diff --git a/typescript-router-with-tests/cypress.config.ts b/typescript-router-with-tests/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-router-with-tests/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/' + } +}) diff --git a/typescript-router-with-tests/cypress.json b/typescript-router-with-tests/cypress.json deleted file mode 100644 index 3d372252..00000000 --- a/typescript-router-with-tests/cypress.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "baseUrl": "http://localhost:5050/", - "component": { - "componentFolder": "src", - "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" - } -} diff --git a/typescript-router-with-tests/cypress/e2e/example.cy.ts b/typescript-router-with-tests/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-router-with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-router-with-tests/cypress/e2e/tsconfig.json b/typescript-router-with-tests/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-router-with-tests/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-router-with-tests/cypress/plugins/index.ts b/typescript-router-with-tests/cypress/plugins/index.ts deleted file mode 100644 index ad2e351d..00000000 --- a/typescript-router-with-tests/cypress/plugins/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -/// -// *********************************************************** -// 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/typescript-router-with-tests/cypress/support/commands.ts b/typescript-router-with-tests/cypress/support/commands.ts index 119ab03f..95857aea 100644 --- a/typescript-router-with-tests/cypress/support/commands.ts +++ b/typescript-router-with-tests/cypress/support/commands.ts @@ -1,5 +1,6 @@ +/// // *********************************************** -// This example commands.js shows you how to +// This example commands.ts shows you how to // create various custom commands and overwrite // existing commands. // @@ -23,3 +24,14 @@ // // -- 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-router-with-tests/cypress/support/e2e.ts b/typescript-router-with-tests/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-router-with-tests/cypress/support/e2e.ts @@ -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/typescript-router-with-tests/cypress/tsconfig.json b/typescript-router-with-tests/cypress/tsconfig.json deleted file mode 100644 index b5b2f972..00000000 --- a/typescript-router-with-tests/cypress/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["es5", "dom"], - "types": ["cypress"] - }, - "include": ["./**/*"] -} diff --git a/typescript-router-with-tests/package.json b/typescript-router-with-tests/package.json index a2e1d4f7..66eac501 100644 --- a/typescript-router-with-tests/package.json +++ b/typescript-router-with-tests/package.json @@ -3,29 +3,33 @@ "version": "0.0.0", "scripts": { "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "test:unit": "cypress open-ct", - "test:unit:ci": "cypress run-ct --quiet --reporter spec", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'", - "typecheck": "vue-tsc --noEmit" + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "vue": "^2.7.0-0", - "vue-router": "^3.5.3" + "vue": "^2.7.4", + "vue-router": "^3.5.4" }, "devDependencies": { - "@cypress/vite-dev-server": "^2.2.2", - "@cypress/vue": "^2.2.4", - "@types/node": "^16.11.25", - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "cypress": "^9.5.0", + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", - "typescript": "~4.7.3", - "vite": "^2.8.4", - "vue-template-compiler": "^2.7.0-0", - "vue-tsc": "^0.38.2" + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" } } diff --git a/typescript-router-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-router-with-tests/src/components/__tests__/HelloWorld.spec.ts index d6fb360b..293bf197 100644 --- a/typescript-router-with-tests/src/components/__tests__/HelloWorld.spec.ts +++ b/typescript-router-with-tests/src/components/__tests__/HelloWorld.spec.ts @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/typescript-router-with-tests/tsconfig.app.json b/typescript-router-with-tests/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-router-with-tests/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-router-with-tests/tsconfig.config.json b/typescript-router-with-tests/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-router-with-tests/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-router-with-tests/tsconfig.json b/typescript-router-with-tests/tsconfig.json index 764a0528..31f90037 100644 --- a/typescript-router-with-tests/tsconfig.json +++ b/typescript-router-with-tests/tsconfig.json @@ -1,24 +1,14 @@ { - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, - "paths": { - "@/*": ["src/*"] + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true - }, - "vueCompilerOptions": { - "target": 2.7 - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] } diff --git a/typescript-router-with-tests/tsconfig.vitest.json b/typescript-router-with-tests/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-router-with-tests/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-router/README.md b/typescript-router/README.md index c2b4a865..3fd6ad11 100644 --- a/typescript-router/README.md +++ b/typescript-router/README.md @@ -1,16 +1,21 @@ # typescript-router -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Type Support for `.vue` Imports in TS -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. ## Customize configuration diff --git a/typescript-router/package.json b/typescript-router/package.json index dd14a5d7..d0d8d372 100644 --- a/typescript-router/package.json +++ b/typescript-router/package.json @@ -3,20 +3,23 @@ "version": "0.0.0", "scripts": { "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "typecheck": "vue-tsc --noEmit" + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" }, "dependencies": { - "vue": "^2.7.0-0", - "vue-router": "^3.5.3" + "vue": "^2.7.4", + "vue-router": "^3.5.4" }, "devDependencies": { - "@types/node": "^16.11.25", - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "typescript": "~4.7.3", - "vite": "^2.8.4", - "vue-tsc": "^0.38.2" + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/tsconfig": "^0.1.3", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" } } diff --git a/typescript-router/tsconfig.config.json b/typescript-router/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-router/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-router/tsconfig.json b/typescript-router/tsconfig.json index 764a0528..8d235999 100644 --- a/typescript-router/tsconfig.json +++ b/typescript-router/tsconfig.json @@ -1,24 +1,16 @@ { + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, + "baseUrl": ".", "paths": { - "@/*": ["src/*"] - }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true + "@/*": ["./src/*"] + } }, - "vueCompilerOptions": { - "target": 2.7 - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] + + "references": [ + { + "path": "./tsconfig.config.json" + } + ] } diff --git a/typescript-vitest-cypress/.gitignore b/typescript-vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-vitest-cypress/.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/typescript-vitest-cypress/README.md b/typescript-vitest-cypress/README.md new file mode 100644 index 00000000..8422efd5 --- /dev/null +++ b/typescript-vitest-cypress/README.md @@ -0,0 +1,53 @@ +# typescript-vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/typescript-vitest-cypress/cypress.config.ts b/typescript-vitest-cypress/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-vitest-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/' + } +}) diff --git a/typescript-vitest-cypress/cypress/e2e/example.cy.ts b/typescript-vitest-cypress/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-vitest-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-vitest-cypress/cypress/e2e/tsconfig.json b/typescript-vitest-cypress/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-vitest-cypress/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-vitest-cypress/cypress/fixtures/example.json b/typescript-vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/typescript-vitest-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/typescript-vitest-cypress/cypress/support/commands.ts b/typescript-vitest-cypress/cypress/support/commands.ts new file mode 100644 index 00000000..95857aea --- /dev/null +++ b/typescript-vitest-cypress/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-vitest-cypress/cypress/support/e2e.ts b/typescript-vitest-cypress/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-vitest-cypress/cypress/support/e2e.ts @@ -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/typescript-vitest-cypress/env.d.ts b/typescript-vitest-cypress/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-vitest-cypress/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-vitest-cypress/index.html b/typescript-vitest-cypress/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-vitest-cypress/package.json b/typescript-vitest-cypress/package.json new file mode 100644 index 00000000..715bf3c0 --- /dev/null +++ b/typescript-vitest-cypress/package.json @@ -0,0 +1,34 @@ +{ + "name": "typescript-vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "start-server-and-test": "^1.14.0", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-vitest-cypress/public/favicon.ico b/typescript-vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-vitest-cypress/src/App.vue b/typescript-vitest-cypress/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-vitest-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-vitest-cypress/src/assets/base.css b/typescript-vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-vitest-cypress/src/assets/logo.svg b/typescript-vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-vitest-cypress/src/components/HelloWorld.vue b/typescript-vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-vitest-cypress/src/components/TheWelcome.vue b/typescript-vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-vitest-cypress/src/components/WelcomeItem.vue b/typescript-vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts b/typescript-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-vitest-cypress/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-vitest-cypress/src/components/icons/IconCommunity.vue b/typescript-vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-vitest-cypress/src/components/icons/IconDocumentation.vue b/typescript-vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-vitest-cypress/src/components/icons/IconEcosystem.vue b/typescript-vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-vitest-cypress/src/components/icons/IconSupport.vue b/typescript-vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-vitest-cypress/src/components/icons/IconTooling.vue b/typescript-vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-vitest-cypress/src/main.ts b/typescript-vitest-cypress/src/main.ts new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/typescript-vitest-cypress/src/main.ts @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-vitest-cypress/tsconfig.app.json b/typescript-vitest-cypress/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-vitest-cypress/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-vitest-cypress/tsconfig.config.json b/typescript-vitest-cypress/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-vitest-cypress/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-vitest-cypress/tsconfig.json b/typescript-vitest-cypress/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-vitest-cypress/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-vitest-cypress/tsconfig.vitest.json b/typescript-vitest-cypress/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-vitest-cypress/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-vitest-cypress/vite.config.ts b/typescript-vitest-cypress/vite.config.ts new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/typescript-vitest-cypress/vite.config.ts @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-vitest/.gitignore b/typescript-vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/typescript-vitest/.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/typescript-vitest/README.md b/typescript-vitest/README.md new file mode 100644 index 00000000..1a8cd39b --- /dev/null +++ b/typescript-vitest/README.md @@ -0,0 +1,46 @@ +# typescript-vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/typescript-vitest/env.d.ts b/typescript-vitest/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/typescript-vitest/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/typescript-vitest/index.html b/typescript-vitest/index.html new file mode 100644 index 00000000..11603f87 --- /dev/null +++ b/typescript-vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/typescript-vitest/package.json b/typescript-vitest/package.json new file mode 100644 index 00000000..6858dc3f --- /dev/null +++ b/typescript-vitest/package.json @@ -0,0 +1,30 @@ +{ + "name": "typescript-vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" + } +} diff --git a/typescript-vitest/public/favicon.ico b/typescript-vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/typescript-vitest/src/App.vue b/typescript-vitest/src/App.vue new file mode 100644 index 00000000..794bc449 --- /dev/null +++ b/typescript-vitest/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/typescript-vitest/src/assets/base.css b/typescript-vitest/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/typescript-vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/typescript-vitest/src/assets/logo.svg b/typescript-vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/typescript-vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/typescript-vitest/src/components/HelloWorld.vue b/typescript-vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..624fb3e0 --- /dev/null +++ b/typescript-vitest/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/typescript-vitest/src/components/TheWelcome.vue b/typescript-vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..51d12392 --- /dev/null +++ b/typescript-vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-vitest/src/components/WelcomeItem.vue b/typescript-vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/typescript-vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/typescript-vitest/src/components/__tests__/HelloWorld.spec.ts b/typescript-vitest/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/typescript-vitest/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/typescript-vitest/src/components/icons/IconCommunity.vue b/typescript-vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/typescript-vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-vitest/src/components/icons/IconDocumentation.vue b/typescript-vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/typescript-vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-vitest/src/components/icons/IconEcosystem.vue b/typescript-vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/typescript-vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-vitest/src/components/icons/IconSupport.vue b/typescript-vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/typescript-vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/typescript-vitest/src/components/icons/IconTooling.vue b/typescript-vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/typescript-vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/typescript-vitest/src/main.ts b/typescript-vitest/src/main.ts new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/typescript-vitest/src/main.ts @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/typescript-vitest/tsconfig.app.json b/typescript-vitest/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-vitest/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-vitest/tsconfig.config.json b/typescript-vitest/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-vitest/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-vitest/tsconfig.json b/typescript-vitest/tsconfig.json new file mode 100644 index 00000000..31f90037 --- /dev/null +++ b/typescript-vitest/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/typescript-vitest/tsconfig.vitest.json b/typescript-vitest/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-vitest/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript-vitest/vite.config.ts b/typescript-vitest/vite.config.ts new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/typescript-vitest/vite.config.ts @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/typescript-with-tests/README.md b/typescript-with-tests/README.md index a8d2318d..a0b4603e 100644 --- a/typescript-with-tests/README.md +++ b/typescript-with-tests/README.md @@ -1,16 +1,21 @@ # typescript-with-tests -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Type Support for `.vue` Imports in TS -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. ## Customize configuration @@ -34,10 +39,10 @@ pnpm dev pnpm build ``` -### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction) +### Run Unit Tests with [Vitest](https://vitest.dev/) ```sh -pnpm test:unit # or `pnpm test:unit:ci` for headless testing +pnpm test:unit ``` ### Run End-to-End Tests with [Cypress](https://www.cypress.io/) diff --git a/typescript-with-tests/cypress.config.ts b/typescript-with-tests/cypress.config.ts new file mode 100644 index 00000000..0f66080f --- /dev/null +++ b/typescript-with-tests/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/' + } +}) diff --git a/typescript-with-tests/cypress.json b/typescript-with-tests/cypress.json deleted file mode 100644 index 3d372252..00000000 --- a/typescript-with-tests/cypress.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "baseUrl": "http://localhost:5050/", - "component": { - "componentFolder": "src", - "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" - } -} diff --git a/typescript-with-tests/cypress/e2e/example.cy.ts b/typescript-with-tests/cypress/e2e/example.cy.ts new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/typescript-with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/typescript-with-tests/cypress/e2e/tsconfig.json b/typescript-with-tests/cypress/e2e/tsconfig.json new file mode 100644 index 00000000..be213aef --- /dev/null +++ b/typescript-with-tests/cypress/e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["./**/*", "../support/**/*"], + "compilerOptions": { + "isolatedModules": false, + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + } +} diff --git a/typescript-with-tests/cypress/plugins/index.ts b/typescript-with-tests/cypress/plugins/index.ts deleted file mode 100644 index ad2e351d..00000000 --- a/typescript-with-tests/cypress/plugins/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -/// -// *********************************************************** -// 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/typescript-with-tests/cypress/support/commands.ts b/typescript-with-tests/cypress/support/commands.ts index 119ab03f..95857aea 100644 --- a/typescript-with-tests/cypress/support/commands.ts +++ b/typescript-with-tests/cypress/support/commands.ts @@ -1,5 +1,6 @@ +/// // *********************************************** -// This example commands.js shows you how to +// This example commands.ts shows you how to // create various custom commands and overwrite // existing commands. // @@ -23,3 +24,14 @@ // // -- 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } diff --git a/typescript-with-tests/cypress/support/e2e.ts b/typescript-with-tests/cypress/support/e2e.ts new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/typescript-with-tests/cypress/support/e2e.ts @@ -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/typescript-with-tests/cypress/tsconfig.json b/typescript-with-tests/cypress/tsconfig.json deleted file mode 100644 index b5b2f972..00000000 --- a/typescript-with-tests/cypress/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["es5", "dom"], - "types": ["cypress"] - }, - "include": ["./**/*"] -} diff --git a/typescript-with-tests/package.json b/typescript-with-tests/package.json index b511f425..24d82809 100644 --- a/typescript-with-tests/package.json +++ b/typescript-with-tests/package.json @@ -3,28 +3,32 @@ "version": "0.0.0", "scripts": { "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "test:unit": "cypress open-ct", - "test:unit:ci": "cypress run-ct --quiet --reporter spec", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'", - "typecheck": "vue-tsc --noEmit" + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "vue": "^2.7.0-0" + "vue": "^2.7.4" }, "devDependencies": { - "@cypress/vite-dev-server": "^2.2.2", - "@cypress/vue": "^2.2.4", - "@types/node": "^16.11.25", - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "cypress": "^9.5.0", + "@types/jsdom": "^16.2.14", + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "@vue/tsconfig": "^0.1.3", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", - "typescript": "~4.7.3", - "vite": "^2.8.4", - "vue-template-compiler": "^2.7.0-0", - "vue-tsc": "^0.38.2" + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4", + "vue-tsc": "^0.38.4" } } diff --git a/typescript-with-tests/src/components/__tests__/HelloWorld.spec.ts b/typescript-with-tests/src/components/__tests__/HelloWorld.spec.ts index d6fb360b..293bf197 100644 --- a/typescript-with-tests/src/components/__tests__/HelloWorld.spec.ts +++ b/typescript-with-tests/src/components/__tests__/HelloWorld.spec.ts @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) diff --git a/typescript-with-tests/tsconfig.app.json b/typescript-with-tests/tsconfig.app.json new file mode 100644 index 00000000..cdbea1d7 --- /dev/null +++ b/typescript-with-tests/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/typescript-with-tests/tsconfig.config.json b/typescript-with-tests/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript-with-tests/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript-with-tests/tsconfig.json b/typescript-with-tests/tsconfig.json index 764a0528..31f90037 100644 --- a/typescript-with-tests/tsconfig.json +++ b/typescript-with-tests/tsconfig.json @@ -1,24 +1,14 @@ { - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, - "paths": { - "@/*": ["src/*"] + "files": [], + "references": [ + { + "path": "./tsconfig.config.json" }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true - }, - "vueCompilerOptions": { - "target": 2.7 - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] } diff --git a/typescript-with-tests/tsconfig.vitest.json b/typescript-with-tests/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/typescript-with-tests/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/typescript/README.md b/typescript/README.md index 2745fb29..734ce2d1 100644 --- a/typescript/README.md +++ b/typescript/README.md @@ -1,16 +1,21 @@ # typescript -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Type Support for `.vue` Imports in TS -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. -However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. ## Customize configuration diff --git a/typescript/package.json b/typescript/package.json index 1fc0ef71..2b5a5fb0 100644 --- a/typescript/package.json +++ b/typescript/package.json @@ -3,19 +3,22 @@ "version": "0.0.0", "scripts": { "dev": "vite", - "build": "vue-tsc --noEmit && vite build", - "preview": "vite preview --port 5050", - "typecheck": "vue-tsc --noEmit" + "build": "run-p type-check build-only", + "preview": "vite preview --port 4173", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit" }, "dependencies": { - "vue": "^2.7.0-0" + "vue": "^2.7.4" }, "devDependencies": { - "@types/node": "^16.11.25", - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "typescript": "~4.7.3", - "vite": "^2.8.4", - "vue-tsc": "^0.38.2" + "@types/node": "^16.11.43", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/tsconfig": "^0.1.3", + "npm-run-all": "^4.1.5", + "typescript": "~4.7.4", + "vite": "^2.9.14", + "vue-tsc": "^0.38.4" } } diff --git a/typescript/tsconfig.config.json b/typescript/tsconfig.config.json new file mode 100644 index 00000000..c2d3a309 --- /dev/null +++ b/typescript/tsconfig.config.json @@ -0,0 +1,8 @@ +{ + "extends": "@vue/tsconfig/tsconfig.node.json", + "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], + "compilerOptions": { + "composite": true, + "types": ["node"] + } +} diff --git a/typescript/tsconfig.json b/typescript/tsconfig.json index 764a0528..8d235999 100644 --- a/typescript/tsconfig.json +++ b/typescript/tsconfig.json @@ -1,24 +1,16 @@ { + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "useDefineForClassFields": true, - "module": "esnext", - "moduleResolution": "node", - "isolatedModules": true, - "strict": true, - "jsx": "preserve", - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, + "baseUrl": ".", "paths": { - "@/*": ["src/*"] - }, - "lib": ["esnext", "dom", "dom.iterable", "scripthost"], - "skipLibCheck": true + "@/*": ["./src/*"] + } }, - "vueCompilerOptions": { - "target": 2.7 - }, - "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] + + "references": [ + { + "path": "./tsconfig.config.json" + } + ] } diff --git a/vitest-cypress/.gitignore b/vitest-cypress/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/vitest-cypress/.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/vitest-cypress/README.md b/vitest-cypress/README.md new file mode 100644 index 00000000..9c3381ee --- /dev/null +++ b/vitest-cypress/README.md @@ -0,0 +1,42 @@ +# vitest-cypress + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` + +### Run End-to-End Tests with [Cypress](https://www.cypress.io/) + +```sh +pnpm build +pnpm test:e2e # or `pnpm test:e2e:ci` for headless testing +``` diff --git a/vitest-cypress/cypress.config.js b/vitest-cypress/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/vitest-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/' + } +}) diff --git a/vitest-cypress/cypress/e2e/example.cy.js b/vitest-cypress/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/vitest-cypress/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/vitest-cypress/cypress/e2e/jsconfig.json b/vitest-cypress/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/vitest-cypress/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/vitest-cypress/cypress/fixtures/example.json b/vitest-cypress/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/vitest-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/vitest-cypress/cypress/support/commands.js b/vitest-cypress/cypress/support/commands.js new file mode 100644 index 00000000..119ab03f --- /dev/null +++ b/vitest-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/vitest-cypress/cypress/support/e2e.js b/vitest-cypress/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/vitest-cypress/cypress/support/e2e.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/vitest-cypress/index.html b/vitest-cypress/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/vitest-cypress/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/vitest-cypress/package.json b/vitest-cypress/package.json new file mode 100644 index 00000000..1cbd27a0 --- /dev/null +++ b/vitest-cypress/package.json @@ -0,0 +1,26 @@ +{ + "name": "vitest-cypress", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", + "start-server-and-test": "^1.14.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/vitest-cypress/public/favicon.ico b/vitest-cypress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/vitest-cypress/src/App.vue b/vitest-cypress/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/vitest-cypress/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/vitest-cypress/src/assets/base.css b/vitest-cypress/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/vitest-cypress/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/vitest-cypress/src/assets/logo.svg b/vitest-cypress/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/vitest-cypress/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/vitest-cypress/src/components/HelloWorld.vue b/vitest-cypress/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/vitest-cypress/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/vitest-cypress/src/components/TheWelcome.vue b/vitest-cypress/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/vitest-cypress/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/vitest-cypress/src/components/WelcomeItem.vue b/vitest-cypress/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/vitest-cypress/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/vitest-cypress/src/components/__tests__/HelloWorld.spec.js b/vitest-cypress/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/vitest-cypress/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/vitest-cypress/src/components/icons/IconCommunity.vue b/vitest-cypress/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/vitest-cypress/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/vitest-cypress/src/components/icons/IconDocumentation.vue b/vitest-cypress/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/vitest-cypress/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/vitest-cypress/src/components/icons/IconEcosystem.vue b/vitest-cypress/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/vitest-cypress/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/vitest-cypress/src/components/icons/IconSupport.vue b/vitest-cypress/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/vitest-cypress/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/vitest-cypress/src/components/icons/IconTooling.vue b/vitest-cypress/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/vitest-cypress/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/vitest-cypress/src/main.js b/vitest-cypress/src/main.js new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/vitest-cypress/src/main.js @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/vitest-cypress/vite.config.js b/vitest-cypress/vite.config.js new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/vitest-cypress/vite.config.js @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/vitest/.gitignore b/vitest/.gitignore new file mode 100644 index 00000000..133da84e --- /dev/null +++ b/vitest/.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/vitest/README.md b/vitest/README.md new file mode 100644 index 00000000..48871df5 --- /dev/null +++ b/vitest/README.md @@ -0,0 +1,35 @@ +# vitest + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +pnpm install +``` + +### Compile and Hot-Reload for Development + +```sh +pnpm dev +``` + +### Compile and Minify for Production + +```sh +pnpm build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +pnpm test:unit +``` diff --git a/vitest/index.html b/vitest/index.html new file mode 100644 index 00000000..030a6ff5 --- /dev/null +++ b/vitest/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/vitest/package.json b/vitest/package.json new file mode 100644 index 00000000..9124ccf3 --- /dev/null +++ b/vitest/package.json @@ -0,0 +1,22 @@ +{ + "name": "vitest", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom" + }, + "dependencies": { + "vue": "^2.7.4" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "jsdom": "^20.0.0", + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" + } +} diff --git a/vitest/public/favicon.ico b/vitest/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/vitest/src/App.vue b/vitest/src/App.vue new file mode 100644 index 00000000..099c613b --- /dev/null +++ b/vitest/src/App.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/vitest/src/assets/base.css b/vitest/src/assets/base.css new file mode 100644 index 00000000..5427a030 --- /dev/null +++ b/vitest/src/assets/base.css @@ -0,0 +1,74 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/vitest/src/assets/logo.svg b/vitest/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/vitest/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/vitest/src/components/HelloWorld.vue b/vitest/src/components/HelloWorld.vue new file mode 100644 index 00000000..de8b576a --- /dev/null +++ b/vitest/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/vitest/src/components/TheWelcome.vue b/vitest/src/components/TheWelcome.vue new file mode 100644 index 00000000..cccc38ef --- /dev/null +++ b/vitest/src/components/TheWelcome.vue @@ -0,0 +1,86 @@ + + + diff --git a/vitest/src/components/WelcomeItem.vue b/vitest/src/components/WelcomeItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/vitest/src/components/WelcomeItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/vitest/src/components/__tests__/HelloWorld.spec.js b/vitest/src/components/__tests__/HelloWorld.spec.js new file mode 100644 index 00000000..293bf197 --- /dev/null +++ b/vitest/src/components/__tests__/HelloWorld.spec.js @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/vitest/src/components/icons/IconCommunity.vue b/vitest/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/vitest/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/vitest/src/components/icons/IconDocumentation.vue b/vitest/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/vitest/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/vitest/src/components/icons/IconEcosystem.vue b/vitest/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/vitest/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/vitest/src/components/icons/IconSupport.vue b/vitest/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/vitest/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/vitest/src/components/icons/IconTooling.vue b/vitest/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..07dc46b0 --- /dev/null +++ b/vitest/src/components/icons/IconTooling.vue @@ -0,0 +1,17 @@ + + diff --git a/vitest/src/main.js b/vitest/src/main.js new file mode 100644 index 00000000..df4337c9 --- /dev/null +++ b/vitest/src/main.js @@ -0,0 +1,6 @@ +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/vitest/vite.config.js b/vitest/vite.config.js new file mode 100644 index 00000000..4e523433 --- /dev/null +++ b/vitest/vite.config.js @@ -0,0 +1,21 @@ +import { fileURLToPath } from 'url' + +import { defineConfig } from 'vite' +import legacy from '@vitejs/plugin-legacy' +import vue2 from '@vitejs/plugin-vue2' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue2(), + legacy({ + targets: ['ie >= 11'], + additionalLegacyPolyfills: ['regenerator-runtime/runtime'] + }) + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/with-tests/README.md b/with-tests/README.md index fa69ac2b..b6acbd80 100644 --- a/with-tests/README.md +++ b/with-tests/README.md @@ -1,10 +1,10 @@ # with-tests -This template should help get you started developing with Vue 2 in Vite. +This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Customize configuration @@ -28,10 +28,10 @@ pnpm dev pnpm build ``` -### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction) +### Run Unit Tests with [Vitest](https://vitest.dev/) ```sh -pnpm test:unit # or `pnpm test:unit:ci` for headless testing +pnpm test:unit ``` ### Run End-to-End Tests with [Cypress](https://www.cypress.io/) diff --git a/with-tests/cypress.config.js b/with-tests/cypress.config.js new file mode 100644 index 00000000..9cf6a199 --- /dev/null +++ b/with-tests/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/' + } +}) diff --git a/with-tests/cypress.json b/with-tests/cypress.json deleted file mode 100644 index 3d372252..00000000 --- a/with-tests/cypress.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "baseUrl": "http://localhost:5050/", - "component": { - "componentFolder": "src", - "testFiles": "**/__tests__/*.spec.{js,ts,jsx,tsx}" - } -} diff --git a/with-tests/cypress/e2e/example.cy.js b/with-tests/cypress/e2e/example.cy.js new file mode 100644 index 00000000..7a8c909f --- /dev/null +++ b/with-tests/cypress/e2e/example.cy.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', 'You did it!') + }) +}) diff --git a/with-tests/cypress/e2e/jsconfig.json b/with-tests/cypress/e2e/jsconfig.json new file mode 100644 index 00000000..c790a70d --- /dev/null +++ b/with-tests/cypress/e2e/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "types": ["cypress"] + }, + "include": ["./**/*", "../support/**/*"] +} diff --git a/with-tests/cypress/plugins/index.js b/with-tests/cypress/plugins/index.js deleted file mode 100644 index ad2e351d..00000000 --- a/with-tests/cypress/plugins/index.js +++ /dev/null @@ -1,28 +0,0 @@ -/// -// *********************************************************** -// 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/with-tests/cypress/support/e2e.js b/with-tests/cypress/support/e2e.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/with-tests/cypress/support/e2e.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/with-tests/package.json b/with-tests/package.json index 0ab766cb..2bbc033d 100644 --- a/with-tests/package.json +++ b/with-tests/package.json @@ -4,23 +4,23 @@ "scripts": { "dev": "vite", "build": "vite build", - "preview": "vite preview --port 5050", - "test:unit": "cypress open-ct", - "test:unit:ci": "cypress run-ct --quiet --reporter spec", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'" + "preview": "vite preview --port 4173", + "test:unit": "vitest --environment jsdom", + "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'" }, "dependencies": { - "vue": "^2.7.0-0" + "vue": "^2.7.4" }, "devDependencies": { - "@cypress/vite-dev-server": "^2.2.2", - "@cypress/vue": "^2.2.4", - "@vitejs/plugin-legacy": "^1.7.1", - "@vitejs/plugin-vue2": "^1.1.1", - "cypress": "^9.5.0", + "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-vue2": "^1.1.2", + "@vue/test-utils": "^1.3.0", + "cypress": "^10.3.0", + "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.8.4", - "vue-template-compiler": "^2.7.0-0" + "vite": "^2.9.14", + "vitest": "^0.18.0", + "vue-template-compiler": "^2.7.4" } } diff --git a/with-tests/src/components/__tests__/HelloWorld.spec.js b/with-tests/src/components/__tests__/HelloWorld.spec.js index d6fb360b..293bf197 100644 --- a/with-tests/src/components/__tests__/HelloWorld.spec.js +++ b/with-tests/src/components/__tests__/HelloWorld.spec.js @@ -1,13 +1,11 @@ -import { mount } from '@cypress/vue' +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' import HelloWorld from '../HelloWorld.vue' describe('HelloWorld', () => { - it('playground', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - }) - it('renders properly', () => { - mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } }) - cy.get('h1').should('contain', 'Hello Cypress') + const wrapper = mount(HelloWorld, { propsData: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') }) }) From 04d0c602cc6bda632fecc0cd1b7ea19da2e2691d Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Wed, 13 Jul 2022 14:19:46 +0800 Subject: [PATCH 13/15] version 2.1.1 snapshot --- cypress/cypress/support/component.js | 3 ++ cypress/src/App.vue | 44 ++---------------- cypress/src/assets/main.css | 35 ++++++++++++++ cypress/src/main.js | 2 + default/src/App.vue | 44 ++---------------- default/src/assets/main.css | 35 ++++++++++++++ default/src/main.js | 2 + jsx-cypress/cypress/support/component.js | 3 ++ jsx-cypress/src/App.vue | 44 ++---------------- jsx-cypress/src/assets/main.css | 35 ++++++++++++++ jsx-cypress/src/main.js | 2 + .../cypress/support/component.js | 3 ++ jsx-pinia-cypress/src/App.vue | 44 ++---------------- jsx-pinia-cypress/src/assets/main.css | 35 ++++++++++++++ jsx-pinia-cypress/src/main.js | 2 + jsx-pinia-vitest-cypress/src/App.vue | 44 ++---------------- jsx-pinia-vitest-cypress/src/assets/main.css | 35 ++++++++++++++ jsx-pinia-vitest-cypress/src/main.js | 2 + jsx-pinia-vitest/src/App.vue | 44 ++---------------- jsx-pinia-vitest/src/assets/main.css | 35 ++++++++++++++ jsx-pinia-vitest/src/main.js | 2 + jsx-pinia-with-tests/src/App.vue | 44 ++---------------- jsx-pinia-with-tests/src/assets/main.css | 35 ++++++++++++++ jsx-pinia-with-tests/src/main.js | 2 + jsx-pinia/src/App.vue | 44 ++---------------- jsx-pinia/src/assets/main.css | 35 ++++++++++++++ jsx-pinia/src/main.js | 2 + .../cypress/support/component.js | 3 ++ jsx-router-cypress/src/App.vue | 46 +++---------------- jsx-router-cypress/src/assets/base.css | 2 +- jsx-router-cypress/src/assets/main.css | 35 ++++++++++++++ jsx-router-cypress/src/main.js | 2 + .../cypress/support/component.js | 3 ++ jsx-router-pinia-cypress/src/App.vue | 46 +++---------------- jsx-router-pinia-cypress/src/assets/base.css | 2 +- jsx-router-pinia-cypress/src/assets/main.css | 35 ++++++++++++++ jsx-router-pinia-cypress/src/main.js | 2 + jsx-router-pinia-vitest-cypress/src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ jsx-router-pinia-vitest-cypress/src/main.js | 2 + jsx-router-pinia-vitest/src/App.vue | 46 +++---------------- jsx-router-pinia-vitest/src/assets/base.css | 2 +- jsx-router-pinia-vitest/src/assets/main.css | 35 ++++++++++++++ jsx-router-pinia-vitest/src/main.js | 2 + jsx-router-pinia-with-tests/src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ jsx-router-pinia-with-tests/src/main.js | 2 + jsx-router-pinia/src/App.vue | 46 +++---------------- jsx-router-pinia/src/assets/base.css | 2 +- jsx-router-pinia/src/assets/main.css | 35 ++++++++++++++ jsx-router-pinia/src/main.js | 2 + jsx-router-vitest-cypress/src/App.vue | 46 +++---------------- jsx-router-vitest-cypress/src/assets/base.css | 2 +- jsx-router-vitest-cypress/src/assets/main.css | 35 ++++++++++++++ jsx-router-vitest-cypress/src/main.js | 2 + jsx-router-vitest/src/App.vue | 46 +++---------------- jsx-router-vitest/src/assets/base.css | 2 +- jsx-router-vitest/src/assets/main.css | 35 ++++++++++++++ jsx-router-vitest/src/main.js | 2 + jsx-router-with-tests/src/App.vue | 46 +++---------------- jsx-router-with-tests/src/assets/base.css | 2 +- jsx-router-with-tests/src/assets/main.css | 35 ++++++++++++++ jsx-router-with-tests/src/main.js | 2 + jsx-router/src/App.vue | 46 +++---------------- jsx-router/src/assets/base.css | 2 +- jsx-router/src/assets/main.css | 35 ++++++++++++++ jsx-router/src/main.js | 2 + jsx-vitest-cypress/src/App.vue | 44 ++---------------- jsx-vitest-cypress/src/assets/main.css | 35 ++++++++++++++ jsx-vitest-cypress/src/main.js | 2 + jsx-vitest/src/App.vue | 44 ++---------------- jsx-vitest/src/assets/main.css | 35 ++++++++++++++ jsx-vitest/src/main.js | 2 + jsx-with-tests/src/App.vue | 44 ++---------------- jsx-with-tests/src/assets/main.css | 35 ++++++++++++++ jsx-with-tests/src/main.js | 2 + jsx/src/App.vue | 44 ++---------------- jsx/src/assets/main.css | 35 ++++++++++++++ jsx/src/main.js | 2 + pinia-cypress/cypress/support/component.js | 3 ++ pinia-cypress/src/App.vue | 44 ++---------------- pinia-cypress/src/assets/main.css | 35 ++++++++++++++ pinia-cypress/src/main.js | 2 + pinia-vitest-cypress/src/App.vue | 44 ++---------------- pinia-vitest-cypress/src/assets/main.css | 35 ++++++++++++++ pinia-vitest-cypress/src/main.js | 2 + pinia-vitest/src/App.vue | 44 ++---------------- pinia-vitest/src/assets/main.css | 35 ++++++++++++++ pinia-vitest/src/main.js | 2 + pinia-with-tests/src/App.vue | 44 ++---------------- pinia-with-tests/src/assets/main.css | 35 ++++++++++++++ pinia-with-tests/src/main.js | 2 + pinia/src/App.vue | 44 ++---------------- pinia/src/assets/main.css | 35 ++++++++++++++ pinia/src/main.js | 2 + router-cypress/cypress/support/component.js | 3 ++ router-cypress/src/App.vue | 46 +++---------------- router-cypress/src/assets/base.css | 2 +- router-cypress/src/assets/main.css | 35 ++++++++++++++ router-cypress/src/main.js | 2 + .../cypress/support/component.js | 3 ++ router-pinia-cypress/src/App.vue | 46 +++---------------- router-pinia-cypress/src/assets/base.css | 2 +- router-pinia-cypress/src/assets/main.css | 35 ++++++++++++++ router-pinia-cypress/src/main.js | 2 + router-pinia-vitest-cypress/src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ router-pinia-vitest-cypress/src/main.js | 2 + router-pinia-vitest/src/App.vue | 46 +++---------------- router-pinia-vitest/src/assets/base.css | 2 +- router-pinia-vitest/src/assets/main.css | 35 ++++++++++++++ router-pinia-vitest/src/main.js | 2 + router-pinia-with-tests/src/App.vue | 46 +++---------------- router-pinia-with-tests/src/assets/base.css | 2 +- router-pinia-with-tests/src/assets/main.css | 35 ++++++++++++++ router-pinia-with-tests/src/main.js | 2 + router-pinia/src/App.vue | 46 +++---------------- router-pinia/src/assets/base.css | 2 +- router-pinia/src/assets/main.css | 35 ++++++++++++++ router-pinia/src/main.js | 2 + router-vitest-cypress/src/App.vue | 46 +++---------------- router-vitest-cypress/src/assets/base.css | 2 +- router-vitest-cypress/src/assets/main.css | 35 ++++++++++++++ router-vitest-cypress/src/main.js | 2 + router-vitest/src/App.vue | 46 +++---------------- router-vitest/src/assets/base.css | 2 +- router-vitest/src/assets/main.css | 35 ++++++++++++++ router-vitest/src/main.js | 2 + router-with-tests/src/App.vue | 46 +++---------------- router-with-tests/src/assets/base.css | 2 +- router-with-tests/src/assets/main.css | 35 ++++++++++++++ router-with-tests/src/main.js | 2 + router/src/App.vue | 46 +++---------------- router/src/assets/base.css | 2 +- router/src/assets/main.css | 35 ++++++++++++++ router/src/main.js | 2 + .../cypress/support/component.ts | 3 ++ typescript-cypress/src/App.vue | 44 ++---------------- typescript-cypress/src/assets/main.css | 35 ++++++++++++++ typescript-cypress/src/main.ts | 2 + .../cypress/support/component.ts | 3 ++ typescript-jsx-cypress/src/App.vue | 44 ++---------------- typescript-jsx-cypress/src/assets/main.css | 35 ++++++++++++++ typescript-jsx-cypress/src/main.ts | 2 + .../cypress/support/component.ts | 3 ++ typescript-jsx-pinia-cypress/src/App.vue | 44 ++---------------- .../src/assets/main.css | 35 ++++++++++++++ typescript-jsx-pinia-cypress/src/main.ts | 2 + .../src/App.vue | 44 ++---------------- .../src/assets/main.css | 35 ++++++++++++++ .../src/main.ts | 2 + typescript-jsx-pinia-vitest/src/App.vue | 44 ++---------------- .../src/assets/main.css | 35 ++++++++++++++ typescript-jsx-pinia-vitest/src/main.ts | 2 + typescript-jsx-pinia-with-tests/src/App.vue | 44 ++---------------- .../src/assets/main.css | 35 ++++++++++++++ typescript-jsx-pinia-with-tests/src/main.ts | 2 + typescript-jsx-pinia/src/App.vue | 44 ++---------------- typescript-jsx-pinia/src/assets/main.css | 35 ++++++++++++++ typescript-jsx-pinia/src/main.ts | 2 + .../cypress/support/component.ts | 3 ++ typescript-jsx-router-cypress/src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ typescript-jsx-router-cypress/src/main.ts | 2 + .../cypress/support/component.ts | 3 ++ .../src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ .../src/main.ts | 2 + .../src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ .../src/main.ts | 2 + .../src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ .../src/main.ts | 2 + .../src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ .../src/main.ts | 2 + typescript-jsx-router-pinia/src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ typescript-jsx-router-pinia/src/main.ts | 2 + .../src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ .../src/main.ts | 2 + typescript-jsx-router-vitest/src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ typescript-jsx-router-vitest/src/main.ts | 2 + typescript-jsx-router-with-tests/src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ typescript-jsx-router-with-tests/src/main.ts | 2 + typescript-jsx-router/src/App.vue | 46 +++---------------- typescript-jsx-router/src/assets/base.css | 2 +- typescript-jsx-router/src/assets/main.css | 35 ++++++++++++++ typescript-jsx-router/src/main.ts | 2 + typescript-jsx-vitest-cypress/src/App.vue | 44 ++---------------- .../src/assets/main.css | 35 ++++++++++++++ typescript-jsx-vitest-cypress/src/main.ts | 2 + typescript-jsx-vitest/src/App.vue | 44 ++---------------- typescript-jsx-vitest/src/assets/main.css | 35 ++++++++++++++ typescript-jsx-vitest/src/main.ts | 2 + typescript-jsx-with-tests/src/App.vue | 44 ++---------------- typescript-jsx-with-tests/src/assets/main.css | 35 ++++++++++++++ typescript-jsx-with-tests/src/main.ts | 2 + typescript-jsx/src/App.vue | 44 ++---------------- typescript-jsx/src/assets/main.css | 35 ++++++++++++++ typescript-jsx/src/main.ts | 2 + .../cypress/support/component.ts | 3 ++ typescript-pinia-cypress/src/App.vue | 44 ++---------------- typescript-pinia-cypress/src/assets/main.css | 35 ++++++++++++++ typescript-pinia-cypress/src/main.ts | 2 + typescript-pinia-vitest-cypress/src/App.vue | 44 ++---------------- .../src/assets/main.css | 35 ++++++++++++++ typescript-pinia-vitest-cypress/src/main.ts | 2 + typescript-pinia-vitest/src/App.vue | 44 ++---------------- typescript-pinia-vitest/src/assets/main.css | 35 ++++++++++++++ typescript-pinia-vitest/src/main.ts | 2 + typescript-pinia-with-tests/src/App.vue | 44 ++---------------- .../src/assets/main.css | 35 ++++++++++++++ typescript-pinia-with-tests/src/main.ts | 2 + typescript-pinia/src/App.vue | 44 ++---------------- typescript-pinia/src/assets/main.css | 35 ++++++++++++++ typescript-pinia/src/main.ts | 2 + .../cypress/support/component.ts | 3 ++ typescript-router-cypress/src/App.vue | 46 +++---------------- typescript-router-cypress/src/assets/base.css | 2 +- typescript-router-cypress/src/assets/main.css | 35 ++++++++++++++ typescript-router-cypress/src/main.ts | 2 + .../cypress/support/component.ts | 3 ++ typescript-router-pinia-cypress/src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ typescript-router-pinia-cypress/src/main.ts | 2 + .../src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ .../src/main.ts | 2 + typescript-router-pinia-vitest/src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ typescript-router-pinia-vitest/src/main.ts | 2 + .../src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ .../src/main.ts | 2 + typescript-router-pinia/src/App.vue | 46 +++---------------- typescript-router-pinia/src/assets/base.css | 2 +- typescript-router-pinia/src/assets/main.css | 35 ++++++++++++++ typescript-router-pinia/src/main.ts | 2 + typescript-router-vitest-cypress/src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ typescript-router-vitest-cypress/src/main.ts | 2 + typescript-router-vitest/src/App.vue | 46 +++---------------- typescript-router-vitest/src/assets/base.css | 2 +- typescript-router-vitest/src/assets/main.css | 35 ++++++++++++++ typescript-router-vitest/src/main.ts | 2 + typescript-router-with-tests/src/App.vue | 46 +++---------------- .../src/assets/base.css | 2 +- .../src/assets/main.css | 35 ++++++++++++++ typescript-router-with-tests/src/main.ts | 2 + typescript-router/src/App.vue | 46 +++---------------- typescript-router/src/assets/base.css | 2 +- typescript-router/src/assets/main.css | 35 ++++++++++++++ typescript-router/src/main.ts | 2 + typescript-vitest-cypress/src/App.vue | 44 ++---------------- typescript-vitest-cypress/src/assets/main.css | 35 ++++++++++++++ typescript-vitest-cypress/src/main.ts | 2 + typescript-vitest/src/App.vue | 44 ++---------------- typescript-vitest/src/assets/main.css | 35 ++++++++++++++ typescript-vitest/src/main.ts | 2 + typescript-with-tests/src/App.vue | 44 ++---------------- typescript-with-tests/src/assets/main.css | 35 ++++++++++++++ typescript-with-tests/src/main.ts | 2 + typescript/src/App.vue | 44 ++---------------- typescript/src/assets/main.css | 35 ++++++++++++++ typescript/src/main.ts | 2 + vitest-cypress/src/App.vue | 44 ++---------------- vitest-cypress/src/assets/main.css | 35 ++++++++++++++ vitest-cypress/src/main.js | 2 + vitest/src/App.vue | 44 ++---------------- vitest/src/assets/main.css | 35 ++++++++++++++ vitest/src/main.js | 2 + with-tests/src/App.vue | 44 ++---------------- with-tests/src/assets/main.css | 35 ++++++++++++++ with-tests/src/main.js | 2 + 296 files changed, 3488 insertions(+), 3200 deletions(-) create mode 100644 cypress/src/assets/main.css create mode 100644 default/src/assets/main.css create mode 100644 jsx-cypress/src/assets/main.css create mode 100644 jsx-pinia-cypress/src/assets/main.css create mode 100644 jsx-pinia-vitest-cypress/src/assets/main.css create mode 100644 jsx-pinia-vitest/src/assets/main.css create mode 100644 jsx-pinia-with-tests/src/assets/main.css create mode 100644 jsx-pinia/src/assets/main.css create mode 100644 jsx-router-cypress/src/assets/main.css create mode 100644 jsx-router-pinia-cypress/src/assets/main.css create mode 100644 jsx-router-pinia-vitest-cypress/src/assets/main.css create mode 100644 jsx-router-pinia-vitest/src/assets/main.css create mode 100644 jsx-router-pinia-with-tests/src/assets/main.css create mode 100644 jsx-router-pinia/src/assets/main.css create mode 100644 jsx-router-vitest-cypress/src/assets/main.css create mode 100644 jsx-router-vitest/src/assets/main.css create mode 100644 jsx-router-with-tests/src/assets/main.css create mode 100644 jsx-router/src/assets/main.css create mode 100644 jsx-vitest-cypress/src/assets/main.css create mode 100644 jsx-vitest/src/assets/main.css create mode 100644 jsx-with-tests/src/assets/main.css create mode 100644 jsx/src/assets/main.css create mode 100644 pinia-cypress/src/assets/main.css create mode 100644 pinia-vitest-cypress/src/assets/main.css create mode 100644 pinia-vitest/src/assets/main.css create mode 100644 pinia-with-tests/src/assets/main.css create mode 100644 pinia/src/assets/main.css create mode 100644 router-cypress/src/assets/main.css create mode 100644 router-pinia-cypress/src/assets/main.css create mode 100644 router-pinia-vitest-cypress/src/assets/main.css create mode 100644 router-pinia-vitest/src/assets/main.css create mode 100644 router-pinia-with-tests/src/assets/main.css create mode 100644 router-pinia/src/assets/main.css create mode 100644 router-vitest-cypress/src/assets/main.css create mode 100644 router-vitest/src/assets/main.css create mode 100644 router-with-tests/src/assets/main.css create mode 100644 router/src/assets/main.css create mode 100644 typescript-cypress/src/assets/main.css create mode 100644 typescript-jsx-cypress/src/assets/main.css create mode 100644 typescript-jsx-pinia-cypress/src/assets/main.css create mode 100644 typescript-jsx-pinia-vitest-cypress/src/assets/main.css create mode 100644 typescript-jsx-pinia-vitest/src/assets/main.css create mode 100644 typescript-jsx-pinia-with-tests/src/assets/main.css create mode 100644 typescript-jsx-pinia/src/assets/main.css create mode 100644 typescript-jsx-router-cypress/src/assets/main.css create mode 100644 typescript-jsx-router-pinia-cypress/src/assets/main.css create mode 100644 typescript-jsx-router-pinia-vitest-cypress/src/assets/main.css create mode 100644 typescript-jsx-router-pinia-vitest/src/assets/main.css create mode 100644 typescript-jsx-router-pinia-with-tests/src/assets/main.css create mode 100644 typescript-jsx-router-pinia/src/assets/main.css create mode 100644 typescript-jsx-router-vitest-cypress/src/assets/main.css create mode 100644 typescript-jsx-router-vitest/src/assets/main.css create mode 100644 typescript-jsx-router-with-tests/src/assets/main.css create mode 100644 typescript-jsx-router/src/assets/main.css create mode 100644 typescript-jsx-vitest-cypress/src/assets/main.css create mode 100644 typescript-jsx-vitest/src/assets/main.css create mode 100644 typescript-jsx-with-tests/src/assets/main.css create mode 100644 typescript-jsx/src/assets/main.css create mode 100644 typescript-pinia-cypress/src/assets/main.css create mode 100644 typescript-pinia-vitest-cypress/src/assets/main.css create mode 100644 typescript-pinia-vitest/src/assets/main.css create mode 100644 typescript-pinia-with-tests/src/assets/main.css create mode 100644 typescript-pinia/src/assets/main.css create mode 100644 typescript-router-cypress/src/assets/main.css create mode 100644 typescript-router-pinia-cypress/src/assets/main.css create mode 100644 typescript-router-pinia-vitest-cypress/src/assets/main.css create mode 100644 typescript-router-pinia-vitest/src/assets/main.css create mode 100644 typescript-router-pinia-with-tests/src/assets/main.css create mode 100644 typescript-router-pinia/src/assets/main.css create mode 100644 typescript-router-vitest-cypress/src/assets/main.css create mode 100644 typescript-router-vitest/src/assets/main.css create mode 100644 typescript-router-with-tests/src/assets/main.css create mode 100644 typescript-router/src/assets/main.css create mode 100644 typescript-vitest-cypress/src/assets/main.css create mode 100644 typescript-vitest/src/assets/main.css create mode 100644 typescript-with-tests/src/assets/main.css create mode 100644 typescript/src/assets/main.css create mode 100644 vitest-cypress/src/assets/main.css create mode 100644 vitest/src/assets/main.css create mode 100644 with-tests/src/assets/main.css diff --git a/cypress/cypress/support/component.js b/cypress/cypress/support/component.js index 3d1a3d22..9b98cf0e 100644 --- a/cypress/cypress/support/component.js +++ b/cypress/cypress/support/component.js @@ -19,6 +19,9 @@ import './commands' // Alternatively you can use CommonJS syntax: // require('./commands') +// Import global styles +import '@/assets/main.css' + import { mount } from 'cypress/vue2' Cypress.Commands.add('mount', mount) diff --git a/cypress/src/App.vue b/cypress/src/App.vue index 099c613b..45fbfd94 100644 --- a/cypress/src/App.vue +++ b/cypress/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/cypress/src/assets/main.css b/cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/cypress/src/main.js b/cypress/src/main.js index df4337c9..c5da47dc 100644 --- a/cypress/src/main.js +++ b/cypress/src/main.js @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/default/src/App.vue b/default/src/App.vue index 099c613b..45fbfd94 100644 --- a/default/src/App.vue +++ b/default/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/default/src/assets/main.css b/default/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/default/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/default/src/main.js b/default/src/main.js index df4337c9..c5da47dc 100644 --- a/default/src/main.js +++ b/default/src/main.js @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/jsx-cypress/cypress/support/component.js b/jsx-cypress/cypress/support/component.js index 3d1a3d22..9b98cf0e 100644 --- a/jsx-cypress/cypress/support/component.js +++ b/jsx-cypress/cypress/support/component.js @@ -19,6 +19,9 @@ import './commands' // Alternatively you can use CommonJS syntax: // require('./commands') +// Import global styles +import '@/assets/main.css' + import { mount } from 'cypress/vue2' Cypress.Commands.add('mount', mount) diff --git a/jsx-cypress/src/App.vue b/jsx-cypress/src/App.vue index 099c613b..45fbfd94 100644 --- a/jsx-cypress/src/App.vue +++ b/jsx-cypress/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/jsx-cypress/src/assets/main.css b/jsx-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/jsx-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/jsx-cypress/src/main.js b/jsx-cypress/src/main.js index df4337c9..c5da47dc 100644 --- a/jsx-cypress/src/main.js +++ b/jsx-cypress/src/main.js @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/jsx-pinia-cypress/cypress/support/component.js b/jsx-pinia-cypress/cypress/support/component.js index 3d1a3d22..9b98cf0e 100644 --- a/jsx-pinia-cypress/cypress/support/component.js +++ b/jsx-pinia-cypress/cypress/support/component.js @@ -19,6 +19,9 @@ import './commands' // Alternatively you can use CommonJS syntax: // require('./commands') +// Import global styles +import '@/assets/main.css' + import { mount } from 'cypress/vue2' Cypress.Commands.add('mount', mount) diff --git a/jsx-pinia-cypress/src/App.vue b/jsx-pinia-cypress/src/App.vue index 099c613b..45fbfd94 100644 --- a/jsx-pinia-cypress/src/App.vue +++ b/jsx-pinia-cypress/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/jsx-pinia-cypress/src/assets/main.css b/jsx-pinia-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/jsx-pinia-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/jsx-pinia-cypress/src/main.js b/jsx-pinia-cypress/src/main.js index 3b85a2ca..febe0dbe 100644 --- a/jsx-pinia-cypress/src/main.js +++ b/jsx-pinia-cypress/src/main.js @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/jsx-pinia-vitest-cypress/src/App.vue b/jsx-pinia-vitest-cypress/src/App.vue index 099c613b..45fbfd94 100644 --- a/jsx-pinia-vitest-cypress/src/App.vue +++ b/jsx-pinia-vitest-cypress/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/jsx-pinia-vitest-cypress/src/assets/main.css b/jsx-pinia-vitest-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/jsx-pinia-vitest-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/jsx-pinia-vitest-cypress/src/main.js b/jsx-pinia-vitest-cypress/src/main.js index 3b85a2ca..febe0dbe 100644 --- a/jsx-pinia-vitest-cypress/src/main.js +++ b/jsx-pinia-vitest-cypress/src/main.js @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/jsx-pinia-vitest/src/App.vue b/jsx-pinia-vitest/src/App.vue index 099c613b..45fbfd94 100644 --- a/jsx-pinia-vitest/src/App.vue +++ b/jsx-pinia-vitest/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/jsx-pinia-vitest/src/assets/main.css b/jsx-pinia-vitest/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/jsx-pinia-vitest/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/jsx-pinia-vitest/src/main.js b/jsx-pinia-vitest/src/main.js index 3b85a2ca..febe0dbe 100644 --- a/jsx-pinia-vitest/src/main.js +++ b/jsx-pinia-vitest/src/main.js @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/jsx-pinia-with-tests/src/App.vue b/jsx-pinia-with-tests/src/App.vue index 099c613b..45fbfd94 100644 --- a/jsx-pinia-with-tests/src/App.vue +++ b/jsx-pinia-with-tests/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/jsx-pinia-with-tests/src/assets/main.css b/jsx-pinia-with-tests/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/jsx-pinia-with-tests/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/jsx-pinia-with-tests/src/main.js b/jsx-pinia-with-tests/src/main.js index 3b85a2ca..febe0dbe 100644 --- a/jsx-pinia-with-tests/src/main.js +++ b/jsx-pinia-with-tests/src/main.js @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/jsx-pinia/src/App.vue b/jsx-pinia/src/App.vue index 099c613b..45fbfd94 100644 --- a/jsx-pinia/src/App.vue +++ b/jsx-pinia/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/jsx-pinia/src/assets/main.css b/jsx-pinia/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/jsx-pinia/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/jsx-pinia/src/main.js b/jsx-pinia/src/main.js index 3b85a2ca..febe0dbe 100644 --- a/jsx-pinia/src/main.js +++ b/jsx-pinia/src/main.js @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/jsx-router-cypress/cypress/support/component.js b/jsx-router-cypress/cypress/support/component.js index 3d1a3d22..9b98cf0e 100644 --- a/jsx-router-cypress/cypress/support/component.js +++ b/jsx-router-cypress/cypress/support/component.js @@ -19,6 +19,9 @@ import './commands' // Alternatively you can use CommonJS syntax: // require('./commands') +// Import global styles +import '@/assets/main.css' + import { mount } from 'cypress/vue2' Cypress.Commands.add('mount', mount) diff --git a/jsx-router-cypress/src/App.vue b/jsx-router-cypress/src/App.vue index eac0e1bb..1f84c747 100644 --- a/jsx-router-cypress/src/App.vue +++ b/jsx-router-cypress/src/App.vue @@ -1,5 +1,5 @@ - diff --git a/jsx-vitest-cypress/src/assets/main.css b/jsx-vitest-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/jsx-vitest-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/jsx-vitest-cypress/src/main.js b/jsx-vitest-cypress/src/main.js index df4337c9..c5da47dc 100644 --- a/jsx-vitest-cypress/src/main.js +++ b/jsx-vitest-cypress/src/main.js @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/jsx-vitest/src/App.vue b/jsx-vitest/src/App.vue index 099c613b..45fbfd94 100644 --- a/jsx-vitest/src/App.vue +++ b/jsx-vitest/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/jsx-vitest/src/assets/main.css b/jsx-vitest/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/jsx-vitest/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/jsx-vitest/src/main.js b/jsx-vitest/src/main.js index df4337c9..c5da47dc 100644 --- a/jsx-vitest/src/main.js +++ b/jsx-vitest/src/main.js @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/jsx-with-tests/src/App.vue b/jsx-with-tests/src/App.vue index 099c613b..45fbfd94 100644 --- a/jsx-with-tests/src/App.vue +++ b/jsx-with-tests/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/jsx-with-tests/src/assets/main.css b/jsx-with-tests/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/jsx-with-tests/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/jsx-with-tests/src/main.js b/jsx-with-tests/src/main.js index df4337c9..c5da47dc 100644 --- a/jsx-with-tests/src/main.js +++ b/jsx-with-tests/src/main.js @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/jsx/src/App.vue b/jsx/src/App.vue index 099c613b..45fbfd94 100644 --- a/jsx/src/App.vue +++ b/jsx/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/jsx/src/assets/main.css b/jsx/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/jsx/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/jsx/src/main.js b/jsx/src/main.js index df4337c9..c5da47dc 100644 --- a/jsx/src/main.js +++ b/jsx/src/main.js @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/pinia-cypress/cypress/support/component.js b/pinia-cypress/cypress/support/component.js index 3d1a3d22..9b98cf0e 100644 --- a/pinia-cypress/cypress/support/component.js +++ b/pinia-cypress/cypress/support/component.js @@ -19,6 +19,9 @@ import './commands' // Alternatively you can use CommonJS syntax: // require('./commands') +// Import global styles +import '@/assets/main.css' + import { mount } from 'cypress/vue2' Cypress.Commands.add('mount', mount) diff --git a/pinia-cypress/src/App.vue b/pinia-cypress/src/App.vue index 099c613b..45fbfd94 100644 --- a/pinia-cypress/src/App.vue +++ b/pinia-cypress/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/pinia-cypress/src/assets/main.css b/pinia-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/pinia-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/pinia-cypress/src/main.js b/pinia-cypress/src/main.js index 3b85a2ca..febe0dbe 100644 --- a/pinia-cypress/src/main.js +++ b/pinia-cypress/src/main.js @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/pinia-vitest-cypress/src/App.vue b/pinia-vitest-cypress/src/App.vue index 099c613b..45fbfd94 100644 --- a/pinia-vitest-cypress/src/App.vue +++ b/pinia-vitest-cypress/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/pinia-vitest-cypress/src/assets/main.css b/pinia-vitest-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/pinia-vitest-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/pinia-vitest-cypress/src/main.js b/pinia-vitest-cypress/src/main.js index 3b85a2ca..febe0dbe 100644 --- a/pinia-vitest-cypress/src/main.js +++ b/pinia-vitest-cypress/src/main.js @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/pinia-vitest/src/App.vue b/pinia-vitest/src/App.vue index 099c613b..45fbfd94 100644 --- a/pinia-vitest/src/App.vue +++ b/pinia-vitest/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/pinia-vitest/src/assets/main.css b/pinia-vitest/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/pinia-vitest/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/pinia-vitest/src/main.js b/pinia-vitest/src/main.js index 3b85a2ca..febe0dbe 100644 --- a/pinia-vitest/src/main.js +++ b/pinia-vitest/src/main.js @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/pinia-with-tests/src/App.vue b/pinia-with-tests/src/App.vue index 099c613b..45fbfd94 100644 --- a/pinia-with-tests/src/App.vue +++ b/pinia-with-tests/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/pinia-with-tests/src/assets/main.css b/pinia-with-tests/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/pinia-with-tests/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/pinia-with-tests/src/main.js b/pinia-with-tests/src/main.js index 3b85a2ca..febe0dbe 100644 --- a/pinia-with-tests/src/main.js +++ b/pinia-with-tests/src/main.js @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/pinia/src/App.vue b/pinia/src/App.vue index 099c613b..45fbfd94 100644 --- a/pinia/src/App.vue +++ b/pinia/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/pinia/src/assets/main.css b/pinia/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/pinia/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/pinia/src/main.js b/pinia/src/main.js index 3b85a2ca..febe0dbe 100644 --- a/pinia/src/main.js +++ b/pinia/src/main.js @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/router-cypress/cypress/support/component.js b/router-cypress/cypress/support/component.js index 3d1a3d22..9b98cf0e 100644 --- a/router-cypress/cypress/support/component.js +++ b/router-cypress/cypress/support/component.js @@ -19,6 +19,9 @@ import './commands' // Alternatively you can use CommonJS syntax: // require('./commands') +// Import global styles +import '@/assets/main.css' + import { mount } from 'cypress/vue2' Cypress.Commands.add('mount', mount) diff --git a/router-cypress/src/App.vue b/router-cypress/src/App.vue index eac0e1bb..1f84c747 100644 --- a/router-cypress/src/App.vue +++ b/router-cypress/src/App.vue @@ -1,5 +1,5 @@ - diff --git a/typescript-cypress/src/assets/main.css b/typescript-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-cypress/src/main.ts b/typescript-cypress/src/main.ts index df4337c9..c5da47dc 100644 --- a/typescript-cypress/src/main.ts +++ b/typescript-cypress/src/main.ts @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/typescript-jsx-cypress/cypress/support/component.ts b/typescript-jsx-cypress/cypress/support/component.ts index c56a294a..f3d667e0 100644 --- a/typescript-jsx-cypress/cypress/support/component.ts +++ b/typescript-jsx-cypress/cypress/support/component.ts @@ -19,6 +19,9 @@ import './commands' // Alternatively you can use CommonJS syntax: // require('./commands') +// Import global styles +import '@/assets/main.css' + import { mount } from 'cypress/vue2' // Augment the Cypress namespace to include type definitions for diff --git a/typescript-jsx-cypress/src/App.vue b/typescript-jsx-cypress/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-jsx-cypress/src/App.vue +++ b/typescript-jsx-cypress/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-jsx-cypress/src/assets/main.css b/typescript-jsx-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-jsx-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-jsx-cypress/src/main.ts b/typescript-jsx-cypress/src/main.ts index df4337c9..c5da47dc 100644 --- a/typescript-jsx-cypress/src/main.ts +++ b/typescript-jsx-cypress/src/main.ts @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/typescript-jsx-pinia-cypress/cypress/support/component.ts b/typescript-jsx-pinia-cypress/cypress/support/component.ts index c56a294a..f3d667e0 100644 --- a/typescript-jsx-pinia-cypress/cypress/support/component.ts +++ b/typescript-jsx-pinia-cypress/cypress/support/component.ts @@ -19,6 +19,9 @@ import './commands' // Alternatively you can use CommonJS syntax: // require('./commands') +// Import global styles +import '@/assets/main.css' + import { mount } from 'cypress/vue2' // Augment the Cypress namespace to include type definitions for diff --git a/typescript-jsx-pinia-cypress/src/App.vue b/typescript-jsx-pinia-cypress/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-jsx-pinia-cypress/src/App.vue +++ b/typescript-jsx-pinia-cypress/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-jsx-pinia-cypress/src/assets/main.css b/typescript-jsx-pinia-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-jsx-pinia-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-jsx-pinia-cypress/src/main.ts b/typescript-jsx-pinia-cypress/src/main.ts index 3b85a2ca..febe0dbe 100644 --- a/typescript-jsx-pinia-cypress/src/main.ts +++ b/typescript-jsx-pinia-cypress/src/main.ts @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/typescript-jsx-pinia-vitest-cypress/src/App.vue b/typescript-jsx-pinia-vitest-cypress/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-jsx-pinia-vitest-cypress/src/App.vue +++ b/typescript-jsx-pinia-vitest-cypress/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-jsx-pinia-vitest-cypress/src/assets/main.css b/typescript-jsx-pinia-vitest-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-jsx-pinia-vitest-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-jsx-pinia-vitest-cypress/src/main.ts b/typescript-jsx-pinia-vitest-cypress/src/main.ts index 3b85a2ca..febe0dbe 100644 --- a/typescript-jsx-pinia-vitest-cypress/src/main.ts +++ b/typescript-jsx-pinia-vitest-cypress/src/main.ts @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/typescript-jsx-pinia-vitest/src/App.vue b/typescript-jsx-pinia-vitest/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-jsx-pinia-vitest/src/App.vue +++ b/typescript-jsx-pinia-vitest/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-jsx-pinia-vitest/src/assets/main.css b/typescript-jsx-pinia-vitest/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-jsx-pinia-vitest/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-jsx-pinia-vitest/src/main.ts b/typescript-jsx-pinia-vitest/src/main.ts index 3b85a2ca..febe0dbe 100644 --- a/typescript-jsx-pinia-vitest/src/main.ts +++ b/typescript-jsx-pinia-vitest/src/main.ts @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/typescript-jsx-pinia-with-tests/src/App.vue b/typescript-jsx-pinia-with-tests/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-jsx-pinia-with-tests/src/App.vue +++ b/typescript-jsx-pinia-with-tests/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-jsx-pinia-with-tests/src/assets/main.css b/typescript-jsx-pinia-with-tests/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-jsx-pinia-with-tests/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-jsx-pinia-with-tests/src/main.ts b/typescript-jsx-pinia-with-tests/src/main.ts index 3b85a2ca..febe0dbe 100644 --- a/typescript-jsx-pinia-with-tests/src/main.ts +++ b/typescript-jsx-pinia-with-tests/src/main.ts @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/typescript-jsx-pinia/src/App.vue b/typescript-jsx-pinia/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-jsx-pinia/src/App.vue +++ b/typescript-jsx-pinia/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-jsx-pinia/src/assets/main.css b/typescript-jsx-pinia/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-jsx-pinia/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-jsx-pinia/src/main.ts b/typescript-jsx-pinia/src/main.ts index 3b85a2ca..febe0dbe 100644 --- a/typescript-jsx-pinia/src/main.ts +++ b/typescript-jsx-pinia/src/main.ts @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/typescript-jsx-router-cypress/cypress/support/component.ts b/typescript-jsx-router-cypress/cypress/support/component.ts index c56a294a..f3d667e0 100644 --- a/typescript-jsx-router-cypress/cypress/support/component.ts +++ b/typescript-jsx-router-cypress/cypress/support/component.ts @@ -19,6 +19,9 @@ import './commands' // Alternatively you can use CommonJS syntax: // require('./commands') +// Import global styles +import '@/assets/main.css' + import { mount } from 'cypress/vue2' // Augment the Cypress namespace to include type definitions for diff --git a/typescript-jsx-router-cypress/src/App.vue b/typescript-jsx-router-cypress/src/App.vue index 1a9747c3..2745f550 100644 --- a/typescript-jsx-router-cypress/src/App.vue +++ b/typescript-jsx-router-cypress/src/App.vue @@ -1,5 +1,5 @@ - diff --git a/typescript-jsx-vitest-cypress/src/assets/main.css b/typescript-jsx-vitest-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-jsx-vitest-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-jsx-vitest-cypress/src/main.ts b/typescript-jsx-vitest-cypress/src/main.ts index df4337c9..c5da47dc 100644 --- a/typescript-jsx-vitest-cypress/src/main.ts +++ b/typescript-jsx-vitest-cypress/src/main.ts @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/typescript-jsx-vitest/src/App.vue b/typescript-jsx-vitest/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-jsx-vitest/src/App.vue +++ b/typescript-jsx-vitest/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-jsx-vitest/src/assets/main.css b/typescript-jsx-vitest/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-jsx-vitest/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-jsx-vitest/src/main.ts b/typescript-jsx-vitest/src/main.ts index df4337c9..c5da47dc 100644 --- a/typescript-jsx-vitest/src/main.ts +++ b/typescript-jsx-vitest/src/main.ts @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/typescript-jsx-with-tests/src/App.vue b/typescript-jsx-with-tests/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-jsx-with-tests/src/App.vue +++ b/typescript-jsx-with-tests/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-jsx-with-tests/src/assets/main.css b/typescript-jsx-with-tests/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-jsx-with-tests/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-jsx-with-tests/src/main.ts b/typescript-jsx-with-tests/src/main.ts index df4337c9..c5da47dc 100644 --- a/typescript-jsx-with-tests/src/main.ts +++ b/typescript-jsx-with-tests/src/main.ts @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/typescript-jsx/src/App.vue b/typescript-jsx/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-jsx/src/App.vue +++ b/typescript-jsx/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-jsx/src/assets/main.css b/typescript-jsx/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-jsx/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-jsx/src/main.ts b/typescript-jsx/src/main.ts index df4337c9..c5da47dc 100644 --- a/typescript-jsx/src/main.ts +++ b/typescript-jsx/src/main.ts @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/typescript-pinia-cypress/cypress/support/component.ts b/typescript-pinia-cypress/cypress/support/component.ts index c56a294a..f3d667e0 100644 --- a/typescript-pinia-cypress/cypress/support/component.ts +++ b/typescript-pinia-cypress/cypress/support/component.ts @@ -19,6 +19,9 @@ import './commands' // Alternatively you can use CommonJS syntax: // require('./commands') +// Import global styles +import '@/assets/main.css' + import { mount } from 'cypress/vue2' // Augment the Cypress namespace to include type definitions for diff --git a/typescript-pinia-cypress/src/App.vue b/typescript-pinia-cypress/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-pinia-cypress/src/App.vue +++ b/typescript-pinia-cypress/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-pinia-cypress/src/assets/main.css b/typescript-pinia-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-pinia-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-pinia-cypress/src/main.ts b/typescript-pinia-cypress/src/main.ts index 3b85a2ca..febe0dbe 100644 --- a/typescript-pinia-cypress/src/main.ts +++ b/typescript-pinia-cypress/src/main.ts @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/typescript-pinia-vitest-cypress/src/App.vue b/typescript-pinia-vitest-cypress/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-pinia-vitest-cypress/src/App.vue +++ b/typescript-pinia-vitest-cypress/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-pinia-vitest-cypress/src/assets/main.css b/typescript-pinia-vitest-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-pinia-vitest-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-pinia-vitest-cypress/src/main.ts b/typescript-pinia-vitest-cypress/src/main.ts index 3b85a2ca..febe0dbe 100644 --- a/typescript-pinia-vitest-cypress/src/main.ts +++ b/typescript-pinia-vitest-cypress/src/main.ts @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/typescript-pinia-vitest/src/App.vue b/typescript-pinia-vitest/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-pinia-vitest/src/App.vue +++ b/typescript-pinia-vitest/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-pinia-vitest/src/assets/main.css b/typescript-pinia-vitest/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-pinia-vitest/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-pinia-vitest/src/main.ts b/typescript-pinia-vitest/src/main.ts index 3b85a2ca..febe0dbe 100644 --- a/typescript-pinia-vitest/src/main.ts +++ b/typescript-pinia-vitest/src/main.ts @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/typescript-pinia-with-tests/src/App.vue b/typescript-pinia-with-tests/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-pinia-with-tests/src/App.vue +++ b/typescript-pinia-with-tests/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-pinia-with-tests/src/assets/main.css b/typescript-pinia-with-tests/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-pinia-with-tests/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-pinia-with-tests/src/main.ts b/typescript-pinia-with-tests/src/main.ts index 3b85a2ca..febe0dbe 100644 --- a/typescript-pinia-with-tests/src/main.ts +++ b/typescript-pinia-with-tests/src/main.ts @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/typescript-pinia/src/App.vue b/typescript-pinia/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-pinia/src/App.vue +++ b/typescript-pinia/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-pinia/src/assets/main.css b/typescript-pinia/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-pinia/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-pinia/src/main.ts b/typescript-pinia/src/main.ts index 3b85a2ca..febe0dbe 100644 --- a/typescript-pinia/src/main.ts +++ b/typescript-pinia/src/main.ts @@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import App from './App.vue' +import './assets/main.css' + Vue.use(PiniaVuePlugin) new Vue({ diff --git a/typescript-router-cypress/cypress/support/component.ts b/typescript-router-cypress/cypress/support/component.ts index c56a294a..f3d667e0 100644 --- a/typescript-router-cypress/cypress/support/component.ts +++ b/typescript-router-cypress/cypress/support/component.ts @@ -19,6 +19,9 @@ import './commands' // Alternatively you can use CommonJS syntax: // require('./commands') +// Import global styles +import '@/assets/main.css' + import { mount } from 'cypress/vue2' // Augment the Cypress namespace to include type definitions for diff --git a/typescript-router-cypress/src/App.vue b/typescript-router-cypress/src/App.vue index 1a9747c3..2745f550 100644 --- a/typescript-router-cypress/src/App.vue +++ b/typescript-router-cypress/src/App.vue @@ -1,5 +1,5 @@ - diff --git a/typescript-vitest-cypress/src/assets/main.css b/typescript-vitest-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-vitest-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-vitest-cypress/src/main.ts b/typescript-vitest-cypress/src/main.ts index df4337c9..c5da47dc 100644 --- a/typescript-vitest-cypress/src/main.ts +++ b/typescript-vitest-cypress/src/main.ts @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/typescript-vitest/src/App.vue b/typescript-vitest/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-vitest/src/App.vue +++ b/typescript-vitest/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-vitest/src/assets/main.css b/typescript-vitest/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-vitest/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-vitest/src/main.ts b/typescript-vitest/src/main.ts index df4337c9..c5da47dc 100644 --- a/typescript-vitest/src/main.ts +++ b/typescript-vitest/src/main.ts @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/typescript-with-tests/src/App.vue b/typescript-with-tests/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript-with-tests/src/App.vue +++ b/typescript-with-tests/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript-with-tests/src/assets/main.css b/typescript-with-tests/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript-with-tests/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript-with-tests/src/main.ts b/typescript-with-tests/src/main.ts index df4337c9..c5da47dc 100644 --- a/typescript-with-tests/src/main.ts +++ b/typescript-with-tests/src/main.ts @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/typescript/src/App.vue b/typescript/src/App.vue index 794bc449..70c911b5 100644 --- a/typescript/src/App.vue +++ b/typescript/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/typescript/src/assets/main.css b/typescript/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/typescript/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/typescript/src/main.ts b/typescript/src/main.ts index df4337c9..c5da47dc 100644 --- a/typescript/src/main.ts +++ b/typescript/src/main.ts @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/vitest-cypress/src/App.vue b/vitest-cypress/src/App.vue index 099c613b..45fbfd94 100644 --- a/vitest-cypress/src/App.vue +++ b/vitest-cypress/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/vitest-cypress/src/assets/main.css b/vitest-cypress/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/vitest-cypress/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/vitest-cypress/src/main.js b/vitest-cypress/src/main.js index df4337c9..c5da47dc 100644 --- a/vitest-cypress/src/main.js +++ b/vitest-cypress/src/main.js @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/vitest/src/App.vue b/vitest/src/App.vue index 099c613b..45fbfd94 100644 --- a/vitest/src/App.vue +++ b/vitest/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/vitest/src/assets/main.css b/vitest/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/vitest/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/vitest/src/main.js b/vitest/src/main.js index df4337c9..c5da47dc 100644 --- a/vitest/src/main.js +++ b/vitest/src/main.js @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') diff --git a/with-tests/src/App.vue b/with-tests/src/App.vue index 099c613b..45fbfd94 100644 --- a/with-tests/src/App.vue +++ b/with-tests/src/App.vue @@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue' - diff --git a/with-tests/src/assets/main.css b/with-tests/src/assets/main.css new file mode 100644 index 00000000..c133f915 --- /dev/null +++ b/with-tests/src/assets/main.css @@ -0,0 +1,35 @@ +@import "https://github.com/base.css"; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/with-tests/src/main.js b/with-tests/src/main.js index df4337c9..c5da47dc 100644 --- a/with-tests/src/main.js +++ b/with-tests/src/main.js @@ -1,6 +1,8 @@ import Vue from 'vue' import App from './App.vue' +import './assets/main.css' + new Vue({ render: (h) => h(App) }).$mount('#app') From 0bbf78fbba1ce2f01319dc8a25a6f50c025140f1 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Tue, 19 Jul 2022 16:53:37 +0800 Subject: [PATCH 14/15] version 2.2.0 snapshot --- cypress/package.json | 11 +++++---- cypress/vite.config.js | 2 +- default/package.json | 7 +++--- default/vite.config.js | 2 +- jsx-cypress/package.json | 13 ++++++----- jsx-cypress/vite.config.js | 2 +- jsx-pinia-cypress/package.json | 15 ++++++------ jsx-pinia-cypress/vite.config.js | 2 +- jsx-pinia-vitest-cypress/package.json | 19 +++++++-------- jsx-pinia-vitest-cypress/vite.config.js | 2 +- jsx-pinia-vitest/package.json | 15 ++++++------ jsx-pinia-vitest/vite.config.js | 2 +- jsx-pinia-with-tests/package.json | 19 +++++++-------- jsx-pinia-with-tests/vite.config.js | 2 +- jsx-pinia/package.json | 11 +++++---- jsx-pinia/vite.config.js | 2 +- jsx-router-cypress/package.json | 13 ++++++----- jsx-router-cypress/vite.config.js | 2 +- jsx-router-pinia-cypress/package.json | 15 ++++++------ jsx-router-pinia-cypress/vite.config.js | 2 +- jsx-router-pinia-vitest-cypress/package.json | 19 +++++++-------- .../vite.config.js | 2 +- jsx-router-pinia-vitest/package.json | 15 ++++++------ jsx-router-pinia-vitest/vite.config.js | 2 +- jsx-router-pinia-with-tests/package.json | 19 +++++++-------- jsx-router-pinia-with-tests/vite.config.js | 2 +- jsx-router-pinia/package.json | 11 +++++---- jsx-router-pinia/vite.config.js | 2 +- jsx-router-vitest-cypress/package.json | 17 +++++++------- jsx-router-vitest-cypress/vite.config.js | 2 +- jsx-router-vitest/package.json | 13 ++++++----- jsx-router-vitest/vite.config.js | 2 +- jsx-router-with-tests/package.json | 17 +++++++------- jsx-router-with-tests/vite.config.js | 2 +- jsx-router/package.json | 9 ++++---- jsx-router/vite.config.js | 2 +- jsx-vitest-cypress/package.json | 17 +++++++------- jsx-vitest-cypress/vite.config.js | 2 +- jsx-vitest/package.json | 13 ++++++----- jsx-vitest/vite.config.js | 2 +- jsx-with-tests/package.json | 17 +++++++------- jsx-with-tests/vite.config.js | 2 +- jsx/package.json | 9 ++++---- jsx/vite.config.js | 2 +- pinia-cypress/package.json | 13 ++++++----- pinia-cypress/vite.config.js | 2 +- pinia-vitest-cypress/package.json | 17 +++++++------- pinia-vitest-cypress/vite.config.js | 2 +- pinia-vitest/package.json | 13 ++++++----- pinia-vitest/vite.config.js | 2 +- pinia-with-tests/package.json | 17 +++++++------- pinia-with-tests/vite.config.js | 2 +- pinia/package.json | 9 ++++---- pinia/vite.config.js | 2 +- router-cypress/package.json | 11 +++++---- router-cypress/vite.config.js | 2 +- router-pinia-cypress/package.json | 13 ++++++----- router-pinia-cypress/vite.config.js | 2 +- router-pinia-vitest-cypress/package.json | 17 +++++++------- router-pinia-vitest-cypress/vite.config.js | 2 +- router-pinia-vitest/package.json | 13 ++++++----- router-pinia-vitest/vite.config.js | 2 +- router-pinia-with-tests/package.json | 17 +++++++------- router-pinia-with-tests/vite.config.js | 2 +- router-pinia/package.json | 9 ++++---- router-pinia/vite.config.js | 2 +- router-vitest-cypress/package.json | 15 ++++++------ router-vitest-cypress/vite.config.js | 2 +- router-vitest/package.json | 11 +++++---- router-vitest/vite.config.js | 2 +- router-with-tests/package.json | 15 ++++++------ router-with-tests/vite.config.js | 2 +- router/package.json | 7 +++--- router/vite.config.js | 2 +- typescript-cypress/package.json | 15 ++++++------ typescript-cypress/vite.config.ts | 2 +- typescript-jsx-cypress/package.json | 17 +++++++------- typescript-jsx-cypress/vite.config.ts | 2 +- typescript-jsx-pinia-cypress/package.json | 19 +++++++-------- typescript-jsx-pinia-cypress/vite.config.ts | 2 +- .../package.json | 23 ++++++++++--------- .../vite.config.ts | 2 +- typescript-jsx-pinia-vitest/package.json | 19 +++++++-------- typescript-jsx-pinia-vitest/vite.config.ts | 2 +- typescript-jsx-pinia-with-tests/package.json | 23 ++++++++++--------- .../vite.config.ts | 2 +- typescript-jsx-pinia/package.json | 15 ++++++------ typescript-jsx-pinia/vite.config.ts | 2 +- typescript-jsx-router-cypress/package.json | 17 +++++++------- typescript-jsx-router-cypress/vite.config.ts | 2 +- .../package.json | 19 +++++++-------- .../vite.config.ts | 2 +- .../package.json | 23 ++++++++++--------- .../vite.config.ts | 2 +- .../package.json | 19 +++++++-------- .../vite.config.ts | 2 +- .../package.json | 23 ++++++++++--------- .../vite.config.ts | 2 +- typescript-jsx-router-pinia/package.json | 15 ++++++------ typescript-jsx-router-pinia/vite.config.ts | 2 +- .../package.json | 21 +++++++++-------- .../vite.config.ts | 2 +- typescript-jsx-router-vitest/package.json | 17 +++++++------- typescript-jsx-router-vitest/vite.config.ts | 2 +- typescript-jsx-router-with-tests/package.json | 21 +++++++++-------- .../vite.config.ts | 2 +- typescript-jsx-router/package.json | 13 ++++++----- typescript-jsx-router/vite.config.ts | 2 +- typescript-jsx-vitest-cypress/package.json | 21 +++++++++-------- typescript-jsx-vitest-cypress/vite.config.ts | 2 +- typescript-jsx-vitest/package.json | 17 +++++++------- typescript-jsx-vitest/vite.config.ts | 2 +- typescript-jsx-with-tests/package.json | 21 +++++++++-------- typescript-jsx-with-tests/vite.config.ts | 2 +- typescript-jsx/package.json | 13 ++++++----- typescript-jsx/vite.config.ts | 2 +- typescript-pinia-cypress/package.json | 17 +++++++------- typescript-pinia-cypress/vite.config.ts | 2 +- typescript-pinia-vitest-cypress/package.json | 21 +++++++++-------- .../vite.config.ts | 2 +- typescript-pinia-vitest/package.json | 17 +++++++------- typescript-pinia-vitest/vite.config.ts | 2 +- typescript-pinia-with-tests/package.json | 21 +++++++++-------- typescript-pinia-with-tests/vite.config.ts | 2 +- typescript-pinia/package.json | 13 ++++++----- typescript-pinia/vite.config.ts | 2 +- typescript-router-cypress/package.json | 15 ++++++------ typescript-router-cypress/vite.config.ts | 2 +- typescript-router-pinia-cypress/package.json | 17 +++++++------- .../vite.config.ts | 2 +- .../package.json | 21 +++++++++-------- .../vite.config.ts | 2 +- typescript-router-pinia-vitest/package.json | 17 +++++++------- typescript-router-pinia-vitest/vite.config.ts | 2 +- .../package.json | 21 +++++++++-------- .../vite.config.ts | 2 +- typescript-router-pinia/package.json | 13 ++++++----- typescript-router-pinia/vite.config.ts | 2 +- typescript-router-vitest-cypress/package.json | 19 +++++++-------- .../vite.config.ts | 2 +- typescript-router-vitest/package.json | 15 ++++++------ typescript-router-vitest/vite.config.ts | 2 +- typescript-router-with-tests/package.json | 19 +++++++-------- typescript-router-with-tests/vite.config.ts | 2 +- typescript-router/package.json | 11 +++++---- typescript-router/vite.config.ts | 2 +- typescript-vitest-cypress/package.json | 19 +++++++-------- typescript-vitest-cypress/vite.config.ts | 2 +- typescript-vitest/package.json | 15 ++++++------ typescript-vitest/vite.config.ts | 2 +- typescript-with-tests/package.json | 19 +++++++-------- typescript-with-tests/vite.config.ts | 2 +- typescript/package.json | 11 +++++---- typescript/vite.config.ts | 2 +- vitest-cypress/package.json | 15 ++++++------ vitest-cypress/vite.config.js | 2 +- vitest/package.json | 11 +++++---- vitest/vite.config.js | 2 +- with-tests/package.json | 15 ++++++------ with-tests/vite.config.js | 2 +- 160 files changed, 752 insertions(+), 672 deletions(-) diff --git a/cypress/package.json b/cypress/package.json index 7988dbd0..38f610bd 100644 --- a/cypress/package.json +++ b/cypress/package.json @@ -5,19 +5,20 @@ "dev": "vite", "build": "vite build", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "cypress": "^10.3.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14" + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/cypress/vite.config.js b/cypress/vite.config.js index 4e523433..d4945079 100644 --- a/cypress/vite.config.js +++ b/cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/default/package.json b/default/package.json index fbd0a36f..2e6b920b 100644 --- a/default/package.json +++ b/default/package.json @@ -7,11 +7,12 @@ "preview": "vite preview --port 4173" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "vite": "^2.9.14" + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/default/vite.config.js b/default/vite.config.js index 4e523433..d4945079 100644 --- a/default/vite.config.js +++ b/default/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-cypress/package.json b/jsx-cypress/package.json index d63fdc7b..bd73fa80 100644 --- a/jsx-cypress/package.json +++ b/jsx-cypress/package.json @@ -5,20 +5,21 @@ "dev": "vite", "build": "vite build", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "cypress": "^10.3.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14" + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/jsx-cypress/vite.config.js b/jsx-cypress/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-cypress/vite.config.js +++ b/jsx-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-pinia-cypress/package.json b/jsx-pinia-cypress/package.json index 707e5213..e9df7843 100644 --- a/jsx-pinia-cypress/package.json +++ b/jsx-pinia-cypress/package.json @@ -5,21 +5,22 @@ "dev": "vite", "build": "vite build", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "cypress": "^10.3.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14" + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/jsx-pinia-cypress/vite.config.js b/jsx-pinia-cypress/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-pinia-cypress/vite.config.js +++ b/jsx-pinia-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-pinia-vitest-cypress/package.json b/jsx-pinia-vitest-cypress/package.json index 98884e20..56389abb 100644 --- a/jsx-pinia-vitest-cypress/package.json +++ b/jsx-pinia-vitest-cypress/package.json @@ -6,23 +6,24 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/jsx-pinia-vitest-cypress/vite.config.js b/jsx-pinia-vitest-cypress/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-pinia-vitest-cypress/vite.config.js +++ b/jsx-pinia-vitest-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-pinia-vitest/package.json b/jsx-pinia-vitest/package.json index 31787ad0..96c83956 100644 --- a/jsx-pinia-vitest/package.json +++ b/jsx-pinia-vitest/package.json @@ -8,17 +8,18 @@ "test:unit": "vitest --environment jsdom" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "jsdom": "^20.0.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/jsx-pinia-vitest/vite.config.js b/jsx-pinia-vitest/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-pinia-vitest/vite.config.js +++ b/jsx-pinia-vitest/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-pinia-with-tests/package.json b/jsx-pinia-with-tests/package.json index 4ee6ee7f..1cb9b724 100644 --- a/jsx-pinia-with-tests/package.json +++ b/jsx-pinia-with-tests/package.json @@ -6,23 +6,24 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/jsx-pinia-with-tests/vite.config.js b/jsx-pinia-with-tests/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-pinia-with-tests/vite.config.js +++ b/jsx-pinia-with-tests/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-pinia/package.json b/jsx-pinia/package.json index 3b75ce26..4c9d6627 100644 --- a/jsx-pinia/package.json +++ b/jsx-pinia/package.json @@ -7,13 +7,14 @@ "preview": "vite preview --port 4173" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", - "vite": "^2.9.14" + "@vitejs/plugin-vue2-jsx": "^1.0.2", + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/jsx-pinia/vite.config.js b/jsx-pinia/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-pinia/vite.config.js +++ b/jsx-pinia/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-router-cypress/package.json b/jsx-router-cypress/package.json index c1ffa7d9..dae1f8bc 100644 --- a/jsx-router-cypress/package.json +++ b/jsx-router-cypress/package.json @@ -5,21 +5,22 @@ "dev": "vite", "build": "vite build", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "cypress": "^10.3.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14" + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/jsx-router-cypress/vite.config.js b/jsx-router-cypress/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-router-cypress/vite.config.js +++ b/jsx-router-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-router-pinia-cypress/package.json b/jsx-router-pinia-cypress/package.json index 3420f79e..16ec2f6b 100644 --- a/jsx-router-pinia-cypress/package.json +++ b/jsx-router-pinia-cypress/package.json @@ -5,22 +5,23 @@ "dev": "vite", "build": "vite build", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "cypress": "^10.3.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14" + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/jsx-router-pinia-cypress/vite.config.js b/jsx-router-pinia-cypress/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-router-pinia-cypress/vite.config.js +++ b/jsx-router-pinia-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-router-pinia-vitest-cypress/package.json b/jsx-router-pinia-vitest-cypress/package.json index 7818ada8..d83369a4 100644 --- a/jsx-router-pinia-vitest-cypress/package.json +++ b/jsx-router-pinia-vitest-cypress/package.json @@ -6,24 +6,25 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/jsx-router-pinia-vitest-cypress/vite.config.js b/jsx-router-pinia-vitest-cypress/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-router-pinia-vitest-cypress/vite.config.js +++ b/jsx-router-pinia-vitest-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-router-pinia-vitest/package.json b/jsx-router-pinia-vitest/package.json index 8ac10431..0db653c9 100644 --- a/jsx-router-pinia-vitest/package.json +++ b/jsx-router-pinia-vitest/package.json @@ -8,18 +8,19 @@ "test:unit": "vitest --environment jsdom" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "jsdom": "^20.0.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/jsx-router-pinia-vitest/vite.config.js b/jsx-router-pinia-vitest/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-router-pinia-vitest/vite.config.js +++ b/jsx-router-pinia-vitest/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-router-pinia-with-tests/package.json b/jsx-router-pinia-with-tests/package.json index c596dacd..4e2553a4 100644 --- a/jsx-router-pinia-with-tests/package.json +++ b/jsx-router-pinia-with-tests/package.json @@ -6,24 +6,25 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/jsx-router-pinia-with-tests/vite.config.js b/jsx-router-pinia-with-tests/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-router-pinia-with-tests/vite.config.js +++ b/jsx-router-pinia-with-tests/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-router-pinia/package.json b/jsx-router-pinia/package.json index e94a01c6..b6b8b715 100644 --- a/jsx-router-pinia/package.json +++ b/jsx-router-pinia/package.json @@ -7,14 +7,15 @@ "preview": "vite preview --port 4173" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", - "vite": "^2.9.14" + "@vitejs/plugin-vue2-jsx": "^1.0.2", + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/jsx-router-pinia/vite.config.js b/jsx-router-pinia/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-router-pinia/vite.config.js +++ b/jsx-router-pinia/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-router-vitest-cypress/package.json b/jsx-router-vitest-cypress/package.json index 61c75abd..441a359b 100644 --- a/jsx-router-vitest-cypress/package.json +++ b/jsx-router-vitest-cypress/package.json @@ -6,23 +6,24 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/jsx-router-vitest-cypress/vite.config.js b/jsx-router-vitest-cypress/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-router-vitest-cypress/vite.config.js +++ b/jsx-router-vitest-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-router-vitest/package.json b/jsx-router-vitest/package.json index b003b73b..0f16c6a9 100644 --- a/jsx-router-vitest/package.json +++ b/jsx-router-vitest/package.json @@ -8,17 +8,18 @@ "test:unit": "vitest --environment jsdom" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "jsdom": "^20.0.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/jsx-router-vitest/vite.config.js b/jsx-router-vitest/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-router-vitest/vite.config.js +++ b/jsx-router-vitest/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-router-with-tests/package.json b/jsx-router-with-tests/package.json index bc45b261..5363ec89 100644 --- a/jsx-router-with-tests/package.json +++ b/jsx-router-with-tests/package.json @@ -6,23 +6,24 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/jsx-router-with-tests/vite.config.js b/jsx-router-with-tests/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-router-with-tests/vite.config.js +++ b/jsx-router-with-tests/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-router/package.json b/jsx-router/package.json index 358e9a7d..e3fedd78 100644 --- a/jsx-router/package.json +++ b/jsx-router/package.json @@ -7,13 +7,14 @@ "preview": "vite preview --port 4173" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", - "vite": "^2.9.14" + "@vitejs/plugin-vue2-jsx": "^1.0.2", + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/jsx-router/vite.config.js b/jsx-router/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-router/vite.config.js +++ b/jsx-router/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-vitest-cypress/package.json b/jsx-vitest-cypress/package.json index 4f48adef..8a1c7bd7 100644 --- a/jsx-vitest-cypress/package.json +++ b/jsx-vitest-cypress/package.json @@ -6,22 +6,23 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/jsx-vitest-cypress/vite.config.js b/jsx-vitest-cypress/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-vitest-cypress/vite.config.js +++ b/jsx-vitest-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-vitest/package.json b/jsx-vitest/package.json index 0fcf6b50..17d7bd2c 100644 --- a/jsx-vitest/package.json +++ b/jsx-vitest/package.json @@ -8,16 +8,17 @@ "test:unit": "vitest --environment jsdom" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "jsdom": "^20.0.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/jsx-vitest/vite.config.js b/jsx-vitest/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-vitest/vite.config.js +++ b/jsx-vitest/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx-with-tests/package.json b/jsx-with-tests/package.json index 5f12fe6f..ae5686bb 100644 --- a/jsx-with-tests/package.json +++ b/jsx-with-tests/package.json @@ -6,22 +6,23 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/jsx-with-tests/vite.config.js b/jsx-with-tests/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx-with-tests/vite.config.js +++ b/jsx-with-tests/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/jsx/package.json b/jsx/package.json index 9a7be6c1..b499bc91 100644 --- a/jsx/package.json +++ b/jsx/package.json @@ -7,12 +7,13 @@ "preview": "vite preview --port 4173" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", - "vite": "^2.9.14" + "@vitejs/plugin-vue2-jsx": "^1.0.2", + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/jsx/vite.config.js b/jsx/vite.config.js index 7cbd617e..54d7440f 100644 --- a/jsx/vite.config.js +++ b/jsx/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/pinia-cypress/package.json b/pinia-cypress/package.json index ae477053..065b53a6 100644 --- a/pinia-cypress/package.json +++ b/pinia-cypress/package.json @@ -5,20 +5,21 @@ "dev": "vite", "build": "vite build", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "cypress": "^10.3.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14" + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/pinia-cypress/vite.config.js b/pinia-cypress/vite.config.js index 4e523433..d4945079 100644 --- a/pinia-cypress/vite.config.js +++ b/pinia-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/pinia-vitest-cypress/package.json b/pinia-vitest-cypress/package.json index 6dcfe861..f58dc341 100644 --- a/pinia-vitest-cypress/package.json +++ b/pinia-vitest-cypress/package.json @@ -6,22 +6,23 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/pinia-vitest-cypress/vite.config.js b/pinia-vitest-cypress/vite.config.js index 4e523433..d4945079 100644 --- a/pinia-vitest-cypress/vite.config.js +++ b/pinia-vitest-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/pinia-vitest/package.json b/pinia-vitest/package.json index 2cc7d742..ad4aa4ab 100644 --- a/pinia-vitest/package.json +++ b/pinia-vitest/package.json @@ -8,16 +8,17 @@ "test:unit": "vitest --environment jsdom" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "jsdom": "^20.0.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/pinia-vitest/vite.config.js b/pinia-vitest/vite.config.js index 4e523433..d4945079 100644 --- a/pinia-vitest/vite.config.js +++ b/pinia-vitest/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/pinia-with-tests/package.json b/pinia-with-tests/package.json index ea8f441f..05d12a30 100644 --- a/pinia-with-tests/package.json +++ b/pinia-with-tests/package.json @@ -6,22 +6,23 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/pinia-with-tests/vite.config.js b/pinia-with-tests/vite.config.js index 4e523433..d4945079 100644 --- a/pinia-with-tests/vite.config.js +++ b/pinia-with-tests/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/pinia/package.json b/pinia/package.json index 9d079552..28636c91 100644 --- a/pinia/package.json +++ b/pinia/package.json @@ -7,12 +7,13 @@ "preview": "vite preview --port 4173" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "vite": "^2.9.14" + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/pinia/vite.config.js b/pinia/vite.config.js index 4e523433..d4945079 100644 --- a/pinia/vite.config.js +++ b/pinia/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/router-cypress/package.json b/router-cypress/package.json index b4646bfb..6c354651 100644 --- a/router-cypress/package.json +++ b/router-cypress/package.json @@ -5,20 +5,21 @@ "dev": "vite", "build": "vite build", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "cypress": "^10.3.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14" + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/router-cypress/vite.config.js b/router-cypress/vite.config.js index 4e523433..d4945079 100644 --- a/router-cypress/vite.config.js +++ b/router-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/router-pinia-cypress/package.json b/router-pinia-cypress/package.json index 57bb7ec3..3f942e7c 100644 --- a/router-pinia-cypress/package.json +++ b/router-pinia-cypress/package.json @@ -5,21 +5,22 @@ "dev": "vite", "build": "vite build", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "cypress": "^10.3.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14" + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/router-pinia-cypress/vite.config.js b/router-pinia-cypress/vite.config.js index 4e523433..d4945079 100644 --- a/router-pinia-cypress/vite.config.js +++ b/router-pinia-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/router-pinia-vitest-cypress/package.json b/router-pinia-vitest-cypress/package.json index a5ed98ba..784da2f5 100644 --- a/router-pinia-vitest-cypress/package.json +++ b/router-pinia-vitest-cypress/package.json @@ -6,23 +6,24 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/router-pinia-vitest-cypress/vite.config.js b/router-pinia-vitest-cypress/vite.config.js index 4e523433..d4945079 100644 --- a/router-pinia-vitest-cypress/vite.config.js +++ b/router-pinia-vitest-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/router-pinia-vitest/package.json b/router-pinia-vitest/package.json index 3dd2f07a..8af7f317 100644 --- a/router-pinia-vitest/package.json +++ b/router-pinia-vitest/package.json @@ -8,17 +8,18 @@ "test:unit": "vitest --environment jsdom" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "jsdom": "^20.0.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/router-pinia-vitest/vite.config.js b/router-pinia-vitest/vite.config.js index 4e523433..d4945079 100644 --- a/router-pinia-vitest/vite.config.js +++ b/router-pinia-vitest/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/router-pinia-with-tests/package.json b/router-pinia-with-tests/package.json index fa6bb298..fe56bae3 100644 --- a/router-pinia-with-tests/package.json +++ b/router-pinia-with-tests/package.json @@ -6,23 +6,24 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/router-pinia-with-tests/vite.config.js b/router-pinia-with-tests/vite.config.js index 4e523433..d4945079 100644 --- a/router-pinia-with-tests/vite.config.js +++ b/router-pinia-with-tests/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/router-pinia/package.json b/router-pinia/package.json index 9fb495b9..03ef26d8 100644 --- a/router-pinia/package.json +++ b/router-pinia/package.json @@ -7,13 +7,14 @@ "preview": "vite preview --port 4173" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "vite": "^2.9.14" + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/router-pinia/vite.config.js b/router-pinia/vite.config.js index 4e523433..d4945079 100644 --- a/router-pinia/vite.config.js +++ b/router-pinia/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/router-vitest-cypress/package.json b/router-vitest-cypress/package.json index 8e76795a..ff2c94d4 100644 --- a/router-vitest-cypress/package.json +++ b/router-vitest-cypress/package.json @@ -6,22 +6,23 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/router-vitest-cypress/vite.config.js b/router-vitest-cypress/vite.config.js index 4e523433..d4945079 100644 --- a/router-vitest-cypress/vite.config.js +++ b/router-vitest-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/router-vitest/package.json b/router-vitest/package.json index 6dc5c66d..f505bec3 100644 --- a/router-vitest/package.json +++ b/router-vitest/package.json @@ -8,16 +8,17 @@ "test:unit": "vitest --environment jsdom" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "jsdom": "^20.0.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/router-vitest/vite.config.js b/router-vitest/vite.config.js index 4e523433..d4945079 100644 --- a/router-vitest/vite.config.js +++ b/router-vitest/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/router-with-tests/package.json b/router-with-tests/package.json index aab73db5..92d3df30 100644 --- a/router-with-tests/package.json +++ b/router-with-tests/package.json @@ -6,22 +6,23 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/router-with-tests/vite.config.js b/router-with-tests/vite.config.js index 4e523433..d4945079 100644 --- a/router-with-tests/vite.config.js +++ b/router-with-tests/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/router/package.json b/router/package.json index d9471c3a..594d7a01 100644 --- a/router/package.json +++ b/router/package.json @@ -7,12 +7,13 @@ "preview": "vite preview --port 4173" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "vite": "^2.9.14" + "terser": "^5.14.2", + "vite": "^3.0.2" } } diff --git a/router/vite.config.js b/router/vite.config.js index 4e523433..d4945079 100644 --- a/router/vite.config.js +++ b/router/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-cypress/package.json b/typescript-cypress/package.json index fbeed2f0..03877996 100644 --- a/typescript-cypress/package.json +++ b/typescript-cypress/package.json @@ -5,26 +5,27 @@ "dev": "vite", "build": "run-p type-check build-only", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec", "build-only": "vite build", "type-check": "vue-tsc --noEmit" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-cypress/vite.config.ts b/typescript-cypress/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-cypress/vite.config.ts +++ b/typescript-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-cypress/package.json b/typescript-jsx-cypress/package.json index c95e2777..cd47e31c 100644 --- a/typescript-jsx-cypress/package.json +++ b/typescript-jsx-cypress/package.json @@ -5,27 +5,28 @@ "dev": "vite", "build": "run-p type-check build-only", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec", "build-only": "vite build", "type-check": "vue-tsc --noEmit" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-cypress/vite.config.ts b/typescript-jsx-cypress/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-cypress/vite.config.ts +++ b/typescript-jsx-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-pinia-cypress/package.json b/typescript-jsx-pinia-cypress/package.json index 67221f6e..a4349161 100644 --- a/typescript-jsx-pinia-cypress/package.json +++ b/typescript-jsx-pinia-cypress/package.json @@ -5,28 +5,29 @@ "dev": "vite", "build": "run-p type-check build-only", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec", "build-only": "vite build", "type-check": "vue-tsc --noEmit" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-pinia-cypress/vite.config.ts b/typescript-jsx-pinia-cypress/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-pinia-cypress/vite.config.ts +++ b/typescript-jsx-pinia-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-pinia-vitest-cypress/package.json b/typescript-jsx-pinia-vitest-cypress/package.json index 64b411eb..134ce2a1 100644 --- a/typescript-jsx-pinia-vitest-cypress/package.json +++ b/typescript-jsx-pinia-vitest-cypress/package.json @@ -6,31 +6,32 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-pinia-vitest-cypress/vite.config.ts b/typescript-jsx-pinia-vitest-cypress/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-pinia-vitest-cypress/vite.config.ts +++ b/typescript-jsx-pinia-vitest-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-pinia-vitest/package.json b/typescript-jsx-pinia-vitest/package.json index 6135a4ce..e69b9968 100644 --- a/typescript-jsx-pinia-vitest/package.json +++ b/typescript-jsx-pinia-vitest/package.json @@ -10,23 +10,24 @@ "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-pinia-vitest/vite.config.ts b/typescript-jsx-pinia-vitest/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-pinia-vitest/vite.config.ts +++ b/typescript-jsx-pinia-vitest/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-pinia-with-tests/package.json b/typescript-jsx-pinia-with-tests/package.json index 94edeab3..3b6c7318 100644 --- a/typescript-jsx-pinia-with-tests/package.json +++ b/typescript-jsx-pinia-with-tests/package.json @@ -6,31 +6,32 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-pinia-with-tests/vite.config.ts b/typescript-jsx-pinia-with-tests/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-pinia-with-tests/vite.config.ts +++ b/typescript-jsx-pinia-with-tests/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-pinia/package.json b/typescript-jsx-pinia/package.json index 6cba1c8d..cf693d65 100644 --- a/typescript-jsx-pinia/package.json +++ b/typescript-jsx-pinia/package.json @@ -9,18 +9,19 @@ "type-check": "vue-tsc --noEmit" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/tsconfig": "^0.1.3", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-pinia/vite.config.ts b/typescript-jsx-pinia/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-pinia/vite.config.ts +++ b/typescript-jsx-pinia/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-router-cypress/package.json b/typescript-jsx-router-cypress/package.json index e8fef068..d9b2b4fb 100644 --- a/typescript-jsx-router-cypress/package.json +++ b/typescript-jsx-router-cypress/package.json @@ -5,28 +5,29 @@ "dev": "vite", "build": "run-p type-check build-only", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec", "build-only": "vite build", "type-check": "vue-tsc --noEmit" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-router-cypress/vite.config.ts b/typescript-jsx-router-cypress/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-router-cypress/vite.config.ts +++ b/typescript-jsx-router-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-router-pinia-cypress/package.json b/typescript-jsx-router-pinia-cypress/package.json index 992f1a0e..ccf1697e 100644 --- a/typescript-jsx-router-pinia-cypress/package.json +++ b/typescript-jsx-router-pinia-cypress/package.json @@ -5,29 +5,30 @@ "dev": "vite", "build": "run-p type-check build-only", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec", "build-only": "vite build", "type-check": "vue-tsc --noEmit" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-router-pinia-cypress/vite.config.ts b/typescript-jsx-router-pinia-cypress/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-router-pinia-cypress/vite.config.ts +++ b/typescript-jsx-router-pinia-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-router-pinia-vitest-cypress/package.json b/typescript-jsx-router-pinia-vitest-cypress/package.json index a90d4433..977d3606 100644 --- a/typescript-jsx-router-pinia-vitest-cypress/package.json +++ b/typescript-jsx-router-pinia-vitest-cypress/package.json @@ -6,32 +6,33 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-router-pinia-vitest-cypress/vite.config.ts b/typescript-jsx-router-pinia-vitest-cypress/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-router-pinia-vitest-cypress/vite.config.ts +++ b/typescript-jsx-router-pinia-vitest-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-router-pinia-vitest/package.json b/typescript-jsx-router-pinia-vitest/package.json index ab06458b..72f9467c 100644 --- a/typescript-jsx-router-pinia-vitest/package.json +++ b/typescript-jsx-router-pinia-vitest/package.json @@ -10,24 +10,25 @@ "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-router-pinia-vitest/vite.config.ts b/typescript-jsx-router-pinia-vitest/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-router-pinia-vitest/vite.config.ts +++ b/typescript-jsx-router-pinia-vitest/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-router-pinia-with-tests/package.json b/typescript-jsx-router-pinia-with-tests/package.json index 595228c3..a7f7c18b 100644 --- a/typescript-jsx-router-pinia-with-tests/package.json +++ b/typescript-jsx-router-pinia-with-tests/package.json @@ -6,32 +6,33 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-router-pinia-with-tests/vite.config.ts b/typescript-jsx-router-pinia-with-tests/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-router-pinia-with-tests/vite.config.ts +++ b/typescript-jsx-router-pinia-with-tests/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-router-pinia/package.json b/typescript-jsx-router-pinia/package.json index ff3701b5..98bddb41 100644 --- a/typescript-jsx-router-pinia/package.json +++ b/typescript-jsx-router-pinia/package.json @@ -9,19 +9,20 @@ "type-check": "vue-tsc --noEmit" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/tsconfig": "^0.1.3", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-router-pinia/vite.config.ts b/typescript-jsx-router-pinia/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-router-pinia/vite.config.ts +++ b/typescript-jsx-router-pinia/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-router-vitest-cypress/package.json b/typescript-jsx-router-vitest-cypress/package.json index 7185a286..17aa7cee 100644 --- a/typescript-jsx-router-vitest-cypress/package.json +++ b/typescript-jsx-router-vitest-cypress/package.json @@ -6,31 +6,32 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-router-vitest-cypress/vite.config.ts b/typescript-jsx-router-vitest-cypress/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-router-vitest-cypress/vite.config.ts +++ b/typescript-jsx-router-vitest-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-router-vitest/package.json b/typescript-jsx-router-vitest/package.json index 76bac6bc..bf7fb40a 100644 --- a/typescript-jsx-router-vitest/package.json +++ b/typescript-jsx-router-vitest/package.json @@ -10,23 +10,24 @@ "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-router-vitest/vite.config.ts b/typescript-jsx-router-vitest/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-router-vitest/vite.config.ts +++ b/typescript-jsx-router-vitest/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-router-with-tests/package.json b/typescript-jsx-router-with-tests/package.json index 25ad02eb..fed5fc30 100644 --- a/typescript-jsx-router-with-tests/package.json +++ b/typescript-jsx-router-with-tests/package.json @@ -6,31 +6,32 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-router-with-tests/vite.config.ts b/typescript-jsx-router-with-tests/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-router-with-tests/vite.config.ts +++ b/typescript-jsx-router-with-tests/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-router/package.json b/typescript-jsx-router/package.json index f2aefefc..08eae728 100644 --- a/typescript-jsx-router/package.json +++ b/typescript-jsx-router/package.json @@ -9,18 +9,19 @@ "type-check": "vue-tsc --noEmit" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/tsconfig": "^0.1.3", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-router/vite.config.ts b/typescript-jsx-router/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-router/vite.config.ts +++ b/typescript-jsx-router/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-vitest-cypress/package.json b/typescript-jsx-vitest-cypress/package.json index e2c12b44..815f3343 100644 --- a/typescript-jsx-vitest-cypress/package.json +++ b/typescript-jsx-vitest-cypress/package.json @@ -6,30 +6,31 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-vitest-cypress/vite.config.ts b/typescript-jsx-vitest-cypress/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-vitest-cypress/vite.config.ts +++ b/typescript-jsx-vitest-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-vitest/package.json b/typescript-jsx-vitest/package.json index 99122ad0..bd0bcedf 100644 --- a/typescript-jsx-vitest/package.json +++ b/typescript-jsx-vitest/package.json @@ -10,22 +10,23 @@ "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-vitest/vite.config.ts b/typescript-jsx-vitest/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-vitest/vite.config.ts +++ b/typescript-jsx-vitest/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx-with-tests/package.json b/typescript-jsx-with-tests/package.json index ea4dbfc3..3bf7e6f2 100644 --- a/typescript-jsx-with-tests/package.json +++ b/typescript-jsx-with-tests/package.json @@ -6,30 +6,31 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx-with-tests/vite.config.ts b/typescript-jsx-with-tests/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx-with-tests/vite.config.ts +++ b/typescript-jsx-with-tests/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-jsx/package.json b/typescript-jsx/package.json index ce56bc94..5ea8a3b8 100644 --- a/typescript-jsx/package.json +++ b/typescript-jsx/package.json @@ -9,17 +9,18 @@ "type-check": "vue-tsc --noEmit" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", - "@vitejs/plugin-vue2-jsx": "^1.0.1", + "@vitejs/plugin-vue2-jsx": "^1.0.2", "@vue/tsconfig": "^0.1.3", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-jsx/vite.config.ts b/typescript-jsx/vite.config.ts index 7cbd617e..54d7440f 100644 --- a/typescript-jsx/vite.config.ts +++ b/typescript-jsx/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-pinia-cypress/package.json b/typescript-pinia-cypress/package.json index 3ea29565..7885a94a 100644 --- a/typescript-pinia-cypress/package.json +++ b/typescript-pinia-cypress/package.json @@ -5,27 +5,28 @@ "dev": "vite", "build": "run-p type-check build-only", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec", "build-only": "vite build", "type-check": "vue-tsc --noEmit" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-pinia-cypress/vite.config.ts b/typescript-pinia-cypress/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-pinia-cypress/vite.config.ts +++ b/typescript-pinia-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-pinia-vitest-cypress/package.json b/typescript-pinia-vitest-cypress/package.json index b0d0453c..fc154e82 100644 --- a/typescript-pinia-vitest-cypress/package.json +++ b/typescript-pinia-vitest-cypress/package.json @@ -6,19 +6,19 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", @@ -26,10 +26,11 @@ "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-pinia-vitest-cypress/vite.config.ts b/typescript-pinia-vitest-cypress/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-pinia-vitest-cypress/vite.config.ts +++ b/typescript-pinia-vitest-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-pinia-vitest/package.json b/typescript-pinia-vitest/package.json index 1671f8a2..da17a2b4 100644 --- a/typescript-pinia-vitest/package.json +++ b/typescript-pinia-vitest/package.json @@ -10,22 +10,23 @@ "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-pinia-vitest/vite.config.ts b/typescript-pinia-vitest/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-pinia-vitest/vite.config.ts +++ b/typescript-pinia-vitest/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-pinia-with-tests/package.json b/typescript-pinia-with-tests/package.json index 8cd74500..dca95f72 100644 --- a/typescript-pinia-with-tests/package.json +++ b/typescript-pinia-with-tests/package.json @@ -6,19 +6,19 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", @@ -26,10 +26,11 @@ "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-pinia-with-tests/vite.config.ts b/typescript-pinia-with-tests/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-pinia-with-tests/vite.config.ts +++ b/typescript-pinia-with-tests/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-pinia/package.json b/typescript-pinia/package.json index bf7e0ec2..b35d2a62 100644 --- a/typescript-pinia/package.json +++ b/typescript-pinia/package.json @@ -9,17 +9,18 @@ "type-check": "vue-tsc --noEmit" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4" + "pinia": "^2.0.16", + "vue": "^2.7.7" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/tsconfig": "^0.1.3", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-pinia/vite.config.ts b/typescript-pinia/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-pinia/vite.config.ts +++ b/typescript-pinia/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-router-cypress/package.json b/typescript-router-cypress/package.json index 4e4a501e..4f0de86d 100644 --- a/typescript-router-cypress/package.json +++ b/typescript-router-cypress/package.json @@ -5,27 +5,28 @@ "dev": "vite", "build": "run-p type-check build-only", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec", "build-only": "vite build", "type-check": "vue-tsc --noEmit" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-router-cypress/vite.config.ts b/typescript-router-cypress/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-router-cypress/vite.config.ts +++ b/typescript-router-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-router-pinia-cypress/package.json b/typescript-router-pinia-cypress/package.json index 1fdafcf0..e2434d08 100644 --- a/typescript-router-pinia-cypress/package.json +++ b/typescript-router-pinia-cypress/package.json @@ -5,28 +5,29 @@ "dev": "vite", "build": "run-p type-check build-only", "preview": "vite preview --port 4173", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "test:unit": "cypress open --component", "test:unit:ci": "cypress run --component --quiet --reporter spec", "build-only": "vite build", "type-check": "vue-tsc --noEmit" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/tsconfig": "^0.1.3", "cypress": "^10.3.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-router-pinia-cypress/vite.config.ts b/typescript-router-pinia-cypress/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-router-pinia-cypress/vite.config.ts +++ b/typescript-router-pinia-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-router-pinia-vitest-cypress/package.json b/typescript-router-pinia-vitest-cypress/package.json index ab5a36a0..6b5c4d48 100644 --- a/typescript-router-pinia-vitest-cypress/package.json +++ b/typescript-router-pinia-vitest-cypress/package.json @@ -6,20 +6,20 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", @@ -27,10 +27,11 @@ "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-router-pinia-vitest-cypress/vite.config.ts b/typescript-router-pinia-vitest-cypress/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-router-pinia-vitest-cypress/vite.config.ts +++ b/typescript-router-pinia-vitest-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-router-pinia-vitest/package.json b/typescript-router-pinia-vitest/package.json index 7f598e7a..b3cb6e4f 100644 --- a/typescript-router-pinia-vitest/package.json +++ b/typescript-router-pinia-vitest/package.json @@ -10,23 +10,24 @@ "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-router-pinia-vitest/vite.config.ts b/typescript-router-pinia-vitest/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-router-pinia-vitest/vite.config.ts +++ b/typescript-router-pinia-vitest/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-router-pinia-with-tests/package.json b/typescript-router-pinia-with-tests/package.json index acd14fe2..ed7746a2 100644 --- a/typescript-router-pinia-with-tests/package.json +++ b/typescript-router-pinia-with-tests/package.json @@ -6,20 +6,20 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", @@ -27,10 +27,11 @@ "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-router-pinia-with-tests/vite.config.ts b/typescript-router-pinia-with-tests/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-router-pinia-with-tests/vite.config.ts +++ b/typescript-router-pinia-with-tests/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-router-pinia/package.json b/typescript-router-pinia/package.json index 0cbc0dc8..f1d74629 100644 --- a/typescript-router-pinia/package.json +++ b/typescript-router-pinia/package.json @@ -9,18 +9,19 @@ "type-check": "vue-tsc --noEmit" }, "dependencies": { - "pinia": "^2.0.14", - "vue": "^2.7.4", + "pinia": "^2.0.16", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/tsconfig": "^0.1.3", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-router-pinia/vite.config.ts b/typescript-router-pinia/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-router-pinia/vite.config.ts +++ b/typescript-router-pinia/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-router-vitest-cypress/package.json b/typescript-router-vitest-cypress/package.json index 2e6a4b08..899d8263 100644 --- a/typescript-router-vitest-cypress/package.json +++ b/typescript-router-vitest-cypress/package.json @@ -6,19 +6,19 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", @@ -26,10 +26,11 @@ "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-router-vitest-cypress/vite.config.ts b/typescript-router-vitest-cypress/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-router-vitest-cypress/vite.config.ts +++ b/typescript-router-vitest-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-router-vitest/package.json b/typescript-router-vitest/package.json index 0f7b3e9e..640f05dc 100644 --- a/typescript-router-vitest/package.json +++ b/typescript-router-vitest/package.json @@ -10,22 +10,23 @@ "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-router-vitest/vite.config.ts b/typescript-router-vitest/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-router-vitest/vite.config.ts +++ b/typescript-router-vitest/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-router-with-tests/package.json b/typescript-router-with-tests/package.json index 66eac501..7fbbe48f 100644 --- a/typescript-router-with-tests/package.json +++ b/typescript-router-with-tests/package.json @@ -6,19 +6,19 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", @@ -26,10 +26,11 @@ "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-router-with-tests/vite.config.ts b/typescript-router-with-tests/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-router-with-tests/vite.config.ts +++ b/typescript-router-with-tests/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-router/package.json b/typescript-router/package.json index d0d8d372..e3ec8daf 100644 --- a/typescript-router/package.json +++ b/typescript-router/package.json @@ -9,17 +9,18 @@ "type-check": "vue-tsc --noEmit" }, "dependencies": { - "vue": "^2.7.4", + "vue": "^2.7.7", "vue-router": "^3.5.4" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/tsconfig": "^0.1.3", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-router/vite.config.ts b/typescript-router/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-router/vite.config.ts +++ b/typescript-router/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-vitest-cypress/package.json b/typescript-vitest-cypress/package.json index 715bf3c0..c9eefb81 100644 --- a/typescript-vitest-cypress/package.json +++ b/typescript-vitest-cypress/package.json @@ -6,18 +6,18 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", @@ -25,10 +25,11 @@ "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-vitest-cypress/vite.config.ts b/typescript-vitest-cypress/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-vitest-cypress/vite.config.ts +++ b/typescript-vitest-cypress/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-vitest/package.json b/typescript-vitest/package.json index 6858dc3f..4741545c 100644 --- a/typescript-vitest/package.json +++ b/typescript-vitest/package.json @@ -10,21 +10,22 @@ "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-vitest/vite.config.ts b/typescript-vitest/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-vitest/vite.config.ts +++ b/typescript-vitest/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript-with-tests/package.json b/typescript-with-tests/package.json index 24d82809..67845887 100644 --- a/typescript-with-tests/package.json +++ b/typescript-with-tests/package.json @@ -6,18 +6,18 @@ "build": "run-p type-check build-only", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'", + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { "@types/jsdom": "^16.2.14", - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "@vue/tsconfig": "^0.1.3", @@ -25,10 +25,11 @@ "jsdom": "^20.0.0", "npm-run-all": "^4.1.5", "start-server-and-test": "^1.14.0", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7", + "vue-tsc": "^0.38.8" } } diff --git a/typescript-with-tests/vite.config.ts b/typescript-with-tests/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript-with-tests/vite.config.ts +++ b/typescript-with-tests/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/typescript/package.json b/typescript/package.json index 2b5a5fb0..cff6e922 100644 --- a/typescript/package.json +++ b/typescript/package.json @@ -9,16 +9,17 @@ "type-check": "vue-tsc --noEmit" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { - "@types/node": "^16.11.43", - "@vitejs/plugin-legacy": "^1.8.2", + "@types/node": "^16.11.45", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/tsconfig": "^0.1.3", "npm-run-all": "^4.1.5", + "terser": "^5.14.2", "typescript": "~4.7.4", - "vite": "^2.9.14", - "vue-tsc": "^0.38.4" + "vite": "^3.0.2", + "vue-tsc": "^0.38.8" } } diff --git a/typescript/vite.config.ts b/typescript/vite.config.ts index 4e523433..d4945079 100644 --- a/typescript/vite.config.ts +++ b/typescript/vite.config.ts @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/vitest-cypress/package.json b/vitest-cypress/package.json index 1cbd27a0..7daf2104 100644 --- a/vitest-cypress/package.json +++ b/vitest-cypress/package.json @@ -6,21 +6,22 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/vitest-cypress/vite.config.js b/vitest-cypress/vite.config.js index 4e523433..d4945079 100644 --- a/vitest-cypress/vite.config.js +++ b/vitest-cypress/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/vitest/package.json b/vitest/package.json index 9124ccf3..c2616857 100644 --- a/vitest/package.json +++ b/vitest/package.json @@ -8,15 +8,16 @@ "test:unit": "vitest --environment jsdom" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "jsdom": "^20.0.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/vitest/vite.config.js b/vitest/vite.config.js index 4e523433..d4945079 100644 --- a/vitest/vite.config.js +++ b/vitest/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' diff --git a/with-tests/package.json b/with-tests/package.json index 2bbc033d..c5ae4c0b 100644 --- a/with-tests/package.json +++ b/with-tests/package.json @@ -6,21 +6,22 @@ "build": "vite build", "preview": "vite preview --port 4173", "test:unit": "vitest --environment jsdom", - "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'" + "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'", + "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'" }, "dependencies": { - "vue": "^2.7.4" + "vue": "^2.7.7" }, "devDependencies": { - "@vitejs/plugin-legacy": "^1.8.2", + "@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-vue2": "^1.1.2", "@vue/test-utils": "^1.3.0", "cypress": "^10.3.0", "jsdom": "^20.0.0", "start-server-and-test": "^1.14.0", - "vite": "^2.9.14", - "vitest": "^0.18.0", - "vue-template-compiler": "^2.7.4" + "terser": "^5.14.2", + "vite": "^3.0.2", + "vitest": "^0.18.1", + "vue-template-compiler": "^2.7.7" } } diff --git a/with-tests/vite.config.js b/with-tests/vite.config.js index 4e523433..d4945079 100644 --- a/with-tests/vite.config.js +++ b/with-tests/vite.config.js @@ -1,4 +1,4 @@ -import { fileURLToPath } from 'url' +import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' From c698d8ae01220de67766209a4c70ffbb52a8ed02 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Wed, 12 Oct 2022 11:01:15 +0800 Subject: [PATCH 15/15] chore: make the playground a pnpm workspace --- .gitignore | 1 + pnpm-workspace.yaml | 2 ++ 2 files changed, 3 insertions(+) create mode 100644 .gitignore create mode 100644 pnpm-workspace.yaml diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..3c3629e6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml new file mode 100644 index 00000000..b963f7cb --- /dev/null +++ b/pnpm-workspace.yaml @@ -0,0 +1,2 @@ +packages: + - '*'