@vtj/coder 0.7.14 → 0.7.15

package/dist/index.cjs

@@ -1,37 +1,44 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("@vtj/base"),k=require("prettier/standalone"),L=require("prettier/plugins/html"),M=require("prettier/plugins/babel"),V=require("prettier/plugins/postcss"),D=require("prettier/plugins/estree");function b(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const Q=b(L),z=b(M),G=b(V),H=b(D);/**!
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("@vtj/base"),k=require("prettier/standalone"),Q=require("prettier/plugins/html"),z=require("prettier/plugins/babel"),G=require("prettier/plugins/postcss"),H=require("prettier/plugins/estree");function w(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,s.get?s:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const U=w(Q),T=w(z),q=w(G),B=w(H);/**!
  * Copyright (c) 2024, VTJ.PRO All rights reserved.
  * @name @vtj/coder 
  * @author CHC chenhuachun1549@dingtalk.com 
- * @version 0.7.14
+ * @version 0.7.15
  * @license <a href="https://vtj.pro/license.html">MIT License</a>
- */const U="0.7.14";/**!
+ */const X="0.7.15";/**!
  * Copyright (c) 2024, VTJ.PRO All rights reserved.
  * @name @vtj/core 
  * @author CHC chenhuachun1549@dingtalk.com 
- * @version 0.7.14
+ * @version 0.7.15
  * @license <a href="https://vtj.pro/license.html">MIT License</a>
- */const X=["slot","template","component","img","div","p","h1","h2","h3","span","a"];p.mitt();const x={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 I(t,e){return e?t:await k.format(t,{parser:"html",...x,plugins:[Q]})}async function Y(t,e){return e?t:await k.format(t,{parser:"babel-ts",...x,plugins:[z,H]})}async function Z(t,e){return e?t:k.format(t,{parser:"scss",...x,plugins:[G]})}function C(t){return t&&t.type==="JSExpression"}function O(t){return typeof t=="object"&&t&&t.type==="JSFunction"}function P(t){return C(t)||O(t)}function _(t){return t.replace(new RegExp("this.","g"),"")}function W(t){return t.replace(/this\.context\??\./g,"")}function u(t,e=!0,r=!0){const n=P(t)?t.value:e?JSON.stringify(t):t;return r?_(W(n)):W(n)}function A(t,e=[]){let r=t;for(const n of e)r=r.replace(new RegExp(`this.${n}.value`,"g"),`this.${n}`);return r}function q(t){let e=t.trim();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 i=/^(async\s)?\([\w]*\)\s+\=\>\s([\w\W]+)/,s=e.match(i);s&&s[2]&&(s[2].startsWith("{")||(e=e.replace(s[2],`{ return ${s[2]} }`))),e=e.replace("=>","")}return e}function K(t={}){return Object.entries(t).map(([e,r])=>`"${e}": ${u(r)}`)}function B(t={},e=!1){const r=Object.keys(t);return e?r.map(n=>"."+n):r}class ee{constructor(e,r){this.dsl=e,this.dependencies=r,this.libraryRegex=this.collectLibrary(),this.walk(e),this.walkNodes(e),this.members=this.getLibraryMember()}imports={};context={};members=[];libraryRegex=[];collectLibrary(){return this.dependencies.filter(e=>!!e.library).map(e=>new RegExp(`(this.\\$libs.${e.library}.([\\w]+))`,"g"))}collectImport(e){const r=e.split(".");if(r.length===4){const n=r.pop(),i=r.join(".")+".",s=r.pop();if(n&&s){const o=this.dependencies.find(a=>a.library===s)?.package;o&&(this.imports[o]||(this.imports[o]=new Set)).add(n)}return{name:n,path:i,library:s}}return null}replaceLibraryPath(e){const{libraryRegex:r}=this;let n=e.value;for(const i of r){const s=e.value.match(i)||[];for(const o of s){const a=this.collectImport(o);if(a){const c=a.path.replace(/\$/g,"\\$");n=n.replace(new RegExp(c,"g"),"")}}}return n}walk(e){const r=n=>{if(!n||typeof n!="object")return;if(Array.isArray(n)){for(let s of n)r(s);return}const i=Object.values(n);for(const s of i)P(s)?s.value=this.replaceLibraryPath(s):r(s)};r(e)}getLibraryMember(e=[]){let r=[...e];for(const n of Object.values(this.imports))r=r.concat(Array.from(n));return p.dedupArray(r)}collectContext(e,r){const n=new Set(r?.id?this.context[r.id]:[]),i=(e.directives||[]).find(a=>a.name==="vFor");let s=new Set(Array.from(n));if(i){const{item:a="item",index:c="index"}=i.iterator||{};s=new Set([a,c,...Array.from(s)])}const o=e.slot;if(o){const a=typeof o=="string"?[]:o.params||[],c=a.length?a:[`scope_${r?.id}`];s=new Set([...c,...Array.from(s)])}this.context[e.id]=s}walkNodes(e){const r=(n,i)=>{this.collectContext(n,i),Array.isArray(n.children)&&n.children.forEach(s=>r(s,n))};Array.isArray(e.nodes)&&e.nodes.forEach(n=>r(n))}}function te(t={}){return Object.entries(t).map(([e,r])=>{const n=u(r,!1);return`${e}:${n}`})}function re(t=[]){return t.map(e=>`${e.name}: {
+ */const Y=["slot","template","component","img","div","p","h1","h2","h3","span","a"];l.mitt();const x={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 J(t,e){return e?t:await k.format(t,{parser:"vue",...x,plugins:[U,T,B,q]})}async function Z(t,e){return e?t:await k.format(t,{parser:"babel-ts",...x,plugins:[T,B]})}async function W(t,e){return e?t:k.format(t,{parser:"scss",...x,plugins:[q]})}function C(t){return t&&t.type==="JSExpression"}function P(t){return typeof t=="object"&&t&&t.type==="JSFunction"}function b(t){return C(t)||P(t)}function A(t){return t.replace(new RegExp("this.","g"),"")}function I(t){return t.replace(/this\.context\??\./g,"")}function u(t,e=!0,r=!0){const s=b(t)?t.value:e?JSON.stringify(t):t;return r?A(I(s)):I(s)}function j(t,e=[]){let r=t;for(const s of e)r=r.replace(new RegExp(`this.${s}.value`,"g"),`this.${s}`);return r}function L(t){let e=t.trim();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 i=/^(async\s)?\([\w]*\)\s+\=\>\s([\w\W]+)/,n=e.match(i);n&&n[2]&&(n[2].startsWith("{")||(e=e.replace(n[2],`{ return ${n[2]} }`))),e=e.replace("=>","")}return e}function K(t={}){return Object.entries(t).map(([e,r])=>`"${e}": ${u(r)}`)}function M(t={},e=!1){const r=Object.keys(t);return e?r.map(s=>"."+s):r}function ee(t){let e="";for(var r in t)if(t.hasOwnProperty(r)){var s=t[r];e+=r+": "+s+";"}return e}class te{constructor(e,r){this.dsl=e,this.dependencies=r,this.libraryRegex=this.collectLibrary(),this.walk(e),this.walkNodes(e),this.members=this.getLibraryMember()}imports={};context={};style={};members=[];libraryRegex=[];collectLibrary(){return this.dependencies.filter(e=>!!e.library).map(e=>new RegExp(`(this.\\$libs.${e.library}.([\\w]+))`,"g"))}collectImport(e){const r=e.split(".");if(r.length===4){const s=r.pop(),i=r.join(".")+".",n=r.pop();if(s&&n){const o=this.dependencies.find(a=>a.library===n)?.package;o&&(this.imports[o]||(this.imports[o]=new Set)).add(s)}return{name:s,path:i,library:n}}return null}replaceLibraryPath(e){const{libraryRegex:r}=this;let s=e.value;for(const i of r){const n=e.value.match(i)||[];for(const o of n){const a=this.collectImport(o);if(a){const c=a.path.replace(/\$/g,"\\$");s=s.replace(new RegExp(c,"g"),"")}}}return s}walk(e){const r=s=>{if(!s||typeof s!="object")return;if(Array.isArray(s)){for(let n of s)r(n);return}const i=Object.values(s);for(const n of i)b(n)?n.value=this.replaceLibraryPath(n):r(n)};r(e)}getLibraryMember(e=[]){let r=[...e];for(const s of Object.values(this.imports))r=r.concat(Array.from(s));return l.dedupArray(r)}collectContext(e,r){const s=new Set(r?.id?this.context[r.id]:[]),i=(e.directives||[]).find(a=>a.name==="vFor");let n=new Set(Array.from(s));if(i){const{item:a="item",index:c="index"}=i.iterator||{};n=new Set([a,c,...Array.from(n)])}const o=e.slot;if(o){const a=typeof o=="string"?[]:o.params||[],c=a.length?a:[`scope_${r?.id}`];n=new Set([...c,...Array.from(n)])}this.context[e.id]=n}collectStyle(e){e.id&&e.props?.style&&(this.style[`.${e.name}_${e.id}`]=e.props.style)}walkNodes(e){const r=(s,i)=>{this.collectContext(s,i),this.collectStyle(s),Array.isArray(s.children)&&s.children.forEach(n=>r(n,s))};Array.isArray(e.nodes)&&e.nodes.forEach(s=>r(s))}}function re(t={}){return Object.entries(t).map(([e,r])=>{const s=u(r,!1);return`${e}:${s}`})}function se(t=[]){return t.map(e=>`${e.name}: {
             from: '${e.from||e.name}',
             default: ${u(e.default,!0,!1)}
-        }`)}function ne(t=[]){const e=r=>r?`[${p.toArray(r).map(s=>s.replace(/\'|\"/gi,"")).join(",")}]`:void 0;return t.map(r=>typeof r=="string"?`${r}: {}`:`${r.name}: {
+        }`)}function ne(t=[]){const e=r=>r?`[${l.toArray(r).map(n=>n.replace(/\'|\"/gi,"")).join(",")}]`:void 0;return t.map(r=>typeof r=="string"?`${r}: {}`:`${r.name}: {
           type:${e(r.type)},
           required: ${r.required},
           default: ${u(r.default,!0,!1)}
-          }`)}function se(t=[]){return t.map(e=>`'${e}'`)}function $(t={},e=[]){return Object.entries(t).map(([r,n])=>{let i=q(u(n,!1,!1));return i=A(i,e),i.startsWith("async")?`async ${r}${i.replace(/^async/,"")}`:`${r}${i}`})}function oe(t=[],e=[]){const r=t.reduce((s,o)=>(o.id&&O(o.source)&&(s[`watcher_${o.id}`]=o.source),s),{}),n=$(r,e),i=t.map(s=>`watcher_${s.id}: {
-        deep: ${s.deep},
-        immediate:${s.immediate},
-        handler${q(s.handler.value)}
-      }`);return{computed:n,watches:i}}function ie(t={}){return Object.values(t).map(e=>{const r=O(e.transform)&&e.transform.value||"(res) => res";return`async ${e.name}(...args:any[]) {
+          }`)}function ie(t=[]){return t.map(e=>`'${e}'`)}function v(t={},e=[]){return Object.entries(t).map(([r,s])=>{let i=L(u(s,!1,!1));return i=j(i,e),i.startsWith("async")?`async ${r}${i.replace(/^async/,"")}`:`${r}${i}`})}function oe(t=[],e=[]){const r=t.reduce((n,o)=>(o.id&&P(o.source)&&(n[`watcher_${o.id}`]=o.source),n),{}),s=v(r,e),i=t.map(n=>`watcher_${n.id}: {
+        deep: ${n.deep},
+        immediate:${n.immediate},
+        handler${L(n.handler.value)}
+      }`);return{computed:s,watches:i}}function ae(t={}){return Object.values(t).map(e=>{const r=P(e.transform)&&e.transform.value||"(res) => res";return`async ${e.name}(...args:any[]) {
           return await this.provider.apis.${e.ref}.apply(this, args).then(${r});
-        }`})}function T(t,e,r=[],n={},i){const s=[];let o={},a=[],c=[];return ae(t).forEach(f=>{const g=[];for(const l of f.children){let{id:j,name:m,invisible:y,from:w}=l;if(y)continue;const E=ce(m,e,w);E&&a.push(E),pe(w)&&c.push({id:w.id,name:m});const{props:F,events:N,handlers:J}=de(j,l.props,l.events,n,r),R=he(l.directives).join(" "),d=l.children?ye(l.children,r,e,n,l):"";Object.assign(o,J);let S="";typeof d=="string"?S=d:(S=(d?.nodes||[]).join(`
-`),Object.assign(o,d?.methods||{}),a=a.concat(d?.components||[]),c=c.concat(d?.importBlocks||[])),g.push(m==="img"?`<${m} ${R} ${F} ${N} />`:`<${m} ${R} ${F} ${N}>${S.trim()}</${m}>`)}const v=$e(f.slot,g.join(`
-`),i?.id);s.push(v)}),{nodes:s,methods:o,components:p.dedupArray(a),importBlocks:p.dedupArray(c,"id")}}function ae(t=[]){const e=new Map;for(const r of t){const n=typeof r.slot=="string"?r.slot:r.slot?.name,i=e.get(n);i?i.children.push(r):e.set(n,{slot:r.slot,children:[r]})}return e}function ce(t,e,r){if(X.includes(t))return null;const n=e.get(t);if(n&&n.alias){const i=n.parent?`${n.parent}.${n.alias}`:n.alias;return`${t}: ${i}`}return r||n?t:null}function pe(t){return!!t&&typeof t=="object"&&t.type==="Schema"}function ue(t,e,r=[]){return typeof e=="string"?`${t}="${e}"`:P(e)?`:${t}="${u({...e,value:A(e.value,r)})}"`:p.isPlainObject(e)?`:${t}='{${K(e).join(", ")}}'`:`:${t}='${JSON.stringify(e)}'`}function le(t={},e=[]){return Object.entries(t).map(([r,n])=>ue(r,n,e))}function fe(t,e,r,n){const i=B(e.modifiers,!0);return n&&n.length>0?`@${t}${i.join("")}="(...args:any[]) => ${r}"`:`@${t}${i.join("")}="${r}"`}function me(t,e={},r={}){const n={},i=Array.from(r[t]||new Set([])),s=i.length?`({${i.join(", ")}}, args)`:"";return{binders:Object.entries(e).map(([a,c])=>{const h=c.handler.value.startsWith("this."),f=h?_(c.handler.value):`${p.camelCase(a)}_handler_${t}${s}`;return h||(n[f]=i.length?{type:"JSFunction",value:`{
+        }`})}function V(t,e,r=[],s={},i){const n=[];let o={},a=[],c=[];return ce(t).forEach(f=>{const y=[];for(const p of f.children){let{id:O,name:m,invisible:g,from:_}=p;if(g)continue;const E=le(m,e,_);E&&a.push(E),ue(_)&&c.push({id:_.id,name:m});const{props:F,events:N,handlers:D}=he(p,O,p.props,p.events,s,r),R=ye(p.directives).join(" "),d=p.children?$e(p.children,r,e,s,p):"";Object.assign(o,D);let $="";typeof d=="string"?$=d:($=(d?.nodes||[]).join(`
+`),Object.assign(o,d?.methods||{}),a=a.concat(d?.components||[]),c=c.concat(d?.importBlocks||[])),y.push(m==="img"?`<${m} ${R} ${F} ${N} />
+`:`<${m} ${R} ${F} ${N}>${$?`
+`+$.trim():""}</${m}>`)}const S=ve(f.slot,y.join(`
+`),i?.id);n.push(S)}),{nodes:n,methods:o,components:l.dedupArray(a),importBlocks:l.dedupArray(c,"id")}}function ce(t=[]){const e=new Map;for(const r of t){const s=typeof r.slot=="string"?r.slot:r.slot?.name,i=e.get(s);i?i.children.push(r):e.set(s,{slot:r.slot,children:[r]})}return e}function le(t,e,r){if(Y.includes(t))return null;const s=e.get(t);if(s&&s.alias){const i=s.parent?`${s.parent}.${s.alias}`:s.alias;return`${t}: ${i}`}return r||s?t:null}function ue(t){return!!t&&typeof t=="object"&&t.type==="Schema"}function pe(t,e,r=[]){return t==="style"?"":t==="__class"&&b(e)?`:class="${u({...e,value:j(e.value,r)})}"`:typeof e=="string"?`${t}="${e}"`:b(e)?`:${t}="${u({...e,value:j(e.value,r)})}"`:l.isPlainObject(e)?`:${t}='{${K(e).join(", ")}}'`:`:${t}='${JSON.stringify(e)}'`}function fe(t,e={},r=[]){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,delete e.style)}return Object.entries(e).map(([i,n])=>pe(i,n,r))}function me(t,e,r,s){const i=M(e.modifiers,!0);return s&&s.length>0?`@${t}${i.join("")}="(...args:any[]) => ${r}"`:`@${t}${i.join("")}="${r}"`}function de(t,e={},r={}){const s={},i=Array.from(r[t]||new Set([])),n=i.length?`({${i.join(", ")}}, args)`:"";return{binders:Object.entries(e).map(([a,c])=>{const h=c.handler.value.startsWith("this."),f=h?A(c.handler.value):`${l.camelCase(a)}_handler_${t}${n}`;return h||(s[f]=i.length?{type:"JSFunction",value:`{
           return (${c.handler.value}).apply(this, args);
-        }`}:c.handler),fe(a,c,f,i)}),handlers:n}}function de(t,e={},r={},n={},i){const{binders:s,handlers:o}=me(t,r,n);return{props:le(e,i).join(" "),handlers:o,binders:s,events:s.join(" ")}}function he(t=[]){const e=[],{vIf:r,vShow:n,vModels:i,vFor:s}=ge(t);if(r&&e.push(`v-if="${u(r.value)}"`),n&&e.push(`v-show="${u(n.value)}"`),i.forEach(o=>{const a=B(o.modifiers,!0),c=o.arg?C(o.arg)?`:[${u(o.arg)}]`:`:${o.arg}`:"";e.push(`v-model${c}${a}="${u(o.value)}"`)}),s){const{item:o,index:a}={item:"item",index:"index",...s.iterator};e.push(`v-for="(${o}, ${a}) in ${u(s.value)}"`)}return e}function ge(t=[]){const e=t.find(o=>p.camelCase(o.name)==="vIf"),r=t.find(o=>p.camelCase(o.name)==="vFor"),n=t.find(o=>p.camelCase(o.name)==="vShow"),i=t.find(o=>p.camelCase(o.name)==="vBind"),s=t.filter(o=>p.camelCase(o.name)==="vModel");return{vIf:e,vFor:r,vShow:n,vModels:s,vBind:i}}function ye(t,e,r,n,i){if(typeof t=="string")return t;if(C(t)){let s=u(t,!1);return s=A(s,e),s=_(s),`{{ ${s} }}`}return Array.isArray(t)?T(t,r,e,n,i):""}function $e(t,e,r){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_${r}`}"`}>
+        }`}:c.handler),me(a,c,f,i)}),handlers:s}}function he(t,e,r={},s={},i={},n){const{binders:o,handlers:a}=de(e,s,i);return{props:fe(t,r,n).join(" "),handlers:a,binders:o,events:o.join(" ")}}function ye(t=[]){const e=[],{vIf:r,vShow:s,vModels:i,vFor:n}=ge(t);if(r&&e.push(`v-if="${u(r.value)}"`),s&&e.push(`v-show="${u(s.value)}"`),i.forEach(o=>{const a=M(o.modifiers,!0),c=o.arg?C(o.arg)?`:[${u(o.arg)}]`:`:${o.arg}`:"";e.push(`v-model${c}${a}="${u(o.value)}"`)}),n){const{item:o,index:a}={item:"item",index:"index",...n.iterator};e.push(`v-for="(${o}, ${a}) in ${u(n.value)}"`)}return e}function ge(t=[]){const e=t.find(o=>l.camelCase(o.name)==="vIf"),r=t.find(o=>l.camelCase(o.name)==="vFor"),s=t.find(o=>l.camelCase(o.name)==="vShow"),i=t.find(o=>l.camelCase(o.name)==="vBind"),n=t.filter(o=>l.camelCase(o.name)==="vModel");return{vIf:e,vFor:r,vShow:s,vModels:n,vBind:i}}function $e(t,e,r,s,i){if(typeof t=="string")return t;if(C(t)){let n=u(t,!1);return n=j(n,e),n=A(n),`{{ ${n} }}`}return Array.isArray(t)?V(t,r,e,s,i):""}function ve(t,e,r){if(!t)return e;const s=typeof t=="string"?{name:t,params:[]}:{params:[],...t};return`<template ${`#${s.name}="${s.params?.length>0?`{${s.params?.join(",")}}`:`scope_${r}`}"`}>
     ${e}
-    </template>`}function be(t,e=[],r=[],n={}){const i={vue:["defineComponent","reactive"]};for(const s of e){const o=t.get(s.split(":")[0]);o&&o.package&&(i[o.package]??(i[o.package]=[])).push(o.parent||(o.alias||"").split(".")[0]||o.name)}for(const[s,o]of Object.entries(n))(i[s]??(i[s]=[])).push(...Array.from(o));return Object.entries(i).filter(([s,o])=>!!o.length).map(([s,o])=>`import { ${p.dedupArray(o).join(",")}} from '${s}';`).concat(r)}function ve(t,e){const{dsl:r}=t,n=Object.keys(r.computed||{}),i=$(r.lifeCycles,n),s=$(r.computed,n),o=oe(r.watch,n),a=ie(r.dataSources),{methods:c,nodes:h,components:f,importBlocks:g}=T(r.nodes||[],e,n,t.context),v=[...s,...o.computed],l=$({...c,...r.methods||{}},n),j=g.map(y=>`import ${y.name} from './${y.id}.vue';`),m=be(e,f,j,t.imports);return{id:r.id,version:r.__VERSION__,name:r.name,state:te(r.state).join(","),inject:re(r.inject).join(","),props:ne(r.props).join(","),emits:se(r.emits).join(","),watch:o.watches.join(","),lifeCycles:i.join(","),computed:v.join(","),methods:[...a,...l].join(","),imports:m.join(`
+    </template>`}function be(t,e=[],r=[],s={}){const i={vue:["defineComponent","reactive"]};for(const n of e){const o=t.get(n.split(":")[0]);o&&o.package&&(i[o.package]??(i[o.package]=[])).push(o.parent||(o.alias||"").split(".")[0]||o.name)}for(const[n,o]of Object.entries(s))(i[n]??(i[n]=[])).push(...Array.from(o));return Object.entries(i).filter(([n,o])=>!!o.length).map(([n,o])=>`import { ${l.dedupArray(o).join(",")}} from '${n}';`).concat(r)}function je(t={}){const e=[];for(const[r,s]of Object.entries(t))e.push(`
+    ${r} {
+        ${ee(s)}
+    }
+    `);return e.join(`
+`)}function we(t,e){const{dsl:r}=t,s=Object.keys(r.computed||{}),i=v(r.lifeCycles,s),n=v(r.computed,s),o=oe(r.watch,s),a=ae(r.dataSources),{methods:c,nodes:h,components:f,importBlocks:y}=V(r.nodes||[],e,s,t.context),S=[...n,...o.computed],p=v({...c,...r.methods||{}},s),O=y.map(g=>`import ${g.name} from './${g.id}.vue';`),m=be(e,f,O,t.imports);return{id:r.id,version:r.__VERSION__,name:r.name,state:re(r.state).join(","),inject:se(r.inject).join(","),props:ne(r.props).join(","),emits:ie(r.emits).join(","),watch:o.watches.join(","),lifeCycles:i.join(","),computed:S.join(","),methods:[...a,...p].join(","),imports:m.join(`
 `),components:f.join(","),returns:t.members.join(","),template:h.join(`
-`),css:r.css||""}}const je=`
+`),css:r.css||"",style:je(t.style)}}const Se=`
 <%= imports %>
 import { useProvider } from '@vtj/renderer';
 export default defineComponent({
@@ -57,7 +64,7 @@ export default defineComponent({
   <% if(methods) { %> methods: { <%= methods %> }, <% } %>
   <% if(watch) { %> watch: { <%= watch %> }, <% } %> <%= lifeCycles %>
 });
-`.replace(/(\n|\r|\t)/g,""),we=`
+`.replace(/(\n|\r|\t)/g,""),Oe=`
 <template>
 <%= template %>
 </template>
@@ -66,8 +73,9 @@ export default defineComponent({
 <\/script>
 <style lang="scss" scoped>
 <%= css %>
+<%= style %>
 </style>
-`,Se=p.template(je),ke=p.template(we);async function xe(t,e=new Map,r=[],n){const i=new ee(p.cloneDeep(t),r),s=ve(i,e),o=Se(s),a=ke({template:s.template,css:await Z(s.css,n),script:await Y(o,n)});return await I(a,n)}async function Ce(t){const e=`
+`,_e=l.template(Se),ke=l.template(Oe);async function xe(t,e=new Map,r=[],s){const i=new te(l.cloneDeep(t),r),n=we(i,e),o=_e(n),a=ke({template:n.template,css:await W(n.css,s),script:await Z(o,s),style:await W(n.style,s)});return await J(a,s)}async function Ce(t){const e=`
     <template>
       <div>
         <h3>源码模式页面</h3>
@@ -78,4 +86,4 @@ export default defineComponent({
     <\/script>
     <style scoped lang="scss">
     </style>
-  `;return await I(e)}exports.VTJ_CODER_VERSION=U;exports.createEmptyPage=Ce;exports.generator=xe;
+  `;return await J(e)}exports.VTJ_CODER_VERSION=X;exports.createEmptyPage=Ce;exports.generator=xe;

package/dist/index.mjs

@@ -1,25 +1,25 @@
-import { mitt as q, dedupArray as v, toArray as M, camelCase as d, isPlainObject as D, template as I, cloneDeep as Q } from "@vtj/base";
-import { format as x } from "prettier/standalone";
-import * as z from "prettier/plugins/html";
-import * as G from "prettier/plugins/babel";
-import * as H from "prettier/plugins/postcss";
-import * as U from "prettier/plugins/estree";
+import { mitt as z, dedupArray as j, toArray as G, camelCase as d, isPlainObject as H, template as B, cloneDeep as U } from "@vtj/base";
+import { format as O } from "prettier/standalone";
+import * as X from "prettier/plugins/html";
+import * as J from "prettier/plugins/babel";
+import * as L from "prettier/plugins/postcss";
+import * as T from "prettier/plugins/estree";
 /**!
  * Copyright (c) 2024, VTJ.PRO All rights reserved.
  * @name @vtj/coder 
  * @author CHC chenhuachun1549@dingtalk.com 
- * @version 0.7.14
+ * @version 0.7.15
  * @license <a href="https://vtj.pro/license.html">MIT License</a>
  */
-const Oe = "0.7.14";
+const Pt = "0.7.15";
 /**!
  * Copyright (c) 2024, VTJ.PRO All rights reserved.
  * @name @vtj/core 
  * @author CHC chenhuachun1549@dingtalk.com 
- * @version 0.7.14
+ * @version 0.7.15
  * @license <a href="https://vtj.pro/license.html">MIT License</a>
  */
-const X = [
+const Y = [
   "slot",
   "template",
   "component",
@@ -32,8 +32,8 @@ const X = [
   "span",
   "a"
 ];
-q();
-const k = {
+z();
+const C = {
   arrowParens: "always",
   bracketSpacing: !0,
   bracketSameLine: !0,
@@ -53,415 +53,450 @@ const k = {
   useTabs: !1,
   vueIndentScriptAndStyle: !0
 };
-async function B(t, e) {
-  return e ? t : await x(t, {
-    parser: "html",
-    ...k,
-    plugins: [z]
+async function V(e, t) {
+  return t ? e : await O(e, {
+    parser: "vue",
+    ...C,
+    plugins: [X, J, T, L]
   });
 }
-async function Y(t, e) {
-  return e ? t : await x(t, {
+async function Z(e, t) {
+  return t ? e : await O(e, {
     parser: "babel-ts",
-    ...k,
-    plugins: [G, U]
+    ...C,
+    plugins: [J, T]
   });
 }
-async function Z(t, e) {
-  return e ? t : x(t, {
+async function W(e, t) {
+  return t ? e : O(e, {
     parser: "scss",
-    ...k,
-    plugins: [H]
+    ...C,
+    plugins: [L]
   });
 }
-function C(t) {
-  return t && t.type === "JSExpression";
+function _(e) {
+  return e && e.type === "JSExpression";
 }
-function O(t) {
-  return typeof t == "object" && t && t.type === "JSFunction";
+function P(e) {
+  return typeof e == "object" && e && e.type === "JSFunction";
 }
-function E(t) {
-  return C(t) || O(t);
+function b(e) {
+  return _(e) || P(e);
 }
-function P(t) {
-  return t.replace(new RegExp("this.", "g"), "");
+function E(e) {
+  return e.replace(new RegExp("this.", "g"), "");
 }
-function W(t) {
-  return t.replace(/this\.context\??\./g, "");
+function I(e) {
+  return e.replace(/this\.context\??\./g, "");
 }
-function p(t, e = !0, r = !0) {
-  const n = E(t) ? t.value : e ? JSON.stringify(t) : t;
-  return r ? P(W(n)) : W(n);
+function l(e, t = !0, s = !0) {
+  const r = b(e) ? e.value : t ? JSON.stringify(e) : e;
+  return s ? E(I(r)) : I(r);
 }
-function A(t, e = []) {
-  let r = t;
-  for (const n of e)
-    r = r.replace(
-      new RegExp(`this.${n}.value`, "g"),
-      `this.${n}`
+function w(e, t = []) {
+  let s = e;
+  for (const r of t)
+    s = s.replace(
+      new RegExp(`this.${r}.value`, "g"),
+      `this.${r}`
     );
-  return r;
+  return s;
 }
-function J(t) {
-  let e = t.trim();
-  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/, "");
+function q(e) {
+  let t = e.trim();
+  if (t = /^\((\(|async|function)/.test(t) ? t.substring(1, t.length - 1) : t, t.startsWith("{"))
+    return t;
+  if (t.startsWith("async function"))
+    t = t.replace(/^async function/, "async");
+  else if (t.startsWith("function"))
+    t = t.replace(/^function/, "");
   else {
-    const i = /^(async\s)?\([\w]*\)\s+\=\>\s([\w\W]+)/, s = e.match(i);
-    s && s[2] && (s[2].startsWith("{") || (e = e.replace(s[2], `{ return ${s[2]} }`))), e = e.replace("=>", "");
+    const i = /^(async\s)?\([\w]*\)\s+\=\>\s([\w\W]+)/, n = t.match(i);
+    n && n[2] && (n[2].startsWith("{") || (t = t.replace(n[2], `{ return ${n[2]} }`))), t = t.replace("=>", "");
   }
-  return e;
+  return t;
 }
-function K(t = {}) {
-  return Object.entries(t).map(([e, r]) => `"${e}": ${p(r)}`);
+function K(e = {}) {
+  return Object.entries(e).map(([t, s]) => `"${t}": ${l(s)}`);
 }
-function L(t = {}, e = !1) {
-  const r = Object.keys(t);
-  return e ? r.map((n) => "." + n) : r;
+function M(e = {}, t = !1) {
+  const s = Object.keys(e);
+  return t ? s.map((r) => "." + r) : s;
 }
-class ee {
-  constructor(e, r) {
-    this.dsl = e, this.dependencies = r, this.libraryRegex = this.collectLibrary(), this.walk(e), this.walkNodes(e), this.members = this.getLibraryMember();
+function tt(e) {
+  let t = "";
+  for (var s in e)
+    if (e.hasOwnProperty(s)) {
+      var r = e[s];
+      t += s + ": " + r + ";";
+    }
+  return t;
+}
+class et {
+  constructor(t, s) {
+    this.dsl = t, this.dependencies = s, this.libraryRegex = this.collectLibrary(), this.walk(t), this.walkNodes(t), this.members = this.getLibraryMember();
   }
   /**
    *  { 'element-plus': ['ElButton', 'ElInput' ...] }
    */
   imports = {};
   context = {};
+  style = {};
   members = [];
   libraryRegex = [];
   collectLibrary() {
-    return this.dependencies.filter((e) => !!e.library).map((e) => new RegExp(`(this.\\$libs.${e.library}.([\\w]+))`, "g"));
+    return this.dependencies.filter((t) => !!t.library).map((t) => new RegExp(`(this.\\$libs.${t.library}.([\\w]+))`, "g"));
   }
   /**
    * 收集 import 信息
    * @param regexMatchItem  ex: this.$libs.ElementPlus.ElButton
    * @returns  ex: { name: 'ElButton', path: 'this.$libs.ElementPlus.', library: 'ElementPlus' }
    */
-  collectImport(e) {
-    const r = e.split(".");
-    if (r.length === 4) {
-      const n = r.pop(), i = r.join(".") + ".", s = r.pop();
-      if (n && s) {
+  collectImport(t) {
+    const s = t.split(".");
+    if (s.length === 4) {
+      const r = s.pop(), i = s.join(".") + ".", n = s.pop();
+      if (r && n) {
         const o = this.dependencies.find(
-          (a) => a.library === s
+          (a) => a.library === n
         )?.package;
-        o && (this.imports[o] || (this.imports[o] = /* @__PURE__ */ new Set())).add(n);
+        o && (this.imports[o] || (this.imports[o] = /* @__PURE__ */ new Set())).add(r);
       }
       return {
-        name: n,
+        name: r,
         path: i,
-        library: s
+        library: n
       };
     }
     return null;
   }
   // 代码中包含依赖库的引用，需要从代码中移除
-  replaceLibraryPath(e) {
-    const { libraryRegex: r } = this;
-    let n = e.value;
-    for (const i of r) {
-      const s = e.value.match(i) || [];
-      for (const o of s) {
+  replaceLibraryPath(t) {
+    const { libraryRegex: s } = this;
+    let r = t.value;
+    for (const i of s) {
+      const n = t.value.match(i) || [];
+      for (const o of n) {
         const a = this.collectImport(o);
         if (a) {
           const c = a.path.replace(/\$/g, "\\$");
-          n = n.replace(new RegExp(c, "g"), "");
+          r = r.replace(new RegExp(c, "g"), "");
         }
       }
     }
-    return n;
+    return r;
   }
-  walk(e) {
-    const r = (n) => {
-      if (!n || typeof n != "object")
+  walk(t) {
+    const s = (r) => {
+      if (!r || typeof r != "object")
         return;
-      if (Array.isArray(n)) {
-        for (let s of n)
-          r(s);
+      if (Array.isArray(r)) {
+        for (let n of r)
+          s(n);
         return;
       }
-      const i = Object.values(n);
-      for (const s of i)
-        E(s) ? s.value = this.replaceLibraryPath(s) : r(s);
+      const i = Object.values(r);
+      for (const n of i)
+        b(n) ? n.value = this.replaceLibraryPath(n) : s(n);
     };
-    r(e);
+    s(t);
   }
-  getLibraryMember(e = []) {
-    let r = [...e];
-    for (const n of Object.values(this.imports))
-      r = r.concat(Array.from(n));
-    return v(r);
+  getLibraryMember(t = []) {
+    let s = [...t];
+    for (const r of Object.values(this.imports))
+      s = s.concat(Array.from(r));
+    return j(s);
   }
-  collectContext(e, r) {
-    const n = new Set(r?.id ? this.context[r.id] : []), i = (e.directives || []).find((a) => a.name === "vFor");
-    let s = new Set(Array.from(n));
+  collectContext(t, s) {
+    const r = new Set(s?.id ? this.context[s.id] : []), i = (t.directives || []).find((a) => a.name === "vFor");
+    let n = new Set(Array.from(r));
     if (i) {
       const { item: a = "item", index: c = "index" } = i.iterator || {};
-      s = /* @__PURE__ */ new Set([a, c, ...Array.from(s)]);
+      n = /* @__PURE__ */ new Set([a, c, ...Array.from(n)]);
     }
-    const o = e.slot;
+    const o = t.slot;
     if (o) {
-      const a = typeof o == "string" ? [] : o.params || [], c = a.length ? a : [`scope_${r?.id}`];
-      s = /* @__PURE__ */ new Set([...c, ...Array.from(s)]);
+      const a = typeof o == "string" ? [] : o.params || [], c = a.length ? a : [`scope_${s?.id}`];
+      n = /* @__PURE__ */ new Set([...c, ...Array.from(n)]);
     }
-    this.context[e.id] = s;
+    this.context[t.id] = n;
+  }
+  collectStyle(t) {
+    t.id && t.props?.style && (this.style[`.${t.name}_${t.id}`] = t.props.style);
   }
-  walkNodes(e) {
-    const r = (n, i) => {
-      this.collectContext(n, i), Array.isArray(n.children) && n.children.forEach((s) => r(s, n));
+  walkNodes(t) {
+    const s = (r, i) => {
+      this.collectContext(r, i), this.collectStyle(r), Array.isArray(r.children) && r.children.forEach((n) => s(n, r));
     };
-    Array.isArray(e.nodes) && e.nodes.forEach((n) => r(n));
+    Array.isArray(t.nodes) && t.nodes.forEach((r) => s(r));
   }
 }
-function te(t = {}) {
-  return Object.entries(t).map(([e, r]) => {
-    const n = p(r, !1);
-    return `${e}:${n}`;
+function st(e = {}) {
+  return Object.entries(e).map(([t, s]) => {
+    const r = l(s, !1);
+    return `${t}:${r}`;
   });
 }
-function re(t = []) {
-  return t.map((e) => `${e.name}: {
-            from: '${e.from || e.name}',
-            default: ${p(e.default, !0, !1)}
+function rt(e = []) {
+  return e.map((t) => `${t.name}: {
+            from: '${t.from || t.name}',
+            default: ${l(t.default, !0, !1)}
         }`);
 }
-function ne(t = []) {
-  const e = (r) => r ? `[${M(r).map((s) => s.replace(/\'|\"/gi, "")).join(",")}]` : void 0;
-  return t.map((r) => typeof r == "string" ? `${r}: {}` : `${r.name}: {
-          type:${e(r.type)},
-          required: ${r.required},
-          default: ${p(r.default, !0, !1)}
+function nt(e = []) {
+  const t = (s) => s ? `[${G(s).map((n) => n.replace(/\'|\"/gi, "")).join(",")}]` : void 0;
+  return e.map((s) => typeof s == "string" ? `${s}: {}` : `${s.name}: {
+          type:${t(s.type)},
+          required: ${s.required},
+          default: ${l(s.default, !0, !1)}
           }`);
 }
-function se(t = []) {
-  return t.map((e) => `'${e}'`);
+function it(e = []) {
+  return e.map((t) => `'${t}'`);
 }
-function y(t = {}, e = []) {
-  return Object.entries(t).map(([r, n]) => {
-    let i = J(p(n, !1, !1));
-    return i = A(i, e), i.startsWith("async") ? `async ${r}${i.replace(/^async/, "")}` : `${r}${i}`;
+function v(e = {}, t = []) {
+  return Object.entries(e).map(([s, r]) => {
+    let i = q(l(r, !1, !1));
+    return i = w(i, t), i.startsWith("async") ? `async ${s}${i.replace(/^async/, "")}` : `${s}${i}`;
   });
 }
-function oe(t = [], e = []) {
-  const r = t.reduce(
-    (s, o) => (o.id && O(o.source) && (s[`watcher_${o.id}`] = o.source), s),
+function ot(e = [], t = []) {
+  const s = e.reduce(
+    (n, o) => (o.id && P(o.source) && (n[`watcher_${o.id}`] = o.source), n),
     {}
-  ), n = y(r, e), i = t.map((s) => `watcher_${s.id}: {
-        deep: ${s.deep},
-        immediate:${s.immediate},
-        handler${J(s.handler.value)}
+  ), r = v(s, t), i = e.map((n) => `watcher_${n.id}: {
+        deep: ${n.deep},
+        immediate:${n.immediate},
+        handler${q(n.handler.value)}
       }`);
   return {
-    computed: n,
+    computed: r,
     watches: i
   };
 }
-function ie(t = {}) {
-  return Object.values(t).map((e) => {
-    const r = O(e.transform) && e.transform.value || "(res) => res";
-    return `async ${e.name}(...args:any[]) {
-          return await this.provider.apis.${e.ref}.apply(this, args).then(${r});
+function at(e = {}) {
+  return Object.values(e).map((t) => {
+    const s = P(t.transform) && t.transform.value || "(res) => res";
+    return `async ${t.name}(...args:any[]) {
+          return await this.provider.apis.${t.ref}.apply(this, args).then(${s});
         }`;
   });
 }
-function T(t, e, r = [], n = {}, i) {
-  const s = [];
+function D(e, t, s = [], r = {}, i) {
+  const n = [];
   let o = {}, a = [], c = [];
-  return ae(t).forEach((l) => {
-    const $ = [];
-    for (const u of l.children) {
-      let { id: j, name: f, invisible: g, from: w } = u;
-      if (g)
+  return ct(e).forEach((p) => {
+    const y = [];
+    for (const u of p.children) {
+      let { id: x, name: f, invisible: $, from: k } = u;
+      if ($)
         continue;
-      const _ = ce(f, e, w);
-      _ && a.push(_), pe(w) && c.push({ id: w.id, name: f });
-      const { props: F, events: N, handlers: V } = de(
-        j,
+      const A = lt(f, t, k);
+      A && a.push(A), ut(k) && c.push({ id: k.id, name: f });
+      const { props: F, events: N, handlers: Q } = ht(
+        u,
+        x,
         u.props,
         u.events,
-        n,
-        r
-      ), R = he(u.directives).join(" "), m = u.children ? ge(
+        r,
+        s
+      ), R = yt(u.directives).join(" "), m = u.children ? gt(
         u.children,
+        s,
+        t,
         r,
-        e,
-        n,
         u
       ) : "";
-      Object.assign(o, V);
-      let S = "";
-      typeof m == "string" ? S = m : (S = (m?.nodes || []).join(`
-`), Object.assign(o, m?.methods || {}), a = a.concat(m?.components || []), c = c.concat(m?.importBlocks || [])), $.push(
-        f === "img" ? `<${f} ${R} ${F} ${N} />` : `<${f} ${R} ${F} ${N}>${S.trim()}</${f}>`
+      Object.assign(o, Q);
+      let g = "";
+      typeof m == "string" ? g = m : (g = (m?.nodes || []).join(`
+`), Object.assign(o, m?.methods || {}), a = a.concat(m?.components || []), c = c.concat(m?.importBlocks || [])), y.push(
+        f === "img" ? `<${f} ${R} ${F} ${N} />
+` : `<${f} ${R} ${F} ${N}>${g ? `
+` + g.trim() : ""}</${f}>`
       );
     }
-    const b = ye(l.slot, $.join(`
+    const S = vt(p.slot, y.join(`
 `), i?.id);
-    s.push(b);
+    n.push(S);
   }), {
-    nodes: s,
+    nodes: n,
     methods: o,
-    components: v(a),
-    importBlocks: v(c, "id")
+    components: j(a),
+    importBlocks: j(c, "id")
   };
 }
-function ae(t = []) {
-  const e = /* @__PURE__ */ new Map();
-  for (const r of t) {
-    const n = typeof r.slot == "string" ? r.slot : r.slot?.name, i = e.get(n);
-    i ? i.children.push(r) : e.set(n, { slot: r.slot, children: [r] });
+function ct(e = []) {
+  const t = /* @__PURE__ */ new Map();
+  for (const s of e) {
+    const r = typeof s.slot == "string" ? s.slot : s.slot?.name, i = t.get(r);
+    i ? i.children.push(s) : t.set(r, { slot: s.slot, children: [s] });
   }
-  return e;
+  return t;
 }
-function ce(t, e, r) {
-  if (X.includes(t))
+function lt(e, t, s) {
+  if (Y.includes(e))
     return null;
-  const n = e.get(t);
-  if (n && n.alias) {
-    const i = n.parent ? `${n.parent}.${n.alias}` : n.alias;
-    return `${t}: ${i}`;
+  const r = t.get(e);
+  if (r && r.alias) {
+    const i = r.parent ? `${r.parent}.${r.alias}` : r.alias;
+    return `${e}: ${i}`;
   }
-  return r || n ? t : null;
-}
-function pe(t) {
-  return !!t && typeof t == "object" && t.type === "Schema";
-}
-function ue(t, e, r = []) {
-  return typeof e == "string" ? `${t}="${e}"` : E(e) ? `:${t}="${p({
-    ...e,
-    value: A(e.value, r)
-  })}"` : D(e) ? `:${t}='{${K(
-    e
-  ).join(", ")}}'` : `:${t}='${JSON.stringify(e)}'`;
-}
-function le(t = {}, e = []) {
-  return Object.entries(t).map(([r, n]) => ue(r, n, e));
+  return s || r ? e : null;
+}
+function ut(e) {
+  return !!e && typeof e == "object" && e.type === "Schema";
+}
+function pt(e, t, s = []) {
+  return e === "style" ? "" : e === "__class" && b(t) ? `:class="${l({
+    ...t,
+    value: w(t.value, s)
+  })}"` : typeof t == "string" ? `${e}="${t}"` : b(t) ? `:${e}="${l({
+    ...t,
+    value: w(t.value, s)
+  })}"` : H(t) ? `:${e}='{${K(
+    t
+  ).join(", ")}}'` : `:${e}='${JSON.stringify(t)}'`;
+}
+function ft(e, t = {}, s = []) {
+  if (!!Object.keys(t.style || {}).length) {
+    const i = `${e.name}_${e.id}`;
+    t.class ? typeof t.class == "string" ? t.class = [t.class, i].join(" ") : (t.__class = t.class, t.class = i) : (t.class = i, delete t.style);
+  }
+  return Object.entries(t).map(([i, n]) => pt(i, n, s));
 }
-function fe(t, e, r, n) {
-  const i = L(e.modifiers, !0);
-  return n && n.length > 0 ? `@${t}${i.join("")}="(...args:any[]) => ${r}"` : `@${t}${i.join("")}="${r}"`;
+function mt(e, t, s, r) {
+  const i = M(t.modifiers, !0);
+  return r && r.length > 0 ? `@${e}${i.join("")}="(...args:any[]) => ${s}"` : `@${e}${i.join("")}="${s}"`;
 }
-function me(t, e = {}, r = {}) {
-  const n = {}, i = Array.from(r[t] || /* @__PURE__ */ new Set([])), s = i.length ? `({${i.join(", ")}}, args)` : "";
+function dt(e, t = {}, s = {}) {
+  const r = {}, i = Array.from(s[e] || /* @__PURE__ */ new Set([])), n = i.length ? `({${i.join(", ")}}, args)` : "";
   return {
-    binders: Object.entries(e).map(([a, c]) => {
-      const h = c.handler.value.startsWith("this."), l = h ? P(c.handler.value) : `${d(a)}_handler_${t}${s}`;
-      return h || (n[l] = i.length ? {
+    binders: Object.entries(t).map(([a, c]) => {
+      const h = c.handler.value.startsWith("this."), p = h ? E(c.handler.value) : `${d(a)}_handler_${e}${n}`;
+      return h || (r[p] = i.length ? {
         type: "JSFunction",
         value: `{
           return (${c.handler.value}).apply(this, args);
         }`
-      } : c.handler), fe(a, c, l, i);
+      } : c.handler), mt(a, c, p, i);
     }),
-    handlers: n
+    handlers: r
   };
 }
-function de(t, e = {}, r = {}, n = {}, i) {
-  const { binders: s, handlers: o } = me(t, r, n);
+function ht(e, t, s = {}, r = {}, i = {}, n) {
+  const { binders: o, handlers: a } = dt(t, r, i);
   return {
-    props: le(e, i).join(" "),
-    handlers: o,
-    binders: s,
-    events: s.join(" ")
+    props: ft(e, s, n).join(" "),
+    handlers: a,
+    binders: o,
+    events: o.join(" ")
   };
 }
-function he(t = []) {
-  const e = [], { vIf: r, vShow: n, vModels: i, vFor: s } = $e(t);
-  if (r && e.push(`v-if="${p(r.value)}"`), n && e.push(`v-show="${p(n.value)}"`), i.forEach((o) => {
-    const a = L(o.modifiers, !0), c = o.arg ? C(o.arg) ? `:[${p(o.arg)}]` : `:${o.arg}` : "";
-    e.push(`v-model${c}${a}="${p(o.value)}"`);
-  }), s) {
-    const { item: o, index: a } = { item: "item", index: "index", ...s.iterator };
-    e.push(`v-for="(${o}, ${a}) in ${p(s.value)}"`);
+function yt(e = []) {
+  const t = [], { vIf: s, vShow: r, vModels: i, vFor: n } = $t(e);
+  if (s && t.push(`v-if="${l(s.value)}"`), r && t.push(`v-show="${l(r.value)}"`), i.forEach((o) => {
+    const a = M(o.modifiers, !0), c = o.arg ? _(o.arg) ? `:[${l(o.arg)}]` : `:${o.arg}` : "";
+    t.push(`v-model${c}${a}="${l(o.value)}"`);
+  }), n) {
+    const { item: o, index: a } = { item: "item", index: "index", ...n.iterator };
+    t.push(`v-for="(${o}, ${a}) in ${l(n.value)}"`);
   }
-  return e;
+  return t;
 }
-function $e(t = []) {
-  const e = t.find((o) => d(o.name) === "vIf"), r = t.find((o) => d(o.name) === "vFor"), n = t.find((o) => d(o.name) === "vShow"), i = t.find((o) => d(o.name) === "vBind"), s = t.filter((o) => d(o.name) === "vModel");
+function $t(e = []) {
+  const t = e.find((o) => d(o.name) === "vIf"), s = e.find((o) => d(o.name) === "vFor"), r = e.find((o) => d(o.name) === "vShow"), i = e.find((o) => d(o.name) === "vBind"), n = e.filter((o) => d(o.name) === "vModel");
   return {
-    vIf: e,
-    vFor: r,
-    vShow: n,
-    vModels: s,
+    vIf: t,
+    vFor: s,
+    vShow: r,
+    vModels: n,
     vBind: i
   };
 }
-function ge(t, e, r, n, i) {
-  if (typeof t == "string")
-    return t;
-  if (C(t)) {
-    let s = p(t, !1);
-    return s = A(s, e), s = P(s), `{{ ${s} }}`;
+function gt(e, t, s, r, i) {
+  if (typeof e == "string")
+    return e;
+  if (_(e)) {
+    let n = l(e, !1);
+    return n = w(n, t), n = E(n), `{{ ${n} }}`;
   }
-  return Array.isArray(t) ? T(t, r, e, n, i) : "";
+  return Array.isArray(e) ? D(e, s, t, r, i) : "";
 }
-function ye(t, e, r) {
-  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_${r}`}"`}>
-    ${e}
+function vt(e, t, s) {
+  if (!e)
+    return t;
+  const r = typeof e == "string" ? { name: e, params: [] } : { params: [], ...e };
+  return `<template ${`#${r.name}="${r.params?.length > 0 ? `{${r.params?.join(",")}}` : `scope_${s}`}"`}>
+    ${t}
     </template>`;
 }
-function ve(t, e = [], r = [], n = {}) {
+function jt(e, t = [], s = [], r = {}) {
   const i = {
     vue: ["defineComponent", "reactive"]
   };
-  for (const s of e) {
-    const o = t.get(s.split(":")[0]);
+  for (const n of t) {
+    const o = e.get(n.split(":")[0]);
     o && o.package && (i[o.package] ?? (i[o.package] = [])).push(o.parent || (o.alias || "").split(".")[0] || o.name);
   }
-  for (const [s, o] of Object.entries(n))
-    (i[s] ?? (i[s] = [])).push(...Array.from(o));
-  return Object.entries(i).filter(([s, o]) => !!o.length).map(([s, o]) => `import { ${v(o).join(
+  for (const [n, o] of Object.entries(r))
+    (i[n] ?? (i[n] = [])).push(...Array.from(o));
+  return Object.entries(i).filter(([n, o]) => !!o.length).map(([n, o]) => `import { ${j(o).join(
     ","
-  )}} from '${s}';`).concat(r);
-}
-function be(t, e) {
-  const { dsl: r } = t, n = Object.keys(r.computed || {}), i = y(r.lifeCycles, n), s = y(r.computed, n), o = oe(r.watch, n), a = ie(r.dataSources), { methods: c, nodes: h, components: l, importBlocks: $ } = T(
-    r.nodes || [],
-    e,
-    n,
-    t.context
-  ), b = [...s, ...o.computed], u = y(
+  )}} from '${n}';`).concat(s);
+}
+function bt(e = {}) {
+  const t = [];
+  for (const [s, r] of Object.entries(e))
+    t.push(`
+    ${s} {
+        ${tt(r)}
+    }
+    `);
+  return t.join(`
+`);
+}
+function wt(e, t) {
+  const { dsl: s } = e, r = Object.keys(s.computed || {}), i = v(s.lifeCycles, r), n = v(s.computed, r), o = ot(s.watch, r), a = at(s.dataSources), { methods: c, nodes: h, components: p, importBlocks: y } = D(
+    s.nodes || [],
+    t,
+    r,
+    e.context
+  ), S = [...n, ...o.computed], u = v(
     {
       ...c,
-      ...r.methods || {}
+      ...s.methods || {}
     },
-    n
-  ), j = $.map((g) => `import ${g.name} from './${g.id}.vue';`), f = ve(
-    e,
-    l,
-    j,
-    t.imports
+    r
+  ), x = y.map(($) => `import ${$.name} from './${$.id}.vue';`), f = jt(
+    t,
+    p,
+    x,
+    e.imports
   );
   return {
-    id: r.id,
-    version: r.__VERSION__,
-    name: r.name,
-    state: te(r.state).join(","),
-    inject: re(r.inject).join(","),
-    props: ne(r.props).join(","),
-    emits: se(r.emits).join(","),
+    id: s.id,
+    version: s.__VERSION__,
+    name: s.name,
+    state: st(s.state).join(","),
+    inject: rt(s.inject).join(","),
+    props: nt(s.props).join(","),
+    emits: it(s.emits).join(","),
     watch: o.watches.join(","),
     lifeCycles: i.join(","),
-    computed: b.join(","),
+    computed: S.join(","),
     methods: [...a, ...u].join(","),
     imports: f.join(`
 `),
-    components: l.join(","),
-    returns: t.members.join(","),
+    components: p.join(","),
+    returns: e.members.join(","),
     template: h.join(`
 `),
-    css: r.css || ""
+    css: s.css || "",
+    style: bt(e.style)
   };
 }
-const je = `
+const St = `
 <%= imports %>
 import { useProvider } from '@vtj/renderer';
 export default defineComponent({
@@ -487,7 +522,7 @@ export default defineComponent({
   <% if(methods) { %> methods: { <%= methods %> }, <% } %>
   <% if(watch) { %> watch: { <%= watch %> }, <% } %> <%= lifeCycles %>
 });
-`.replace(/(\n|\r|\t)/g, ""), we = `
+`.replace(/(\n|\r|\t)/g, ""), xt = `
 <template>
 <%= template %>
 </template>
@@ -496,22 +531,24 @@ export default defineComponent({
 <\/script>
 <style lang="scss" scoped>
 <%= css %>
+<%= style %>
 </style>
-`, Se = I(je), xe = I(we);
-async function Ee(t, e = /* @__PURE__ */ new Map(), r = [], n) {
-  const i = new ee(Q(t), r), s = be(i, e), o = Se(s), a = xe({
-    template: s.template,
-    css: await Z(s.css, n),
-    script: await Y(o, n)
+`, kt = B(St), Ot = B(xt);
+async function Et(e, t = /* @__PURE__ */ new Map(), s = [], r) {
+  const i = new et(U(e), s), n = wt(i, t), o = kt(n), a = Ot({
+    template: n.template,
+    css: await W(n.css, r),
+    script: await Z(o, r),
+    style: await W(n.style, r)
   });
-  return await B(a, n);
+  return await V(a, r);
 }
-async function Pe(t) {
-  const e = `
+async function At(e) {
+  const t = `
     <template>
       <div>
         <h3>源码模式页面</h3>
-        <div>文件路径：/.vtj/vue/${t.id}.vue</div>
+        <div>文件路径：/.vtj/vue/${e.id}.vue</div>
       </div>
     </template>
     <script lang="ts" setup>
@@ -519,10 +556,10 @@ async function Pe(t) {
     <style scoped lang="scss">
     </style>
   `;
-  return await B(e);
+  return await V(t);
 }
 export {
-  Oe as VTJ_CODER_VERSION,
-  Pe as createEmptyPage,
-  Ee as generator
+  Pt as VTJ_CODER_VERSION,
+  At as createEmptyPage,
+  Et as generator
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vtj/coder",
   "private": false,
-  "version": "0.7.14",
+  "version": "0.7.15",
   "type": "module",
   "scripts": {
     "build": "vue-tsc && vite build",
@@ -10,12 +10,12 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@vtj/base": "^0.7.5",
-    "@vtj/core": "^0.7.14",
+    "@vtj/base": "^0.7.6",
+    "@vtj/core": "^0.7.15",
     "prettier": "~3.2.1"
   },
   "devDependencies": {
-    "@vtj/cli": "^0.7.10"
+    "@vtj/cli": "^0.7.11"
   },
   "exports": {
     ".": {
@@ -31,7 +31,7 @@
     "dist",
     "types"
   ],
-  "gitHead": "8e69e3eea31f488f318f28013b7ef3df02ee8174",
+  "gitHead": "cbb81a983f9271342f987a2507923ef7c2e55369",
   "publishConfig": {
     "access": "public"
   }

package/types/collecter.d.ts

@@ -7,6 +7,7 @@ export declare class Collecter {
      */
     imports: Record<string, Set<string>>;
     context: Record<string, Set<string>>;
+    style: Record<string, Record<string, any>>;
     members: string[];
     private libraryRegex;
     constructor(dsl: BlockSchema, dependencies: Dependencie[]);
@@ -21,5 +22,6 @@ export declare class Collecter {
     private walk;
     private getLibraryMember;
     private collectContext;
+    private collectStyle;
     private walkNodes;
 }

package/types/formatters.d.ts

@@ -1,6 +1,7 @@
 /**
  * 代码格式化工具
  */
+export declare function vueFormatter(content: string, disabled?: boolean): Promise<string>;
 /**
  * 格式化HTMl代码
  */

package/types/parser/index.d.ts

@@ -17,5 +17,6 @@ export interface Token {
     returns: string;
     template: string;
     css: string;
+    style: string;
 }
 export declare function parser(collecter: Collecter, componentMap: Map<string, MaterialDescription>): Token;

package/types/parser/style.d.ts

@@ -0,0 +1 @@
+export declare function parseStyle(style?: Record<string, Record<string, any>>): string;

package/types/utils.d.ts

@@ -10,3 +10,4 @@ export declare function replaceComputedValue(content: string, keys?: string[]):
 export declare function replaceFunctionTag(content: string): string;
 export declare function parsePlainObjectValue(obj?: Record<string, any>): string[];
 export declare function getModifiers(modifiers?: Record<string, boolean>, isToString?: boolean): string[];
+export declare function jsonToStyle(json: Record<string, any>): string;

package/types/version.d.ts

@@ -2,7 +2,7 @@
  * Copyright (c) 2024, VTJ.PRO All rights reserved.
  * @name @vtj/coder
  * @author CHC chenhuachun1549@dingtalk.com
- * @version 0.7.13
+ * @version 0.7.14
  * @license <a href="https://vtj.pro/license.html">MIT License</a>
  */
-export declare const version = "0.7.13";
+export declare const version = "0.7.14";