@vtj/coder
Version:
VTJ 是一款基于 Vue3 + Typescript 的低代码页面可视化设计器。内置低代码引擎、渲染器和代码生成器,面向前端开发者,开箱即用。 无缝嵌入本地开发工程,不改变前端开发流程和编码习惯。
101 lines (99 loc) • 16.1 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("@vtj/base"),T=require("prettier/standalone"),Z=require("prettier/plugins/html"),K=require("prettier/plugins/babel"),ee=require("prettier/plugins/postcss"),te=require("prettier/plugins/estree");function F(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(e,s,n.get?n:{enumerable:!0,get:()=>t[s]})}}return e.default=t,Object.freeze(e)}const se=F(Z),D=F(K),L=F(ee),U=F(te);/**!
* Copyright (c) 2025, VTJ.PRO All rights reserved.
* @name @vtj/coder
* @author CHC chenhuachun1549@dingtalk.com
* @version 0.12.44
* @license <a href="https://vtj.pro/license.html">MIT License</a>
*/const ne="0.12.44";/**!
* Copyright (c) 2025, VTJ.PRO All rights reserved.
* @name @vtj/core
* @author CHC chenhuachun1549@dingtalk.com
* @version 0.12.44
* @license <a href="https://vtj.pro/license.html">MIT License</a>
*/const re=["slot","template","component","img","div","p","h1","h2","h3","span","a"];m.mitt();const B={arrowParens:"always",bracketSpacing:!0,bracketSameLine:!0,endOfLine:"lf",htmlWhitespaceSensitivity:"css",insertPragma:!1,jsxBracketSameLine:!0,jsxSingleQuote:!0,printWidth:80,proseWrap:"preserve",quoteProps:"as-needed",requirePragma:!1,semi:!0,singleQuote:!0,tabWidth:2,trailingComma:"none",useTabs:!1,vueIndentScriptAndStyle:!0};async function R(t,e){return e?t:await T.format(t,{parser:"vue",...B,plugins:[se,D,U,L]})}async function V(t,e){if(e)return t;try{return(await T.format(t,{parser:"babel-ts",...B,plugins:[D,U]})).replace(/;\n$/gi,"")}catch(s){return console.warn(s),t}}async function N(t,e){return e?t:T.format(t,{parser:"scss",...B,plugins:[L]})}function k(t){return t&&t.type==="JSExpression"}function I(t){return typeof t=="object"&&t&&t.type==="JSFunction"}function b(t){return k(t)||I(t)}function M(t){return t.replace(new RegExp("this.","g"),"")}function J(t){return t.replace(/this\.context\??\./g,"")}function d(t,e=!0,s=!0,n=[]){let r=b(t)?t.value.trim().replace(/\"/g,"'").replace(/;$/,""):e?JSON.stringify(t):t;return r=w(r,n),s?M(J(r)):J(r)}function w(t,e=[]){let s=t;for(const n of e)s=s.replace(new RegExp(`this.${n}.value`,"g"),`this.${n}`);return s}function H(t){let e=t.trim().replace(/;$/,"");if(e=/^\((\(|async|function)/.test(e)?e.substring(1,e.length-1):e,e.startsWith("{"))return e;if(e.startsWith("async function"))e=e.replace(/^async function/,"async");else if(e.startsWith("function"))e=e.replace(/^function/,"");else{const r=/^(async\s)?\([\w]*\)\s+\=\>\s([\w\W]+)/,i=e.match(r);i&&i[2]&&(i[2].startsWith("{")||(e=e.replace(i[2],`{ return ${i[2]} }`))),e=e.replace("=>","")}return e}function ie(t={}){return Object.entries(t).map(([e,s])=>`"${e}": ${d(s)}`)}function Q(t={},e=!1){const s=Object.keys(t);return e?s.map(n=>"."+n):s}function oe(t){let e="";for(var s in t)if(t.hasOwnProperty(s)){var n=t[s];e+=s+": "+n+";"}return e}function ce(t=[],e=[]){return t.filter(s=>!e.includes(s))}class ae{constructor(e,s){this.dsl=e,this.dependencies=s,this.libraryRegex=this.collectLibrary(),this.walk(e),this.walkNodes(e),this.members=this.getLibraryMember()}imports={};context={};style={};members=[];urlSchemas={};blockPlugins={};libraryRegex=[];collectLibrary(){return this.dependencies.filter(e=>!!e.library).map(e=>new RegExp(`(this.\\$libs.${e.library}.([\\w]+))`,"g"))}collectImport(e){const s=e.split(".");if(s.length===4){const n=s.pop(),r=s.join(".")+".",i=s.pop();if(n&&i){const o=this.dependencies.find(c=>c.library===i)?.package;o&&(this.imports[o]||(this.imports[o]=new Set)).add(n)}return{name:n,path:r,library:i}}return null}replaceLibraryPath(e){const{libraryRegex:s}=this;let n=e.value;for(const r of s){const i=e.value?.match(r)||[];for(const o of i){const c=this.collectImport(o);if(c){const f=c.path.replace(/\$/g,"\\$");n=n.replace(new RegExp(f,"g"),"")}}}return n}walk(e){const s=n=>{if(!n||typeof n!="object")return;if(Array.isArray(n)){for(let i of n)s(i);return}const r=Object.values(n);for(const i of r)b(i)?i.value=this.replaceLibraryPath(i):s(i)};s(e)}getLibraryMember(e=[]){let s=[...e];const n={...this.imports};delete n["uni-h5"],delete n["@dcloudio/uni-h5"],delete n["uni-ui"],delete n["@dcloudio/uni-ui"];for(const r of Object.values(n))s=s.concat(Array.from(r));return m.dedupArray(s)}collectContext(e,s){const n=new Set(s?.id?this.context[s.id]:[]),r=(e.directives||[]).find(c=>c.name==="vFor");let i=new Set(Array.from(n));if(r){const{item:c="item",index:f="index"}=r.iterator||{};i=new Set([c,f,...Array.from(i)])}const o=e.slot;if(o){const c=typeof o=="string"?[]:o.params||[],f=c.length?c:[`scope_${s?.id}`];i=new Set([...f,...Array.from(i)])}this.context[e.id]=i}collectStyle(e){e.id&&e.props?.style&&Object.keys(e.props.style).length&&!b(e.props.style)&&(this.style[`.${e.name}_${e.id}`]=e.props.style)}collectUrlSchema(e){typeof e.from=="object"&&e.from.type==="UrlSchema"&&(this.urlSchemas[e.name]=e.from)}collectBlockPlugin(e){typeof e.from=="object"&&e.from.type==="Plugin"&&(this.blockPlugins[e.name]=e.from)}walkNodes(e){const s=(n,r)=>{this.collectContext(n,r),this.collectStyle(n),this.collectUrlSchema(n),this.collectBlockPlugin(n),Array.isArray(n.children)&&n.children.forEach(i=>s(i,n))};Array.isArray(e.nodes)&&e.nodes.forEach(n=>s(n))}}function le(t={}){return Object.entries(t).map(([e,s])=>{const n=d(s,!1);return`${e}:${n}`})}function ue(t=[]){return t.map(e=>`${e.name}: {
from: '${e.from||e.name}',
default: ${d(e.default,!0,!1)}
}`)}function pe(t=[]){const e=s=>s?`[${m.toArray(s).map(i=>i.replace(/\'|\"/gi,"")).join(",")}]`:void 0;return t.map(s=>typeof s=="string"?`${s}: {}`:(b(s.default)&&!s.default.value&&(s.default.value="undefined"),`${s.name}: {
type:${e(s.type)},
required: ${d(!!s.required,!0,!1)},
default: ${d(s.default,!0,!1)}
}`))}function fe(t=[]){return t.map(e=>`'${typeof e=="string"?e:e.name}'`)}function A(t={},e=[]){return Object.entries(t).map(([s,n])=>{let r=H(d(n,!1,!1));return r=w(r,e),r.startsWith("async")?`async ${s}${r.replace(/^async/,"")}`:`${s}${r}`})}function me(t=[],e=[]){const s=t.reduce((i,o)=>(o.id&&I(o.source)&&(i[`watcher_${o.id}`]=o.source),i),{}),n=A(s,e),r=t.map(i=>`watcher_${i.id}: {
deep: ${i.deep},
immediate:${i.immediate},
handler${H(i.handler.value)}
}`);return{computed:n,watches:r}}function he(t={}){return Object.values(t).map(e=>{if(e.type==="mock"){const s=I(e.mockTemplate)&&e.mockTemplate.value||"(params) => ({})";return`async ${e.name}(...args:any[]) {
const mock = this.provider.createMock(${s})
return await mock.apply(this, args);
}`}else{const s=I(e.transform)&&e.transform.value||"(res) => res";return`async ${e.name}(...args:any[]) {
return await this.provider.apis['${e.ref}'].apply(this, args).then(${s});
}`}})}const de=["img","input","br","hr","area","base","col","embed","link","meta","param","source","track","wbr"],q=["vIf","vElseIf","vElse","vShow","vModel","vFor","vBind","vHtml"];function z(t,e,s=[],n={},r){const i=[];let o={},c=[];const f=[];let l=[];return ge(t).forEach(a=>{const g=[];for(const h of a.children){let{id:y,name:$,invisible:j,from:v}=h;if(j)continue;const C=ve($,e,v);C&&c.push(C),G(v)&&l.push({id:v.id,name:$});const{props:P,events:O,handlers:E}=ke(h,y,h.props,h.events,n,s),W=we(h.directives,s,f).join(" "),S=h.children?Pe(h.children,s,e,n,h):"";Object.assign(o,E);let _="";typeof S=="string"?_=S:(_=(S?.nodes||[]).join(`
`),Object.assign(o,S?.methods||{}),c=c.concat(S?.components||[]),l=l.concat(S?.importBlocks||[]));const x=["@dcloudio/uni-h5","@dcloudio/uni-ui"].includes(v||e.get($)?.package)?m.kebabCase($):X(v)||Y(v)?"component":$;g.push(de.includes(x)?`<${x} ${W} ${P} ${O} />`:`<${x} ${W} ${P} ${O}>${_?`
`+_.trim():""}</${x}>`)}const p=Oe(a.slot,g.join(`
`),r?.id);i.push(p)}),{nodes:i,methods:o,directives:ye(f),components:m.dedupArray(c),importBlocks:m.dedupArray(l,"id")}}function ye(t){return m.dedupArray(t).map(e=>`${e.startsWith("v")?e.substring(1):e}:${e}`)}function ge(t=[]){const e=new Map;for(const s of t){const n=typeof s.slot=="string"?s.slot:s.slot?.name,r=e.get(n);r?r.children.push(s):e.set(n,{slot:s.slot,children:[s]})}return e}function ve(t,e,s){if(re.includes(t))return null;const n=e.get(t);if(n&&n.alias){const r=n.parent?`${n.parent}.${n.alias}`:n.alias;return`${t}: ${r}`}return G(s)||n?t:null}function G(t){return!!t&&typeof t=="object"&&t.type==="Schema"}function X(t){return typeof t=="object"&&t.type==="UrlSchema"}function Y(t){return typeof t=="object"&&t.type==="Plugin"}function $e(t,e,s=[]){return t==="style"?b(e)?`:style="${d({...e,value:w(e.value,s)})}"`:"":t==="__class"&&b(e)?`:class="${d({...e,value:w(e.value,s)})}"`:typeof e=="string"?`${t}="${e}"`:b(e)?`:${t}="${d({...e,value:w(e.value,s)})}"`:m.isPlainObject(e)?`:${t}='{${ie(e).join(", ")}}'`:`:${t}='${JSON.stringify(e)}'`}function be(t,e={},s=[]){if(!!Object.keys(e.style||{}).length){const i=`${t.name}_${t.id}`;e.class?typeof e.class=="string"?e.class=[e.class,i].join(" "):(e.__class=e.class,e.class=i):e.class=i,b(e.style)||delete e.style}const r=t.from;return(X(r)||Y(r))&&(e.is={type:"JSExpression",value:t.name}),Object.entries(e).map(([i,o])=>$e(i,o,s))}function je(t,e,s,n,r){const i=Q(e.modifiers,!0);return r?`@${t}${i.join("")}="${s}"`:n&&n.length>0?`@${t}${i.join("")}="(...args:any[]) => ${s}"`:`@${t}${i.join("")}="${s}"`}function Se(t,e={},s={}){const n={},r=Array.from(s[t]||new Set([])),i=r.length?`({${r.join(", ")}}, args)`:"";return{binders:Object.entries(e).map(([c,f])=>{const l=f.handler.value.startsWith("this."),u=l?M(f.handler.value):`${m.camelCase(c)}_${t}${i}`;return l||(n[u]=r.length?{type:"JSFunction",value:`{
return (${f.handler.value}).apply(this, args);
}`}:f.handler),je(c,f,u,r,l)}),handlers:n}}function ke(t,e,s={},n={},r={},i){const{binders:o,handlers:c}=Se(e,n,r);return{props:be(t,s,i).join(" "),handlers:c,binders:o,events:o.join(" ")}}function we(t=[],e=[],s=[]){const n=[],{vIf:r,vElse:i,vElseIf:o,vShow:c,vModels:f,vFor:l,vBind:u,vHtml:a,customDirectives:g}=Ce(t);if(r&&n.push(`v-if="${d(r.value,!0,!0,e)}"`),o&&n.push(`v-else-if="${d(o.value,!0,!0,e)}"`),i&&n.push("v-else"),c&&n.push(`v-show="${d(c.value,!0,!0,e)}"`),u&&n.push(`v-bind="${d(u.value,!0,!0,e)}"`),f.forEach(p=>{const h=Q(p.modifiers,!0),y=p.arg?k(p.arg)?`:[${d(p.arg,!0,!0,e)}]`:`:${p.arg}`:"";n.push(`v-model${y}${h}="${d(p.value,!0,!0,e)}"`)}),l){const{item:p,index:h}={item:"item",index:"index",...l.iterator};n.push(`v-for="(${p}, ${h}) in ${d(l.value,!0,!0,e)}"`)}return a&&n.push(`v-html="${d(a.value,!0,!0,e)}"`),g&&g.length&&g.forEach(p=>{if(!p.name)return;let h="",y="";k(p.name)?(y=d(p.name,!0,!0,e),s.push(y)):y=p.name;const $=y?.startsWith("v")?m.kebabCase(y):m.kebabCase("v-"+y);if(h+=$,p.arg&&(k(p.arg)?h+=`:[${d(p.name,!0,!0,e)}]`:h+=`:${p.arg}`),p.modifiers){const j=Object.keys(p.modifiers);j.length&&(h+=j.map(v=>"."+v))}p.value?n.push(`${h}="${d(p.value,!0,!0,e)}"`):n.push(h)}),n}function Ce(t=[]){const e=t.filter(a=>q.includes(a.name)),s=t.filter(a=>!q.includes(a.name)),n=e.find(a=>m.camelCase(a.name)==="vIf"),r=e.find(a=>m.camelCase(a.name)==="vElseIf"),i=e.find(a=>m.camelCase(a.name)==="vElse"),o=e.find(a=>m.camelCase(a.name)==="vFor"),c=e.find(a=>m.camelCase(a.name)==="vShow"),f=e.find(a=>m.camelCase(a.name)==="vBind"),l=e.find(a=>m.camelCase(a.name)==="vHtml"),u=e.filter(a=>m.camelCase(a.name)==="vModel");return{vIf:n,vElseIf:r,vElse:i,vFor:o,vShow:c,vModels:u,vBind:f,vHtml:l,customDirectives:s}}function Pe(t,e,s,n,r){return typeof t=="string"?t:k(t)?`{{ ${d(t,!1,!0,e)} }}`:Array.isArray(t)?z(t,s,e,n,r):""}function Oe(t,e,s){if(!t)return e;const n=typeof t=="string"?{name:t,params:[]}:{params:[],...t};return`<template ${`#${n.name}="${n.params?.length>0?`{${n.params?.join(",")}}`:`scope_${s}`}"`}>
${e}
</template>`}function Ee(t,e=[],s=[],n={},r="web"){const i=["@dcloudio/uni-h5","uni-h5","@dcloudio/uni-ui","uni-ui"],o={vue:["defineComponent","reactive"]},c=[];for(const l of e){const u=t.get(l.split(":")[0]);if(u&&u.package){const a=o[u.package]??(o[u.package]=[]),g=u.parent||(u.alias||"").split(".")[0]||u.name;a.push(g),r==="uniapp"&&i.includes(u.package)&&c.push(g)}}for(const[l,u]of Object.entries(n))(o[l]??(o[l]=[])).push(...Array.from(u)),r==="uniapp"&&i.includes(l)&&c.push(...Array.from(u));return{imports:Object.entries(o).filter(([l,u])=>r==="uniapp"?!i.includes(l)&&!!u.length:!!u.length).map(([l,u])=>`import { ${m.dedupArray(u).join(",")}} from '${l}';`).concat(s),uniComponents:c}}function _e(t={}){const e=[];for(const[s,n]of Object.entries(t))e.push(`
${s} {
${oe(n)}
}
`);return e.join(`
`)}function xe(t={}){const e=[];return Object.entries(t).forEach(([s,n])=>{e.push(`const ${s} = provider.defineUrlSchemaComponent('${n.url}');`)}),e}function Ae(t={}){const e=[];return Object.entries(t).forEach(([s,n])=>{e.push(`const ${s} = provider.definePluginComponent(${JSON.stringify(n)});`)}),e}function Ie(t,e,s="web"){const{dsl:n}=t,r=Object.keys(n.computed||{}),i=A(n.lifeCycles,r),o=A(n.computed,r),c=me(n.watch,r),f=he(n.dataSources),{methods:l,nodes:u,components:a,importBlocks:g,directives:p}=z(n.nodes||[],e,r,t.context),h=[...o,...c.computed],y=A({...l,...n.methods||{}},r),$=g.map(E=>`import ${E.name} from './${E.id}.vue';`);let{imports:j,uniComponents:v}=Ee(e,a,$,t.imports,s);const C=Object.keys({...t.urlSchemas,...t.blockPlugins}),P=xe(t.urlSchemas),O=Ae(t.blockPlugins);return{id:n.id,version:n.__VERSION__,name:n.name,state:le(n.state).join(","),inject:ue(n.inject).join(","),props:pe(n.props).join(","),emits:fe(n.emits).join(","),watch:c.watches.join(","),lifeCycles:i.join(","),computed:h.join(","),methods:[...f,...y].join(","),imports:`
`+j.join(`
`),components:ce(a,v).join(","),directives:p.join(","),returns:t.members.join(","),template:u.join(`
`),css:n.css||"",style:_e(t.style),urlSchemas:P.join(`
`),blockPlugins:O.join(`
`),asyncComponents:C.join(","),uniComponents:v,renderer:s==="uniapp"?"@vtj/uni-app":"@vtj/renderer"}}const Fe=`
// @ts-nocheck
<%= imports %>
import { useProvider } from '<%= renderer %>';
export default defineComponent({
name: '<%= name %>',
<% if(inject) { %> inject: { <%= inject %>}, <% } %>
<% if(components) { %> components: { <%= components %> }, <% } %>
<% if(directives) { %> directives: { <%= directives %> }, <% } %>
<% if(props) { %> props: { <%= props %> }, <% } %>
<% if(emits) {%> emits: [<%= emits %>], <% } %>
setup(props) {
const provider = useProvider({
id: '<%= id %>',
version: '<%= version %>'
});
const state = reactive({ <%= state %> });
<%= urlSchemas %>
<%= blockPlugins %>
return {
state,
props,
provider
<% if(asyncComponents) { %>, <%= asyncComponents %> <% }%>
<% if(returns) { %>, <%= returns %> <% } %>
};
},
<% if(computed) { %> computed: { <%= computed %> }, <% } %>
<% if(methods) { %> methods: { <%= methods %> }, <% } %>
<% if(watch) { %> watch: { <%= watch %> }, <% } %> <%= lifeCycles %>
});
`.replace(/(\n|\r|\t)/g,""),Ne=`
<template>
<%= template %>
</template>
<script lang="ts">
<%= script %>
<\/script>
<style lang="scss" scoped>
<%= css %>
<%= style %>
</style>
`,Te=m.template(Fe),Be=m.template(Ne);async function Re(t,e=new Map,s=[],n="web",r){const i=new ae(m.cloneDeep(t),s),o=Ie(i,e,n),c=Te(o),f=Be({template:o.template,css:await N(o.css,r),script:await V(c,r),style:await N(o.style,r)});return await R(f,r).catch(l=>(l.content=f,Promise.reject(l)))}async function We(t){const e=`
<template>
<div>
<h3>源码模式页面</h3>
<div>文件路径:/.vtj/vue/${t.id}.vue</div>
</div>
</template>
<script lang="ts" setup>
<\/script>
<style scoped lang="scss">
</style>
`;return await R(e)}exports.VTJ_CODER_VERSION=ne;exports.createEmptyPage=We;exports.cssFormatter=N;exports.generator=Re;exports.tsFormatter=V;exports.vueFormatter=R;