Merge pull request #7 from ncuhome/feat/debug-tools

Feat/debug-tools
ncuhome · Nov 3, 2021 · 74feebe · 74feebe
2 parents 9d5752c + 633fb13
commit 74feebe
Show file tree

Hide file tree

Showing 50 changed files with 3,404 additions and 17,820 deletions.
diff --git a/example/react-next/package.json b/example/react-next/package.json
@@ -15,7 +15,7 @@
     "axios": "^0.21.0",
     "immer": "^7.0.14",
     "lodash": "^4.17.20",
-    "next": "^10.0.0",
+    "next": "^11.1.2",
     "prop-types": "^15.6.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

diff --git a/example/react-next/yarn.lock b/example/react-next/yarn.lock
diff --git a/example/vue-spa/.browserslistrc b/example/vue-spa/.browserslistrc
diff --git a/example/vue-spa/.gitignore b/example/vue-spa/.gitignore
@@ -1,23 +1,5 @@
-.DS_Store
 node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/example/vue-spa/README.md b/example/vue-spa/README.md
@@ -1,23 +1,11 @@
-# vue-spa
+# Vue 3 + Typescript + Vite
 
-## Project setup
+This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
-```
-yarn install
-```
+## Recommended IDE Setup
 
-### Compiles and hot-reloads for development
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
 
-```
-yarn serve
-```
+## Type Support For `.vue` Imports in TS
 
-### Compiles and minifies for production
-
-```
-yarn build
-```
-
-### Customize configuration
-
-See [Configuration Reference](https://cli.vuejs.org/config/).
+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 enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
diff --git a/example/vue-spa/babel.config.js b/example/vue-spa/babel.config.js
diff --git a/example/vue-spa/index.html b/example/vue-spa/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/example/vue-spa/package.json b/example/vue-spa/package.json
@@ -1,33 +1,23 @@
 {
-  "name": "vue-spa",
-  "private": true,
-  "version": "1.2.2",
+  "name": "vue3-spa",
+  "version": "0.0.0",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "serve": "vite preview"
   },
   "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^3.0.0",
-    "vue-class-component": "^8.0.0-0",
-    "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0",
+    "vue": "^3.2.16",
+    "vue-class-component": "^8.0.0-rc.1",
+    "vue-router": "^4.0.12",
+    "vuex": "^4.0.2",
     "vuex-class": "^0.3.2",
     "vuex-class-component": "^2.3.5"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "typescript": "~3.9.3"
-  },
-  "workspaces": {
-    "nohoist": [
-      "**/@vue/cli-plugin-typescript",
-      "**/@vue/cli-plugin-typescript/**"
-    ]
+    "@vitejs/plugin-vue": "^1.9.3",
+    "typescript": "^4.4.3",
+    "vite": "^2.6.4",
+    "vue-tsc": "^0.3.0"
   }
 }
diff --git a/example/vue-spa/public/index.html b/example/vue-spa/public/index.html
diff --git a/example/vue-spa/src/components/HelloWorld.vue b/example/vue-spa/src/components/HelloWorld.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="hello">
+  <div className="hello">
     <h1>{{ msg }}</h1>
     <p>
       For a guide and recipes on how to configure / customize this project,<br />

diff --git a/example/vue-spa/src/env.d.ts b/example/vue-spa/src/env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/example/vue-spa/src/main.ts b/example/vue-spa/src/main.ts
@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp, h } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'

diff --git a/example/vue-spa/src/router/index.ts b/example/vue-spa/src/router/index.ts
@@ -28,7 +28,7 @@ const routes: RouteRecordRaw[] = [
 ]
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
   routes,
 })
 

diff --git a/example/vue-spa/src/shims-vue.d.ts b/example/vue-spa/src/shims-vue.d.ts
diff --git a/example/vue-spa/src/souece.d.ts b/example/vue-spa/src/souece.d.ts
diff --git a/example/vue-spa/src/views/About.vue b/example/vue-spa/src/views/About.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="about">
+  <div className="about">
     <h1>This is an about page</h1>
   </div>
 </template>
diff --git a/example/vue-spa/src/views/Home.vue b/example/vue-spa/src/views/Home.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="home">
-    <div class="block" :style="square">
-      <img class="logo" alt="Vue logo" src="../assets/logo.png" />
+  <div className="home">
+    <div className="block" :style="square">
+      <img className="logo" alt="Vue logo" src="../assets/logo.png" />
     </div>
     <div>
       <div>colorScheme: {{ colorScheme }}</div>
@@ -23,7 +23,10 @@ export default {
     const colors = useNativeState('colors')
 
     const square = computed(
-      () => `background: ${colors.value?.white};border: 3px solid ${colors.value?.black};`
+      () => ({
+        background: `${colors.value?.white}`,
+        border: `3px solid ${colors.value?.black}`
+      })
     )
 
     const toCourse = () => uiModule.toScreen({ screen: '周课表' })

diff --git a/example/vue-spa/tsconfig.json b/example/vue-spa/tsconfig.json
@@ -1,19 +1,17 @@
 {
   "compilerOptions": {
     "target": "esnext",
+    "useDefineForClassFields": true,
     "module": "esnext",
-    "strict": false,
-    "jsx": "preserve",
-    "importHelpers": true,
     "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "jsx": "preserve",
     "sourceMap": true,
-    "types": ["webpack-env"],
-    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "experimentalDecorators": true,
+    "skipLibCheck": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
diff --git a/example/vue-spa/vite.config.ts b/example/vue-spa/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()]
+})
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,7 +28,7 @@ const routes: RouteRecordRaw[] = [ @@
     ]
     const router = createRouter({
-      history: createWebHistory(process.env.BASE_URL),
+      history: createWebHistory(import.meta.env.BASE_URL),
       routes,
     })
@@ Expand Down @@