Skip to content

Commit c91cb0f

Browse files
sxzzsxzz
committed
feat: introduce definePropsRefs
1 parent 33849ad commit c91cb0f

File tree

35 files changed

+450
-2
lines changed

35 files changed

+450
-2
lines changed

‎.changeset/many-crabs-compete.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
'@vue-macros/common': major
3+
'@vue-macros/nuxt': major
4+
'@vue-macros/define-props-refs': minor
5+
'unplugin-vue-macros': minor
6+
'@vue-macros/volar': minor
7+
'@vue-macros/define-props': patch
8+
---
9+
10+
introduce `definePropsRefs`

‎docs/.vitepress/configs/navs.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@ export const sidebar: DefaultTheme.Sidebar = [
4747
text: 'defineProps',
4848
link: '/macros/define-props',
4949
},
50+
{
51+
text: 'definePropsRefs',
52+
link: '/macros/define-props-refs',
53+
},
5054
{
5155
text: 'defineSlots',
5256
link: '/macros/define-slots',

‎docs/guide/bundler-integration.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ npm i -D @vue-macros/volar
137137
"plugins": [
138138
"@vue-macros/volar/define-model",
139139
"@vue-macros/volar/define-props",
140+
"@vue-macros/volar/define-props-refs",
140141
"@vue-macros/volar/short-vmodel",
141142
"@vue-macros/volar/define-slots",
142143
"@vue-macros/volar/export-props"

‎docs/macros/define-props-refs.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# definePropsRefs
2+
3+
<small>Stability: <code class="!text-yellow-600">unstable</code></small>
4+
5+
Returns refs from `defineProps` instead of a reactive object. It can be destructured without losing reactivity.
6+
7+
`toRefs(defineProps())` => `definePropsRefs()`
8+
9+
| Features | Supported |
10+
| :-----------------------: | :----------------: |
11+
| Vue 3 | :white_check_mark: |
12+
| Nuxt 3 | :white_check_mark: |
13+
| Vue 2 | :white_check_mark: |
14+
| TypeScript / Volar Plugin | :white_check_mark: |
15+
16+
## Basic Usage
17+
18+
```vue {2-3,8}
19+
<script setup lang="ts">
20+
// ✅ won't lose reactivity with destructuring
21+
const { foo, bar } = definePropsRefs<{
22+
foo: string
23+
bar: number
24+
}>()
25+
// ⬇️ Ref<string>
26+
console.log(foo.value, bar.value)
27+
</script>
28+
```
29+
30+
## Volar Configuration
31+
32+
```jsonc {6}
33+
// tsconfig.json
34+
{
35+
"vueCompilerOptions": {
36+
"target": 3,
37+
"plugins": [
38+
"@vue-macros/volar/define-props-refs"
39+
// ...more feature
40+
]
41+
}
42+
}
43+
```

‎docs/macros/define-props.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Unfortunately Reactivity Transform is not implemented in Vue 2, so this macro do
2424
## Basic Usage
2525

2626
```vue
27-
<script setup lang="tsx">
27+
<script setup lang="ts">
2828
// ⬇️ ReactiveVariable<string[]>
2929
const { foo } = $defineProps<{
3030
foo: string[]

‎packages/common/src/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export const DEFINE_PROPS = 'defineProps'
22
export const DEFINE_PROPS_DOLLAR = '$defineProps'
3+
export const DEFINE_PROPS_REFS = 'definePropsRefs'
34
export const DEFINE_EMITS = 'defineEmits'
45
export const WITH_DEFAULTS = 'withDefaults'
56
export const DEFINE_OPTIONS = 'defineOptions'

‎packages/define-props-refs/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# @vue-macros/define-props-refs [![npm](https://img.shields.io/npm/v/@vue-macros/define-props-refs.svg)](https://npmjs.com/package/@vue-macros/define-props-refs)
2+
3+
Please refer to [README.md](https://github.com/sxzz/unplugin-vue-macros#readme)

‎packages/define-props-refs/macros-global.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import type { definePropsRefs as _definePropsRefs } from './macros'
2+
3+
declare global {
4+
const definePropsRefs: typeof _definePropsRefs
5+
}

‎packages/define-props-refs/macros.d.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import type {
2+
ComponentObjectPropsOptions,
3+
DeepReadonly,
4+
ExtractPropTypes,
5+
Ref,
6+
ToRefs,
7+
} from 'vue'
8+
9+
export declare function definePropsRefs<PropNames extends string = string>(
10+
props: PropNames[]
11+
): DeepReadonly<{
12+
[key in PropNames]: Readonly<Ref<any>>
13+
}>
14+
export declare function definePropsRefs<
15+
PP extends ComponentObjectPropsOptions = ComponentObjectPropsOptions
16+
>(props: PP): DeepReadonly<Required<ToRefs<ExtractPropTypes<PP>>>>
17+
18+
export declare function definePropsRefs<TypeProps>(): DeepReadonly<
19+
Required<ToRefs<TypeProps>>
20+
>

‎packages/define-props-refs/package.json‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
{
2+
"name": "@vue-macros/define-props-refs",
3+
"version": "0.0.0",
4+
"packageManager": "pnpm@7.26.0",
5+
"description": "",
6+
"keywords": [
7+
"unplugin",
8+
"vue",
9+
"sfc",
10+
"setup",
11+
"macros",
12+
"script-setup",
13+
"define-props-refs"
14+
],
15+
"license": "MIT",
16+
"homepage": "https://github.com/sxzz/unplugin-vue-macros#readme",
17+
"bugs": {
18+
"url": "https://github.com/sxzz/unplugin-vue-macros/issues"
19+
},
20+
"repository": {
21+
"type": "git",
22+
"url": "git+https://github.com/sxzz/unplugin-vue-macros.git"
23+
},
24+
"author": "三咲智子 <sxzz@sxzz.moe>",
25+
"files": [
26+
"dist",
27+
"*.d.ts"
28+
],
29+
"main": "dist/index.js",
30+
"module": "dist/index.mjs",
31+
"types": "dist/index.d.ts",
32+
"exports": {
33+
".": {
34+
"types": "./dist/index.d.ts",
35+
"require": "./dist/index.js",
36+
"import": "./dist/index.mjs"
37+
},
38+
"./vite": {
39+
"types": "./dist/vite.d.ts",
40+
"require": "./dist/vite.js",
41+
"import": "./dist/vite.mjs"
42+
},
43+
"./webpack": {
44+
"types": "./dist/webpack.d.ts",
45+
"require": "./dist/webpack.js",
46+
"import": "./dist/webpack.mjs"
47+
},
48+
"./rollup": {
49+
"types": "./dist/rollup.d.ts",
50+
"require": "./dist/rollup.js",
51+
"import": "./dist/rollup.mjs"
52+
},
53+
"./esbuild": {
54+
"types": "./dist/esbuild.d.ts",
55+
"require": "./dist/esbuild.js",
56+
"import": "./dist/esbuild.mjs"
57+
},
58+
"./macros": "./macros.d.ts",
59+
"./macros-global": "./macros-global.d.ts",
60+
"./*": "./*"
61+
},
62+
"scripts": {
63+
"build": "tsup && tsx ../../scripts/postbuild.mts",
64+
"dev": "DEV=1 tsup"
65+
},
66+
"peerDependencies": {
67+
"vue": "^2.7.0 || ^3.2.25"
68+
},
69+
"dependencies": {
70+
"@rollup/pluginutils": "^5.0.2",
71+
"@vue-macros/common": "workspace:~",
72+
"unplugin": "^1.0.1"
73+
},
74+
"devDependencies": {
75+
"vue": "^3.2.45"
76+
},
77+
"engines": {
78+
"node": ">=14.19.0"
79+
}
80+
}

0 commit comments

Comments
 (0)