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

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(e){let t=s(e),n=`VP_SFC_${t}`,r=`virtual:${n}.vue`;return{hash:t,name:n,importer:r,renderedContent:`// [vitepress-plugin-sfc] injected vue virtual imports
+// REGION START
+import ${n} from '${r}'
+// REGION END
+`}}function s(t){return e.createHash(`sha256`).update(t).digest(`hex`)}function c(e){if(!e)return{};let t=e.split(`,`);return Object.fromEntries(t.map(e=>{let[,t,n]=e.match(/([^=]+)=?(.*)/)||[];return t===`disableRender`?[`disableRender`,!n||n===`true`?`true`:`false`]:t&&n?[t,n]:void 0}).filter(Boolean))}function l(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,renderedContent:a,markupParams:o}=c.meta.sfc;if(!i.has(e)){let{tagOpen:t,tagClose:n,contentStripped:r}=s,o=r+a;s.contentStripped=o,s.content=t+o+n,i.add(e)}let{render:l=``,disableRender:u}=o;return`<ComponentView render="${l}" :disableRender="${u}">\n<${t} />\n<template #highlight>${n.highlight(r,`vue`,``)}</template>\n</ComponentView>\n`}else return``}}),e.core.ruler.after(`block`,`extract_sfc`,e=>{let t=e.src.split(`
+`),n=e.env.sfcs||[],r;function i(e){let{type:n,nesting:r,map:i,info:a}=e;if(n!==`container_sfc_open`||r!==1||!i)return;let[s,l]=i,u=t.slice(s+1,l).join(`
+`),d=o(u),[,f]=(a??``).split(` `);return{...d,content:u,markupParams:c(f)}}for(let t of e.tokens){let{map:e}=t,a=i(t);if(a){r=t,t.meta={...t.meta,sfc:a};let e=n.some(({name:e})=>a?.name===e);a&&!e&&n.push(a)}if(r&&r!==t){let[n]=e||[-1],[i,a]=r.map;n>i&&n<a?t.content=``:r=void 0}}let a=e.env;a.sfcs=[...n],a.__matched_sfc_set__=new Set})}const u=l;async function d(){let e=await t(``,{html:!0});e.use(u);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,a as createDefaultSfcBlock,o as createVirtualImport,u as sfcPlugin,d as sfcRegistryVitePlugin};

package/package.json

@@ -1,10 +1,32 @@
 {
   "name": "vitepress-plugin-sfc",
-  "version": "2.0.0-beta.1",
-  "description": "VitePress plugin that renders inline Vue SFC with tabs showing preview and source code",
+  "version": "2.0.0-beta.3",
+  "description": "Allows you to write Vue SFC within Markdown files and render them in VitePress.",
+  "keywords": [
+    "component",
+    "plugin",
+    "tabs",
+    "vitepress",
+    "vitepress plugin",
+    "vitepress-plugin",
+    "vue"
+  ],
+  "bugs": {
+    "url": "https://github.com/heroui-vue/vitepress-plugin-sfc/issues"
+  },
+  "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",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
   "exports": {
     ".": {
       "types": "./dist/index.d.mts",
@@ -12,50 +34,35 @@
     },
     "./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",
+    "@tsdown/css": "^0.23.2",
     "@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",
+    "test": "vitest run -r __tests__"
   }
-}
+}

package/src/client/ComponentView.vue

@@ -1,181 +1,46 @@
-<script setup lang="ts" generic="T">
-import { computed, ref, useId, watch } from "vue";
-import { useData } from "vitepress";
-import { useLocaleMappings } from "./useLocaleMappings";
+<script setup lang="ts">
+import { inject, computed, getCurrentInstance, withDefaults, type Component } from "vue";
+import { configSymbol, type Config, type ComponentViewProps } from "./index";
 
-import type { LocaleMappings } from "./useLocaleMappings";
-
-const localMappings: LocaleMappings = {
-    en: {
-        previewLabel: "Preview",
-        codeLabel: "Source Code",
-    },
-    zh: {
-        previewLabel: "预览",
-        codeLabel: "源代码",
-    },
-};
-
-const props = defineProps<{
-    src: string;
-    highlightedSrc?: string;
-    previewLabel?: string;
-    codeLabel?: string;
-}>();
-
-const { lang } = useData();
-const { get } = useLocaleMappings();
+interface Props extends Omit<ComponentViewProps, "render"> {
+  render: Component | undefined;
+}
 
-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 props = withDefaults(defineProps<ComponentViewProps>(), {
+  disableRender: false,
 });
 
-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,
-    },
-);
-
-async function copyCode() {
-    await navigator.clipboard.writeText(decodedSrc.value);
-    copied.value = true;
-    setTimeout(() => {
-        copied.value = false;
-    }, 2000);
-}
+const config = computed<Props>(() => {
+  const { render, disableRender } = inject<Config>(configSymbol);
+  const resolveConfig = {
+    render: render || props.render,
+    disableRender:
+      disableRender === null || disableRender === undefined ? props.disableRender : disableRender,
+  };
+
+  const renderInstance = getCurrentInstance().appContext.app.component(
+    resolveConfig.render as string,
+  );
+  if (!renderInstance) {
+    console.warn(`[vitepress-plugin-sfc] Unregistered component: ${resolveConfig.render}`);
+  }
+  return {
+    ...resolveConfig,
+    render: renderInstance,
+  };
+});
 </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>
