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

package/dist/index.mjs

@@ -1,9 +1,9 @@
 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
+`,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 ${t} from '${o}'
+import ${n} from '${r}'
 // 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};
+`}}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/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,7 +1,7 @@
 {
   "name": "vitepress-plugin-sfc",
-  "version": "2.0.0-beta.2",
-  "description": "VitePress plugin that renders inline Vue SFC with tabs showing preview and source code",
+  "version": "2.0.0-beta.4",
+  "description": "Allows you to write Vue SFC within Markdown files and render them in VitePress.",
   "keywords": [
     "component",
     "plugin",
@@ -11,6 +11,9 @@
     "vitepress-plugin",
     "vue"
   ],
+  "bugs": {
+    "url": "https://github.com/heroui-vue/vitepress-plugin-sfc/issues"
+  },
   "license": "MIT",
   "author": "hotdogc1017@gmail.com",
   "repository": {
@@ -18,25 +21,28 @@
     "url": "https://github.com/heroui-vue/vitepress-plugin-sfc"
   },
   "files": [
-    "dist",
-    "src/client"
+    "dist"
   ],
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "./dist/index.d.mts",
+  "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",
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
+    "@tsdown/css": "^0.23.2",
     "@types/markdown-it": "^14.2.0",
     "@types/markdown-it-container": "^2.0.10",
     "@types/node": "^22.17.0",
@@ -54,12 +60,13 @@
   "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",
     "fmt": "oxfmt",
     "fmt:check": "oxfmt --check",
     "lint": "oxlint",
-    "t": "vitest run tests/output.test.ts"
+    "test": "vitest run -r __tests__"
   }
 }

package/src/client/ComponentView.vue

@@ -1,165 +0,0 @@
-<script setup lang="ts" generic="T">
-import { computed, ref, useId, watch } from "vue";
-import { useData } from "vitepress";
-import { useLocaleMappings } from "./useLocaleMappings";
-
-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();
-
-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 decodedSrc = ref("");
-const highlightedSrc = ref("");
-const activedTab = ref<"preview" | "code">("preview");
-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,
-  },
-);
-</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="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 +0,0 @@
-import ComponentView from "./ComponentView.vue";
-import { useLocaleMappings } from "./useLocaleMappings";
-
-import type { App } from "vue";
-import type { LocaleMappings } from "./useLocaleMappings";
-
-export const COMPONENT_NAME = "ComponentView";
-
-export function enhanceAppWithComponentView(
-  app: App,
-  options?: {
-    localeMappings?: LocaleMappings;
-  },
-): void {
-  const { localeMappings = {} } = options || {};
-
-  app.component(COMPONENT_NAME, ComponentView);
-
-  const { set } = useLocaleMappings(app);
-  set(localeMappings);
-}
-
-export { ComponentView };

package/src/client/useLocaleMappings.ts

@@ -1,31 +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);
-    },
-  };
-}