Skip to content

Commit 88c953f

Browse files
lzxblzxb
committed
feat: inject to defineComponent
1 parent 7eadcb1 commit 88c953f

29 files changed

+469
-62
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ build/Release
3939

4040
# Dependency directories
4141
node_modules/
42+
node_modules_back/
4243
jspm_packages/
4344

4445
# TypeScript v1 declaration files

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
## 1.1.4
2+
- feat: inject to defineComponent
13
## 1.1.3
24
- fix: vite ssr build error
35
## 1.1.2

‎README.md

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@ const app = new App();
6262
</div>
6363
</template>
6464
```
65-
`Setup` and `Context` collect dependency information together, and convert it into a Vue program after executing the subclass constructor
6665
<!-- file:./tests/demo.vue end -->
66+
`Setup` and `Context` collect dependency information together, and convert it into a Vue program after executing the subclass constructor
6767
## Setup
6868

6969
If the component defines `props`, writing the `class` in the `setup` will cause the `setup` function to create a `class` every time as it executes, which will add costs. So we should avoid writing `class` in `setup` and use `Define` basic class to receive `props` and `emit`.
@@ -73,6 +73,7 @@ If the component defines `props`, writing the `class` in the `setup` will cause
7373
<!-- file:./tests/base-component-child.vue start -->
7474
```vue
7575
<script lang="ts">
76+
import { defineComponent } from 'vue';
7677
import { Setup, Define } from 'vue-class-setup';
7778
7879
// You can create multiple setup class, Only one is shown here
@@ -90,6 +91,9 @@ class App extends Define<Props, Emit> {
9091
}
9192
}
9293
94+
export default defineComponent({
95+
...App.inject()
96+
})
9397
</script>
9498
<script lang="ts" setup>
9599
@@ -114,14 +118,14 @@ defineEmits<Emit>(); // ✅
114118
115119
// Automatic dependency injection and reactive
116120
// const app = reactive(new App()); // ❌
117-
const app = new App(); // ✅
121+
// const app = new App(); // ✅
118122
119123
</script>
120124
<template>
121-
<button class="btn" @click="app.click($event)">
122-
<span class="text">{{ app.text }}</span>
123-
<span class="props-dest">{{ app.dest }}</span>
124-
<span class="props-value">{{ app.$props.value }}</span>
125+
<button class="btn" @click="click($event)">
126+
<span class="text">{{ text }}</span>
127+
<span class="props-dest">{{ dest }}</span>
128+
<span class="props-value">{{ $props.value }}</span>
125129
</button>
126130
</template>
127131
```

‎examples/vite-vue3/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/vite-vue3/.vscode/extensions.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["Vue.volar"]
3+
}

‎examples/vite-vue3/README.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Vue 3 + TypeScript + Vite
2+
3+
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.
4+
5+
## Recommended IDE Setup
6+
7+
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
8+
9+
## Type Support For `.vue` Imports in TS
10+
11+
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 Take Over mode by following these steps:
12+
13+
1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
14+
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
15+
16+
You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).

‎examples/vite-vue3/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue + TS</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎examples/vite-vue3/package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "vite-vue3",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vue-tsc --noEmit && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"vue": "^3.2.37"
13+
},
14+
"devDependencies": {
15+
"vue-class-setup": "file:../../",
16+
"@vitejs/plugin-vue": "^3.0.3",
17+
"typescript": "^4.6.4",
18+
"vite": "^3.0.7",
19+
"vue-tsc": "^0.39.5"
20+
}
21+
}

‎examples/vite-vue3/public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎examples/vite-vue3/src/App.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script setup lang="ts">
2+
// This starter template is using Vue 3 <script setup> SFCs
3+
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
4+
import HelloWorld from './components/HelloWorld.vue'
5+
</script>
6+
7+
<template>
8+
<div>
9+
<a href="https://vitejs.dev" target="_blank">
10+
<img src="/vite.svg" class="logo" alt="Vite logo" />
11+
</a>
12+
<a href="https://vuejs.org/" target="_blank">
13+
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
14+
</a>
15+
</div>
16+
<HelloWorld msg="Vite + Vue" />
17+
</template>
18+
19+
<style scoped>
20+
.logo {
21+
height: 6em;
22+
padding: 1.5em;
23+
will-change: filter;
24+
}
25+
.logo:hover {
26+
filter: drop-shadow(0 0 2em #646cffaa);
27+
}
28+
.logo.vue:hover {
29+
filter: drop-shadow(0 0 2em #42b883aa);
30+
}
31+
</style>

‎examples/vite-vue3/src/assets/vue.svg

Lines changed: 1 addition & 0 deletions
Loading

‎examples/vite-vue3/src/components/HelloWorld.vue

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script lang="ts">
2+
import { defineComponent } from 'vue';
3+
import { Setup, Define } from 'vue-class-setup';
4+
5+
export interface Props {
6+
msg: string;
7+
}
8+
9+
@Setup
10+
class App extends Define<Props> {
11+
public count = 0;
12+
public onClick() {
13+
this.count++;
14+
}
15+
}
16+
17+
export default defineComponent({
18+
19+
...App.inject()
20+
})
21+
</script>
22+
<script setup lang="ts">
23+
defineProps<Props>();
24+
25+
</script>
26+
27+
<template>
28+
<h1>{{ msg }}</h1>
29+
30+
<div class="card">
31+
<button type="button" @click="onClick()">count is {{ count }}</button>
32+
<p>
33+
Edit
34+
<code>components/HelloWorld.vue</code> to test HMR
35+
</p>
36+
</div>
37+
38+
<p>
39+
Check out
40+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
41+
starter
42+
</p>
43+
<p>
44+
Install
45+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
46+
in your IDE for a better DX
47+
</p>
48+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
49+
</template>
50+
51+
<style scoped>
52+
.read-the-docs {
53+
color: #888;
54+
}
55+
</style>

‎examples/vite-vue3/src/main.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
5+
createApp(App).mount('#app')

‎examples/vite-vue3/src/style.css

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
:root {
2+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3+
font-size: 16px;
4+
line-height: 24px;
5+
font-weight: 400;
6+
7+
color-scheme: light dark;
8+
color: rgba(255, 255, 255, 0.87);
9+
background-color: #242424;
10+
11+
font-synthesis: none;
12+
text-rendering: optimizeLegibility;
13+
-webkit-font-smoothing: antialiased;
14+
-moz-osx-font-smoothing: grayscale;
15+
-webkit-text-size-adjust: 100%;
16+
}
17+
18+
a {
19+
font-weight: 500;
20+
color: #646cff;
21+
text-decoration: inherit;
22+
}
23+
a:hover {
24+
color: #535bf2;
25+
}
26+
27+
body {
28+
margin: 0;
29+
display: flex;
30+
place-items: center;
31+
min-width: 320px;
32+
min-height: 100vh;
33+
}
34+
35+
h1 {
36+
font-size: 3.2em;
37+
line-height: 1.1;
38+
}
39+
40+
button {
41+
border-radius: 8px;
42+
border: 1px solid transparent;
43+
padding: 0.6em 1.2em;
44+
font-size: 1em;
45+
font-weight: 500;
46+
font-family: inherit;
47+
background-color: #1a1a1a;
48+
cursor: pointer;
49+
transition: border-color 0.25s;
50+
}
51+
button:hover {
52+
border-color: #646cff;
53+
}
54+
button:focus,
55+
button:focus-visible {
56+
outline: 4px auto -webkit-focus-ring-color;
57+
}
58+
59+
.card {
60+
padding: 2em;
61+
}
62+
63+
#app {
64+
max-width: 1280px;
65+
margin: 0 auto;
66+
padding: 2rem;
67+
text-align: center;
68+
}
69+
70+
@media (prefers-color-scheme: light) {
71+
:root {
72+
color: #213547;
73+
background-color: #ffffff;
74+
}
75+
a:hover {
76+
color: #747bff;
77+
}
78+
button {
79+
background-color: #f9f9f9;
80+
}
81+
}

‎examples/vite-vue3/src/vite-env.d.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/// <reference types="vite/client" />
2+
3+
declare module '*.vue' {
4+
import type { DefineComponent } from 'vue'
5+
const component: DefineComponent<{}, {}, any>
6+
export default component
7+
}

‎examples/vite-vue3/tsconfig.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"experimentalDecorators": true,
4+
"target": "ESNext",
5+
"useDefineForClassFields": true,
6+
"module": "ESNext",
7+
"moduleResolution": "Node",
8+
"strict": true,
9+
"jsx": "preserve",
10+
"sourceMap": true,
11+
"resolveJsonModule": true,
12+
"isolatedModules": true,
13+
"esModuleInterop": true,
14+
"lib": ["ESNext", "DOM"],
15+
"skipLibCheck": true
16+
},
17+
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
18+
"references": [{ "path": "./tsconfig.node.json" }]
19+
}

‎examples/vite-vue3/tsconfig.node.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"compilerOptions": {
3+
"composite": true,
4+
"module": "ESNext",
5+
"moduleResolution": "Node",
6+
"allowSyntheticDefaultImports": true
7+
},
8+
"include": ["vite.config.ts"]
9+
}

‎examples/vite-vue3/vite.config.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()]
7+
})

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"./package.json": "./package.json"
2121
},
2222
"sideEffects": false,
23+
"files": ["src", "dist", "tests"],
2324
"keywords": [
2425
"vue-class",
2526
"vue-class-component",
@@ -31,9 +32,10 @@
3132
"build": "vue-tsc --noEmit && vite build --ssr && cp dist/index.mjs ./dist/index.es.js",
3233
"preview": "vite preview",
3334
"test": "vitest",
35+
"test:all": "./script/test-all.sh",
3436
"coverage": "vitest run --coverage",
3537
"coveralls": "coveralls < coverage/lcov.info",
36-
"release": "yarn build && npm publish --registry=https://registry.npmjs.org"
38+
"release": "yarn test:all && yarn publish --registry=https://registry.npmjs.org"
3739
},
3840
"peerDependencies": {
3941
"vue": ">=2.7.8 || >=3.0.0"

0 commit comments

Comments
 (0)