+  <div>
+    <slot v-if="!config.render || config.disableRender"></slot>
+    <component v-else :is="config.render">
+      <slot />
+      <template #highlight>
+        <slot name="highlight"></slot>
+      </template>
+    </component>
+  </div>
 </template>
 
-<style>
-.vp-component-tabs {
-    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;
-}
-
-.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;
-}
-
-.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;
-}
-.vp-component-tabs > header input[data-checked="true"] + label::after {
-    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);
-}
-
-.vp-component-tabs > main {
-    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;
-}
-</style>
+<style></style>

package/src/client/GroupTabs.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed, ref, useId, onMounted } from "vue";
+import { useData } from "vitepress";
+import { type GroupTabsProps } from "./index";
+
+const DEFAULT_LOCALE: GroupTabsProps["locale"] = {
+  en: {
+    label: {
+      preview: "Preview",
+      code: "Source Code",
+    },
+  },
+  zh: {
+    label: {
+      preview: "预览",
+      code: "源代码",
+    },
+  },
+};
+
+const props = defineProps<GroupTabsProps>();
+
+const { lang } = useData();
+
+const currentLocale = computed(() => {
+  const locale = props.locale;
+  return locale?.[lang.value] || DEFAULT_LOCALE[lang.value];
+});
+
+const activedTab = ref<"preview" | "code">("preview");
+const tabGroupId = useId();
+</script>
+
+<template>
+  <div class="vp-component-tabs">
+    <header>
+      <template v-for="(value, key) in currentLocale.label" :key="key">
+        <input
+          :id="`tab-${tabGroupId}-${key}`"
+          type="radio"
+          :name="`vp-component-tabs-${tabGroupId}`"
+          style="position: fixed; opacity: 0; pointer-events: none"
+          :data-checked="activedTab === key" />
+        <label :for="`tab-${tabGroupId}-${key}`" @click="activedTab = key">{{ value }}</label>
+      </template>
+    </header>
+
+    <main v-show="activedTab === 'preview'">
+      <slot />
+    </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;
+}
+
+.vp-component-tabs > header {
+  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;
+}
+
+.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;
+}
+.vp-component-tabs > header input[data-checked="true"] + label::after {
+  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);
+}
+
+.vp-component-tabs > main {
+  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;
+}
+</style>

package/src/client/index.ts

@@ -1,23 +1,49 @@
 import ComponentView from "./ComponentView.vue";
-import { useLocaleMappings } from "./useLocaleMappings";
+import type { EnhanceAppContext } from "vitepress";
 
-import type { App } from "vue";
-import type { LocaleMappings } from "./useLocaleMappings";
+export interface ComponentViewProps {
+  render?: "GroupTabs" | "SourceCodeButton" | (string & {});
+  disableRender?: boolean;
+}
 
-export const COMPONENT_NAME = "ComponentView";
+export interface GroupTabsProps {
+  locale?: Record<string, { label: { preview: string; code: string } }>;
+}
 
-export function enhanceAppWithComponentView(
-  app: App,
-  options?: {
-    localeMappings?: LocaleMappings;
-  },
-): void {
-  const { localeMappings = {} } = options || {};
+// export interface SourceCodeButtonProps {
+//   icon: string;
+// }
 
-  app.component(COMPONENT_NAME, ComponentView);
+export type Config = ComponentViewProps & {
+  groupTabs?: GroupTabsProps;
+};
 
-  const { set } = useLocaleMappings(app);
-  set(localeMappings);
-}
+export const configSymbol = Symbol("__vitepress_plugin_sfc_config");
+
+const DEFUALT_CONFIG: Config = {
+  render: "GroupTabs",
+};
+
+export async function enhanceAppWithComponentView(app: EnhanceAppContext["app"], config?: Config) {
+  app.component("ComponentView", ComponentView);
 
-export { ComponentView };
+  const resolvedConfig = { ...DEFUALT_CONFIG, ...config };
+
+  if (app) {
+    app.provide(configSymbol, resolvedConfig);
+  } else {
+    throw new Error(
+      "[vitepress-plugin-sfc] The `useConfig` must be called within a Vue component if not providing an app",
+    );
+  }
+
+  const { render, disableRender } = resolvedConfig;
+  if (disableRender) {
+    return;
+  }
+
+  if (render === "GroupTabs") {
+    const importer = await import("./GroupTabs.vue");
+    app.component("GroupTabs", importer.default);
+  }
+}

package/src/client/useLocaleMappings.ts

@@ -1,36 +0,0 @@
-import { provide, inject, getCurrentInstance } from "vue";
-import type { App } from "vue";
-
-export type LocaleMappings = Record<
-  string,
-  { previewLabel: string; codeLabel: string }
->;
-
-const localeMappingSymbol = Symbol(
-  "__vitepress_plugin_component_localeMapping",
-);
-
-/**
- * Initialize locale mappings for the application.
- * @param app - The Vue application instance. If not provided, the mappings will be provided to the current component.
- */
-export function useLocaleMappings(app?: App) {
-  return {
-    set: (localeMapping: LocaleMappings) => {
-      const instance = getCurrentInstance();
-      if (app) {
-        app?.provide(localeMappingSymbol, localeMapping);
-      } else {
-        if (!instance) {
-          throw new Error(
-            "useLocaleMappings must be called within a Vue component if not providing an app",
-          );
-        }
-        provide(localeMappingSymbol, localeMapping);
-      }
-    },
-    get: () => {
-      return inject<LocaleMappings | undefined>(localeMappingSymbol, undefined);
-    },
-  };
-}