vitepress-plugin-sandpack
Version:
use sandpack-vue3 in vitepress as directive.
2 lines (1 loc) • 7.13 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),P=require("@codesandbox/sandpack-themes"),D=require("vue/server-renderer"),$=require("sandpack-vue3");function F(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const O=F(P),q=e=>e.trim().replace(/'/g,"").replace(/"/g,""),A=e=>{const t={};return e.split(",").forEach(s=>{let[r,o]=s.split(":");r=q(r),o=q(o),t[r]=o}),t},b=e=>{let t="/src/index.js";switch(e){case"vanilla-ts":t="/src/index.ts";break;case"angular":t="/src/app/app.component.ts";break;case"react":t="/App.js";break;case"react-ts":t="/App.tsx";break;case"vue":t="/src/App.vue";break;case"vue3":t="/src/App.vue";break;case"svelte":t="/index.js";break;case"solid":t="/App.tsx";break}return t},B=(e,t)=>{let n;const s=(e||"").split(" "),r=s.includes("[hidden]"),o=s.includes("[readonly]")||s.includes("[readOnly]"),d=s.includes("[active]"),f=s.find(l=>l.includes("."));return f&&(n=f,n=n==="App.vue"?b(t):n,n=n.startsWith("/")?n:`/${n}`),{hidden:r,active:d,readOnly:o,path:n}},u=e=>typeof e>"u"||String(e).trim()===""?!0:["false","0"].includes(String(e).trim())?!1:!!e,y=e=>e?typeof e=="string"?A(e):e:void 0,k=async(e,t)=>{var d,f;const n={},s=t.default?t.default():[];let r=s.filter(l=>l.type==="div")||[],o=0;if(Array.isArray(r)){if(!r.length){const l=s?(d=s[0])==null?void 0:d.ctx:{};l&&(l!=null&&l.slots)&&(r=(f=l.slots)!=null&&f.default?l.slots.default():[])}for await(const l of r){let h="",g=document.createElement("div");const c=l.children||[],{active:p,hidden:a,readOnly:m,path:v}=B(JSON.parse(decodeURIComponent(e.codeOptions))[o],e.template),S=v||b(e.template),w=c.find(_=>_.type==="pre");l.children=w?[w]:[];const C=await D.renderToString(l);g.insertAdjacentHTML("beforeend",C),h=g.innerText,g=null,n[S]={code:h,active:p,hidden:a,readOnly:m},o++}}return n},x=(e={})=>{const{options:t}=e,n=t&&typeof t=="object"?{...t}:{},s={autorun:u(e.autorun),editorWidthPercentage:isNaN(Number(e.editorWidthPercentage))?50:Number(e.editorWidthPercentage),showNavigator:u(e.showNavigator),showLineNumbers:u(e.showLineNumbers),showRefreshButton:u(e.showRefreshButton),showTabs:u(e.showTabs),showConsoleButton:u(e.showConsoleButton),showConsole:u(e.showConsole),closableTabs:u(e.closableTabs),wrapContent:u(e.wrapContent),resizablePanels:u(e.resizablePanels),readOnly:u(e.readOnly),showReadOnly:u(e.showReadOnly)};for(const r in n)r in s&&(["editorWidthPercentage"].includes(r)?s.editorWidthPercentage=isNaN(Number(n[r]))?50:Number(n[r]):s[r]=u(n[r]));return s},T=e=>{const{deps:t,devDeps:n,entry:s,customSetup:r}=e,o=r&&typeof r=="object"?r:void 0,d={dependencies:void 0,devDependencies:void 0,entry:void 0,npmRegistries:void 0};return(t||n||s)&&(d.dependencies=y(t),d.devDependencies=y(n),d.entry=s||void 0),o&&(d.dependencies=y(o.deps),d.devDependencies=y(o.devDeps),d.entry=o.entry,d.npmRegistries=o.npmRegistries),d},j={lightTheme:{type:String,required:!1,default:"light"},darkTheme:{type:String,required:!1,default:"dark"},template:{type:String,required:!1,default:"vue3"},hideEditor:{type:[Boolean,String],required:!1,default:!1},rtl:{type:[Boolean,String],required:!1,default:!1},options:{type:Object,required:!1,default:void 0},autorun:{type:[String,Boolean],required:!1,default:!0},previewHeight:{type:Number,required:!1,default:void 0},coderHeight:{type:Number,required:!1,default:void 0},showNavigator:{type:[String,Boolean],required:!1,default:!1},showLineNumbers:{type:[String,Boolean],required:!1,default:!1},showRefreshButton:{type:[String,Boolean],required:!1,default:!0},showTabs:{type:[String,Boolean],required:!1,default:!0},showConsoleButton:{type:[String,Boolean],required:!1,default:!0},showConsole:{type:[String,Boolean],required:!1,default:!1},closableTabs:{type:[String,Boolean],required:!1,default:!1},wrapContent:{type:[String,Boolean],required:!1,default:!1},resizablePanels:{type:[String,Boolean],required:!1,default:!0},readOnly:{type:[String,Boolean],required:!1,default:!1},showReadOnly:{type:[String,Boolean],required:!1,default:!0},customSetup:{type:Object,required:!1,default:void 0},deps:{type:[String,Object],required:!1,default:void 0},devDeps:{type:[String,Object],required:!1,default:void 0},entry:{type:String,required:!1,default:void 0},codeOptions:{type:String,required:!1,default:void 0}},H=i.defineComponent({__name:"Sandbox",props:j,setup(e){i.useCssVars(m=>({"8966ea8e":l.value,a364191e:r.value,"07fe9e36":d.value}));const t=e,n=i.ref({}),s=m=>{var v;return t[m]??((v=t==null?void 0:t.options)==null?void 0:v[m])},r=i.computed(()=>u(s("hideEditor"))?"none":"flex"),o=i.computed(()=>isNaN(Number(s("previewHeight")))?void 0:Number(s("previewHeight"))),d=i.computed(()=>o.value?`${o.value}px`:"var(--sp-layout-height)"),f=i.computed(()=>isNaN(Number(s("coderHeight")))?void 0:Number(s("coderHeight"))),l=i.computed(()=>f.value?`${f.value}px`:"var(--sp-layout-height)"),h=i.useSlots(),g=i.ref(!1),c=i.computed(()=>g.value?O[s("darkTheme")]||"dark":O[s("lightTheme")]||"light"),p=async()=>{n.value=await k(t,h)},a=()=>{typeof document<"u"&&document.documentElement&&(g.value=document.documentElement.classList.contains("dark"))};return i.watch(t,p),i.onBeforeMount(p),i.onMounted(()=>{i.nextTick(()=>{typeof document<"u"&&document.documentElement&&new MutationObserver(v=>{v[0].target&&a()}).observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),a()})}),(m,v)=>(i.openBlock(),i.createBlock(i.unref($.Sandpack),{theme:c.value,template:m.template,rtl:i.unref(u)(m.rtl),files:n.value,options:i.unref(x)(t),"custom-setup":i.unref(T)(t)},null,8,["theme","template","rtl","files","options","custom-setup"]))}});const N=e=>e.split("-").map(n=>n.substring(0,1).toUpperCase()+n.substring(1)).join("-"),R=(e="")=>{const t=e.split(" ");let n=!1;for(const s of t)if(/([{1})([\s\S]*)([\.]{1}([\s\S]+))(]{1})/.test(s)){n=!0;break}return n},E=(e,t,n)=>((r,o,d)=>{var f,l;if(r[o].nesting===1){const h=[];for(let c=o+1;r[c]&&!(r[c].nesting===-1&&r[c].type==="container_sandbox_close");++c)if(r[c].type==="fence"&&r[c].tag==="code"){let p="",a=((f=r[c])==null?void 0:f.info)||"";R(a)&&(a.includes("prefix=")?a=a.replace("prefix=","").replace("[","").replace("]",""):a=a.replace("["," /").replace("]",""),p=a.substring(a.lastIndexOf(".")+1),a=`${p} ${a}`,a.includes("#active")&&(a=`${a.replace("#active","")} [active]`),a.includes("#readOnly")&&(a=`${a.replace("#readOnly","")} [readOnly]`),a.includes("#hidden")&&(a=`${a.replace("#hidden","")} [hidden]`)),h.push(a)}const g=((l=r[o].attrs)==null?void 0:l.map(([c,p])=>p?`${c}="${p}"`:c))||[];return`<${N(d)} codeOptions="${encodeURIComponent(JSON.stringify(h))}" ${g.join(" ")}>`}return`</${N(d)}>`})(e,t,n);exports.Sandbox=H;exports.getCustomSetupFromProps=T;exports.getDefaultFileName=b;exports.getFileAttributes=B;exports.getSandpackFiles=k;exports.getSandpackOptions=x;exports.parsedBoolean=u;exports.parsedDeps=y;exports.renderSandbox=E;exports.sandboxProps=j;