From 05f1130c86c569bc93af329ef3f1090396874eca Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Fri, 14 Oct 2022 00:22:11 +0800
Subject: [PATCH 1/8] feat(docs): add custom component

---
 docs/.vitepress/config.ts                     |  6 +-
 docs/.vitepress/configs/index.ts              |  1 +
 docs/.vitepress/configs/markdown.ts           | 28 +++++++
 docs/.vitepress/theme/components/CodeGroup.ts | 79 +++++++++++++++++++
 .../.vitepress/theme/components/CodeGroup.vue |  7 ++
 .../theme/components/CodeGroupItem.vue        |  6 ++
 .../theme/components/markdown/index.ts        | 13 +++
 .../components/markdown/plugins/container.ts  | 59 ++++++++++++++
 .../plugins/markdown-it-container.d.ts        |  5 ++
 docs/.vitepress/theme/index.ts                |  9 ++-
 docs/guide/getting-started.md                 | 12 +++
 docs/package.json                             |  1 +
 pnpm-lock.yaml                                |  6 ++
 13 files changed, 227 insertions(+), 5 deletions(-)
 create mode 100644 docs/.vitepress/configs/index.ts
 create mode 100644 docs/.vitepress/configs/markdown.ts
 create mode 100644 docs/.vitepress/theme/components/CodeGroup.ts
 create mode 100644 docs/.vitepress/theme/components/CodeGroup.vue
 create mode 100644 docs/.vitepress/theme/components/CodeGroupItem.vue
 create mode 100644 docs/.vitepress/theme/components/markdown/index.ts
 create mode 100644 docs/.vitepress/theme/components/markdown/plugins/container.ts
 create mode 100644 docs/.vitepress/theme/components/markdown/plugins/markdown-it-container.d.ts

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 858976d7c..d70445fcf 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,5 +1,6 @@
 import { defineConfig } from 'vitepress'
 import { nav, sidebar } from './data'
