Skip to content

Commit 52a88c2

Browse files
alexzhang1030sxzz
alexzhang1030
and
sxzz
authored
feat(docs): init (#91)
Co-authored-by: 三咲智子 <sxzz@sxzz.moe>
1 parent 3a0ec23 commit 52a88c2

23 files changed

+1453
-2
lines changed

‎.vscode/settings.json‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
11
{
2-
"cSpell.words": ["esbuild", "sxzz", "tsup", "unplugin", "vitest", "vmodel"]
2+
"cSpell.words": [
3+
"Attributify",
4+
"esbuild",
5+
"sxzz",
6+
"tsup",
7+
"Unocss",
8+
"unplugin",
9+
"vitest",
10+
"vmodel"
11+
]
312
}

‎docs/.vitepress/components/HomePage.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<div flex="~ wrap" justify-center w-full>
3+
<h2 w-full text-center text-lg mt-11 pb-2 text-gray>Sponsored by</h2>
4+
<div>
5+
<img src="https://cdn.jsdelivr.net/gh/sxzz/sponsors/sponsors.svg" />
6+
</div>
7+
</div>
8+
</template>

‎docs/.vitepress/config.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { defineConfig } from 'vitepress'
2+
import { nav, sidebar } from './data'
3+
4+
export default defineConfig({
5+
lang: 'en-US',
6+
title: 'Vue Macros',
7+
titleTemplate: 'Vue Macros',
8+
description: 'Explore and extend more macros and syntax sugar to Vue.',
9+
lastUpdated: true,
10+
markdown: {
11+
theme: 'material-palenight',
12+
lineNumbers: true,
13+
},
14+
themeConfig: {
15+
// logo: '/logo.png',
16+
footer: {
17+
message: 'Made with ❤️',
18+
copyright: 'MIT License © 2022 三咲智子',
19+
},
20+
socialLinks: [
21+
{ icon: 'github', link: 'https://github.com/sxzz/unplugin-vue-macros' },
22+
],
23+
editLink: {
24+
pattern: 'https://github.com/sxzz/unplugin-vue-macros/docs/docs/:path',
25+
text: 'Edit this page on GitHub',
26+
},
27+
nav,
28+
sidebar,
29+
},
30+
})

‎docs/.vitepress/data.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import type { DefaultTheme } from 'vitepress'
2+
3+
export const nav: DefaultTheme.NavItem[] = [
4+
{ text: 'Guide', link: '/guide/getting-started' },
5+
{ text: 'Macros', link: '/macros/' },
6+
]
7+
8+
export const sidebar: DefaultTheme.Sidebar = [
9+
{
10+
text: 'Guide',
11+
items: [
12+
{
13+
text: 'Getting Started',
14+
link: '/guide/getting-started',
15+
},
16+
],
17+
},
18+
{
19+
text: 'Macros',
20+
items: [
21+
{
22+
text: 'All Macros',
23+
link: '/macros/',
24+
},
25+
{
26+
text: 'defineOptions',
27+
link: '/macros/define-options',
28+
},
29+
{
30+
text: 'defineModel',
31+
link: '/macros/define-model',
32+
},
33+
{
34+
text: 'defineRender',
35+
link: '/macros/define-render',
36+
},
37+
{
38+
text: 'shortEmits',
39+
link: '/macros/short-emits',
40+
},
41+
{
42+
text: 'shortVmodel',
43+
link: '/macros/short-vmodel',
44+
},
45+
{
46+
text: 'hoistStatic',
47+
link: '/macros/hoist-static',
48+
},
49+
{
50+
text: 'setupComponent',
51+
link: '/macros/setup-component',
52+
},
53+
{
54+
text: 'setupSFC',
55+
link: '/macros/setup-sfc',
56+
},
57+
],
58+
},
59+
]

‎docs/.vitepress/theme/index.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { h } from 'vue'
2+
import Theme from 'vitepress/theme'
3+
import 'uno.css'
4+
import HomePage from '../components/HomePage.vue'
5+
6+
export default {
7+
...Theme,
8+
Layout() {
9+
return h(Theme.Layout, null, {
10+
'home-features-after': () => h(HomePage),
11+
})
12+
},
13+
}

‎docs/guide/getting-started.md‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
# Getting Started
2+
3+
## Bundler integrations
4+
5+
### Installation
6+
7+
```bash
8+
npm i -D unplugin-vue-macros
9+
10+
# or yarn
11+
yarn add -D unplugin-vue-macros
12+
13+
# or pnpm
14+
pnpm add -D unplugin-vue-macros
15+
```
16+
17+
#### Vite (first-class support)
18+
19+
```ts
20+
// vite.config.ts
21+
import VueMacros from 'unplugin-vue-macros/vite'
22+
import Vue from '@vitejs/plugin-vue'
23+
// import VueJsx from '@vitejs/plugin-vue-jsx'
24+
25+
export default defineConfig({
26+
plugins: [
27+
VueMacros({
28+
plugins: {
29+
vue: Vue(),
30+
// vueJsx: VueJsx(), // if needed
31+
},
32+
}),
33+
],
34+
})
35+
```
36+
37+
#### Rollup (first-class support)
38+
39+
```ts
40+
// rollup.config.js
41+
import Vue from 'unplugin-vue/rollup'
42+
import VueMacros from 'unplugin-vue-macros/rollup'
43+
44+
export default {
45+
plugins: [
46+
VueMacros({
47+
plugins: {
48+
vue: Vue(),
49+
// vueJsx: VueJsx(), // if needed
50+
},
51+
}),
52+
],
53+
}
54+
```
55+
56+
#### esbuild
57+
58+
```js
59+
// esbuild.config.js
60+
import { build } from 'esbuild'
61+
62+
build({
63+
plugins: [
64+
require('unplugin-vue-macros/esbuild')({
65+
plugins: {
66+
vue: require('unplugin-vue/esbuild')(),
67+
// vueJsx: VueJsx(), // if needed
68+
},
69+
}),
70+
],
71+
})
72+
```
73+
74+
#### Webpack
75+
76+
```js
77+
// webpack.config.js
78+
module.exports = {
79+
/* ... */
80+
plugins: [
81+
require('unplugin-vue-macros/webpack')({
82+
plugins: {
83+
vue: require('unplugin-vue/webpack')(),
84+
// vueJsx: VueJsx(), // if needed
85+
},
86+
}),
87+
],
88+
}
89+
```
90+
91+
## TypeScript Support
92+
93+
```json
94+
// tsconfig.json
95+
{
96+
"compilerOptions": {
97+
// ...
98+
"types": ["unplugin-vue-macros/macros-global" /* ... */]
99+
}
100+
}
101+
```
102+
103+
## Volar Support
104+
105+
For detailed configuration, please refer to the description of the specific macro.
106+
107+
```bash
108+
npm i -D @vue-macros/volar
109+
```
110+
111+
```json
112+
// tsconfig.json
113+
{
114+
"vueCompilerOptions": {
115+
"plugins": [
116+
"@vue-macros/volar/define-model",
117+
"@vue-macros/volar/short-vmodel"
118+
// ...more feature
119+
]
120+
// ...
121+
}
122+
}
123+
```
124+
125+
:tada: Congratulations! You have successfully set up unplugin-vue-macros.
126+
127+
To learn more about the macros, please visit [All Macros](/macros/) :laughing:.

‎docs/index.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
layout: home
3+
4+
hero:
5+
name: Vue Macros
6+
tagline: Explore and extend more macros and syntax sugar to Vue.
7+
actions:
8+
- theme: brand
9+
text: Get Started
10+
link: /guide/getting-started
11+
- theme: alt
12+
text: View on GitHub
13+
link: https://github.com/sxzz/unplugin-vue-macros
14+
features:
15+
- icon: ✨
16+
title: More syntax sugar and macros
17+
details: Explore and extend more macros and syntax sugar to Vue.
18+
- icon: 💚
19+
title: Out-of-the-box and good compatibility
20+
details: Supports both Vue 2 and Vue 3 out-of-the-box.
21+
- icon: 🦾
22+
title: Type Safe
23+
details: Full TypeScript and Volar support.
24+
- icon: ⚡️
25+
title: Multiple bundlers are supported
26+
details: Supports Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by unplugin.
27+
---

‎docs/macros/define-model.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# defineModel
2+
3+
Declaring and mutate `v-model` props as the same as normal variable using the `defineModel`.
4+
5+
| Features | Supported |
6+
| :----------------: | :----------------: |
7+
| Vue 3 | :white_check_mark: |
8+
| Vue 2 | :x: |
9+
| TypeScript / Volar | :white_check_mark: |
10+
11+
::: warning
12+
13+
[Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html) is required. You should enable it first. Otherwise, it will lose the reactivity connection.
14+
15+
Unfortunately Reactivity Transform is not implemented in Vue 2, so this macros doesn't support Vue 2 now.
16+
17+
:::
18+
19+
::: warning
20+
21+
Assignment expression is only supported in `<script setup>` block. In other words invalid in `<template>`.
22+
23+
:::
24+
25+
## Basic Usage
26+
27+
```vue
28+
<script setup lang="ts">
29+
let { modelValue, count } = defineModel<{
30+
modelValue: string
31+
count: number
32+
}>()
33+
34+
console.log(modelValue)
35+
modelValue = 'newValue'
36+
count++
37+
</script>
38+
```
39+
40+
::: details Compiled Code
41+
42+
```vue
43+
<script setup lang="ts">
44+
const { modelValue, count } = defineProps<{
45+
modelValue: string
46+
count: number
47+
}>()
48+
49+
const emit = defineEmits<{
50+
(evt: 'update:modelValue', value: string): void
51+
(evt: 'update:count', value: number): void
52+
}>()
53+
54+
console.log(modelValue)
55+
emit('update:modelValue', 'newValue')
56+
emit('update:count', count + 1)
57+
</script>
58+
```
59+
60+
:::
61+
62+
## Volar Configuration
63+
64+
```jsonc{5}
65+
// tsconfig.json
66+
{
67+
"vueCompilerOptions": {
68+
"plugins": [
69+
"@vue-macros/volar/define-model"
70+
// ...more feature
71+
]
72+
}
73+
}
74+
```

0 commit comments

Comments
 (0)