vitepress-plugin-sfc 2.0.0-beta.1 → 2.0.0-beta.2

package/README.md

@@ -1,156 +1,51 @@
-# Vitepress Plugin Component
+# VitePress Plugin SFC
 
-[简体中文](README-zh-CN.md)
+[Documentation](https://vitepress-plugin-sfc-playgrou.vercel.app/)
 
-A VitePress plugin to display Vue components in your documentation with an automatically generated two-tab interface: one for the component's preview and another to show its source code.
+Allows you to write Vue SFC within Markdown files and render them in VitePress.
 
-## Features
+## Install
 
-- [x] **Component Preview** - Directly view the rendered output of your component within the documentation.
-- [x] **Syntax Highlighting** - Compatible with VitePress's syntax highlighting.
-- [x] **Code Copying** - One-click copy for the component's source code.
-- [x] **Dark Mode Support** - Automatically adapts to VitePress's light and dark themes.
-- [x] **Lightweight** - No complex dependencies, only `2kb` / gzip:`1kb`.
-- [x] **Internationalization Support** - Default support for Chinese and English, configurable for other languages.
-
-## Installation
-
-```bash
-npm install vitepress-plugin-sfc --save-dev
+```shell
+npm install -D vitepress-plugin-sfc
 ```
 
 ## Configuration
 
-### Add Markdown Plugin
-
-Add the plugin to your VitePress configuration file (`.vitepress/config.js` or `.vitepress/config.ts`):
+Configure it in `.vitepress/config.ts`:
 
 ```ts
-import { defineConfig } from 'vitepress'
-import { componentViewMarkdownPlugin } from 'vitepress-plugin-sfc'
+import { defineConfig } from "vitepress";
+import { sfcPlugin, sfcRegistryVitePlugin } from "vitepress-plugin-sfc";
 
 export default defineConfig({
-  // ... other configurations
-
+  // ...other configurations
   markdown: {
     config: (md) => {
-      md.use(componentViewMarkdownPlugin)
-    }
+      md.use(sfcPlugin);
+    },
   },
-})
-```
-
-### Configure Client
-
-VitePress resolves themes from `.vitepress/theme/index.js` or `.vitepress/theme/index.ts`, and we configure the client here as well.
-
-```ts
-// theme/index.ts
-import DefaultTheme from "vitepress/theme";
-import { enhanceAppWithComponentView } from 'vitepress-plugin-sfc/client'
-
-export default {
-  extends: DefaultTheme, // Use VitePress's default theme
-  enhanceApp({ app }) {
-    enhanceAppWithComponentView(app)
-  }
-}
-```
-
-The `enhanceAppWithComponentView` function automatically registers the preview component on the passed root component.
-
-### Configure Internationalization
-
-The plugin gets language configuration from the `locales.lang` option in VitePress and supports `zh` and `en` languages by default. You can also manually configure other languages or even override the default languages.
-
-Configure internationalization in the client configuration:
-
-```ts
-export default {
-  // Other configurations
-  enhanceApp({ app }) {
-    enhanceAppWithComponentView(app, {
-      // Configure corresponding languages through localeMappings option
-      localeMappings: {
-        fr: {
-          previewLabel: "foo",
-          codeLabel: "bar",
-        },
-      },
-    });
+  vite: {
+    plugins: [sfcRegistryVitePlugin()],
   },
-};
-```
-
-## Example
-
-This is an example of button SFC:
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const count = ref(0)
-</script>
-
-<template>
-  <button class="my-button" @click="count++">
-    Clicked {{ count }} times
-  </button>
-</template>
-
-<style>
-.my-button {
-  background-color: #3eaf7c;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-</style>
+});
 ```
 
-VitePress supports [importing Vue components in markdown files](https://vitepress.dev/guide/using-vue#using-components), we import the Button component in the same way:
-
-```bash
-<script setup>
-import Button from './Button.vue'
-</script>
-```
-
-Then use the specified syntax:
-
-```markdown
-::: component-view
-<Button />
-:::
-```
+## Usage
 
-Here is the complete example code in a markdown file:
+Wrap **valid** Vue SFC content with `:::sfc`:
 
 ```markdown
+:::sfc
 <script setup>
-import Button from './Button.vue'
+import { ref } from "vue"
+const msg = ref("");
 </script>
 
-# This will render a button with click count and a tab bar showing **Preview** and **Source Code**
-
-::: component-view
-<Button />
+<template>
+<input v-model="msg" placeholder="Please enter text" />
+</template>
 :::
-
-##
 ```
 
-You can view the component's preview and source code in the tabs above.
-
-You can check out the [live demo here](https://vitepress-plugin-sfc-playgrou.vercel.app/).
-
-## Notes
-
-- Component paths should be relative to the project root.
-- Current version supports simple Vue components; complex components might require additional configuration. - Components must be valid Single File Components (SFCs).
-## License
-
 [MIT](LICENSE)

package/dist/index.d.mts

@@ -1,5 +1,5 @@
+import { MarkdownEnv, Plugin } from "vitepress";
 import LinkifyIt from "linkify-it";
-import { Plugin } from "vitepress";
 
 //#region \0rolldown/runtime.js
 declare namespace index_d_exports$1 {
@@ -1065,16 +1065,20 @@ interface SFC {
   content: string;
   hash: string;
   importer: string;
+  markupParams: MarkupParams;
 }
-interface PluginOptions$1 {
-  render?: boolean;
+interface MarkdownEnvExt extends MarkdownEnv {
+  sfcs: SFC[];
+  __matched_sfc_set__: Set<string>;
 }
-declare const sfcPlugin: PluginWithOptions<PluginOptions$1>;
+interface MarkupParams {
+  showSource: boolean;
+  filepath?: string;
+  component?: string;
+}
+declare const sfcPlugin: PluginSimple;
 //#endregion
 //#region src/node/vite.d.ts
-interface PluginOptions {
-  md: MarkdownIt;
-}
-declare function sfcRegistryVitePlugin(options: PluginOptions): Plugin;
+declare function sfcRegistryVitePlugin(): Promise<Plugin>;
 //#endregion
-export { SCRIPT_RE, SFC, SFC_IMPORTER_RE, sfcPlugin, sfcRegistryVitePlugin };
+export { MarkdownEnvExt, MarkupParams, SCRIPT_RE, SFC, SFC_IMPORTER_RE, sfcPlugin, sfcRegistryVitePlugin };

package/dist/index.mjs

@@ -1,5 +1,9 @@
-import{Buffer as e}from"node:buffer";import t from"node:crypto";function n(e,t,n){function r(e){return e.trim().split(` `,2)[0]===t}function i(e,n,r,i,a){return e[n].nesting===1&&e[n].attrJoin(`class`,t),a.renderToken(e,n,r,i,a)}n||={};let a=n.marker||`:`,o=a.charCodeAt(0),s=a.length,c=n.validate||r,l=n.render||i;function u(e,n,r,i){let l,u=!1,d=e.bMarks[n]+e.tShift[n],f=e.eMarks[n];if(o!==e.src.charCodeAt(d))return!1;for(l=d+1;l<=f&&a[(l-d)%s]===e.src[l];l++);let p=Math.floor((l-d)/s);if(p<3)return!1;l-=(l-d)%s;let m=e.src.slice(d,l),h=e.src.slice(l,f);if(!c(h,m))return!1;if(i)return!0;let g=n;for(;g++,!(g>=r||(d=e.bMarks[g]+e.tShift[g],f=e.eMarks[g],d<f&&e.sCount[g]<e.blkIndent));)if(o===e.src.charCodeAt(d)&&!(e.sCount[g]-e.blkIndent>=4)){for(l=d+1;l<=f&&a[(l-d)%s]===e.src[l];l++);if(!(Math.floor((l-d)/s)<p)&&(l-=(l-d)%s,l=e.skipSpaces(l),!(l<f))){u=!0;break}}let _=e.parentType,v=e.lineMax;e.parentType=`container`,e.lineMax=g;let y=e.push(`container_`+t+`_open`,`div`,1);y.markup=m,y.block=!0,y.info=h,y.map=[n,g],e.md.block.tokenize(e,n+1,g);let b=e.push(`container_`+t+`_close`,`div`,-1);return b.markup=e.src.slice(d,l),b.block=!0,e.parentType=_,e.lineMax=v,e.line=g+ +!!u,!0}e.block.ruler.before(`fence`,`container_`+t,u,{alt:[`paragraph`,`reference`,`blockquote`,`list`]}),e.renderer.rules[`container_`+t+`_open`]=l,e.renderer.rules[`container_`+t+`_close`]=l}const r=/<script\b[^>]*>([\s\S]*?)<\/script>/,i=/^virtual:VP_SFC_/;function a(e){return t.createHash(`md5`).update(e).digest(`hex`)}function o(t,o){let{render:s=!0}=o||{};t.use(n,`sfc`,{validate:e=>RegExp(`^sfc`).test(e.trim()),render:(n,r)=>{if(!s)return;let i=n[r];if(i.nesting===1){let{content:n,name:r}=i.meta?.sfc||{},a=t.options.highlight?.(n,`vue`,``)??``,o=`<template #v3><${r} /></template>`;return`<ComponentView highlightedSrc="${e.from(a).toString(`base64`)}">\n${o}`}else return`</ComponentView>`}}),t.core.ruler.after(`normalize`,`inject_script`,e=>{let t=`
-<script setup><\/script>
-`;if(!new RegExp(r,`gi`).test(e.src)){let n=e.src.replace(/---([\s\S]*?)---/gi,e=>e+t);e.src=n===e.src?n+t:n}}),t.core.ruler.after(`block`,`sfc_extract_and_import`,e=>{let t=e.src.split(/\r?\n/),n=[],o,s,c=(e,n)=>{let{type:r,nesting:o,map:s}=e;if(r!==`container_sfc_open`||o!==1||!s)return;let[c,l]=s,u=t.slice(c+1,l).join(`
-`),d=a(u),f=`VP_SFC_${d}`,p=`virtual:${f}.vue`;if(!i.test(p))throw Error(`[vitepress-plugin-sfc] Plugin-self Error: Unmatched importer syntax`);let m={content:u,name:f,hash:d,importer:p};return n?.(m),m};for(let t of e.tokens){let{type:e,content:i,map:a}=t;!o&&e===`html_block`&&new RegExp(r,`i`).test(i)&&(o=t);let l=c(t,e=>{t.meta={...t.meta??{},sfc:e},s=t});if(l&&n.push(l),s&&s!==t){let[e]=a||[-1],[n,r]=s.map;e>n&&e<r?t.content=``:s=void 0}}e.env.sfcs=n;let l=n.map(({name:e,importer:t})=>`import ${e} from '${t}'`).join(`
-`);l&&o&&(o.content=o.content.replace(/<script\b[^>]*>([\s\S]*?)<\/script>/i,(e,t)=>e.replace(t,`\n${l}\n`+t)))})}const s=o;function c(e){let{md:t}=e||{},n=new Map;return{name:`vite-plugin-sfc-registry`,enforce:`pre`,resolveId:{order:`pre`,filter:{id:new RegExp(i,`gi`)},handler(e){if(n.has(e))return e}},load:{order:`pre`,filter:{id:new RegExp(i,`gi`)},handler(e){if(n.has(e))return n.get(e)}},transform(e,r){if(/.md$/gi.test(r)){let r={};t.use(s,{render:!1}).render(e,r);let i=r.sfcs||[];for(let{importer:e,content:t}of i)n.set(e,t)}}}}export{r as SCRIPT_RE,i as SFC_IMPORTER_RE,s as sfcPlugin,c as sfcRegistryVitePlugin};
+import e from"node:crypto";import{createMarkdownRenderer as t}from"vitepress";function n(e,t,n){function r(e){return e.trim().split(` `,2)[0]===t}function i(e,n,r,i,a){return e[n].nesting===1&&e[n].attrJoin(`class`,t),a.renderToken(e,n,r,i,a)}n||={};let a=n.marker||`:`,o=a.charCodeAt(0),s=a.length,c=n.validate||r,l=n.render||i;function u(e,n,r,i){let l,u=!1,d=e.bMarks[n]+e.tShift[n],f=e.eMarks[n];if(o!==e.src.charCodeAt(d))return!1;for(l=d+1;l<=f&&a[(l-d)%s]===e.src[l];l++);let p=Math.floor((l-d)/s);if(p<3)return!1;l-=(l-d)%s;let m=e.src.slice(d,l),h=e.src.slice(l,f);if(!c(h,m))return!1;if(i)return!0;let g=n;for(;g++,!(g>=r||(d=e.bMarks[g]+e.tShift[g],f=e.eMarks[g],d<f&&e.sCount[g]<e.blkIndent));)if(o===e.src.charCodeAt(d)&&!(e.sCount[g]-e.blkIndent>=4)){for(l=d+1;l<=f&&a[(l-d)%s]===e.src[l];l++);if(!(Math.floor((l-d)/s)<p)&&(l-=(l-d)%s,l=e.skipSpaces(l),!(l<f))){u=!0;break}}let _=e.parentType,v=e.lineMax;e.parentType=`container`,e.lineMax=g;let y=e.push(`container_`+t+`_open`,`div`,1);y.markup=m,y.block=!0,y.info=h,y.map=[n,g],e.md.block.tokenize(e,n+1,g);let b=e.push(`container_`+t+`_close`,`div`,-1);return b.markup=e.src.slice(d,l),b.block=!0,e.parentType=_,e.lineMax=v,e.line=g+ +!!u,!0}e.block.ruler.before(`fence`,`container_`+t,u,{alt:[`paragraph`,`reference`,`blockquote`,`list`]}),e.renderer.rules[`container_`+t+`_open`]=l,e.renderer.rules[`container_`+t+`_close`]=l}const r=/<script\b[^>]*>([\s\S]*?)<\/script>/,i=/^virtual:VP_SFC_/;function a(){return{content:`<script setup>
+<\/script>`,tagOpen:`<script setup>`,type:`script`,contentStripped:`
+`,tagClose:`<\/script>`}}function o(t){return e.createHash(`sha256`).update(t).digest(`hex`)}function s(e){if(!e)return{};let t=e.split(`,`);return Object.fromEntries(t.map(e=>{let[,t,n]=e.match(/([^=]+)=(.*)/)||[];return e===`showSource`||t===`showSource`&&n===`true`?[`showSource`,!0]:[t,n]}))}function c(e){e.use(n,`sfc`,{validate:e=>RegExp(`^sfc`).test(e.trim()),render:(e,t,n,r)=>{let{__matched_sfc_set__:i,sfcBlocks:o}=r;o.scripts.length||o.scripts.push(a());let[s]=o.scripts??[],c=e[t];if(c.nesting===1){let{hash:e,name:t,content:r,markupParams:a,importer:o}=c.meta.sfc;if(!i.has(e)){let{tagOpen:n,tagClose:r,contentStripped:a}=s,c=a+`// [vitepress-plugin-sfc] injected vue virtual imports
+// REGION START
+import ${t} from '${o}'
+// REGION END
+`;s.contentStripped=c,s.content=n+c+r,i.add(e)}return a.showSource?`<ComponentView>\n<template #v3><${t} /></template>\n<template #highlight>${n.highlight(r,`vue`,``)}</template>\n</ComponentView>\n`:`<${t} />`}else return``}}),e.core.ruler.after(`block`,`extract_sfc`,e=>{let t=e.src.split(`
+`),n=e.env.sfcs||[],r;function a(e){let{type:n,nesting:r,map:a,info:c}=e;if(n!==`container_sfc_open`||r!==1||!a)return;let[l,u]=a,d=t.slice(l+1,u).join(`
+`),f=o(d),p=`VP_SFC_${f}`,m=`virtual:${p}.vue`;if(!i.test(m))throw Error(`[vitepress-plugin-sfc] Plugin-self Error: Unmatched importer syntax`);let[,h]=(c??``).split(` `);return{content:d,name:p,hash:f,importer:m,markupParams:s(h)}}for(let t of e.tokens){let{map:e}=t,i=a(t);if(i){r=t,t.meta={...t.meta,sfc:i};let e=n.some(({name:e})=>i?.name===e);i&&!e&&n.push(i)}if(r&&r!==t){let[n]=e||[-1],[i,a]=r.map;n>i&&n<a?t.content=``:r=void 0}}let c=e.env;c.sfcs=[...n],c.__matched_sfc_set__=new Set})}const l=c;async function u(){let e=await t(``,{html:!0});e.use(l);let n=new Map;return{name:`vite-plugin-sfc-registry`,enforce:`pre`,resolveId:{filter:{id:new RegExp(i,`gi`)},handler(e){if(n.has(e))return e}},load:{filter:{id:new RegExp(i,`gi`)},handler(e){if(n.has(e))return n.get(e)}},transform(t,r){if(/.md$/gi.test(r)){let r={};e.render(t,r);let i=r.sfcs||[];for(let{importer:e,content:t}of i)n.set(e,t)}}}}export{r as SCRIPT_RE,i as SFC_IMPORTER_RE,l as sfcPlugin,u as sfcRegistryVitePlugin};

package/package.json

@@ -1,10 +1,30 @@
 {
   "name": "vitepress-plugin-sfc",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "VitePress plugin that renders inline Vue SFC with tabs showing preview and source code",
+  "keywords": [
+    "component",
+    "plugin",
+    "tabs",
+    "vitepress",
+    "vitepress plugin",
+    "vitepress-plugin",
+    "vue"
+  ],
+  "license": "MIT",
+  "author": "hotdogc1017@gmail.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/heroui-vue/vitepress-plugin-sfc"
+  },
+  "files": [
+    "dist",
+    "src/client"
+  ],
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": {
       "types": "./dist/index.d.mts",
@@ -12,50 +32,34 @@
     },
     "./client": "./src/client/index.ts"
   },
-  "files": [
-    "dist",
-    "src/client"
-  ],
-  "types": "./dist/index.d.mts",
-  "scripts": {
-    "dev": "tsdown -w",
-    "build": "tsdown --minify",
-    "bump": "bumpp --sign",
-    "pub": "npm run build && npm publish --registry=https://registry.npmjs.org/",
-    "dev:docs": "pnpm -C playground dev"
-  },
-  "keywords": [
-    "vitepress",
-    "vitepress-plugin",
-    "vitepress plugin",
-    "plugin",
-    "vue",
-    "component",
-    "tabs"
-  ],
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "author": "hotdogc1017@gmail.com",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/heroui-vue/vitepress-plugin-sfc"
-  },
   "devDependencies": {
-    "@babel/parser": "8.0.0-rc.5",
-    "@babel/traverse": "8.0.0-rc.5",
-    "@rolldown/pluginutils": "^1.0.1",
     "@types/markdown-it": "^14.2.0",
     "@types/markdown-it-container": "^2.0.10",
     "@types/node": "^22.17.0",
     "bumpp": "^10.1.0",
     "markdown-it-container": "^4.0.0",
+    "oxfmt": "^0.73.0",
+    "oxlint": "^1.88.0",
     "tsdown": "0.21.10",
     "typescript": "^5.8.3",
     "unplugin-vue": "^6.2.0",
     "vitepress": "next",
+    "vitest": "^5.0.4",
     "vue": "^3.5.0"
+  },
+  "scripts": {
+    "dev": "tsdown -w",
+    "build": "tsdown --minify",
+    "bump": "bumpp --sign",
+    "pub": "npm run build && npm publish --registry=https://registry.npmjs.org/",
+    "dev:docs": "pnpm -C playground dev",
+    "fmt": "oxfmt",
+    "fmt:check": "oxfmt --check",
+    "lint": "oxlint",
+    "t": "vitest run tests/output.test.ts"
   }
-}
+}

