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

package/README.md

@@ -7,7 +7,7 @@ Allows you to write Vue SFC within Markdown files and render them in VitePress.
 ## Install
 
 ```shell
-npm install -D vitepress-plugin-sfc@latest
+npm install -D vitepress-plugin-sfc@2.0.0-beta.5
 ```
 
 ## Configuration
@@ -37,11 +37,12 @@ export default defineConfig({
 ```ts
 import DefaultTheme from "vitepress/theme";
 import { enhanceAppWithComponentView } from "vitepress-plugin-sfc/client";
+import "vitepress-plugin-sfc/style";
 
 export default {
   extends: DefaultTheme,
-  enhanceApp({ app }) {
-    enhanceAppWithComponentView(app);
+  async enhanceApp({ app }) {
+    await enhanceAppWithComponentView(app);
   },
 };
 ```

package/dist/GroupTabs-voGdJiur.mjs

@@ -0,0 +1 @@
+import{t as e}from"./export-helper-9pbmIWWh.mjs";import{useData as t}from"vitepress";import{Fragment as n,computed as r,createElementBlock as i,createElementVNode as a,defineComponent as o,normalizeClass as s,openBlock as c,ref as l,renderList as u,renderSlot as d,toDisplayString as f,useId as p,vShow as m,withDirectives as h}from"vue";var g=o({__name:`GroupTabs`,props:{locale:{type:Object,required:!1}},setup(e,{expose:n}){n();let i={en:{label:{preview:`Preview`,code:`Source Code`}},zh:{label:{preview:`预览`,code:`源代码`}}},a=e,{lang:o}=t(),s={DEFAULT_LOCALE:i,props:a,lang:o,currentLocale:r(()=>a.locale?.[o.value]||i[o.value]),activedTab:l(`preview`),tabGroupId:p()};return Object.defineProperty(s,`__isScriptSetup`,{enumerable:!1,value:!0}),s}});const _={class:`vp-component-tabs`},v=[`id`,`name`,`data-checked`],y=[`for`,`onClick`];function b(e,t,r,o,l,p){return c(),i(`div`,_,[a(`header`,null,[(c(!0),i(n,null,u(o.currentLocale.label,(e,t)=>(c(),i(n,{key:t},[a(`input`,{id:`tab-${o.tabGroupId}-${t}`,type:`radio`,name:`vp-component-tabs-${o.tabGroupId}`,style:{position:`fixed`,opacity:`0`,"pointer-events":`none`},"data-checked":o.activedTab===t},null,8,v),a(`label`,{for:`tab-${o.tabGroupId}-${t}`,onClick:e=>o.activedTab=t},f(e),9,y)],64))),128))]),h(a(`main`,null,[d(e.$slots,`default`)],512),[[m,o.activedTab===`preview`]]),h(a(`div`,{class:s(`language-vue${o.activedTab===`code`?` active`:``}`),style:{margin:`0px`}},[t[0]||=a(`button`,{title:`copy source code`,class:`copy`},null,-1),t[1]||=a(`span`,{class:`lang`},`Vue`,-1),d(e.$slots,`highlight`)],2),[[m,o.activedTab===`code`]])])}var x=e(g,[[`render`,b],[`__file`,`/home/runner/work/vitepress-plugin-sfc/vitepress-plugin-sfc/src/client/GroupTabs.vue`]]);export{x as default};

package/dist/client.d.mts

@@ -0,0 +1,2 @@
+import { a as enhanceAppWithComponentView, i as configSymbol, n as Config, r as GroupTabsProps, t as ComponentViewProps } from "./index-DHKDP_Um.mjs";
+export { ComponentViewProps, Config, GroupTabsProps, configSymbol, enhanceAppWithComponentView };

package/dist/client.mjs

@@ -0,0 +1 @@
+import{t as e}from"./export-helper-9pbmIWWh.mjs";import{computed as t,createBlock as n,createElementBlock as r,defineComponent as i,getCurrentInstance as a,inject as o,openBlock as s,renderSlot as c,resolveDynamicComponent as l,withCtx as u}from"vue";var d=i({__name:`ComponentView`,props:{render:{type:[String,Object],required:!1},disableRender:{type:Boolean,required:!1,default:!1}},setup(e,{expose:n}){n();let r=e,i=o(m),s=a(),c={props:r,injectedConfig:i,instance:s,config:t(()=>{let{render:e,disableRender:t}=i,n={render:e||r.render,disableRender:t??r.disableRender},a=s.appContext.app.component(n.render);return a||console.warn(`[vitepress-plugin-sfc] Unregistered component: ${n.render}`),{...n,render:a}})};return Object.defineProperty(c,`__isScriptSetup`,{enumerable:!1,value:!0}),c}});function f(e,t,i,a,o,d){return s(),r(`div`,null,[!a.config.render||a.config.disableRender?c(e.$slots,`default`,{key:0}):(s(),n(l(a.config.render),{key:1},{highlight:u(()=>[c(e.$slots,`highlight`)]),default:u(()=>[c(e.$slots,`default`)]),_:3}))])}var p=e(d,[[`render`,f],[`__file`,`/home/runner/work/vitepress-plugin-sfc/vitepress-plugin-sfc/src/client/ComponentView.vue`]]);const m=Symbol(`__vitepress_plugin_sfc_config`),h={render:`GroupTabs`};async function g(e,t){e.component(`ComponentView`,p);let n={...h,...t};if(e)e.provide(m,n);else throw Error("[vitepress-plugin-sfc] The `useConfig` must be called within a Vue component if not providing an app");let{render:r,disableRender:i}=n;if(!i&&r===`GroupTabs`){let t=await import(`./GroupTabs-voGdJiur.mjs`);e.component(`GroupTabs`,t.default)}}export{m as configSymbol,g as enhanceAppWithComponentView};

package/dist/export-helper-9pbmIWWh.mjs

@@ -0,0 +1 @@
+var e=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n};export{e as t};

package/dist/index-DHKDP_Um.d.mts

@@ -0,0 +1,22 @@
+import { EnhanceAppContext } from "vitepress";
+
+//#region src/client/index.d.ts
+interface ComponentViewProps {
+  render?: "GroupTabs" | "SourceCodeButton" | (string & {});
+  disableRender?: boolean;
+}
+interface GroupTabsProps {
+  locale?: Record<string, {
+    label: {
+      preview: string;
+      code: string;
+    };
+  }>;
+}
+type Config = ComponentViewProps & {
+  groupTabs?: GroupTabsProps;
+};
+declare const configSymbol: unique symbol;
+declare function enhanceAppWithComponentView(app: EnhanceAppContext["app"], config?: Config): Promise<void>;
+//#endregion
+export { enhanceAppWithComponentView as a, configSymbol as i, Config as n, GroupTabsProps as r, ComponentViewProps as t };

package/dist/index.d.mts

@@ -1,11 +1,6 @@
+import { t as ComponentViewProps } from "./index-DHKDP_Um.mjs";
 import { MarkdownEnv, MarkdownRenderer, Plugin, SfcBlock } from "vitepress";
 
-//#region src/client/index.d.ts
-interface ComponentViewProps {
-  render?: "GroupTabs" | "SourceCodeButton" | (string & {});
-  disableRender?: boolean;
-}
-//#endregion
 //#region src/node/markdown.d.ts
 declare const SCRIPT_RE: RegExp;
 declare const SFC_IMPORTER_RE: RegExp;
@@ -27,6 +22,9 @@ declare function plugin(md: MarkdownRenderer): void;
 declare const sfcPlugin: typeof plugin;
 //#endregion
 //#region src/node/vite.d.ts
-declare function sfcRegistryVitePlugin(): Promise<Plugin>;
+declare function sfcVitePlugin(): Promise<Plugin>;
+//#endregion
+//#region src/node/index.d.ts
+declare const version: string;
 //#endregion
-export { MarkdownEnvExt, SCRIPT_RE, SFC, SFC_IMPORTER_RE, createDefaultSfcBlock, createVirtualImport, sfcPlugin, sfcRegistryVitePlugin };
+export { MarkdownEnvExt, SCRIPT_RE, SFC, SFC_IMPORTER_RE, createDefaultSfcBlock, createVirtualImport, sfcPlugin, sfcVitePlugin, version };

package/dist/index.mjs

@@ -6,4 +6,4 @@ 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};
+`),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)}}}}const f=`2.0.0-beta.5`;export{r as SCRIPT_RE,i as SFC_IMPORTER_RE,a as createDefaultSfcBlock,o as createVirtualImport,u as sfcPlugin,d as sfcVitePlugin,f as version};

package/dist/style.css

@@ -0,0 +1,58 @@
+
+.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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress-plugin-sfc",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "description": "Allows you to write Vue SFC within Markdown files and render them in VitePress.",
   "keywords": [
     "component",
@@ -21,18 +21,21 @@
     "url": "https://github.com/heroui-vue/vitepress-plugin-sfc"
   },
   "files": [
-    "dist",
-    "src/client"
+    "dist"
   ],
   "type": "module",
-  "main": "dist/index.mjs",
-  "module": "dist/index.mjs",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
   "exports": {
     ".": {
       "types": "./dist/index.d.mts",
       "default": "./dist/index.mjs"
     },
-    "./client": "./src/client/index.ts"
+    "./client": {
+      "types": "./dist/client.d.mts",
+      "default": "./dist/client.mjs"
+    },
+    "./style": "./dist/style.css"
   },
   "publishConfig": {
     "access": "public",
@@ -57,9 +60,10 @@
   "scripts": {
     "dev": "tsdown -w",
     "build": "tsdown --minify",
+    "build:check": "tsdown",
     "bump": "bumpp --sign",
     "pub": "npm run build && npm publish --registry=https://registry.npmjs.org/",
-    "dev:docs": "pnpm -C playground dev",
+    "dev:docs": "pnpm build:check && pnpm -C playground dev",
     "fmt": "oxfmt",
     "fmt:check": "oxfmt --check",
     "lint": "oxlint",

package/src/client/ComponentView.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { inject, computed, getCurrentInstance, withDefaults, type Component } from "vue";
-import { configSymbol, type Config, type ComponentViewProps } from "./index";
-
-interface Props extends Omit<ComponentViewProps, "render"> {
-  render: Component | undefined;
-}
-
-const props = withDefaults(defineProps<ComponentViewProps>(), {
-  disableRender: false,
-});
-
-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>
-    <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></style>

package/src/client/GroupTabs.vue

@@ -1,126 +0,0 @@
-<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,49 +0,0 @@
-import ComponentView from "./ComponentView.vue";
-import type { EnhanceAppContext } from "vitepress";
-
-export interface ComponentViewProps {
-  render?: "GroupTabs" | "SourceCodeButton" | (string & {});
-  disableRender?: boolean;
-}
-
-export interface GroupTabsProps {
-  locale?: Record<string, { label: { preview: string; code: string } }>;
-}
-
-// export interface SourceCodeButtonProps {
-//   icon: string;
-// }
-
-export type Config = ComponentViewProps & {
-  groupTabs?: GroupTabsProps;
-};
-
-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);
-
-  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);
-  }
-}