vuepress-plugin-md-enhance/lib/client/components/CodeDemo.js

Markdown enhancement plugin for vuepress

import{isDef as A,isPlainObject as N,keys as w,decodeData as C,LoadingIcon as R}from"@vuepress/helper/client";import{useToggle as M,useEventListener as P}from"@vueuse/core";import{defineComponent as T,shallowRef as _,ref as $,computed as h,h as o,onMounted as B}from"vue";import{J as k,C as V}from"../icons-DBCMtobF.js";import"balloon-css/balloon.css";import"../styles/code-demo.scss";const L=CODE_DEMO_OPTIONS,x={html:{types:["html","slim","haml","md","markdown","vue"],map:{html:"none",vue:"none",md:"markdown"}},js:{types:["js","javascript","coffee","coffeescript","ts","typescript","ls","livescript"],map:{js:"none",javascript:"none",coffee:"coffeescript",ls:"livescript",ts:"typescript"}},css:{types:["css","less","sass","scss","stylus","styl"],map:{css:"none",styl:"stylus"}}},I=(e,s,t)=>{const n=document.createElement(e);return N(s)&&w(s).forEach(l=>{if(l.indexOf("data"))n[l]=s[l];else{const r=l.replace("data","");n.dataset[r]=s[l]}}),n},S=e=>({...L,...e,jsLib:Array.from(new Set([L.jsLib,e.jsLib??[]].flat())),cssLib:Array.from(new Set([L.cssLib,e.cssLib??[]].flat()))}),u=(e,s)=>{if(A(e[s]))return e[s];const t=new Promise(n=>{const l=document.createElement("script");l.src=s,document.querySelector("body")?.appendChild(l),l.onload=()=>{n()}});return e[s]=t,t},J=(e,s)=>{if(s.css&&Array.from(e.childNodes).every(t=>t.nodeName!=="STYLE")){const t=I("style",{innerHTML:s.css});e.appendChild(t)}},H=(e,s,t)=>{const n=t.getScript();if(n&&Array.from(s.childNodes).every(l=>l.nodeName!=="SCRIPT")){const l=document.createElement("script");l.appendChild(document.createTextNode(`{const document=window.document.querySelector('#${e} .vp-code-demo-display').shadowRoot;
${n}}`)),s.appendChild(l)}},q=["html","js","css"],F=e=>{const s=w(e),t={html:[],js:[],css:[],isLegal:!1};return q.forEach(n=>{const l=s.filter(r=>x[n].types.includes(r));if(l.length){const r=l[0];t[n]=[e[r].replace(/^\n|\n$/g,""),x[n].map[r]??r]}}),t.isLegal=(!t.html.length||t.html[1]==="none")&&(!t.js.length||t.js[1]==="none")&&(!t.css.length||t.css[1]==="none"),t},E=e=>e.replace(/<br \/>/g,"<br>").replace(/<((\S+)[^<]*?)\s+\/>/g,"<$1></$2>"),O=e=>`<div id="app">
${E(e)}
</div>`,G=e=>`${e.replace("export default ","const $reactApp = ").replace(/App\.__style__(\s*)=(\s*)`([\s\S]*)?`/,"")};
ReactDOM.createRoot(document.getElementById("app")).render(React.createElement($reactApp))`,U=e=>e.replace(/export\s+default\s*\{(\n*[\s\S]*)\n*\}\s*;?$/u,"Vue.createApp({$1}).mount('#app')").replace(/export\s+default\s*define(Async)?Component\s*\(\s*\{(\n*[\s\S]*)\n*\}\s*\)\s*;?$/u,"Vue.createApp({$1}).mount('#app')").trim(),D=e=>`(function(exports){var module={};module.exports=exports;${e};return module.exports.__esModule?exports.default:module.exports;})({})`,Y=(e,s)=>{const t=S(s),n=e.js[0]??"";return{...t,html:E(e.html[0]??""),js:n,css:e.css[0]??"",isLegal:e.isLegal,getScript:()=>t.useBabel?window.Babel?.transform(n,{presets:["es2015"]})?.code??"":n}},z=/<template>([\s\S]+)<\/template>/u,K=/<script(\s*lang=(['"])(.*?)\2)?>([\s\S]+)<\/script>/u,Q=/<style(\s*lang=(['"])(.*?)\2)?\s*(?:scoped)?>([\s\S]+)<\/style>/u,W=(e,s)=>{const t=S(s),n=e.html[0]??"",l=z.exec(n),r=K.exec(n),c=Q.exec(n),d=l?.[1].replace(/^\n|\n$/g,"")??"",[i="",p=""]=r?[r[4].replace(/^\n|\n$/g,""),r[3]]:[],[a="",v=""]=c?[c[4].replace(/^\n|\n$/g,""),c[3]]:[],f=p===""&&(v===""||v==="css");return{...t,html:O(d),js:U(i),css:a,isLegal:f,jsLib:[t.vue,...t.jsLib],getScript:()=>{const g=s.useBabel?window.Babel?.transform(i,{presets:["es2015"]})?.code??"":i.replace(/export\s+default/u,"return");return`const app=window.document.createElement('div');document.firstElementChild.appendChild(app);const appOptions=${D(g)};appOptions.template=\`${d.replace("`",'\\`"')}\`;window.Vue.createApp(appOptions).mount(app);`}}},X=(e,s)=>{const t=S(s),n=e.js[0]??"";return{...t,html:O(""),js:G(n),css:e.css[0]??e.js[0]?.replace(/App\.__style__(?:\s*)=(?:\s*)`([\s\S]*)?`/,"$1").trim()??"",isLegal:e.isLegal,jsLib:[t.react,t.reactDOM,...t.jsLib],jsx:!0,getScript:()=>{const l=window.Babel?.transform(n,{presets:["es2015","react"]})?.code??"";return`window.ReactDOM.createRoot(document.firstElementChild).render(window.React.createElement(${D(l)}))`}}},m={},Z=e=>Promise.all([u(m,e.babel),u(m,e.react),u(m,e.reactDOM)]),ee=e=>{const s=[u(m,e.vue)];return e.useBabel&&s.push(u(m,e.babel)),Promise.all(s)},te=e=>e.useBabel?u(m,e.babel):Promise.resolve();var se=T({name:"CodeDemo",props:{id:{type:String,required:!0},type:{type:String,default:"normal"},title:String,config:String,code:{type:String,required:!0}},slots:Object,setup(e,{slots:s}){const[t,n]=M(!1),l=_(),r=_(),c=$("0"),d=$(!1),i=h(()=>JSON.parse(e.config?C(e.config):"{}")),p=h(()=>{const y=JSON.parse(C(e.code));return F(y)}),a=h(()=>e.type==="react"?X(p.value,i.value):e.type==="vue"?W(p.value,i.value):Y(p.value,i.value)),v=h(()=>a.value.isLegal),f=(y=!1)=>{const b=l.value.attachShadow({mode:"open"}),j=document.createElement("div");j.classList.add("code-demo-app"),b.appendChild(j),v.value?(y&&(j.innerHTML=a.value.html),J(b,a.value),H(e.id,b,a.value),c.value="0"):c.value="auto",d.value=!0},g=()=>{switch(e.type){case"react":return Z(a.value).then(()=>{f()});case"vue":return ee(a.value).then(()=>{f()});default:return te(a.value).then(()=>{f(!0)})}};return P("beforeprint",()=>{n(!0)}),B(async()=>{await g()}),()=>o("div",{class:"vp-container vp-code-demo",id:e.id},[o("div",{class:"vp-container-header"},[a.value.isLegal?o("button",{type:"button",title:"toggle",class:["vp-code-demo-toggle-button",t.value?"down":"end"],onClick:()=>{c.value=t.value?"0":`${r.value.clientHeight+13.8}px`,n()}}):null,e.title?o("span",{class:"vp-container-title"},decodeURIComponent(e.title)):null,a.value.isLegal&&(a.value.jsfiddle??!0)?o("form",{class:"code-demo-jsfiddle",target:"_blank",action:"https://jsfiddle.net/api/post/library/pure/",method:"post"},[o("input",{type:"hidden",name:"html",value:a.value.html}),o("input",{type:"hidden",name:"js",value:a.value.js}),o("input",{type:"hidden",name:"css",value:a.value.css}),o("input",{type:"hidden",name:"wrap",value:"1"}),o("input",{type:"hidden",name:"panel_js",value:"3"}),o("input",{type:"hidden",name:"resources",value:[...a.value.cssLib,...a.value.jsLib].join(",")}),o("button",{type:"submit",class:"jsfiddle-button",innerHTML:k,"aria-label":"JSFiddle","data-balloon-pos":"down"})]):null,!a.value.isLegal||(a.value.codepen??!0)?o("form",{class:"code-demo-codepen",target:"_blank",action:"https://codepen.io/pen/define",method:"post"},[o("input",{type:"hidden",name:"data",value:JSON.stringify({html:a.value.html,js:a.value.js,css:a.value.css,js_external:a.value.jsLib.join(";"),css_external:a.value.cssLib.join(";"),layout:a.value.codepenLayout,html_pre_processor:p.value.html[1]??"none",js_pre_processor:p.value.js[1]??(a.value.jsx?"babel":"none"),css_pre_processor:p.value.css[1]??"none",editors:a.value.codepenEditors})}),o("button",{type:"submit",innerHTML:V,class:"codepen-button","aria-label":"Codepen","data-balloon-pos":"down"})]):null]),d.value?null:o(R,{class:"vp-code-demo-loading"}),o("div",{ref:l,class:"vp-code-demo-display",style:{display:v.value&&d.value?"block":"none"}}),o("div",{class:"vp-code-demo-code-wrapper",style:{height:c.value}},o("div",{ref:r,class:"vp-code-demo-codes"},s.default()))])}});export{se as default};
//# sourceMappingURL=CodeDemo.js.map