package/src/client/ComponentView.vue

@@ -6,176 +6,160 @@ import { useLocaleMappings } from "./useLocaleMappings";
 import type { LocaleMappings } from "./useLocaleMappings";
 
 const localMappings: LocaleMappings = {
-    en: {
-        previewLabel: "Preview",
-        codeLabel: "Source Code",
-    },
-    zh: {
-        previewLabel: "预览",
-        codeLabel: "源代码",
-    },
+  en: {
+    previewLabel: "Preview",
+    codeLabel: "Source Code",
+  },
+  zh: {
+    previewLabel: "预览",
+    codeLabel: "源代码",
+  },
 };
 
 const props = defineProps<{
-    src: string;
-    highlightedSrc?: string;
-    previewLabel?: string;
-    codeLabel?: string;
+  src: string;
+  highlightedSrc?: string;
+  previewLabel?: string;
+  codeLabel?: string;
 }>();
 
 const { lang } = useData();
 const { get } = useLocaleMappings();
 
 const labels = computed(() => {
-    const mappings = { ...localMappings, ...(get() ?? {}) };
-    // Default to English mappings if no locale-specific mappings are found
-    const { previewLabel: preview, codeLabel: code } =
-        mappings[lang.value] ?? localMappings.en;
-    return [
-        {
-            label: preview,
-            value: "preview",
-        },
-        { label: code, value: "code" },
-    ] as const;
+  const mappings = { ...localMappings, ...get() };
+  // Default to English mappings if no locale-specific mappings are found
+  const { previewLabel: preview, codeLabel: code } = mappings[lang.value] ?? localMappings.en;
+  return [
+    {
+      label: preview,
+      value: "preview",
+    },
+    { label: code, value: "code" },
+  ] as const;
 });
 
 const decodedSrc = ref("");
 const highlightedSrc = ref("");
 const activedTab = ref<"preview" | "code">("preview");