+import * as config from './configs'
 
 export default defineConfig({
   lang: 'en-US',
@@ -37,10 +38,7 @@ gtag('config', 'G-29NKGSL23C');`,
   description: 'Explore and extend more macros and syntax sugar to Vue.',
   lastUpdated: true,
   cleanUrls: 'with-subfolders',
-  markdown: {
-    theme: 'material-palenight',
-    lineNumbers: true,
-  },
+  markdown: config.markdownConfig,
 
   vue: {
     reactivityTransform: true,
diff --git a/docs/.vitepress/configs/index.ts b/docs/.vitepress/configs/index.ts
new file mode 100644
index 000000000..fabf34dbd
--- /dev/null
+++ b/docs/.vitepress/configs/index.ts
@@ -0,0 +1 @@
+export * from './markdown'
diff --git a/docs/.vitepress/configs/markdown.ts b/docs/.vitepress/configs/markdown.ts
new file mode 100644
index 000000000..84cd7cab9
--- /dev/null
+++ b/docs/.vitepress/configs/markdown.ts
@@ -0,0 +1,28 @@
+// import { useCodeGroup, useCodeGroupItem } from '../theme/components/markdown'
+import {
+  useCodeGroup,
+  useCodeGroupItem,
+} from '../theme/components/markdown/index'
+import type { MarkdownOptions } from 'vitepress'
+
+/**
+ * vitepress markdown config
+ * @see https://vitepress.vuejs.org/config/app-configs.html#markdown
+ */
+export const markdownConfig: MarkdownOptions = {
+  lineNumbers: true,
+  // material-palenight
+  theme: {
+    light: 'vitesse-light',
+    dark: 'vitesse-dark',
+  },
+  config: (md) => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    md.use(useCodeGroup.container, useCodeGroup.type, {
+      render: useCodeGroup.render,
+    })
+    md.use(useCodeGroupItem.container, useCodeGroupItem.type, {
+      render: useCodeGroupItem.render,
+    })
+  },
+}
diff --git a/docs/.vitepress/theme/components/CodeGroup.ts b/docs/.vitepress/theme/components/CodeGroup.ts
new file mode 100644
index 000000000..3d61ce7e5
--- /dev/null
+++ b/docs/.vitepress/theme/components/CodeGroup.ts
@@ -0,0 +1,79 @@
+import { defineComponent, h, ref } from 'vue'
+import type { Component, ComponentOptions, VNode } from 'vue'
+
+export const CodeGroup: ComponentOptions = defineComponent({
+  name: 'CodeGroup',
+
+  setup(_, { slots }) {
+    // index of current active item
+    const activeIndex = ref(-1)
+
+    return () => {
+      // NOTICE: here we put the `slots.default()` inside the render function to make
+      // the slots reactive, otherwise the slot content won't be changed once the
+      // `setup()` function of current component is called
+
+      // get children code-group-item
+      const items = (slots.default?.() || [])
+        .filter((vnode) => (vnode.type as Component).name === 'CodeGroupItem')
+        .map((vnode) => {
+          if (vnode.props === null) vnode.props = {}
+
+          return vnode as VNode & { props: Exclude<VNode['props'], null> }
+        })
+
+      // do not render anything if there is no code-group-item
+      if (items.length === 0) return null
+
+      if (activeIndex.value < 0 || activeIndex.value > items.length - 1) {
+        // if `activeIndex` is invalid
+
+        // find the index of the code-group-item with `active` props
+        activeIndex.value = items.findIndex(
+          (vnode) => vnode.props.active === '' || vnode.props.active === true
+        )
+
+        // if there is no `active` props on code-group-item, set the first item active
+        if (activeIndex.value === -1) activeIndex.value = 0
+      } else {
+        // set the active item
+        items.forEach((vnode, i) => {
+          vnode.props.active = i === activeIndex.value
+        })
+      }
+
+      return h('div', { class: 'code-group' }, [
+        h(
+          'div',
+          { class: 'code-group__nav' },
+          h(
+            'ul',
+            { class: 'code-group__ul' },
+            items.map((vnode, i) => {
+              const isActive = i === activeIndex.value
+
+              return h(
+                'li',
+                { class: 'code-group__li' },
+                h(
+                  'button',
+                  {
+                    class: {
+                      'code-group__nav-tab': true,
+                      'code-group__nav-tab-active': isActive,
+                    },
+                    ariaPressed: isActive,
+                    ariaExpanded: isActive,
+                    onClick: () => (activeIndex.value = i),
+                  },
+                  vnode.props.title
+                )
+              )
+            })
+          )
+        ),
+        items,
+      ])
+    }
+  },
+})
diff --git a/docs/.vitepress/theme/components/CodeGroup.vue b/docs/.vitepress/theme/components/CodeGroup.vue
new file mode 100644
index 000000000..fb261f776
--- /dev/null
+++ b/docs/.vitepress/theme/components/CodeGroup.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+<template>
+  <div>Code Group</div>
+  <div>
+    <slot />
+  </div>
+</template>
diff --git a/docs/.vitepress/theme/components/CodeGroupItem.vue b/docs/.vitepress/theme/components/CodeGroupItem.vue
new file mode 100644
index 000000000..b86c830f2
--- /dev/null
+++ b/docs/.vitepress/theme/components/CodeGroupItem.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>Code Group Item</div>
+  <div><slot /></div>
+</template>
+<style scoped></style>
diff --git a/docs/.vitepress/theme/components/markdown/index.ts b/docs/.vitepress/theme/components/markdown/index.ts
new file mode 100644
index 000000000..5d03abd86
--- /dev/null
+++ b/docs/.vitepress/theme/components/markdown/index.ts
@@ -0,0 +1,13 @@
+import { useMarkdownContainer } from './plugins/container'
+
+export const useCodeGroup = useMarkdownContainer({
+  type: 'code-group',
+  before: () => '<CodeGroup>\n',
+  after: () => '</CodeGroup>\n',
+})
+
+export const useCodeGroupItem = useMarkdownContainer({
+  type: 'code-group-item',
+  before: (info: string) => `<CodeGroupItem title="${info}">\n`,
+  after: () => '</CodeGroupItem>\n',
+})
diff --git a/docs/.vitepress/theme/components/markdown/plugins/container.ts b/docs/.vitepress/theme/components/markdown/plugins/container.ts
new file mode 100644
index 000000000..8dccce4a5
--- /dev/null
+++ b/docs/.vitepress/theme/components/markdown/plugins/container.ts
@@ -0,0 +1,59 @@
+import container from 'markdown-it-container'
+
+type RenderPlaceFunction = (info: string) => string
+
+interface ContainerPluginOptions {
+  /**
+   * The type of the container
+   *
+   * It would be used as the `name` of the container
+   *
+   * @see https://github.com/markdown-it/markdown-it-container#api
+   */
+  type: string
+
+  /**
+   * A function to render the starting tag of the container.
+   *
+   * This option will not take effect if you don't specify the `after` option.
+   */
+  before: RenderPlaceFunction
+
+  /**
+   * A function to render the ending tag of the container.
+   *
+   * This option will not take effect if you don't specify the `before` option.
+   */
+  after: RenderPlaceFunction
+}
+
+/** Powered by vuepress-next */
+export const useMarkdownContainer = ({
+  type,
+  after,
+  before,
+}: ContainerPluginOptions) => {
+  const infoStack: string[] = []
+  const render = (tokens: any, index: number): string => {
+    const token = tokens[index]
+    if (token.nesting === 1) {
+      // resolve info (title)
+      const info = token.info.trim().slice(type.length).trim()
+      infoStack.push(info)
+      return before(info)
+    } else {
+      // `after` tag
+
+      // pop the info from stack
+      const info = infoStack.pop() || ''
+
+      // render
+      return after(info)
+    }
+  }
+  return {
+    container,
+    type,
+    render,
+  }
+}
diff --git a/docs/.vitepress/theme/components/markdown/plugins/markdown-it-container.d.ts b/docs/.vitepress/theme/components/markdown/plugins/markdown-it-container.d.ts
new file mode 100644
index 000000000..84e449f76
--- /dev/null
+++ b/docs/.vitepress/theme/components/markdown/plugins/markdown-it-container.d.ts
@@ -0,0 +1,5 @@
+declare module 'markdown-it-container' {
+  import type { PluginWithParams } from 'markdown-it'
+  const container: PluginWithParams
+  export = container
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 31ce2c409..f42060754 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,7 +1,10 @@
 import { h } from 'vue'
 import Theme from 'vitepress/theme'
-import 'uno.css'
 import HomePage from '../components/HomePage.vue'
+import CodeGroup from './components/CodeGroup.vue'
+import CodeGroupItemVue from './components/CodeGroupItem.vue'
+import type { EnhanceAppContext } from 'vitepress'
+import 'uno.css'
 import './style.css'
 
 export default {
@@ -11,4 +14,8 @@ export default {
       'home-features-after': () => h(HomePage),
     })
   },
+  enhanceApp({ app }: EnhanceAppContext) {
+    app.component('CodeGroup', CodeGroup)
+    app.component('CodeGroupItem', CodeGroupItemVue)
+  },
 }
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
index 1b3a0b79e..8ef35a253 100644
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@@ -4,6 +4,18 @@
 
 ### Installation
 
+:::: code-group
+
+::: code-group-item NPM
+
+```bash
+aaa
+```
+
+:::
+
+::::
+
 ```bash
 npm i -D unplugin-vue-macros
 
diff --git a/docs/package.json b/docs/package.json
index be1399388..a2f94b59c 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -8,6 +8,7 @@
     "serve": "vitepress serve"
   },
   "devDependencies": {
+    "markdown-it-container": "^3.0.0",
     "unocss": "^0.45.29",
     "vitepress": "1.0.0-alpha.20",
     "vue": "^3.2.40"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 637f5fd60..82d9b5c93 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -46,10 +46,12 @@ importers:
 
   docs:
     specifiers:
+      markdown-it-container: ^3.0.0
       unocss: ^0.45.29
       vitepress: 1.0.0-alpha.20
       vue: ^3.2.40
     devDependencies:
+      markdown-it-container: 3.0.0
       unocss: 0.45.29
       vitepress: 1.0.0-alpha.20
       vue: 3.2.40
@@ -5947,6 +5949,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /markdown-it-container/3.0.0:
+    resolution: {integrity: sha512-y6oKTq4BB9OQuY/KLfk/O3ysFhB3IMYoIWhGJEidXt1NQFocFK2sA2t0NYZAMyMShAGL6x5OPIbrmXPIqaN9rw==}
+    dev: true
+
   /mdast-util-from-markdown/0.8.5:
     resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
     dependencies:

From d8b795aca852cacae99af3359a415052cc8968de Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Fri, 14 Oct 2022 02:39:07 +0800
Subject: [PATCH 2/8] feat(docs): add code groups

---
 docs/.vitepress/configs/markdown.ts           |  6 +-
 .../.vitepress/theme/components/CodeGroup.vue | 80 +++++++++++++++++--
 .../theme/components/CodeGroupItem.vue        | 23 +++++-
 docs/guide/getting-started.md                 |  8 ++
 docs/package.json                             |  4 +-
 docs/tsconfig.json                            | 29 +++++--
 docs/unocss.config.ts                         |  3 +-
 docs/vite.config.ts                           |  4 +-
 pnpm-lock.yaml                                | 27 ++++++-
 9 files changed, 156 insertions(+), 28 deletions(-)

diff --git a/docs/.vitepress/configs/markdown.ts b/docs/.vitepress/configs/markdown.ts
index 84cd7cab9..2f5026575 100644
--- a/docs/.vitepress/configs/markdown.ts
+++ b/docs/.vitepress/configs/markdown.ts
@@ -11,11 +11,7 @@ import type { MarkdownOptions } from 'vitepress'
  */
 export const markdownConfig: MarkdownOptions = {
   lineNumbers: true,
-  // material-palenight
-  theme: {
-    light: 'vitesse-light',
-    dark: 'vitesse-dark',
-  },
+  theme: 'material-palenight',
   config: (md) => {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     md.use(useCodeGroup.container, useCodeGroup.type, {
diff --git a/docs/.vitepress/theme/components/CodeGroup.vue b/docs/.vitepress/theme/components/CodeGroup.vue
index fb261f776..9ca15643e 100644
--- a/docs/.vitepress/theme/components/CodeGroup.vue
+++ b/docs/.vitepress/theme/components/CodeGroup.vue
@@ -1,7 +1,73 @@
-<script setup lang="ts"></script>
-<template>
-  <div>Code Group</div>
-  <div>
-    <slot />
-  </div>
-</template>
+<script lang="tsx">
+import { defineComponent, ref } from 'vue'
+import type { Component } from 'vue'
+export default defineComponent({
+  name: 'CodeGroup',
+  setup(_, { slots }) {
+    const currentIndex = ref(0)
+    return () => {
+      // use jsx instead of template because we need to change slots
+      // so jsx could handle but template not
+      const items = (slots.default?.() ?? [])
+        .filter((vnode) => (vnode.type as Component).name === 'CodeGroupItem')
+        .map((vnode) => {
+          vnode.props = vnode.props ?? {}
+          return vnode
+        })
+
+      items.forEach((item, index) => {
+        item.props!.active = index === currentIndex.value
+      })
+
+      return (
+        <div rounded="2" overflow="hidden" my="4" w="full">
+          <div
+            w="full"
+            flex="~"
+            justify="start"
+            items="center"
+            gap="10px"
+            h="12"
+            dark:bg="#27272A"
+            bg="#F5F5F5"
+            px="3"
+            py="4"
+            box="border"
+          >
+            {items.map((item, index) => (
+              <div
+                key={index}
+                cursor="pointer"
+                text="sm black"
+                px="2"
+                py="5px"
+                tracking="tight"
+                transition="colors"
+                rounded="6px"
+                box="border"
+                class={[
+                  'dark:color-white hover:bg-#E5E5E5 dark:hover:bg-#3A3A3D',
+                  {
+                    active: index === currentIndex.value,
+                  },
+                ]}
+                onClick={() => (currentIndex.value = index)}
+              >
+                {item.props?.title}
+              </div>
+            ))}
+          </div>
+          <div>{items}</div>
+        </div>
+      )
+    }
+  },
+})
+</script>
+<!-- <template /> -->
+
+<style scoped>
+.active {
+  --at-apply: dark:bg-#3f3f46 bg-#e6e6e6;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/CodeGroupItem.vue b/docs/.vitepress/theme/components/CodeGroupItem.vue
index b86c830f2..46c4f64ad 100644
--- a/docs/.vitepress/theme/components/CodeGroupItem.vue
+++ b/docs/.vitepress/theme/components/CodeGroupItem.vue
@@ -1,6 +1,21 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineOptions({
+  name: 'CodeGroupItem',
+  inheritAttrs: false,
+})
+
+defineProps<{
+  title: string
+  active: boolean
+}>()
+</script>
 <template>
-  <div>Code Group Item</div>
-  <div><slot /></div>
+  <div v-if="active" class="content"><slot /></div>
 </template>
-<style scoped></style>
+<style scoped>
+.content :deep(div[class*='language-']) {
+  border-radius: 0;
+  border-top: none;
+  margin: 0;
+}
+</style>
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
index 8ef35a253..91730b056 100644
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@@ -14,6 +14,14 @@ aaa
 
 :::
 
+::: code-group-item Yarn
+
+```bash
+bbb
+```
+
+:::
+
 ::::
 
 ```bash
diff --git a/docs/package.json b/docs/package.json
index a2f94b59c..395e9d7fd 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -8,9 +8,11 @@
     "serve": "vitepress serve"
   },
   "devDependencies": {
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
     "markdown-it-container": "^3.0.0",
     "unocss": "^0.45.29",
+    "unplugin-vue-define-options": "workspace:^",
     "vitepress": "1.0.0-alpha.20",
     "vue": "^3.2.40"
   }
-}
+}
\ No newline at end of file
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index d5624d4a8..fe8f7b6c5 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -3,9 +3,13 @@
     "baseUrl": ".",
     "module": "esnext",
     "target": "esnext",
-    "lib": ["DOM", "ESNext"],
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
     "strict": true,
     "jsx": "preserve",
+    "jsxImportSource": "",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "moduleResolution": "node",
@@ -13,11 +17,24 @@
     "noUnusedLocals": true,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": ["vite/client", "vitepress"],
+    "types": [
+      "vite/client",
+      "vitepress",
+      "unplugin-vue-define-options/macros-global"
+    ],
     "paths": {
-      "~/*": ["src/*"]
+      "~/*": [
+        "src/*"
+      ]
     }
   },
-  "include": ["./*.ts", "./.vitepress/**/*.ts", "./.vitepress/**/*.vue"],
-  "exclude": ["dist", "node_modules"]
-}
+  "include": [
+    "./*.ts",
+    "./.vitepress/**/*.ts",
+    "./.vitepress/**/*.vue"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/docs/unocss.config.ts b/docs/unocss.config.ts
index aeb9a12c8..13520673e 100644
--- a/docs/unocss.config.ts
+++ b/docs/unocss.config.ts
@@ -1,5 +1,6 @@
-import { presetAttributify, presetUno } from 'unocss'
+import { presetAttributify, presetUno, transformerDirectives } from 'unocss'
 
 export default {
   presets: [presetAttributify(), presetUno()],
+  transformers: [transformerDirectives()],
 }
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
index f9ecb4010..6124ee847 100644
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -1,6 +1,8 @@
 import { defineConfig } from 'vite'
 import Unocss from 'unocss/vite'
+import DefineOptions from 'unplugin-vue-define-options/vite'
+import Jsx from '@vitejs/plugin-vue-jsx'
 
 export default defineConfig({
-  plugins: [Unocss()],
+  plugins: [Unocss(), DefineOptions(), Jsx()],
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 82d9b5c93..df7e95779 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -46,13 +46,17 @@ importers:
 
   docs:
     specifiers:
+      '@vitejs/plugin-vue-jsx': ^2.0.1
       markdown-it-container: ^3.0.0
       unocss: ^0.45.29
+      unplugin-vue-define-options: workspace:^
       vitepress: 1.0.0-alpha.20
       vue: ^3.2.40
     devDependencies:
+      '@vitejs/plugin-vue-jsx': 2.0.1_vue@3.2.40
       markdown-it-container: 3.0.0
       unocss: 0.45.29
+      unplugin-vue-define-options: link:../packages/define-options
       vitepress: 1.0.0-alpha.20
       vue: 3.2.40
 
@@ -523,7 +527,7 @@ packages:
       '@babel/helper-compilation-targets': 7.19.1_@babel+core@7.19.1
       '@babel/helper-module-transforms': 7.19.0
       '@babel/helpers': 7.19.0
-      '@babel/parser': 7.19.1
+      '@babel/parser': 7.19.3
       '@babel/template': 7.18.10
       '@babel/traverse': 7.19.1
       '@babel/types': 7.19.3
@@ -692,6 +696,7 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.19.3
+    dev: false
 
   /@babel/parser/7.19.3:
     resolution: {integrity: sha512-pJ9xOlNWHiy9+FuFP09DEAFbAn4JskgRsVcc169w2xRBC3FRGuQEwjeIMMND9L2zc0iEhO/tGv4Zq+km+hxNpQ==}
@@ -751,7 +756,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/parser': 7.19.1
+      '@babel/parser': 7.19.3
       '@babel/types': 7.19.3
 
   /@babel/traverse/7.19.1:
@@ -764,7 +769,7 @@ packages:
       '@babel/helper-function-name': 7.19.0
       '@babel/helper-hoist-variables': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.19.1
+      '@babel/parser': 7.19.3
       '@babel/types': 7.19.3
       debug: 4.3.4
       globals: 11.12.0
@@ -2748,6 +2753,22 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /@vitejs/plugin-vue-jsx/2.0.1_vue@3.2.40:
+    resolution: {integrity: sha512-lmiR1k9+lrF7LMczO0pxtQ8mOn6XeppJDHxnpxkJQpT5SiKz4SKhKdeNstXaTNuR8qZhUo5X0pJlcocn72Y4Jg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^3.0.0
+      vue: ^3.0.0
+    dependencies:
+      '@babel/core': 7.19.1
+      '@babel/plugin-syntax-import-meta': 7.10.4_@babel+core@7.19.1
+      '@babel/plugin-transform-typescript': 7.19.1_@babel+core@7.19.1
+      '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.19.1
+      vue: 3.2.40
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@vitejs/plugin-vue/3.1.2_vite@3.1.4+vue@3.2.40:
     resolution: {integrity: sha512-3zxKNlvA3oNaKDYX0NBclgxTQ1xaFdL7PzwF6zj9tGFziKwmBa3Q/6XcJQxudlT81WxDjEhHmevvIC4Orc1LhQ==}
     engines: {node: ^14.18.0 || >=16.0.0}

From 658db159597b7da428c3eb63f23d584ec42be104 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Fri, 14 Oct 2022 02:41:55 +0800
Subject: [PATCH 3/8] chore: add example

---
 docs/guide/getting-started.md | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
index 91730b056..22b13c7f0 100644
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@@ -6,34 +6,32 @@
 
 :::: code-group
 
-::: code-group-item NPM
+::: code-group-item npm
 
 ```bash
-aaa
+npm i -D unplugin-vue-macros
 ```
 
 :::
 
-::: code-group-item Yarn
+::: code-group-item yarn
 
 ```bash
-bbb
+yarn add -D unplugin-vue-macros
 ```
 
 :::
 
-::::
+::: code-group-item pnpm
 
 ```bash
-npm i -D unplugin-vue-macros
-
-# or yarn
-yarn add -D unplugin-vue-macros
-
-# or pnpm
 pnpm add -D unplugin-vue-macros
 ```
 
+:::
+
+::::
+
 #### Vite (first-class support)
 
 ```ts

From 0a4346a5ab5b7b9e55f22a92aa77e2bb07aca194 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Fri, 14 Oct 2022 02:50:22 +0800
Subject: [PATCH 4/8] fix: fix conflect

---
 docs/.vitepress/theme/components/CodeGroup.vue | 1 -
 docs/.vitepress/theme/index.ts                 | 3 +++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/.vitepress/theme/components/CodeGroup.vue b/docs/.vitepress/theme/components/CodeGroup.vue
index 9ca15643e..3714fa181 100644
--- a/docs/.vitepress/theme/components/CodeGroup.vue
+++ b/docs/.vitepress/theme/components/CodeGroup.vue
@@ -64,7 +64,6 @@ export default defineComponent({
   },
 })
 </script>
-<!-- <template /> -->
 
 <style scoped>
 .active {
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index f42060754..f2d6171cd 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -6,6 +6,9 @@ import CodeGroupItemVue from './components/CodeGroupItem.vue'
 import type { EnhanceAppContext } from 'vitepress'
 import 'uno.css'
 import './style.css'
+import CodeGroup from './components/CodeGroup.vue'
+import CodeGroupItemVue from './components/CodeGroupItem.vue'
+import type { EnhanceAppContext } from 'vitepress'
 
 export default {
   ...Theme,

From 8e3b2d6b54b30477991a05d1c9f7145423461269 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Fri, 14 Oct 2022 02:55:59 +0800
Subject: [PATCH 5/8] fix: lint

---
 docs/.vitepress/theme/index.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index f2d6171cd..f42060754 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -6,9 +6,6 @@ import CodeGroupItemVue from './components/CodeGroupItem.vue'
 import type { EnhanceAppContext } from 'vitepress'
 import 'uno.css'
 import './style.css'
-import CodeGroup from './components/CodeGroup.vue'
-import CodeGroupItemVue from './components/CodeGroupItem.vue'
-import type { EnhanceAppContext } from 'vitepress'
 
 export default {
   ...Theme,

From 0f2eca2ec8ce0340545ef3af9e1abf873f83275e Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Fri, 14 Oct 2022 02:56:33 +0800
Subject: [PATCH 6/8] fix: lint err

---
 docs/package.json  |  2 +-
 docs/tsconfig.json | 22 +++++-----------------
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 395e9d7fd..0e4d10023 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,4 +15,4 @@
     "vitepress": "1.0.0-alpha.20",
     "vue": "^3.2.40"
   }
-}
\ No newline at end of file
+}
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index fe8f7b6c5..dd3385d2b 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -3,10 +3,7 @@
     "baseUrl": ".",
     "module": "esnext",
     "target": "esnext",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "strict": true,
     "jsx": "preserve",
     "jsxImportSource": "",
@@ -23,18 +20,9 @@
       "unplugin-vue-define-options/macros-global"
     ],
     "paths": {
-      "~/*": [
-        "src/*"
-      ]
+      "~/*": ["src/*"]
     }
   },
-  "include": [
-    "./*.ts",
-    "./.vitepress/**/*.ts",
-    "./.vitepress/**/*.vue"
-  ],
-  "exclude": [
-    "dist",
-    "node_modules"
-  ]
-}
\ No newline at end of file
+  "include": ["./*.ts", "./.vitepress/**/*.ts", "./.vitepress/**/*.vue"],
+  "exclude": ["dist", "node_modules"]
+}

From 31260576b81df419de542506c061114e41c7a3af Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Fri, 14 Oct 2022 03:02:17 +0800
Subject: [PATCH 7/8] chore: remove verbose comments

---
 docs/.vitepress/configs/markdown.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/.vitepress/configs/markdown.ts b/docs/.vitepress/configs/markdown.ts
index 2f5026575..2d2548689 100644
--- a/docs/.vitepress/configs/markdown.ts
+++ b/docs/.vitepress/configs/markdown.ts
@@ -13,7 +13,6 @@ export const markdownConfig: MarkdownOptions = {
   lineNumbers: true,
   theme: 'material-palenight',
   config: (md) => {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
     md.use(useCodeGroup.container, useCodeGroup.type, {
       render: useCodeGroup.render,
     })

From 9781dcebce49478c4dbbd1ae6a082380a91006a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Fri, 14 Oct 2022 03:45:13 +0800
Subject: [PATCH 8/8] refactor: improve

---
 docs/.vitepress/config.ts                    | 5 ++---
 docs/.vitepress/configs/index.ts             | 1 +
 docs/.vitepress/configs/markdown.ts          | 6 +-----
 docs/.vitepress/{data.ts => configs/navs.ts} | 0
 docs/package.json                            | 4 ++--
 docs/tsconfig.json                           | 1 -
 package.json                                 | 2 ++
 pnpm-lock.yaml                               | 4 ++--
 8 files changed, 10 insertions(+), 13 deletions(-)
 rename docs/.vitepress/{data.ts => configs/navs.ts} (100%)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index d70445fcf..942538da0 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,6 +1,5 @@
 import { defineConfig } from 'vitepress'
-import { nav, sidebar } from './data'
-import * as config from './configs'
+import { markdownConfig, nav, sidebar } from './configs'
 
 export default defineConfig({
   lang: 'en-US',
@@ -38,7 +37,7 @@ gtag('config', 'G-29NKGSL23C');`,
   description: 'Explore and extend more macros and syntax sugar to Vue.',
   lastUpdated: true,
   cleanUrls: 'with-subfolders',
-  markdown: config.markdownConfig,
+  markdown: markdownConfig,
 
   vue: {
     reactivityTransform: true,
diff --git a/docs/.vitepress/configs/index.ts b/docs/.vitepress/configs/index.ts
index fabf34dbd..7806229f2 100644
--- a/docs/.vitepress/configs/index.ts
+++ b/docs/.vitepress/configs/index.ts
@@ -1 +1,2 @@
+export * from './navs'
 export * from './markdown'
diff --git a/docs/.vitepress/configs/markdown.ts b/docs/.vitepress/configs/markdown.ts
index 2d2548689..4893942e1 100644
--- a/docs/.vitepress/configs/markdown.ts
+++ b/docs/.vitepress/configs/markdown.ts
@@ -1,8 +1,4 @@
-// import { useCodeGroup, useCodeGroupItem } from '../theme/components/markdown'
-import {
-  useCodeGroup,
-  useCodeGroupItem,
-} from '../theme/components/markdown/index'
+import { useCodeGroup, useCodeGroupItem } from '../theme/components/markdown'
 import type { MarkdownOptions } from 'vitepress'
 
 /**
diff --git a/docs/.vitepress/data.ts b/docs/.vitepress/configs/navs.ts
similarity index 100%
rename from docs/.vitepress/data.ts
rename to docs/.vitepress/configs/navs.ts
diff --git a/docs/package.json b/docs/package.json
index 0e4d10023..2aa0c8c9c 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,8 +11,8 @@
     "@vitejs/plugin-vue-jsx": "^2.0.1",
     "markdown-it-container": "^3.0.0",
     "unocss": "^0.45.29",
-    "unplugin-vue-define-options": "workspace:^",
-    "vitepress": "1.0.0-alpha.20",
+    "unplugin-vue-define-options": "npm:unplugin-vue-define-options",
+    "vitepress": "^1.0.0-alpha.20",
     "vue": "^3.2.40"
   }
 }
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index dd3385d2b..af0e921ea 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -6,7 +6,6 @@
     "lib": ["DOM", "ESNext"],
     "strict": true,
     "jsx": "preserve",
-    "jsxImportSource": "",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "moduleResolution": "node",
diff --git a/package.json b/package.json
index 9a366b6f5..15a4ae125 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,8 @@
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [
+        "vite",
+        "@algolia/client-search",
         "@yarnpkg/core"
       ]
     }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index df7e95779..d4abeb2fa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,8 +49,8 @@ importers:
       '@vitejs/plugin-vue-jsx': ^2.0.1
       markdown-it-container: ^3.0.0
       unocss: ^0.45.29
-      unplugin-vue-define-options: workspace:^
-      vitepress: 1.0.0-alpha.20
+      unplugin-vue-define-options: npm:unplugin-vue-define-options
+      vitepress: ^1.0.0-alpha.20
       vue: ^3.2.40
     devDependencies:
       '@vitejs/plugin-vue-jsx': 2.0.1_vue@3.2.40