-const copied = ref(false);
 const tabGroupId = useId();
 
 watch(
-    [() => props.src, () => props.highlightedSrc],
-    async ([src, highlight = ""]) => {
-        try {
-            decodedSrc.value = atob(src);
-        } catch (e) {
-            decodedSrc.value = src;
-        }
-
-        try {
-            highlightedSrc.value = atob(highlight);
-        } catch (e) {
-            highlightedSrc.value = highlight;
-        }
-
-        try {
-            atob(src);
-        } catch (e) {}
-    },
-    {
-        immediate: true,
-    },
+  [() => props.src, () => props.highlightedSrc],
+  async ([src, highlight = ""]) => {
+    try {
+      decodedSrc.value = atob(src);
+    } catch (e) {
+      decodedSrc.value = src;
+    }
+
+    try {
+      highlightedSrc.value = atob(highlight);
+    } catch (e) {
+      highlightedSrc.value = highlight;
+    }
+
+    try {
+      atob(src);
+    } catch (e) {}
+  },
+  {
+    immediate: true,
+  },
 );
-
-async function copyCode() {
-    await navigator.clipboard.writeText(decodedSrc.value);
-    copied.value = true;
-    setTimeout(() => {
-        copied.value = false;
-    }, 2000);
-}
 </script>
 
 <template>
-    <div class="vp-component-tabs">
-        <header>
-            <template v-for="{ label, value } in labels" :key="value">
-                <input
-                    :id="`tab-${tabGroupId}-${value}`"
-                    type="radio"
-                    :name="`vp-component-tabs-${tabGroupId}`"
-                    style="position: fixed; opacity: 0; pointer-events: none"
-                    :data-checked="activedTab === value"
-                />
-                <label
-                    :for="`tab-${tabGroupId}-${value}`"
-                    @click="activedTab = value"
-                    >{{ label }}</label
-                >
-            </template>
-        </header>
-
-        <main v-show="activedTab === 'preview'">
-            <!-- <slot /> -->
-            <slot name="v3" />
-        </main>
-
-        <div
-            v-show="activedTab === 'code'"
-            :class="`language-vue${activedTab === 'code' ? ' active' : ''}`"
-            style="margin: 0px"
-        >
-            <button title="" class="copy"></button>
-            <span class="lang">Vue</span>
-            <span v-html="highlightedSrc" />
-        </div>
+  <div class="vp-component-tabs">
+    <header>
+      <template v-for="{ label, value } in labels" :key="value">
+        <input
+          :id="`tab-${tabGroupId}-${value}`"
+          type="radio"
+          :name="`vp-component-tabs-${tabGroupId}`"
+          style="position: fixed; opacity: 0; pointer-events: none"
+          :data-checked="activedTab === value" />
+        <label :for="`tab-${tabGroupId}-${value}`" @click="activedTab = value">{{ label }}</label>
+      </template>
+    </header>
+
+    <main v-show="activedTab === 'preview'">
+      <!-- <slot /> -->
+      <slot name="v3" />
+    </main>
+
+    <div
+      v-show="activedTab === 'code'"
+      :class="`language-vue${activedTab === 'code' ? ' active' : ''}`"
+      style="margin: 0px">
+      <button title="copy source code" class="copy"></button>
+      <span class="lang">Vue</span>
+      <slot name="highlight" />
     </div>
+  </div>
 </template>
 
 <style>
 .vp-component-tabs {
-    margin: 16px 0;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: min-content 1fr;
-    row-gap: 16px;
+  margin: 16px 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: min-content 1fr;
+  row-gap: 16px;
 }
 
 .vp-component-tabs > header {
-    display: flex;
-    position: relative;
-    border-radius: 8px;
-    overflow-x: auto;
-    overflow-y: hidden;
+  display: flex;
+  position: relative;
+  border-radius: 8px;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
 .vp-component-tabs > header input + label {
-    box-sizing: border-box;
-    display: inline-block;
-    position: relative;
-    padding: 8px 12px;
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--vp-code-tab-text-color);
-    white-space: nowrap;
-    cursor: pointer;
-    transition:
-        color 0.25s,
-        background-color 0.25s;
+  box-sizing: border-box;
+  display: inline-block;
+  position: relative;
+  padding: 8px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-code-tab-text-color);
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color 0.25s,
+    background-color 0.25s;
 }
 
 .vp-component-tabs > header input + label::after {
-    content: "";
-    position: absolute;
-    height: 4px;
-    border-radius: 2px;
-    left: 8px;
-    right: 8px;
-    bottom: -1px;
-    transition: background-color 0.25s;
+  content: "";
+  position: absolute;
+  height: 4px;
+  border-radius: 2px;
+  left: 8px;
+  right: 8px;
+  bottom: -1px;
+  transition: background-color 0.25s;
 }
 .vp-component-tabs > header input[data-checked="true"] + label::after {
-    background-color: var(--vp-code-tab-active-bar-color);
+  background-color: var(--vp-code-tab-active-bar-color);
 }
 .vp-component-tabs > header input[data-checked="true"] + label,
 .vp-component-tabs > header label:hover {
-    color: var(--vp-code-tab-active-text-color);
+  color: var(--vp-code-tab-active-text-color);
 }
 
 .vp-component-tabs > main {
-    padding: 20px;
-    background-color: var(--vp-nav-bg-color);
-    border-radius: 8px;
-    outline: 1px solid var(--vp-c-divider);
+  padding: 20px;
+  background-color: var(--vp-nav-bg-color);
+  border-radius: 8px;
+  outline: 1px solid var(--vp-c-divider);
 }
 
 .vp-component-tabs > section {
-    background-color: var(--vp-code-block-bg);
-    border-radius: 8px;
-    padding: 24px;
-    overflow: auto;
+  background-color: var(--vp-code-block-bg);
+  border-radius: 8px;
+  padding: 24px;
+  overflow: auto;
 }
 </style>

package/src/client/useLocaleMappings.ts

@@ -1,14 +1,9 @@
 import { provide, inject, getCurrentInstance } from "vue";
 import type { App } from "vue";
 
-export type LocaleMappings = Record<
-  string,
-  { previewLabel: string; codeLabel: string }
->;
+export type LocaleMappings = Record<string, { previewLabel: string; codeLabel: string }>;
 
-const localeMappingSymbol = Symbol(
-  "__vitepress_plugin_component_localeMapping",
-);
+const localeMappingSymbol = Symbol("__vitepress_plugin_component_localeMapping");
 
 /**
  * Initialize locale mappings for the application.