@fluixi/compiler 1.0.0-alpha.83 → 1.0.0-alpha.85
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/analyze/expr-shape.cjs +62 -1
- package/dist/analyze/expr-shape.d.cts +14 -0
- package/dist/analyze/expr-shape.d.ts +2 -2
- package/dist/analyze/expr-shape.js +1 -1
- package/dist/analyze/expr-shape.mjs +41 -1
- package/dist/analyze/intrinsics.cjs +80 -1
- package/dist/analyze/intrinsics.d.cts +66 -0
- package/dist/analyze/intrinsics.d.ts +7 -7
- package/dist/analyze/intrinsics.d.ts.map +1 -1
- package/dist/analyze/intrinsics.js +3 -3
- package/dist/analyze/intrinsics.mjs +59 -1
- package/dist/analyze/paren.cjs +134 -0
- package/dist/analyze/paren.d.cts +23 -0
- package/dist/analyze/paren.d.ts +24 -0
- package/dist/analyze/paren.d.ts.map +1 -0
- package/dist/analyze/paren.js +168 -0
- package/dist/analyze/paren.mjs +113 -0
- package/dist/analyze/props-destructure.cjs +226 -1
- package/dist/analyze/props-destructure.d.cts +83 -0
- package/dist/analyze/props-destructure.d.ts +3 -3
- package/dist/analyze/props-destructure.d.ts.map +1 -1
- package/dist/analyze/props-destructure.js +4 -4
- package/dist/analyze/props-destructure.mjs +205 -1
- package/dist/analyze/reactive-bindings.cjs +190 -1
- package/dist/analyze/reactive-bindings.d.cts +42 -0
- package/dist/analyze/reactive-bindings.d.ts +1 -1
- package/dist/analyze/reactive-bindings.js +2 -2
- package/dist/analyze/reactive-bindings.mjs +167 -1
- package/dist/analyze/reactive-expr.cjs +38 -1
- package/dist/analyze/reactive-expr.d.cts +38 -0
- package/dist/analyze/reactive-expr.d.ts +4 -4
- package/dist/analyze/reactive-expr.d.ts.map +1 -1
- package/dist/analyze/reactive-expr.js +2 -2
- package/dist/analyze/reactive-expr.mjs +17 -1
- package/dist/analyze/static-graph.cjs +811 -1
- package/dist/analyze/static-graph.d.cts +102 -0
- package/dist/analyze/static-graph.d.ts +1 -1
- package/dist/analyze/static-graph.d.ts.map +1 -1
- package/dist/analyze/static-graph.js +11 -11
- package/dist/analyze/static-graph.mjs +793 -1
- package/dist/babel-TGY76XJ7.mjs +636 -0
- package/dist/chunk-4PLHS2FP.mjs +158 -0
- package/dist/chunk-6DB5FXS4.mjs +1718 -0
- package/dist/chunk-F74GFKSL.mjs +16 -0
- package/dist/chunk-G6QC2WRJ.mjs +11 -0
- package/dist/chunk-RUDJDZAA.mjs +1078 -0
- package/dist/codegen/backend.cjs +18 -1
- package/dist/codegen/backend.d.cts +35 -0
- package/dist/codegen/backends/imperative.cjs +542 -1
- package/dist/codegen/backends/imperative.d.cts +11 -0
- package/dist/codegen/backends/imperative.d.ts +1 -1
- package/dist/codegen/backends/imperative.d.ts.map +1 -1
- package/dist/codegen/backends/imperative.js +24 -20
- package/dist/codegen/backends/imperative.mjs +519 -1
- package/dist/codegen/contract.cjs +52 -1
- package/dist/codegen/contract.d.cts +24 -0
- package/dist/codegen/contract.d.ts +2 -2
- package/dist/codegen/contract.js +2 -2
- package/dist/codegen/contract.mjs +31 -1
- package/dist/codegen/partial-template.cjs +176 -1
- package/dist/codegen/partial-template.d.cts +61 -0
- package/dist/codegen/partial-template.d.ts +4 -4
- package/dist/codegen/partial-template.js +0 -0
- package/dist/codegen/partial-template.mjs +153 -1
- package/dist/codegen/serialize-static.cjs +125 -1
- package/dist/codegen/serialize-static.d.cts +38 -0
- package/dist/codegen/serialize-static.d.ts +3 -3
- package/dist/codegen/serialize-static.js +6 -6
- package/dist/codegen/serialize-static.mjs +104 -1
- package/dist/frontend/babel/build-ir-lit.cjs +1509 -1
- package/dist/frontend/babel/build-ir-lit.d.cts +26 -0
- package/dist/frontend/babel/build-ir-lit.d.ts +2 -2
- package/dist/frontend/babel/build-ir-lit.mjs +1478 -1
- package/dist/frontend/babel/build-ir.cjs +1524 -1
- package/dist/frontend/babel/build-ir.d.cts +35 -0
- package/dist/frontend/babel/build-ir.d.ts +2 -2
- package/dist/frontend/babel/build-ir.js +2 -2
- package/dist/frontend/babel/build-ir.mjs +1495 -1
- package/dist/frontend/babel/index.cjs +2186 -1
- package/dist/frontend/babel/index.d.cts +33 -0
- package/dist/frontend/babel/index.d.ts +1 -1
- package/dist/frontend/babel/index.js +1 -1
- package/dist/frontend/babel/index.mjs +2156 -1
- package/dist/frontend/babel/lower-template.cjs +1507 -1
- package/dist/frontend/babel/lower-template.d.cts +23 -0
- package/dist/frontend/babel/lower-template.d.ts +1 -1
- package/dist/frontend/babel/lower-template.js +2 -2
- package/dist/frontend/babel/lower-template.mjs +1478 -1
- package/dist/frontend/babel/plugin.cjs +2132 -1
- package/dist/frontend/babel/plugin.d.cts +95 -0
- package/dist/frontend/babel/plugin.d.ts +5 -5
- package/dist/frontend/babel/plugin.d.ts.map +1 -1
- package/dist/frontend/babel/plugin.js +14 -14
- package/dist/frontend/babel/plugin.mjs +2103 -1
- package/dist/frontend/babel/server-functions.cjs +110 -1
- package/dist/frontend/babel/server-functions.d.cts +10 -0
- package/dist/frontend/babel/server-functions.mjs +89 -1
- package/dist/frontend/babel/types.cjs +18 -1
- package/dist/frontend/babel/types.d.cts +33 -0
- package/dist/frontend/types.cjs +18 -1
- package/dist/frontend/types.d.cts +25 -0
- package/dist/frontend/vocabulary.cjs +98 -0
- package/dist/frontend/vocabulary.d.cts +79 -0
- package/dist/frontend/vocabulary.d.ts +80 -0
- package/dist/frontend/vocabulary.d.ts.map +1 -0
- package/dist/frontend/vocabulary.js +124 -0
- package/dist/frontend/vocabulary.mjs +77 -0
- package/dist/index.cjs +1595 -14
- package/dist/index.d.cts +27 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +4 -4
- package/dist/index.mjs +1575 -14
- package/dist/integrations.cjs +4312 -26
- package/dist/integrations.d.cts +215 -0
- package/dist/integrations.d.ts +9 -9
- package/dist/integrations.d.ts.map +1 -1
- package/dist/integrations.js +29 -8
- package/dist/integrations.mjs +536 -18
- package/dist/ir/nodes.cjs +18 -1
- package/dist/ir/nodes.d.cts +168 -0
- package/dist/ir/nodes.d.ts +6 -6
- package/dist/lower/compile-template.cjs +1356 -1
- package/dist/lower/compile-template.d.cts +69 -0
- package/dist/lower/compile-template.d.ts +3 -3
- package/dist/lower/compile-template.js +1 -1
- package/dist/lower/compile-template.mjs +1336 -1
- package/dist/lower/jsx.cjs +529 -1
- package/dist/lower/jsx.d.cts +25 -0
- package/dist/lower/jsx.d.ts +1 -1
- package/dist/lower/jsx.d.ts.map +1 -1
- package/dist/lower/jsx.js +6 -5
- package/dist/lower/jsx.mjs +506 -1
- package/dist/lower/template.cjs +1061 -1
- package/dist/lower/template.d.cts +53 -0
- package/dist/lower/template.d.ts +3 -3
- package/dist/lower/template.d.ts.map +1 -1
- package/dist/lower/template.js +12 -11
- package/dist/lower/template.mjs +1042 -1
- package/dist/lower/text.cjs +42 -1
- package/dist/lower/text.d.cts +10 -0
- package/dist/lower/text.d.ts +2 -2
- package/dist/lower/text.d.ts.map +1 -1
- package/dist/lower/text.js +2 -2
- package/dist/lower/text.mjs +21 -1
- package/dist/optimize/analyze-static.cjs +112 -1
- package/dist/optimize/analyze-static.d.cts +39 -0
- package/dist/optimize/analyze-static.d.ts +2 -2
- package/dist/optimize/analyze-static.js +2 -2
- package/dist/optimize/analyze-static.mjs +91 -1
- package/dist/optimize/collapse-strategies.cjs +90 -1
- package/dist/optimize/collapse-strategies.d.cts +30 -0
- package/dist/optimize/collapse-strategies.d.ts +3 -3
- package/dist/optimize/collapse-strategies.mjs +67 -1
- package/dist/options.cjs +33 -1
- package/dist/options.d.cts +39 -0
- package/dist/options.d.ts +2 -2
- package/dist/options.mjs +12 -1
- package/dist/resolve/builtins.cjs +73 -1
- package/dist/resolve/builtins.d.cts +68 -0
- package/dist/resolve/builtins.d.ts +8 -8
- package/dist/resolve/builtins.d.ts.map +1 -1
- package/dist/resolve/builtins.js +4 -4
- package/dist/resolve/builtins.mjs +53 -1
- package/dist/resolve/component-globals.cjs +234 -14
- package/dist/resolve/component-globals.d.cts +80 -0
- package/dist/resolve/component-globals.d.ts +5 -5
- package/dist/resolve/component-globals.js +10 -10
- package/dist/resolve/component-globals.mjs +211 -14
- package/dist/resolve/component-resolver.cjs +80 -1
- package/dist/resolve/component-resolver.d.cts +68 -0
- package/dist/resolve/component-resolver.d.ts +3 -3
- package/dist/resolve/component-resolver.d.ts.map +1 -1
- package/dist/resolve/component-resolver.js +3 -3
- package/dist/resolve/component-resolver.mjs +59 -1
- package/dist/resolve/load-directive.cjs +93 -1
- package/dist/resolve/load-directive.d.cts +53 -0
- package/dist/resolve/load-directive.d.ts +5 -5
- package/dist/resolve/load-directive.js +6 -6
- package/dist/resolve/load-directive.mjs +72 -1
- package/dist/resolve/resolve-ir.cjs +108 -1
- package/dist/resolve/resolve-ir.d.cts +53 -0
- package/dist/resolve/resolve-ir.d.ts +6 -6
- package/dist/resolve/resolve-ir.d.ts.map +1 -1
- package/dist/resolve/resolve-ir.js +1 -1
- package/dist/resolve/resolve-ir.mjs +85 -1
- package/dist/resolve/write-globals.cjs +319 -14
- package/dist/resolve/write-globals.d.cts +30 -0
- package/dist/resolve/write-globals.js +2 -2
- package/dist/resolve/write-globals.mjs +298 -14
- package/dist/server-fns-ZYWQTSZU.mjs +78 -0
- package/dist/server-functions-PCERFA7A.mjs +82 -0
- package/dist/transform/bindings.cjs +71 -1
- package/dist/transform/bindings.d.cts +16 -0
- package/dist/transform/bindings.d.ts +1 -1
- package/dist/transform/bindings.js +1 -1
- package/dist/transform/bindings.mjs +50 -1
- package/dist/transform/index.cjs +2732 -8
- package/dist/transform/index.d.cts +15 -0
- package/dist/transform/index.mjs +3773 -17
- package/dist/transform/intrinsics.cjs +216 -3
- package/dist/transform/intrinsics.d.cts +21 -0
- package/dist/transform/intrinsics.js +1 -1
- package/dist/transform/intrinsics.mjs +193 -3
- package/dist/transform/props.cjs +441 -3
- package/dist/transform/props.d.cts +45 -0
- package/dist/transform/props.d.ts +1 -1
- package/dist/transform/props.d.ts.map +1 -1
- package/dist/transform/props.js +4 -4
- package/dist/transform/props.mjs +1482 -12
- package/dist/transform/server-fn-id.cjs +35 -1
- package/dist/transform/server-fn-id.d.cts +9 -0
- package/dist/transform/server-fn-id.d.ts +1 -1
- package/dist/transform/server-fn-id.js +2 -2
- package/dist/transform/server-fn-id.mjs +14 -1
- package/dist/transform/server-fns.cjs +114 -2
- package/dist/transform/server-fns.d.cts +12 -0
- package/dist/transform/server-fns.js +3 -3
- package/dist/transform/server-fns.mjs +1155 -11
- package/dist/transform/source-locations.cjs +330 -1
- package/dist/transform/source-locations.d.cts +43 -0
- package/dist/transform/source-locations.d.ts +1 -1
- package/dist/transform/source-locations.js +5 -5
- package/dist/transform/source-locations.mjs +307 -1
- package/dist/transform/templates.cjs +2701 -7
- package/dist/transform/templates.d.cts +69 -0
- package/dist/transform/templates.d.ts +2 -2
- package/dist/transform/templates.d.ts.map +1 -1
- package/dist/transform/templates.js +7 -7
- package/dist/transform/templates.mjs +3743 -16
- package/dist/transform-RWDTQUF5.mjs +893 -0
- package/dist/tsconfig.lib.tsbuildinfo +1 -1
- package/package.json +6 -5
- package/dist/babel-VXKH6MRQ.mjs +0 -1
- package/dist/chunk-3SAEGOMQ.mjs +0 -1
- package/dist/chunk-5KMMN5QP.mjs +0 -1
- package/dist/chunk-IBRM4W7I.mjs +0 -10
- package/dist/chunk-OHHZCYIQ.mjs +0 -1
- package/dist/chunk-YKZ54NVE.mjs +0 -1
- package/dist/server-fns-6QM243HC.mjs +0 -2
- package/dist/server-functions-E3LKCZ4R.mjs +0 -1
- package/dist/transform-C4ZXRVGP.mjs +0 -8
|
@@ -1 +1,1495 @@
|
|
|
1
|
-
import{types as T,traverse as at,template as ct}from"@babel/core";import ve from"@babel/generator";var ke=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]),z={className:"class",htmlFor:"for"},Re=new Set(["innerHTML","outerHTML","innerText","textContent","value","checked","selected","muted","defaultValue","defaultChecked","children","ref"]),be=new Set(["script","style","textarea","title"]);function L(e){return be.has(e)}function W(e){return z[e]??e}function y(e){return e.kind!=="attr"||e.expr!==void 0||e.name.includes(":")?!1:!Re.has(e.name)}function M(e){if(!e.static||L(e.tag))return!1;for(let t of e.props)if(!y(t))return!1;for(let t of e.children)if(t.kind!=="text"&&!(t.kind==="element"&&M(t)))return!1;return!0}function N(e){let t=e.props.map(Se).filter(Boolean).join(""),n=`<${e.tag}${t}>`;return ke.has(e.tag)?n:`${n}${e.children.map(Ee).join("")}</${e.tag}>`}function Ee(e){if(e.kind==="text")return $e(e.value);if(e.kind!=="element")throw new Error(`serializeStatic: unexpected ${e.kind}`);return N(e)}function Se(e){let t=z[e.name]??e.name,n=e.literal;return n===!0||n===void 0?` ${t}`:n===!1||n===null?"":` ${t}="${Ie(String(n))}"`}function Ie(e){return e.replace(/&/g,"&").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">")}function $e(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">")}function _(e){let t=[],n,r=i=>{n??=i.at?.file,t.push(i.at?.line??0,i.at?.column??0);for(let o of i.children)o.kind==="element"&&r(o)};return r(e),n&&t.some(i=>i!==0)?{file:n,pos:t}:void 0}var we="<!--fx-->",Te="<!--fx/-->";function P(e){return e.kind==="expr"||e.kind==="component"||e.kind==="control"}function Ae(e){return e.kind==="text"||e.kind==="element"&&G(e)}function G(e){return e.svg||L(e.tag)||!e.props.every(t=>y(t))?!1:e.children.every(t=>Ae(t)||P(t))}function C(e){if(P(e))return!0;let t=e.children;return t?t.some(C):!1}function q(e){for(let t=0;t<e.children.length;t++){let n=e.children[t];if(n.kind==="text"&&(n.value===""||e.children[t+1]?.kind==="text"))return!1}return e.children.every(t=>t.kind!=="element"||q(t))}function Z(e){if(!G(e)||!q(e)||!e.children.some(C))return null;let t=[],n=[],r=0,i=a=>{let s=`_n$${r++}`;return t.push({ref:s,expr:a}),s};return o(e,"_el$"),{html:Ce(e),tag:e.tag,steps:t,holes:n};function o(a,s){let l=-1;a.children.forEach((c,u)=>{C(c)&&(l=u)});let p=null;for(let c=0;c<=l;c++){let u=a.children[c],d=p?`${p}.nextSibling`:`${s}.firstChild`;if(P(u)){let h=i(d),A=i(`holeEnd(${h})`);n.push({parentRef:s,startRef:h,endRef:A,node:u}),p=A;continue}let g=i(d);u.kind==="element"&&C(u)&&o(u,g),p=g}}}function Ce(e){return N(Y(e)).split(Q).join(we+Te)}function Y(e){return{...e,children:e.children.map(t=>P(t)?{kind:"text",value:Q}:t.kind==="element"?Y(t):t)}}var Q="\0fx-hole\0";var j={version:1,module:"@fluixi/dom",symbols:["createNativeElement","insert","spread","setAttribute","delegateEvents","createComponent","createMemo","untrack","Show","For","Index","Switch","Match","Dynamic","ErrorBoundary"]},gt={version:2,module:"@fluixi/dom",symbols:[...j.symbols,"template","cloneTemplate","walk"]};var m="@fluixi/reactive/signal",H={$signal:{export:"signal",module:m,returns:"signal-handle"},$memo:{export:"memo",module:m,returns:"memo-handle"},$effect:{export:"effect",module:m,returns:"effect"},$store:{export:"store",module:"@fluixi/reactive/store",returns:"store-handle"},$resource:{export:"resource",module:m,returns:"resource-handle"},$selector:{export:"createSelector",module:m,returns:"memo-accessor"},$deferred:{export:"createDeferred",module:m,returns:"memo-accessor"},$untrack:{export:"untrack",module:m,returns:"plain"},$untrackStore:{export:"untrackStore",module:"@fluixi/reactive/store",returns:"plain"}};var yt=new RegExp(`\\$(?:${Object.keys(H).map(e=>e.slice(1)).join("|")})\\s*\\(`);var ee="__fx_source";var Pe="__fx_hole",v=(e,t,n,r)=>`(globalThis.${Pe} ?? ((f) => f))(${e},${t},${n}${r===void 0?"":`,${JSON.stringify(r)}`})`,Je="__fx_props",te=(e,t)=>`(globalThis.${Je} ?? ((p) => p))(${e},${JSON.stringify(t)})`;var De={show:"Show",for:"For",index:"Index",switch:"Switch",match:"Match",dynamic:"Dynamic",errorBoundary:"ErrorBoundary",suspense:"Suspense"};function Oe(e){return/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(e)}function ie(e){return Oe(e)?e:JSON.stringify(e)}function Le(e){if(e.expr!==void 0){if(e.name==="ref"&&e.at)return v(`(${e.expr})`,e.at.line,e.at.column,e.expr);if(!e.reactive)return`(${e.expr})`;let t=`() => (${e.expr})`;return e.at?v(t,e.at.line,e.at.column,e.directive):t}return JSON.stringify(e.literal??!0)}function Me(e){return e.expr!==void 0?`(${e.expr})`:JSON.stringify(e.literal??!0)}function _e(e,t,n){let r=e.filter(s=>s.kind==="spread"),o=e.filter(s=>s.kind!=="spread").map(s=>`${ie(s.name)}: ${Le(s)}`);t!=null&&o.push(`children: ${t}`);let a=`{ ${o.join(", ")} }`;return r.length>0?(n.add("mergeProps"),`mergeProps(${r.map(s=>s.expr).join(", ")}, ${a})`):a}function ne(e,t){return t?v(e,t.line,t.column):e}function oe(e,t,n){return e.length===1?x(e[0],t,n):`[${e.map(r=>x(r,t,n)).join(", ")}]`}function re(e,t,n,r,i,o){r.add("createMemo"),r.add("createComponent");let a=t.filter(d=>d.kind==="spread"),s=t.filter(d=>d.kind!=="spread"),l=s.map(d=>`get ${ie(d.name)}() { return ${Me(d)}; }`);n.length>0&&l.push(`get children() { return ${oe(n,r,i)}; }`);let p=`{ ${l.join(", ")} }`;a.length>0&&(r.add("mergeProps"),p=`mergeProps(${a.map(d=>d.expr).join(", ")}, ${p})`);let c={};for(let d of s)d.at&&(c[d.name]=[d.at.line,d.at.column]);return Object.keys(c).length&&(p=te(p,c)),`createMemo((${o?`globalThis.${ee}?.(${JSON.stringify(o.file)},${o.line},${o.column},${JSON.stringify(e)}), `:""}() => createComponent(${e}, ${p})))`}function je(e,t){let n=W(t.name),r=t.literal;return r===!0||r===void 0?`${e}.setAttribute(${JSON.stringify(n)}, "");`:r===!1||r===null?"":`${e}.setAttribute(${JSON.stringify(n)}, ${JSON.stringify(String(r))});`}var se=!1;function x(e,t,n){switch(e.kind){case"text":return JSON.stringify(e.value);case"expr":{if(!e.reactive)return`(${e.code})`;let r=`() => (${e.code})`;return e.at?v(r,e.at.line,e.at.column):r}case"fragment":return e.children.length===0?"null":oe(e.children,t,n);case"component":return ne(re(e.name,e.props,e.children,t,n,e.at),e.bindAt??e.at);case"control":{let r=De[e.control]??e.control;return t.add(r),ne(re(r,e.props,e.children,t,n),e.bindAt)}case"element":{if(n&&e.static&&!e.svg&&M(e)){t.add("templateNode");let s=`_tmpl$${n.length}`;n.push({id:s,html:N(e),tag:e.tag,svg:!1});let l=_(e);return l?`templateNode(${s}, ${JSON.stringify(e.tag)}, false, false, ${JSON.stringify(l)})`:`templateNode(${s}, ${JSON.stringify(e.tag)})`}if(n&&se){let s=Z(e);if(s){t.add("templateNode"),t.add("insert"),t.add("holeEnd"),t.add("holeContent"),t.add("holeScope");let l=`_tmpl$${n.length}`;n.push({id:l,html:s.html,tag:s.tag,svg:!1});let p=_(e),c=[`const _el$ = templateNode(${l}, ${JSON.stringify(s.tag)}, true${p?`, false, ${JSON.stringify(p)}`:""});`];for(let u of s.steps)c.push(`const ${u.ref} = ${u.expr};`);for(let u of s.holes)c.push(`insert(${u.parentRef}, holeScope(${u.startRef}, () => (${x(u.node,t,n)})), ${u.endRef}, holeContent(${u.startRef}, ${u.endRef}));`);return c.push("return _el$;"),`(() => { ${c.join(" ")} })()`}}t.add("createNativeElement");let r=JSON.stringify(e.tag),i="_el$",o=[],a=e.at?`${r}, ${e.svg}, ${JSON.stringify(e.at)}`:e.svg?`${r}, true`:r;if(o.push(`const ${i} = createNativeElement(${a});`),e.props.length>0)if(!e.svg&&e.props.every(y))for(let s of e.props)o.push(je(i,s));else{t.add("spread");let s=e.svg?", isSVG: true":"";o.push(`spread({ element: ${i}, props: ${_e(e.props,null,t)}${s} });`)}for(let s of e.children){t.add("insert");let l=x(s,t,n),p=s.kind==="expr"&&s.reactive||s.kind==="component"||s.kind==="control";o.push(p?`insert(${i}, ${l}, null);`:`insert(${i}, ${l});`)}return o.push(`return ${i};`),`(() => { ${o.join(" ")} })()`}}}function k(e,t){if(!t||t.length===0)return e;let n=new Map(t.map(r=>[r.id,JSON.stringify(r.html)]));return e.replace(/_tmpl\$\d+/g,r=>n.get(r)??r)}var R={name:"imperative",contract:j,emit(e,t){let n=new Set,r=t?.templateClone!==!1?[]:void 0;return se=t?.partialTemplates===!0,{code:x(e,n,r),imports:Array.from(n),templates:r}}};import{types as B}from"@babel/core";import ue from"@babel/generator";import{parseTemplate as Be}from"@fluixi/template-parser";var He={kind:"eager"},Fe=["pointerdown","focusin","keydown"],ae=new Set(["eager","idle","visible","interaction","media","never"]),f=class extends Error{};function F(e){return e.startsWith("load:")}function J(e,t){let n=e.slice(5);if(!ae.has(n))throw new f(`Unknown load strategy 'load:${n}'. Expected one of ${[...ae].join(", ")}.`);switch(n){case"eager":return He;case"idle":return{kind:"idle"};case"never":return{kind:"never"};case"visible":return t?{kind:"visible",rootMargin:t}:{kind:"visible"};case"interaction":return{kind:"interaction",events:t?Xe(t):[...Fe]};case"media":if(!t)throw new f(`'load:media' needs a query, e.g. load:media="(min-width: 1024px)".`);return{kind:"media",query:t};default:throw new f(`Unhandled load strategy '${n}'.`)}}function Xe(e){let t=e.split(/[\s,]+/).map(n=>n.trim()).filter(Boolean);if(t.length===0)throw new f("'load:interaction' was given no event names.");return t}function b(e){let t=e.split(/\r\n|\n|\r/),n=0;for(let i=0;i<t.length;i++)/[^ \t]/.test(t[i])&&(n=i);let r="";for(let i=0;i<t.length;i++){let o=t[i].replace(/\t/g," ");i!==0&&(o=o.replace(/^ +/,"")),i!==t.length-1&&(o=o.replace(/ +$/,"")),o&&(i!==n&&(o+=" "),r+=o)}return r}var ce=new Set(["click","dblclick","input","change","submit","focus","blur","keydown","keyup","keypress","mousedown","mouseup"]);function Ve(e){return e.replace(/\\/g,"\\\\").replace(/`/g,"\\`").replace(/\$\{/g,"\\${")}function le(e){return e.charAt(0).toUpperCase()+e.slice(1)}var X=class{constructor(t,n,r,i){this.holes=t;this.used=n;this.sourceFile=r;this.positionAt=i}tagAt(t){let n=t.loc?.start;if(!this.sourceFile||!this.positionAt||n==null)return;let{line:r,column:i}=this.positionAt(n);return{file:this.sourceFile,line:r,column:i}}hole(t){return this.holes[t]??{code:"undefined",reactive:!1}}emit(t){let{code:n,imports:r,templates:i}=R.emit(t,{});for(let o of r)this.used.add(o);return k(n,i)}lowerRoot(t){let n=this.lowerChildren(t);return n.length===1?n[0]:{kind:"fragment",children:n}}lowerChildren(t){let n=[];for(let r=0;r<t.length;r++){let i=t[r];if(i.kind==="Element"||i.kind==="Component"){let a=i.attributes.find(s=>s.kind==="IfDirective");if(a&&a.kind==="IfDirective"){let s=r+1;s<t.length&&this.isBlankText(t[s])&&s++;let l=t[s],p=l&&(l.kind==="Element"||l.kind==="Component")&&l.attributes.some(c=>c.kind==="ElseDirective");n.push(this.lowerIf(i,a.hole,p?l:null)),p&&(r=s);continue}if(i.attributes.some(s=>s.kind==="EachDirective")){n.push(this.lowerEach(i));continue}}let o=this.lowerNode(i);o&&n.push(o)}return n}isBlankText(t){return t.kind==="Text"&&!t.raw&&b(t.value)===""}lowerNode(t){switch(t.kind){case"Text":{if(t.raw)return{kind:"text",value:t.value};let n=b(t.value);return n?{kind:"text",value:n}:null}case"Comment":return null;case"Expression":{let n=this.hole(t.hole);return{kind:"expr",code:n.code,reactive:n.reactive,...n.at?{at:n.at}:{}}}case"Fragment":return{kind:"fragment",children:this.lowerChildren(t.children)};case"Element":return this.lowerElement(t);case"Component":return this.lowerComponent(t);default:return null}}lowerElement(t){let n=t.attributes.find(i=>i.kind==="Attribute"&&i.name==="is");if(t.tag==="component"&&n&&n.value&&n.value.kind==="hole"){let i=t.attributes.filter(a=>a!==n),o=this.lowerComponent({...t,kind:"Component",tag:"Dynamic",tagHole:null,attributes:i});return o.props.unshift({name:"component",kind:"attr",expr:`() => (${this.hole(n.value.hole).code})`}),o}let r=this.tagAt(t);return{kind:"element",tag:t.tag,svg:t.namespace==="svg",props:this.lowerAttributes(t.attributes),children:this.lowerChildren(t.children),static:!1,...r?{at:r}:{}}}lowerComponent(t){let n=t.tagHole!=null?this.hole(t.tagHole).code:t.tag,r=this.lowerAttributes(t.attributes),{slots:i,rest:o}=this.partitionSlots(t.children);for(let[c,u]of i){let d=u.length===1?u[0]:{kind:"fragment",children:u},g={name:c,kind:"attr",expr:this.emit(d),jsxElement:!0},h=r.findIndex(A=>A.name===c);h>=0?r[h]=g:r.push(g)}let a=t.attributes.find(c=>c.kind==="LoadDirective"),s=a?J(`load:${a.strategy}`,a.modifier):void 0,l=r.find(c=>c.at&&c.reactive)?.at,p=this.tagAt(t);return{kind:"component",name:n,props:r,children:this.lowerChildren(o),...p?{at:p}:{},...l?{bindAt:l}:{},...s?{load:s}:{}}}partitionSlots(t){let n=new Map,r=[];for(let i of t){if(i.kind==="Element"||i.kind==="Component"){let o=i.attributes.find(a=>a.kind==="Attribute"&&a.name==="slot");if(o&&o.value&&o.value.kind==="static"){let a={...i,attributes:i.attributes.filter(p=>p!==o)},s=a.kind==="Element"?this.lowerElement(a):this.lowerComponent(a),l=n.get(o.value.value)??[];l.push(s),n.set(o.value.value,l);continue}}r.push(i)}return{slots:n,rest:r}}lowerIf(t,n,r){let i=this.hole(n),o=[{name:"when",kind:"attr",expr:i.code,reactive:i.reactive,...i.at?{at:i.at}:{}}];if(r){let l=this.stripAndLower(r,p=>p.kind==="ElseDirective");o.push({name:"fallback",kind:"attr",expr:this.emit(l),jsxElement:!0})}let a=this.stripAndLower(t,l=>l.kind==="IfDirective"),s=this.tagAt(t);return{kind:"component",name:"Show",props:o,children:[a],...s?{at:s}:{},...i.at?{bindAt:i.at}:{}}}lowerEach(t){let n=t.attributes.find(p=>p.kind==="EachDirective");if(!n||n.kind!=="EachDirective")return this.lowerNode(t);let r=this.hole(n.hole),i=[{name:"each",kind:"attr",expr:r.code,reactive:r.reactive,...r.at?{at:r.at}:{}}];if(n.key){let p="static"in n.key?`(item) => item[${JSON.stringify(n.key.static)}]`:this.hole(n.key.hole).code;i.push({name:"by",kind:"attr",expr:p})}let o=this.itemArrow(t),a;if(o){let p={kind:"expr",code:o.body,reactive:o.bodyReactive},c=this.rebuildWithChildren(t,[p]);a=`(${o.params.join(", ")}) => (${this.emit(c)})`}else{let p=this.stripAndLower(t,c=>c.kind==="EachDirective");a=`() => (${this.emit(p)})`}let s=[{kind:"expr",code:a,reactive:!1}],l=this.tagAt(t);return{kind:"component",name:"For",props:i,children:s,...l?{at:l}:{},...r.at?{bindAt:r.at}:{}}}itemArrow(t){let n=t.children.filter(r=>!this.isBlankText(r));return n.length!==1||n[0].kind!=="Expression"?null:this.hole(n[0].hole).arrow??null}stripAndLower(t,n){let r={...t,attributes:t.attributes.filter(i=>!n(i))};return r.kind==="Element"?this.lowerElement(r):this.lowerComponent(r)}rebuildWithChildren(t,n){let r=this.lowerAttributes(t.attributes.filter(i=>i.kind!=="EachDirective"));if(t.kind==="Element"){let i=this.tagAt(t);return{kind:"element",tag:t.tag,svg:t.namespace==="svg",props:r,children:n,static:!1,...i?{at:i}:{}}}return{kind:"component",name:t.tag,props:r,children:n}}lowerAttributes(t){let n=[],r=[],i=!1,o,a=[],s=!1,l,p=[];for(let c of t)switch(c.kind){case"IfDirective":case"EachDirective":case"ElseDirective":break;case"Attribute":n.push(this.plainAttr(c));break;case"PropertyBinding":n.push({name:c.name,kind:"prop",expr:this.hole(c.hole).code,reactive:this.hole(c.hole).reactive,...this.hole(c.hole).at?{at:this.hole(c.hole).at}:{}});break;case"EventBinding":n.push(this.eventProp(c));break;case"RefBinding":n.push({name:"ref",kind:"ref",expr:this.hole(c.hole).code,reactive:this.hole(c.hole).reactive,...this.hole(c.hole).at?{at:this.hole(c.hole).at}:{}});break;case"Spread":n.push({name:"",kind:"spread",expr:this.hole(c.hole).code});break;case"ClassDirective":{let u=this.hole(c.hole);r.push(`${JSON.stringify(c.name)}: ${u.code}`),i=i||u.reactive,o??=u.at;break}case"StyleDirective":{let u=this.hole(c.hole);a.push(`${JSON.stringify(c.name)}: ${u.code}`),s=s||u.reactive,l??=u.at;break}case"BindDirective":n.push(...this.bindProps(c.name,this.hole(c.hole)));break;case"UseDirective":{let u=c.name??(c.hole!=null?this.hole(c.hole).code:null);if(!u)break;p.push(c.name!=null&&c.hole!=null?`[${u}, () => (${this.hole(c.hole).code})]`:`[${u}]`);break}}return r.length>0&&n.push({name:"classList",kind:"attr",expr:`{ ${r.join(", ")} }`,reactive:i,...o?{at:o}:{}}),a.length>0&&n.push({name:"style",kind:"attr",expr:`{ ${a.join(", ")} }`,reactive:s,...l?{at:l}:{}}),p.length>0&&n.push({name:"use",kind:"attr",expr:`[${p.join(", ")}]`}),n}eventProp(t){let n=t.name.toLowerCase(),r=this.hole(t.hole).code;if(!(t.syntax==="colon"||t.modifiers.length>0))return{name:"on"+le(t.name),kind:"event",event:{name:n,delegated:ce.has(n)},expr:r};let o=this.wrapHandler(r,t.modifiers),a=this.eventOptions(t.modifiers),s=a?`[${o}, ${a}]`:o;return{name:"on:"+n,kind:"attr",expr:s}}wrapHandler(t,n){let r=n.includes("self")?"if (e.target !== e.currentTarget) return; ":"",i=[];return n.includes("prevent")&&i.push("e.preventDefault();"),n.includes("stop")&&i.push("e.stopPropagation();"),!r&&i.length===0?t:`(e) => { ${r}${i.join(" ")} return (${t})(e); }`}eventOptions(t){let n=[];return t.includes("capture")&&n.push("capture: true"),t.includes("once")&&n.push("once: true"),t.includes("passive")&&n.push("passive: true"),n.length?`{ ${n.join(", ")} }`:null}bindProps(t,n){let r=n.code,i=t==="checked",o=i?"change":"input",a=i?"checked":"value";this.used.add("bindPair");let s=`bindPair(${r})`;return[{name:t,kind:"attr",expr:`${s}[0]()`,reactive:!0,directive:`bind:${t}`,...n.at?{at:n.at}:{}},{name:"on"+le(o),kind:"event",event:{name:o,delegated:ce.has(o)},expr:`(e) => ${s}[1](e.target.${a})`}]}plainAttr(t){let n=t.value,r=t.name;t.name==="class"?r=n&&n.kind==="hole"&&this.hole(n.hole).object?"classList":"className":t.name==="html"&&(r="innerHTML");let o={name:r,kind:"attr"};if(n==null)return o.literal=!0,o;if(n.kind==="static")return o.literal=n.value,o;if(n.kind==="hole"){let p=this.hole(n.hole);return o.expr=p.code,o.reactive=p.reactive,p.at&&(o.at=p.at),o}let a=!1,s,l=n.parts.map(p=>{if("text"in p)return Ve(p.text);let c=this.hole(p.hole);return a=a||c.reactive,s??=c.at,"${"+c.code+"}"}).join("");return o.expr="`"+l+"`",o.reactive=a,s&&(o.at=s),o}};function pe(e,t,n,r={}){let{root:i}=Be(e,{svg:r.svg});return new X(t,n,r.sourceFile,r.positionAt).lowerRoot(i.children)}var Ke=ue.default??ue;function Ue(e){return Ke(e,{concise:!0}).code}function ze(e,t,n){let r={code:D(e,t,n),reactive:V(e)};if(B.isArrowFunctionExpression(e)&&!B.isBlockStatement(e.body)){let i=e.body;r.arrow={params:e.params.map(o=>Ue(o)),body:D(i,t,n),bodyReactive:V(i)}}return B.isObjectExpression(e)&&(r.object=!0),r}function de(e,t,n={}){let r=e.quasi,i=r.expressions.map(o=>ze(o,t,n.onNested));return pe(We(r),i,t,n)}function We(e){let t=[];return e.quasis.forEach((n,r)=>{let i=n.value.cooked??n.value.raw;if(t.push({kind:"static",text:i,start:n.start??0}),r<e.expressions.length){let o=e.expressions[r];t.push({kind:"hole",index:r,start:o.start??0,end:o.end??0})}}),t}function Ge(e){switch(e.kind){case"event":return"event";case"ref":return"ref";case"spread":return"spread";case"class":case"style":return"class-or-style-directive";case"attr":case"prop":return e.reactive?"reactive-prop":e.expr!==void 0?"expression-prop":void 0;default:return"expression-prop"}}function O(e){let t=[],n=new Map,r=i=>{switch(i.kind){case"text":return!0;case"expr":return!1;case"component":case"control":for(let o of i.children)r(o);return!1;case"fragment":for(let o of i.children)r(o);return!1;case"element":{let o=!0;for(let s of i.children)r(s)||(o=!1);let a;for(let s of i.props)if(a=Ge(s),a)break;return!a&&!o&&(a=qe(i)),i.static=!a,a?n.set(i,a):t.push(i),i.static}default:return!1}};for(let i of Array.isArray(e)?e:[e])r(i);return{staticElements:t,reasons:n}}function qe(e){for(let t of e.children){if(t.kind==="expr")return"expression-child";if(t.kind==="component")return"component-child";if(t.kind==="control")return"control-child";if(t.kind==="element"&&!t.static||t.kind==="fragment")return"expression-child"}return"expression-child"}function fe(e,t=new Set,n={}){let r=de(e,t,n);return O(r),r}var Ze="children";function E(e){switch(e.kind){case"call":return!0;case"member":return e.property!==Ze;case"compound":return e.parts.some(E);case"opaque":return!1}}var Ye=new Set(["CallExpression","OptionalCallExpression"]),Qe=new Set(["MemberExpression","OptionalMemberExpression"]);function I(e){if(!e)return{kind:"opaque"};if(Ye.has(e.type))return{kind:"call"};if(Qe.has(e.type)){let t=e.property;return{kind:"member",property:!(e.computed===!0)&&t?.type==="Identifier"?t.name:null}}return e.type==="ConditionalExpression"?{kind:"compound",parts:[e.test,e.consequent,e.alternate].map(S)}:e.type==="LogicalExpression"||e.type==="BinaryExpression"?{kind:"compound",parts:[e.left,e.right].map(S)}:e.type==="TemplateLiteral"?{kind:"compound",parts:e.expressions.map(S)}:e.type==="ObjectExpression"?{kind:"compound",parts:e.properties.filter(n=>(n.type==="ObjectProperty"||n.type==="Property")&&n.computed!==!0).map(n=>S(n.value))}:e.type==="ArrayExpression"?{kind:"compound",parts:e.elements.filter(n=>n!=null&&n.type!=="SpreadElement").map(S)}:{kind:"opaque"}}var S=e=>I(e);var et=new Set(["svg","path","circle","rect","line","polygon","polyline","ellipse","g","defs","clipPath","text"]),tt=/^on[A-Z]/,nt=new Set(["click","dblclick","input","change","submit","focus","blur","keydown","keyup","keypress","mousedown","mouseup"]),he=e=>E(I(e)),$=(e,t)=>{if(!t.sourceFile)return;let n=e.loc?.start;return n?{line:n.line,column:n.column}:void 0};function w(e){if(e.type==="StringLiteral"||e.type==="NumericLiteral"||e.type==="BooleanLiteral"||e.type==="Literal"&&(typeof e.value=="string"||typeof e.value=="number"||typeof e.value=="boolean"))return e.value}var K=e=>!!e&&typeof w(e)=="string";function rt(e,t){return e.type==="JSXIdentifier"?{tag:e.name,component:e.name[0]!==e.name[0].toLowerCase()}:e.type==="JSXMemberExpression"?{tag:t.code(e),component:!0}:e.type==="JSXNamespacedName"?{tag:`${e.namespace.name}:${e.name.name}`,component:!1}:{tag:"div",component:!1}}function U(e){return e.type==="JSXIdentifier"?e.name==="class"?"className":e.name:e.type==="JSXNamespacedName"?`${e.namespace.name}:${e.name.name}`:"unknown"}function it(e,t){let n=U(e.name),r=tt.test(n),i=r||n.startsWith("on:")||n==="ref",a={name:n,kind:r?"event":"attr"};if(r){let l=n.slice(2).toLowerCase();a.event={name:l,delegated:nt.has(l)}}let s=e.value;if(s==null)return a.literal=!0,a.at=$(e,t),a;if(K(s))return a.literal=w(s),a.at=$(s,t),a;if(s.type==="JSXExpressionContainer"&&s.expression?.type!=="JSXEmptyExpression"){let l=s.expression,p=w(l);return p!==void 0?(a.literal=p,a.at=$(l,t),a):(a.expr=t.code(l),a.reactive=i?!1:he(l),a.at=$(l,t),(l.type==="JSXElement"||l.type==="JSXFragment")&&(a.jsxElement=!0),a)}return a.literal=!0,a}function me(e,t){let n=e.value;return n==null?null:K(n)?JSON.stringify(w(n)):n.type==="JSXExpressionContainer"&&n.expression?.type!=="JSXEmptyExpression"?t.code(n.expression):null}function ot(e,t){let n=[],r=[];for(let i of e){if(i.type==="JSXSpreadAttribute"){n.push({name:"",kind:"spread",expr:t.code(i.argument)});continue}if(i.type!=="JSXAttribute"||F(U(i.name)))continue;let o=i.name.type==="JSXNamespacedName"?i.name.namespace.name:null;if(o==="use"){let a=i.name.name.name;t.used.add(a);let s=me(i,t);r.push(s!=null?`[${a}, () => (${s})]`:`[${a}]`);continue}if(o==="oncapture"){let a=i.name.name.name.toLowerCase(),s=me(i,t)??"undefined";n.push({name:"on:"+a,kind:"attr",expr:`[${s}, { capture: true }]`});continue}n.push(it(i,t))}return r.length>0&&n.push({name:"use",kind:"attr",expr:`[${r.join(", ")}]`}),n}function ge(e,t){let n=[];for(let r of e)if(r.type==="JSXText"){let i=b(r.value);i&&n.push({kind:"text",value:i})}else if(r.type==="JSXExpressionContainer"){if(r.expression?.type!=="JSXEmptyExpression"){let i=r.expression,o=he(i);n.push({kind:"expr",code:t.code(i),reactive:o,...o?{at:$(i,t)}:{}})}}else r.type==="JSXElement"||r.type==="JSXFragment"?n.push(ye(r,t)):r.type==="JSXSpreadChild"&&n.push({kind:"expr",code:t.code(r.expression),reactive:!1});return n}function st(e){for(let t of e){if(t.type!=="JSXAttribute")continue;let n=U(t.name);if(F(n)){if(t.value&&!K(t.value))throw new f(`'${n}' needs a literal value, not an expression — the strategy is compile-time.`);return J(n,t.value?w(t.value):null)}}}function ye(e,t){if(e.type==="JSXFragment")return{kind:"fragment",children:ge(e.children,t)};let{tag:n,component:r}=rt(e.openingElement.name,t),i=ot(e.openingElement.attributes,t),o=ge(e.children,t),a=t.sourceFile&&e.loc?.start?{file:t.sourceFile,line:e.loc.start.line,column:e.loc.start.column}:void 0;if(r){let s=st(e.openingElement.attributes);return{kind:"component",name:n,props:i,children:o,...s?{load:s}:{},...a?{at:a}:{}}}return{kind:"element",tag:n,svg:et.has(n),props:i,children:o,static:!1,...a?{at:a}:{}}}function Ne(e,t){let n=ye(e,t);return O(n),n}var lt=ve.default??ve;function xe(e){return lt(e,{concise:!0}).code}function pt(e,t,n){let r=T.cloneNode(e,!0),i=T.file(T.program([T.expressionStatement(r)])),o=!1,a=(s,l,p)=>{for(let c of p)t.add(c);s.replaceWith(ct.expression(l,{placeholderPattern:!1,plugins:["typescript"]})()),s.skip(),o=!0};return at(i,{"JSXElement|JSXFragment"(s){let l=s.node,p=ut(l,t,n);n?.(p);let{code:c,imports:u,templates:d}=R.emit(p,{});a(s,k(c,d),u)},TaggedTemplateExpression(s){let l=s.node.tag;if(!T.isIdentifier(l)||l.name!=="html"&&l.name!=="svg")return;let p=fe(s.node,t,{svg:l.name==="svg",onNested:n});n?.(p);let{code:c,imports:u,templates:d}=R.emit(p,{});a(s,k(c,d),u)}}),o?i.program.body[0].expression:e}function D(e,t,n){return xe(pt(e,t,n))}var un=new Set(["svg","path","circle","rect","line","polygon","polyline","ellipse","g","defs","clipPath","text"]);function V(e){return E(I(e))}function ut(e,t=new Set,n){return Ne(e,{code:i=>i.type==="JSXMemberExpression"?xe(i):D(i,t,n),used:t})}export{un as SVG_TAGS,ut as buildIR,D as genExpr,V as isReactiveExpr};
|
|
1
|
+
// src/frontend/babel/build-ir.ts
|
|
2
|
+
import { types as t2, traverse, template } from "@babel/core";
|
|
3
|
+
import _generate2 from "@babel/generator";
|
|
4
|
+
|
|
5
|
+
// src/codegen/serialize-static.ts
|
|
6
|
+
var VOID_ELEMENTS = /* @__PURE__ */ new Set([
|
|
7
|
+
"area",
|
|
8
|
+
"base",
|
|
9
|
+
"br",
|
|
10
|
+
"col",
|
|
11
|
+
"embed",
|
|
12
|
+
"hr",
|
|
13
|
+
"img",
|
|
14
|
+
"input",
|
|
15
|
+
"link",
|
|
16
|
+
"meta",
|
|
17
|
+
"param",
|
|
18
|
+
"source",
|
|
19
|
+
"track",
|
|
20
|
+
"wbr"
|
|
21
|
+
]);
|
|
22
|
+
var HTML_NAME = {
|
|
23
|
+
className: "class",
|
|
24
|
+
htmlFor: "for"
|
|
25
|
+
};
|
|
26
|
+
var PROPERTY_ONLY = /* @__PURE__ */ new Set([
|
|
27
|
+
"innerHTML",
|
|
28
|
+
"outerHTML",
|
|
29
|
+
"innerText",
|
|
30
|
+
"textContent",
|
|
31
|
+
"value",
|
|
32
|
+
"checked",
|
|
33
|
+
"selected",
|
|
34
|
+
"muted",
|
|
35
|
+
"defaultValue",
|
|
36
|
+
"defaultChecked",
|
|
37
|
+
"children",
|
|
38
|
+
"ref"
|
|
39
|
+
]);
|
|
40
|
+
var RAW_TEXT_ELEMENTS = /* @__PURE__ */ new Set(["script", "style", "textarea", "title"]);
|
|
41
|
+
function isRawTextElement(tag) {
|
|
42
|
+
return RAW_TEXT_ELEMENTS.has(tag);
|
|
43
|
+
}
|
|
44
|
+
function htmlAttrName(name) {
|
|
45
|
+
return HTML_NAME[name] ?? name;
|
|
46
|
+
}
|
|
47
|
+
function isPlainLiteralAttr(prop) {
|
|
48
|
+
if (prop.kind !== "attr") return false;
|
|
49
|
+
if (prop.expr !== void 0) return false;
|
|
50
|
+
if (prop.name.includes(":")) return false;
|
|
51
|
+
return !PROPERTY_ONLY.has(prop.name);
|
|
52
|
+
}
|
|
53
|
+
function isSerializable(node) {
|
|
54
|
+
if (!node.static) return false;
|
|
55
|
+
if (isRawTextElement(node.tag)) return false;
|
|
56
|
+
for (const prop of node.props) {
|
|
57
|
+
if (!isPlainLiteralAttr(prop)) return false;
|
|
58
|
+
}
|
|
59
|
+
for (const child of node.children) {
|
|
60
|
+
if (child.kind === "text") continue;
|
|
61
|
+
if (child.kind === "element" && isSerializable(child)) continue;
|
|
62
|
+
return false;
|
|
63
|
+
}
|
|
64
|
+
return true;
|
|
65
|
+
}
|
|
66
|
+
function serializeStatic(node) {
|
|
67
|
+
const attrs = node.props.map(serializeProp).filter(Boolean).join("");
|
|
68
|
+
const open = `<${node.tag}${attrs}>`;
|
|
69
|
+
if (VOID_ELEMENTS.has(node.tag)) return open;
|
|
70
|
+
return `${open}${node.children.map(serializeChild).join("")}</${node.tag}>`;
|
|
71
|
+
}
|
|
72
|
+
function serializeChild(child) {
|
|
73
|
+
if (child.kind === "text") return escapeText(child.value);
|
|
74
|
+
if (child.kind !== "element") throw new Error(`serializeStatic: unexpected ${child.kind}`);
|
|
75
|
+
return serializeStatic(child);
|
|
76
|
+
}
|
|
77
|
+
function serializeProp(prop) {
|
|
78
|
+
const name = HTML_NAME[prop.name] ?? prop.name;
|
|
79
|
+
const value = prop.literal;
|
|
80
|
+
if (value === true || value === void 0) return ` ${name}`;
|
|
81
|
+
if (value === false || value === null) return "";
|
|
82
|
+
return ` ${name}="${escapeAttr(String(value))}"`;
|
|
83
|
+
}
|
|
84
|
+
function escapeAttr(value) {
|
|
85
|
+
return value.replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<").replace(/>/g, ">");
|
|
86
|
+
}
|
|
87
|
+
function escapeText(value) {
|
|
88
|
+
return value.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
|
89
|
+
}
|
|
90
|
+
function templatePositions(root) {
|
|
91
|
+
const pos = [];
|
|
92
|
+
let file;
|
|
93
|
+
const walk = (el) => {
|
|
94
|
+
file ??= el.at?.file;
|
|
95
|
+
pos.push(el.at?.line ?? 0, el.at?.column ?? 0);
|
|
96
|
+
for (const child of el.children) if (child.kind === "element") walk(child);
|
|
97
|
+
};
|
|
98
|
+
walk(root);
|
|
99
|
+
return file && pos.some((n) => n !== 0) ? { file, pos } : void 0;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// src/codegen/partial-template.ts
|
|
103
|
+
var HOLE_START = "<!--fx-->";
|
|
104
|
+
var HOLE_END = "<!--fx/-->";
|
|
105
|
+
function isHole(node) {
|
|
106
|
+
return node.kind === "expr" || node.kind === "component" || node.kind === "control";
|
|
107
|
+
}
|
|
108
|
+
function isTemplateChild(node) {
|
|
109
|
+
return node.kind === "text" || node.kind === "element" && isTemplateElement(node);
|
|
110
|
+
}
|
|
111
|
+
function isTemplateElement(node) {
|
|
112
|
+
if (node.svg) return false;
|
|
113
|
+
if (isRawTextElement(node.tag)) return false;
|
|
114
|
+
if (!node.props.every((p) => isPlainLiteralAttr(p))) return false;
|
|
115
|
+
return node.children.every((c) => isTemplateChild(c) || isHole(c));
|
|
116
|
+
}
|
|
117
|
+
function containsHole(node) {
|
|
118
|
+
if (isHole(node)) return true;
|
|
119
|
+
const children = node.children;
|
|
120
|
+
return children ? children.some(containsHole) : false;
|
|
121
|
+
}
|
|
122
|
+
function addressable(el) {
|
|
123
|
+
for (let i = 0; i < el.children.length; i++) {
|
|
124
|
+
const child = el.children[i];
|
|
125
|
+
if (child.kind === "text") {
|
|
126
|
+
if (child.value === "") return false;
|
|
127
|
+
if (el.children[i + 1]?.kind === "text") return false;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
return el.children.every((c) => c.kind !== "element" || addressable(c));
|
|
131
|
+
}
|
|
132
|
+
function planPartialTemplate(root) {
|
|
133
|
+
if (!isTemplateElement(root)) return null;
|
|
134
|
+
if (!addressable(root)) return null;
|
|
135
|
+
if (!root.children.some(containsHole)) return null;
|
|
136
|
+
const steps = [];
|
|
137
|
+
const holes = [];
|
|
138
|
+
let refCount = 0;
|
|
139
|
+
const declare = (expr) => {
|
|
140
|
+
const ref = `_n$${refCount++}`;
|
|
141
|
+
steps.push({ ref, expr });
|
|
142
|
+
return ref;
|
|
143
|
+
};
|
|
144
|
+
walk(root, "_el$");
|
|
145
|
+
return { html: serializeWithMarkers(root), tag: root.tag, steps, holes };
|
|
146
|
+
function walk(el, elementRef) {
|
|
147
|
+
let last = -1;
|
|
148
|
+
el.children.forEach((child, i) => {
|
|
149
|
+
if (containsHole(child)) last = i;
|
|
150
|
+
});
|
|
151
|
+
let previous = null;
|
|
152
|
+
for (let i = 0; i <= last; i++) {
|
|
153
|
+
const child = el.children[i];
|
|
154
|
+
const expr = previous ? `${previous}.nextSibling` : `${elementRef}.firstChild`;
|
|
155
|
+
if (isHole(child)) {
|
|
156
|
+
const startRef = declare(expr);
|
|
157
|
+
const endRef = declare(`holeEnd(${startRef})`);
|
|
158
|
+
holes.push({ parentRef: elementRef, startRef, endRef, node: child });
|
|
159
|
+
previous = endRef;
|
|
160
|
+
continue;
|
|
161
|
+
}
|
|
162
|
+
const ref = declare(expr);
|
|
163
|
+
if (child.kind === "element" && containsHole(child)) walk(child, ref);
|
|
164
|
+
previous = ref;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
function serializeWithMarkers(el) {
|
|
169
|
+
return serializeStatic(withSentinels(el)).split(SENTINEL).join(HOLE_START + HOLE_END);
|
|
170
|
+
}
|
|
171
|
+
function withSentinels(el) {
|
|
172
|
+
return {
|
|
173
|
+
...el,
|
|
174
|
+
children: el.children.map(
|
|
175
|
+
(child) => isHole(child) ? { kind: "text", value: SENTINEL } : child.kind === "element" ? withSentinels(child) : child
|
|
176
|
+
)
|
|
177
|
+
};
|
|
178
|
+
}
|
|
179
|
+
var SENTINEL = "\0fx-hole\0";
|
|
180
|
+
|
|
181
|
+
// src/codegen/contract.ts
|
|
182
|
+
var RUNTIME_CONTRACT_V1 = {
|
|
183
|
+
version: 1,
|
|
184
|
+
module: "@fluixi/dom",
|
|
185
|
+
symbols: [
|
|
186
|
+
"createNativeElement",
|
|
187
|
+
"insert",
|
|
188
|
+
"spread",
|
|
189
|
+
"setAttribute",
|
|
190
|
+
"delegateEvents",
|
|
191
|
+
"createComponent",
|
|
192
|
+
"createMemo",
|
|
193
|
+
"untrack",
|
|
194
|
+
"Show",
|
|
195
|
+
"For",
|
|
196
|
+
"Index",
|
|
197
|
+
"Switch",
|
|
198
|
+
"Match",
|
|
199
|
+
"Dynamic",
|
|
200
|
+
"ErrorBoundary"
|
|
201
|
+
]
|
|
202
|
+
};
|
|
203
|
+
var RUNTIME_CONTRACT_V2 = {
|
|
204
|
+
version: 2,
|
|
205
|
+
module: "@fluixi/dom",
|
|
206
|
+
symbols: [...RUNTIME_CONTRACT_V1.symbols, "template", "cloneTemplate", "walk"]
|
|
207
|
+
};
|
|
208
|
+
|
|
209
|
+
// src/analyze/intrinsics.ts
|
|
210
|
+
var REACTIVE_MODULE = "@fluixi/reactive/signal";
|
|
211
|
+
var INTRINSICS = {
|
|
212
|
+
$signal: { export: "signal", module: REACTIVE_MODULE, returns: "signal-handle" },
|
|
213
|
+
$memo: { export: "memo", module: REACTIVE_MODULE, returns: "memo-handle" },
|
|
214
|
+
$effect: { export: "effect", module: REACTIVE_MODULE, returns: "effect" },
|
|
215
|
+
$store: { export: "store", module: "@fluixi/reactive/store", returns: "store-handle" },
|
|
216
|
+
$resource: { export: "resource", module: REACTIVE_MODULE, returns: "resource-handle" },
|
|
217
|
+
// No short runtime form for these yet, so the intrinsic stands for the `create*`
|
|
218
|
+
// name. Still worth having: no import to write, and when a shorter form is
|
|
219
|
+
// designed, the change is this line rather than a compiler pass.
|
|
220
|
+
$selector: { export: "createSelector", module: REACTIVE_MODULE, returns: "memo-accessor" },
|
|
221
|
+
$deferred: { export: "createDeferred", module: REACTIVE_MODULE, returns: "memo-accessor" },
|
|
222
|
+
// Not value constructors, but the compiler has to know them: they change what a read
|
|
223
|
+
// does. `untrack` suppresses dependency collection, which is exactly the kind of thing
|
|
224
|
+
// dependency analysis must not guess at.
|
|
225
|
+
$untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
|
|
226
|
+
$untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" }
|
|
227
|
+
};
|
|
228
|
+
var INTRINSIC_CALL = new RegExp(`\\$(?:${Object.keys(INTRINSICS).map((n) => n.slice(1)).join("|")})\\s*\\(`);
|
|
229
|
+
|
|
230
|
+
// src/transform/source-locations.ts
|
|
231
|
+
var SOURCE_MARKER = "__fx_source";
|
|
232
|
+
var HOLE_MARKER = "__fx_hole";
|
|
233
|
+
var markHole = (accessor, line, column, name) => `(globalThis.${HOLE_MARKER} ?? ((f) => f))(${accessor},${line},${column}${name === void 0 ? "" : `,${JSON.stringify(name)}`})`;
|
|
234
|
+
var PROPS_MARKER = "__fx_props";
|
|
235
|
+
var markProps = (object, at) => `(globalThis.${PROPS_MARKER} ?? ((p) => p))(${object},${JSON.stringify(at)})`;
|
|
236
|
+
|
|
237
|
+
// src/analyze/paren.ts
|
|
238
|
+
function skipQuoted(src, start) {
|
|
239
|
+
const quote = src[start];
|
|
240
|
+
for (let i = start + 1; i < src.length; i++) {
|
|
241
|
+
const c = src[i];
|
|
242
|
+
if (c === "\\") i++;
|
|
243
|
+
else if (c === quote) return i + 1;
|
|
244
|
+
else if (c === "\n") return -1;
|
|
245
|
+
}
|
|
246
|
+
return -1;
|
|
247
|
+
}
|
|
248
|
+
function skipTemplate(src, start) {
|
|
249
|
+
let i = start + 1;
|
|
250
|
+
while (i < src.length) {
|
|
251
|
+
const c = src[i];
|
|
252
|
+
if (c === "\\") {
|
|
253
|
+
i += 2;
|
|
254
|
+
} else if (c === "`") {
|
|
255
|
+
return i + 1;
|
|
256
|
+
} else if (c === "$" && src[i + 1] === "{") {
|
|
257
|
+
let depth = 1;
|
|
258
|
+
i += 2;
|
|
259
|
+
while (i < src.length && depth > 0) {
|
|
260
|
+
const k = src[i];
|
|
261
|
+
if (k === "\\") i += 2;
|
|
262
|
+
else if (k === "`") {
|
|
263
|
+
const end = skipTemplate(src, i);
|
|
264
|
+
if (end < 0) return -1;
|
|
265
|
+
i = end;
|
|
266
|
+
} else if (k === '"' || k === "'") {
|
|
267
|
+
const end = skipQuoted(src, i);
|
|
268
|
+
if (end < 0) return -1;
|
|
269
|
+
i = end;
|
|
270
|
+
} else {
|
|
271
|
+
if (k === "{") depth++;
|
|
272
|
+
else if (k === "}") depth--;
|
|
273
|
+
i++;
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
} else {
|
|
277
|
+
i++;
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
return -1;
|
|
281
|
+
}
|
|
282
|
+
function skipRegex(src, start) {
|
|
283
|
+
let inClass = false;
|
|
284
|
+
for (let i = start + 1; i < src.length; i++) {
|
|
285
|
+
const c = src[i];
|
|
286
|
+
if (c === "\\") i++;
|
|
287
|
+
else if (c === "[") inClass = true;
|
|
288
|
+
else if (c === "]") inClass = false;
|
|
289
|
+
else if (c === "\n") return -1;
|
|
290
|
+
else if (c === "/" && !inClass) {
|
|
291
|
+
let end = i + 1;
|
|
292
|
+
while (end < src.length && /[a-z]/i.test(src[end])) end++;
|
|
293
|
+
return end;
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
return -1;
|
|
297
|
+
}
|
|
298
|
+
function divides(prev) {
|
|
299
|
+
return prev !== "" && /[A-Za-z0-9_$)\]]/.test(prev);
|
|
300
|
+
}
|
|
301
|
+
function topLevelComma(src) {
|
|
302
|
+
let depth = 0;
|
|
303
|
+
let prev = "";
|
|
304
|
+
let i = 0;
|
|
305
|
+
while (i < src.length) {
|
|
306
|
+
const c = src[i];
|
|
307
|
+
if (c === '"' || c === "'") {
|
|
308
|
+
const end = skipQuoted(src, i);
|
|
309
|
+
if (end < 0) return null;
|
|
310
|
+
i = end;
|
|
311
|
+
prev = c;
|
|
312
|
+
} else if (c === "`") {
|
|
313
|
+
const end = skipTemplate(src, i);
|
|
314
|
+
if (end < 0) return null;
|
|
315
|
+
i = end;
|
|
316
|
+
prev = c;
|
|
317
|
+
} else if (c === "/" && src[i + 1] === "/") {
|
|
318
|
+
return null;
|
|
319
|
+
} else if (c === "/" && src[i + 1] === "*") {
|
|
320
|
+
const end = src.indexOf("*/", i + 2);
|
|
321
|
+
if (end < 0) return null;
|
|
322
|
+
i = end + 2;
|
|
323
|
+
} else if (c === "/" && !divides(prev)) {
|
|
324
|
+
const end = skipRegex(src, i);
|
|
325
|
+
if (end < 0) return null;
|
|
326
|
+
i = end;
|
|
327
|
+
prev = "/";
|
|
328
|
+
} else {
|
|
329
|
+
if (c === "(" || c === "[" || c === "{") depth++;
|
|
330
|
+
else if (c === ")" || c === "]" || c === "}") {
|
|
331
|
+
depth--;
|
|
332
|
+
if (depth < 0) return null;
|
|
333
|
+
} else if (c === "," && depth === 0) return true;
|
|
334
|
+
if (!/\s/.test(c)) prev = c;
|
|
335
|
+
i++;
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
return depth === 0 ? false : null;
|
|
339
|
+
}
|
|
340
|
+
function paren(code, position) {
|
|
341
|
+
const src = code.trim();
|
|
342
|
+
if (src === "") return `(${code})`;
|
|
343
|
+
if (position === "arrowBody" && src[0] === "{") return `(${code})`;
|
|
344
|
+
return topLevelComma(src) === false ? code : `(${code})`;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
// src/codegen/backends/imperative.ts
|
|
348
|
+
var CONTROL_COMPONENT = {
|
|
349
|
+
show: "Show",
|
|
350
|
+
for: "For",
|
|
351
|
+
index: "Index",
|
|
352
|
+
switch: "Switch",
|
|
353
|
+
match: "Match",
|
|
354
|
+
dynamic: "Dynamic",
|
|
355
|
+
errorBoundary: "ErrorBoundary",
|
|
356
|
+
suspense: "Suspense"
|
|
357
|
+
};
|
|
358
|
+
function isIdent(name) {
|
|
359
|
+
return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name);
|
|
360
|
+
}
|
|
361
|
+
function propKey(name) {
|
|
362
|
+
return isIdent(name) ? name : JSON.stringify(name);
|
|
363
|
+
}
|
|
364
|
+
function propValue(p) {
|
|
365
|
+
if (p.expr !== void 0) {
|
|
366
|
+
if (p.name === "ref" && p.at)
|
|
367
|
+
return markHole(paren(p.expr, "value"), p.at.line, p.at.column, p.expr);
|
|
368
|
+
if (!p.reactive) return paren(p.expr, "value");
|
|
369
|
+
const accessor = `() => ${paren(p.expr, "arrowBody")}`;
|
|
370
|
+
return p.at ? markHole(accessor, p.at.line, p.at.column, p.directive) : accessor;
|
|
371
|
+
}
|
|
372
|
+
return JSON.stringify(p.literal ?? true);
|
|
373
|
+
}
|
|
374
|
+
function componentPropValue(p) {
|
|
375
|
+
if (p.expr !== void 0) return paren(p.expr, "value");
|
|
376
|
+
return JSON.stringify(p.literal ?? true);
|
|
377
|
+
}
|
|
378
|
+
function emitProps(props, childrenExpr, used) {
|
|
379
|
+
const spreads = props.filter((p) => p.kind === "spread");
|
|
380
|
+
const normal = props.filter((p) => p.kind !== "spread");
|
|
381
|
+
const entries = normal.map((p) => `${propKey(p.name)}: ${propValue(p)}`);
|
|
382
|
+
if (childrenExpr != null) entries.push(`children: ${childrenExpr}`);
|
|
383
|
+
const obj = `{ ${entries.join(", ")} }`;
|
|
384
|
+
if (spreads.length > 0) {
|
|
385
|
+
used.add("mergeProps");
|
|
386
|
+
return `mergeProps(${spreads.map((s) => s.expr).join(", ")}, ${obj})`;
|
|
387
|
+
}
|
|
388
|
+
return obj;
|
|
389
|
+
}
|
|
390
|
+
function markBind(code, at) {
|
|
391
|
+
return at ? markHole(code, at.line, at.column) : code;
|
|
392
|
+
}
|
|
393
|
+
function emitChildren(children, used, templates) {
|
|
394
|
+
if (children.length === 1) return emitNode(children[0], used, templates);
|
|
395
|
+
return `[${children.map((c) => emitNode(c, used, templates)).join(", ")}]`;
|
|
396
|
+
}
|
|
397
|
+
function emitComponent(name, props, children, used, templates, at) {
|
|
398
|
+
used.add("createMemo");
|
|
399
|
+
used.add("createComponent");
|
|
400
|
+
const spreads = props.filter((p) => p.kind === "spread");
|
|
401
|
+
const normal = props.filter((p) => p.kind !== "spread");
|
|
402
|
+
const entries = normal.map(
|
|
403
|
+
(p) => `get ${propKey(p.name)}() { return ${componentPropValue(p)}; }`
|
|
404
|
+
);
|
|
405
|
+
if (children.length > 0) {
|
|
406
|
+
entries.push(`get children() { return ${emitChildren(children, used, templates)}; }`);
|
|
407
|
+
}
|
|
408
|
+
let obj = `{ ${entries.join(", ")} }`;
|
|
409
|
+
if (spreads.length > 0) {
|
|
410
|
+
used.add("mergeProps");
|
|
411
|
+
obj = `mergeProps(${spreads.map((s) => s.expr).join(", ")}, ${obj})`;
|
|
412
|
+
}
|
|
413
|
+
const propAt = {};
|
|
414
|
+
for (const p of normal) if (p.at) propAt[p.name] = [p.at.line, p.at.column];
|
|
415
|
+
if (Object.keys(propAt).length) obj = markProps(obj, propAt);
|
|
416
|
+
const mark = at ? `globalThis.${SOURCE_MARKER}?.(${JSON.stringify(at.file)},${at.line},${at.column},${JSON.stringify(name)}), ` : "";
|
|
417
|
+
return `createMemo(${paren(`${mark}() => createComponent(${name}, ${obj})`, "value")})`;
|
|
418
|
+
}
|
|
419
|
+
function staticAttrAssignment(el, prop) {
|
|
420
|
+
const name = htmlAttrName(prop.name);
|
|
421
|
+
const value = prop.literal;
|
|
422
|
+
if (value === true || value === void 0) return `${el}.setAttribute(${JSON.stringify(name)}, "");`;
|
|
423
|
+
if (value === false || value === null) return "";
|
|
424
|
+
return `${el}.setAttribute(${JSON.stringify(name)}, ${JSON.stringify(String(value))});`;
|
|
425
|
+
}
|
|
426
|
+
var partial = false;
|
|
427
|
+
function emitNode(node, used, templates) {
|
|
428
|
+
switch (node.kind) {
|
|
429
|
+
case "text":
|
|
430
|
+
return JSON.stringify(node.value);
|
|
431
|
+
case "expr": {
|
|
432
|
+
if (!node.reactive) return paren(node.code, "value");
|
|
433
|
+
const accessor = `() => ${paren(node.code, "arrowBody")}`;
|
|
434
|
+
return node.at ? markHole(accessor, node.at.line, node.at.column) : accessor;
|
|
435
|
+
}
|
|
436
|
+
case "fragment":
|
|
437
|
+
if (node.children.length === 0) return "null";
|
|
438
|
+
return emitChildren(node.children, used, templates);
|
|
439
|
+
case "component":
|
|
440
|
+
return markBind(emitComponent(node.name, node.props, node.children, used, templates, node.at), node.bindAt ?? node.at);
|
|
441
|
+
case "control": {
|
|
442
|
+
const name = CONTROL_COMPONENT[node.control] ?? node.control;
|
|
443
|
+
used.add(name);
|
|
444
|
+
return markBind(emitComponent(name, node.props, node.children, used, templates), node.bindAt);
|
|
445
|
+
}
|
|
446
|
+
case "element": {
|
|
447
|
+
if (templates && node.static && !node.svg && isSerializable(node)) {
|
|
448
|
+
used.add("templateNode");
|
|
449
|
+
const id = `_tmpl$${templates.length}`;
|
|
450
|
+
templates.push({ id, html: serializeStatic(node), tag: node.tag, svg: false });
|
|
451
|
+
const at = templatePositions(node);
|
|
452
|
+
return at ? `templateNode(${id}, ${JSON.stringify(node.tag)}, false, false, ${JSON.stringify(at)})` : `templateNode(${id}, ${JSON.stringify(node.tag)})`;
|
|
453
|
+
}
|
|
454
|
+
if (templates && partial) {
|
|
455
|
+
const plan = planPartialTemplate(node);
|
|
456
|
+
if (plan) {
|
|
457
|
+
used.add("templateNode");
|
|
458
|
+
used.add("insert");
|
|
459
|
+
used.add("holeEnd");
|
|
460
|
+
used.add("holeContent");
|
|
461
|
+
used.add("holeScope");
|
|
462
|
+
const id = `_tmpl$${templates.length}`;
|
|
463
|
+
templates.push({ id, html: plan.html, tag: plan.tag, svg: false });
|
|
464
|
+
const at = templatePositions(node);
|
|
465
|
+
const lines = [
|
|
466
|
+
`const _el$ = templateNode(${id}, ${JSON.stringify(plan.tag)}, true${at ? `, false, ${JSON.stringify(at)}` : ""});`
|
|
467
|
+
];
|
|
468
|
+
for (const step of plan.steps) lines.push(`const ${step.ref} = ${step.expr};`);
|
|
469
|
+
for (const hole of plan.holes) {
|
|
470
|
+
lines.push(
|
|
471
|
+
`insert(${hole.parentRef}, holeScope(${hole.startRef}, () => ${paren(emitNode(hole.node, used, templates), "arrowBody")}), ${hole.endRef}, holeContent(${hole.startRef}, ${hole.endRef}));`
|
|
472
|
+
);
|
|
473
|
+
}
|
|
474
|
+
lines.push("return _el$;");
|
|
475
|
+
return `(() => { ${lines.join(" ")} })()`;
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
used.add("createNativeElement");
|
|
479
|
+
const tag = JSON.stringify(node.tag);
|
|
480
|
+
const el = "_el$";
|
|
481
|
+
const parts = [];
|
|
482
|
+
const createArgs = node.at ? `${tag}, ${node.svg}, ${JSON.stringify(node.at)}` : node.svg ? `${tag}, true` : tag;
|
|
483
|
+
parts.push(`const ${el} = createNativeElement(${createArgs});`);
|
|
484
|
+
if (node.props.length > 0) {
|
|
485
|
+
if (!node.svg && node.props.every(isPlainLiteralAttr)) {
|
|
486
|
+
for (const p of node.props) parts.push(staticAttrAssignment(el, p));
|
|
487
|
+
} else {
|
|
488
|
+
used.add("spread");
|
|
489
|
+
const svgFlag = node.svg ? ", isSVG: true" : "";
|
|
490
|
+
parts.push(`spread({ element: ${el}, props: ${emitProps(node.props, null, used)}${svgFlag} });`);
|
|
491
|
+
}
|
|
492
|
+
}
|
|
493
|
+
for (const child of node.children) {
|
|
494
|
+
used.add("insert");
|
|
495
|
+
const childCode = emitNode(child, used, templates);
|
|
496
|
+
const isFn = child.kind === "expr" && child.reactive || child.kind === "component" || child.kind === "control";
|
|
497
|
+
parts.push(isFn ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
|
|
498
|
+
}
|
|
499
|
+
parts.push(`return ${el};`);
|
|
500
|
+
return `(() => { ${parts.join(" ")} })()`;
|
|
501
|
+
}
|
|
502
|
+
}
|
|
503
|
+
}
|
|
504
|
+
function inlineTemplates(code, templates) {
|
|
505
|
+
if (!templates || templates.length === 0) return code;
|
|
506
|
+
const byId = new Map(templates.map((t3) => [t3.id, JSON.stringify(t3.html)]));
|
|
507
|
+
return code.replace(/_tmpl\$\d+/g, (id) => byId.get(id) ?? id);
|
|
508
|
+
}
|
|
509
|
+
var imperativeBackend = {
|
|
510
|
+
name: "imperative",
|
|
511
|
+
contract: RUNTIME_CONTRACT_V1,
|
|
512
|
+
emit(node, options) {
|
|
513
|
+
const used = /* @__PURE__ */ new Set();
|
|
514
|
+
const templates = options?.templateClone !== false ? [] : void 0;
|
|
515
|
+
partial = options?.partialTemplates === true;
|
|
516
|
+
const code = emitNode(node, used, templates);
|
|
517
|
+
return { code, imports: Array.from(used), templates };
|
|
518
|
+
}
|
|
519
|
+
};
|
|
520
|
+
|
|
521
|
+
// src/frontend/babel/lower-template.ts
|
|
522
|
+
import { types as t } from "@babel/core";
|
|
523
|
+
import _generate from "@babel/generator";
|
|
524
|
+
|
|
525
|
+
// src/lower/template.ts
|
|
526
|
+
import {
|
|
527
|
+
parseTemplate
|
|
528
|
+
} from "@fluixi/template-parser";
|
|
529
|
+
|
|
530
|
+
// src/resolve/load-directive.ts
|
|
531
|
+
var EAGER = { kind: "eager" };
|
|
532
|
+
var DEFAULT_INTERACTION_EVENTS = ["pointerdown", "focusin", "keydown"];
|
|
533
|
+
var STRATEGIES = /* @__PURE__ */ new Set(["eager", "idle", "visible", "interaction", "media", "never"]);
|
|
534
|
+
var LoadDirectiveError = class extends Error {
|
|
535
|
+
};
|
|
536
|
+
function isLoadDirective(name) {
|
|
537
|
+
return name.startsWith("load:");
|
|
538
|
+
}
|
|
539
|
+
function parseLoadDirective(name, value) {
|
|
540
|
+
const strategy = name.slice("load:".length);
|
|
541
|
+
if (!STRATEGIES.has(strategy)) {
|
|
542
|
+
throw new LoadDirectiveError(
|
|
543
|
+
`Unknown load strategy 'load:${strategy}'. Expected one of ${[...STRATEGIES].join(", ")}.`
|
|
544
|
+
);
|
|
545
|
+
}
|
|
546
|
+
switch (strategy) {
|
|
547
|
+
case "eager":
|
|
548
|
+
return EAGER;
|
|
549
|
+
case "idle":
|
|
550
|
+
return { kind: "idle" };
|
|
551
|
+
case "never":
|
|
552
|
+
return { kind: "never" };
|
|
553
|
+
case "visible":
|
|
554
|
+
return value ? { kind: "visible", rootMargin: value } : { kind: "visible" };
|
|
555
|
+
case "interaction":
|
|
556
|
+
return {
|
|
557
|
+
kind: "interaction",
|
|
558
|
+
events: value ? splitEvents(value) : [...DEFAULT_INTERACTION_EVENTS]
|
|
559
|
+
};
|
|
560
|
+
case "media":
|
|
561
|
+
if (!value) {
|
|
562
|
+
throw new LoadDirectiveError(
|
|
563
|
+
`'load:media' needs a query, e.g. load:media="(min-width: 1024px)".`
|
|
564
|
+
);
|
|
565
|
+
}
|
|
566
|
+
return { kind: "media", query: value };
|
|
567
|
+
default:
|
|
568
|
+
throw new LoadDirectiveError(`Unhandled load strategy '${strategy}'.`);
|
|
569
|
+
}
|
|
570
|
+
}
|
|
571
|
+
function splitEvents(value) {
|
|
572
|
+
const events = value.split(/[\s,]+/).map((e) => e.trim()).filter(Boolean);
|
|
573
|
+
if (events.length === 0) {
|
|
574
|
+
throw new LoadDirectiveError(`'load:interaction' was given no event names.`);
|
|
575
|
+
}
|
|
576
|
+
return events;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
// src/lower/text.ts
|
|
580
|
+
function cleanTemplateText(value) {
|
|
581
|
+
const lines = value.split(/\r\n|\n|\r/);
|
|
582
|
+
let lastNonEmpty = 0;
|
|
583
|
+
for (let i = 0; i < lines.length; i++) {
|
|
584
|
+
if (/[^ \t]/.test(lines[i])) lastNonEmpty = i;
|
|
585
|
+
}
|
|
586
|
+
let out = "";
|
|
587
|
+
for (let i = 0; i < lines.length; i++) {
|
|
588
|
+
let line = lines[i].replace(/\t/g, " ");
|
|
589
|
+
if (i !== 0) line = line.replace(/^ +/, "");
|
|
590
|
+
if (i !== lines.length - 1) line = line.replace(/ +$/, "");
|
|
591
|
+
if (!line) continue;
|
|
592
|
+
if (i !== lastNonEmpty) line += " ";
|
|
593
|
+
out += line;
|
|
594
|
+
}
|
|
595
|
+
return out;
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
// src/lower/template.ts
|
|
599
|
+
var DELEGATED = /* @__PURE__ */ new Set([
|
|
600
|
+
"click",
|
|
601
|
+
"dblclick",
|
|
602
|
+
"input",
|
|
603
|
+
"change",
|
|
604
|
+
"submit",
|
|
605
|
+
"focus",
|
|
606
|
+
"blur",
|
|
607
|
+
"keydown",
|
|
608
|
+
"keyup",
|
|
609
|
+
"keypress",
|
|
610
|
+
"mousedown",
|
|
611
|
+
"mouseup"
|
|
612
|
+
]);
|
|
613
|
+
function escapeTemplate(s) {
|
|
614
|
+
return s.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
|
|
615
|
+
}
|
|
616
|
+
function capitalize(s) {
|
|
617
|
+
return s.charAt(0).toUpperCase() + s.slice(1);
|
|
618
|
+
}
|
|
619
|
+
var Lowerer = class {
|
|
620
|
+
constructor(holes, used, sourceFile, positionAt) {
|
|
621
|
+
this.holes = holes;
|
|
622
|
+
this.used = used;
|
|
623
|
+
this.sourceFile = sourceFile;
|
|
624
|
+
this.positionAt = positionAt;
|
|
625
|
+
}
|
|
626
|
+
/**
|
|
627
|
+
* Where a tag is written, for the mark a component node carries.
|
|
628
|
+
*
|
|
629
|
+
* The parser reports offsets, and they are offsets into the file: the pieces it was given
|
|
630
|
+
* carry the positions the front-end recorded. Only built when the host asked for source
|
|
631
|
+
* locations, which is the only time either of these is set.
|
|
632
|
+
*/
|
|
633
|
+
tagAt(node) {
|
|
634
|
+
const start = node.loc?.start;
|
|
635
|
+
if (!this.sourceFile || !this.positionAt || start == null) return void 0;
|
|
636
|
+
const { line, column } = this.positionAt(start);
|
|
637
|
+
return { file: this.sourceFile, line, column };
|
|
638
|
+
}
|
|
639
|
+
hole(i) {
|
|
640
|
+
return this.holes[i] ?? { code: "undefined", reactive: false };
|
|
641
|
+
}
|
|
642
|
+
/** Emit a nested IR subtree to code (for `Show` fallback / `For` children). */
|
|
643
|
+
emit(node) {
|
|
644
|
+
const { code, imports, templates } = imperativeBackend.emit(node, {});
|
|
645
|
+
for (const s of imports) this.used.add(s);
|
|
646
|
+
return inlineTemplates(code, templates);
|
|
647
|
+
}
|
|
648
|
+
// --- content ------------------------------------------------------------
|
|
649
|
+
lowerRoot(children) {
|
|
650
|
+
const nodes = this.lowerChildren(children);
|
|
651
|
+
if (nodes.length === 1) return nodes[0];
|
|
652
|
+
return { kind: "fragment", children: nodes };
|
|
653
|
+
}
|
|
654
|
+
/** Lower a sibling list, handling text-drop and if/else/each restructuring. */
|
|
655
|
+
lowerChildren(children) {
|
|
656
|
+
const out = [];
|
|
657
|
+
for (let i = 0; i < children.length; i++) {
|
|
658
|
+
const child = children[i];
|
|
659
|
+
if (child.kind === "Element" || child.kind === "Component") {
|
|
660
|
+
const ifDir = child.attributes.find((a) => a.kind === "IfDirective");
|
|
661
|
+
if (ifDir && ifDir.kind === "IfDirective") {
|
|
662
|
+
let elseIdx = i + 1;
|
|
663
|
+
if (elseIdx < children.length && this.isBlankText(children[elseIdx])) elseIdx++;
|
|
664
|
+
const elseNode = children[elseIdx];
|
|
665
|
+
const hasElse = elseNode && (elseNode.kind === "Element" || elseNode.kind === "Component") && elseNode.attributes.some((a) => a.kind === "ElseDirective");
|
|
666
|
+
out.push(this.lowerIf(child, ifDir.hole, hasElse ? elseNode : null));
|
|
667
|
+
if (hasElse) i = elseIdx;
|
|
668
|
+
continue;
|
|
669
|
+
}
|
|
670
|
+
if (child.attributes.some((a) => a.kind === "EachDirective")) {
|
|
671
|
+
out.push(this.lowerEach(child));
|
|
672
|
+
continue;
|
|
673
|
+
}
|
|
674
|
+
}
|
|
675
|
+
const node = this.lowerNode(child);
|
|
676
|
+
if (node) out.push(node);
|
|
677
|
+
}
|
|
678
|
+
return out;
|
|
679
|
+
}
|
|
680
|
+
isBlankText(n) {
|
|
681
|
+
return n.kind === "Text" && !n.raw && cleanTemplateText(n.value) === "";
|
|
682
|
+
}
|
|
683
|
+
lowerNode(node) {
|
|
684
|
+
switch (node.kind) {
|
|
685
|
+
case "Text": {
|
|
686
|
+
if (node.raw) return { kind: "text", value: node.value };
|
|
687
|
+
const cleaned = cleanTemplateText(node.value);
|
|
688
|
+
return cleaned ? { kind: "text", value: cleaned } : null;
|
|
689
|
+
}
|
|
690
|
+
case "Comment":
|
|
691
|
+
return null;
|
|
692
|
+
// dropped, like JSX comments
|
|
693
|
+
case "Expression": {
|
|
694
|
+
const h = this.hole(node.hole);
|
|
695
|
+
return { kind: "expr", code: h.code, reactive: h.reactive, ...h.at ? { at: h.at } : {} };
|
|
696
|
+
}
|
|
697
|
+
case "Fragment":
|
|
698
|
+
return { kind: "fragment", children: this.lowerChildren(node.children) };
|
|
699
|
+
case "Element":
|
|
700
|
+
return this.lowerElement(node);
|
|
701
|
+
case "Component":
|
|
702
|
+
return this.lowerComponent(node);
|
|
703
|
+
default:
|
|
704
|
+
return null;
|
|
705
|
+
}
|
|
706
|
+
}
|
|
707
|
+
lowerElement(el) {
|
|
708
|
+
const isAttr = el.attributes.find((a) => a.kind === "Attribute" && a.name === "is");
|
|
709
|
+
if (el.tag === "component" && isAttr && isAttr.value && isAttr.value.kind === "hole") {
|
|
710
|
+
const rest = el.attributes.filter((a) => a !== isAttr);
|
|
711
|
+
const node = this.lowerComponent({ ...el, kind: "Component", tag: "Dynamic", tagHole: null, attributes: rest });
|
|
712
|
+
node.props.unshift({ name: "component", kind: "attr", expr: `() => ${paren(this.hole(isAttr.value.hole).code, "arrowBody")}` });
|
|
713
|
+
return node;
|
|
714
|
+
}
|
|
715
|
+
const at = this.tagAt(el);
|
|
716
|
+
return {
|
|
717
|
+
kind: "element",
|
|
718
|
+
tag: el.tag,
|
|
719
|
+
svg: el.namespace === "svg",
|
|
720
|
+
props: this.lowerAttributes(el.attributes),
|
|
721
|
+
children: this.lowerChildren(el.children),
|
|
722
|
+
static: false,
|
|
723
|
+
...at ? { at } : {}
|
|
724
|
+
};
|
|
725
|
+
}
|
|
726
|
+
lowerComponent(el) {
|
|
727
|
+
const name = el.tagHole != null ? this.hole(el.tagHole).code : el.tag;
|
|
728
|
+
const props = this.lowerAttributes(el.attributes);
|
|
729
|
+
const { slots, rest } = this.partitionSlots(el.children);
|
|
730
|
+
for (const [slotName, nodes] of slots) {
|
|
731
|
+
const ir = nodes.length === 1 ? nodes[0] : { kind: "fragment", children: nodes };
|
|
732
|
+
const slotProp = {
|
|
733
|
+
name: slotName,
|
|
734
|
+
kind: "attr",
|
|
735
|
+
expr: this.emit(ir),
|
|
736
|
+
jsxElement: true
|
|
737
|
+
};
|
|
738
|
+
const clash = props.findIndex((p) => p.name === slotName);
|
|
739
|
+
if (clash >= 0) props[clash] = slotProp;
|
|
740
|
+
else props.push(slotProp);
|
|
741
|
+
}
|
|
742
|
+
const loadAttr = el.attributes.find((a) => a.kind === "LoadDirective");
|
|
743
|
+
const load = loadAttr ? parseLoadDirective(`load:${loadAttr.strategy}`, loadAttr.modifier) : void 0;
|
|
744
|
+
const bindAt = props.find((p) => p.at && p.reactive)?.at;
|
|
745
|
+
const at = this.tagAt(el);
|
|
746
|
+
return {
|
|
747
|
+
kind: "component",
|
|
748
|
+
name,
|
|
749
|
+
props,
|
|
750
|
+
children: this.lowerChildren(rest),
|
|
751
|
+
...at ? { at } : {},
|
|
752
|
+
...bindAt ? { bindAt } : {},
|
|
753
|
+
...load ? { load } : {}
|
|
754
|
+
};
|
|
755
|
+
}
|
|
756
|
+
/** Split a component's children into named slots (`slot="x"`) and the rest. */
|
|
757
|
+
partitionSlots(children) {
|
|
758
|
+
const slots = /* @__PURE__ */ new Map();
|
|
759
|
+
const rest = [];
|
|
760
|
+
for (const child of children) {
|
|
761
|
+
if (child.kind === "Element" || child.kind === "Component") {
|
|
762
|
+
const slot = child.attributes.find(
|
|
763
|
+
(a) => a.kind === "Attribute" && a.name === "slot"
|
|
764
|
+
);
|
|
765
|
+
if (slot && slot.value && slot.value.kind === "static") {
|
|
766
|
+
const stripped = { ...child, attributes: child.attributes.filter((a) => a !== slot) };
|
|
767
|
+
const ir = stripped.kind === "Element" ? this.lowerElement(stripped) : this.lowerComponent(stripped);
|
|
768
|
+
const bucket = slots.get(slot.value.value) ?? [];
|
|
769
|
+
bucket.push(ir);
|
|
770
|
+
slots.set(slot.value.value, bucket);
|
|
771
|
+
continue;
|
|
772
|
+
}
|
|
773
|
+
}
|
|
774
|
+
rest.push(child);
|
|
775
|
+
}
|
|
776
|
+
return { slots, rest };
|
|
777
|
+
}
|
|
778
|
+
// --- control-flow sugar -------------------------------------------------
|
|
779
|
+
/** `<el if=${cond}>…</el>` (+ optional `<el else>`) → `<Show when fallback>`. */
|
|
780
|
+
lowerIf(el, condHole, elseEl) {
|
|
781
|
+
const cond = this.hole(condHole);
|
|
782
|
+
const props = [
|
|
783
|
+
{ name: "when", kind: "attr", expr: cond.code, reactive: cond.reactive, ...cond.at ? { at: cond.at } : {} }
|
|
784
|
+
];
|
|
785
|
+
if (elseEl) {
|
|
786
|
+
const elseIR = this.stripAndLower(elseEl, (a) => a.kind === "ElseDirective");
|
|
787
|
+
props.push({ name: "fallback", kind: "attr", expr: this.emit(elseIR), jsxElement: true });
|
|
788
|
+
}
|
|
789
|
+
const child = this.stripAndLower(el, (a) => a.kind === "IfDirective");
|
|
790
|
+
const at = this.tagAt(el);
|
|
791
|
+
return { kind: "component", name: "Show", props, children: [child], ...at ? { at } : {}, ...cond.at ? { bindAt: cond.at } : {} };
|
|
792
|
+
}
|
|
793
|
+
/** `<el each=${items} key?>${item => …}</el>` → `<For each>{item => <el>…</el>}</For>`. */
|
|
794
|
+
lowerEach(el) {
|
|
795
|
+
const eachDir = el.attributes.find((a) => a.kind === "EachDirective");
|
|
796
|
+
if (!eachDir || eachDir.kind !== "EachDirective") return this.lowerNode(el);
|
|
797
|
+
const each = this.hole(eachDir.hole);
|
|
798
|
+
const props = [{ name: "each", kind: "attr", expr: each.code, reactive: each.reactive, ...each.at ? { at: each.at } : {} }];
|
|
799
|
+
if (eachDir.key) {
|
|
800
|
+
const by = "static" in eachDir.key ? `(item) => item[${JSON.stringify(eachDir.key.static)}]` : this.hole(eachDir.key.hole).code;
|
|
801
|
+
props.push({ name: "by", kind: "attr", expr: by });
|
|
802
|
+
}
|
|
803
|
+
const arrow = this.itemArrow(el);
|
|
804
|
+
let childrenCode;
|
|
805
|
+
if (arrow) {
|
|
806
|
+
const bodyIR = { kind: "expr", code: arrow.body, reactive: arrow.bodyReactive };
|
|
807
|
+
const repeated = this.rebuildWithChildren(el, [bodyIR]);
|
|
808
|
+
childrenCode = `(${arrow.params.join(", ")}) => ${paren(this.emit(repeated), "arrowBody")}`;
|
|
809
|
+
} else {
|
|
810
|
+
const repeated = this.stripAndLower(el, (a) => a.kind === "EachDirective");
|
|
811
|
+
childrenCode = `() => ${paren(this.emit(repeated), "arrowBody")}`;
|
|
812
|
+
}
|
|
813
|
+
const children = [{ kind: "expr", code: childrenCode, reactive: false }];
|
|
814
|
+
const at = this.tagAt(el);
|
|
815
|
+
return { kind: "component", name: "For", props, children, ...at ? { at } : {}, ...each.at ? { bindAt: each.at } : {} };
|
|
816
|
+
}
|
|
817
|
+
/** The single `${item => expr}` child arrow, if that's the element's content. */
|
|
818
|
+
itemArrow(el) {
|
|
819
|
+
const kids = el.children.filter((c) => !this.isBlankText(c));
|
|
820
|
+
if (kids.length !== 1 || kids[0].kind !== "Expression") return null;
|
|
821
|
+
return this.hole(kids[0].hole).arrow ?? null;
|
|
822
|
+
}
|
|
823
|
+
/** Lower an element to IR, dropping the directive attribute matched by `drop`. */
|
|
824
|
+
stripAndLower(el, drop) {
|
|
825
|
+
const clone = { ...el, attributes: el.attributes.filter((a) => !drop(a)) };
|
|
826
|
+
return clone.kind === "Element" ? this.lowerElement(clone) : this.lowerComponent(clone);
|
|
827
|
+
}
|
|
828
|
+
/** Same element (minus each/key) but with explicit IR children. */
|
|
829
|
+
rebuildWithChildren(el, children) {
|
|
830
|
+
const props = this.lowerAttributes(
|
|
831
|
+
el.attributes.filter((a) => a.kind !== "EachDirective")
|
|
832
|
+
);
|
|
833
|
+
if (el.kind === "Element") {
|
|
834
|
+
const at = this.tagAt(el);
|
|
835
|
+
return {
|
|
836
|
+
kind: "element",
|
|
837
|
+
tag: el.tag,
|
|
838
|
+
svg: el.namespace === "svg",
|
|
839
|
+
props,
|
|
840
|
+
children,
|
|
841
|
+
static: false,
|
|
842
|
+
...at ? { at } : {}
|
|
843
|
+
};
|
|
844
|
+
}
|
|
845
|
+
return { kind: "component", name: el.tag, props, children };
|
|
846
|
+
}
|
|
847
|
+
// --- attributes ---------------------------------------------------------
|
|
848
|
+
lowerAttributes(attrs) {
|
|
849
|
+
const props = [];
|
|
850
|
+
const classEntries = [];
|
|
851
|
+
let classReactive = false;
|
|
852
|
+
let classAt;
|
|
853
|
+
const styleEntries = [];
|
|
854
|
+
let styleReactive = false;
|
|
855
|
+
let styleAt;
|
|
856
|
+
const usePairs = [];
|
|
857
|
+
for (const a of attrs) {
|
|
858
|
+
switch (a.kind) {
|
|
859
|
+
case "IfDirective":
|
|
860
|
+
case "EachDirective":
|
|
861
|
+
case "ElseDirective":
|
|
862
|
+
break;
|
|
863
|
+
// handled as control-flow at the parent level
|
|
864
|
+
case "Attribute":
|
|
865
|
+
props.push(this.plainAttr(a));
|
|
866
|
+
break;
|
|
867
|
+
case "PropertyBinding":
|
|
868
|
+
props.push({
|
|
869
|
+
name: a.name,
|
|
870
|
+
kind: "prop",
|
|
871
|
+
expr: this.hole(a.hole).code,
|
|
872
|
+
reactive: this.hole(a.hole).reactive,
|
|
873
|
+
...this.hole(a.hole).at ? { at: this.hole(a.hole).at } : {}
|
|
874
|
+
});
|
|
875
|
+
break;
|
|
876
|
+
case "EventBinding":
|
|
877
|
+
props.push(this.eventProp(a));
|
|
878
|
+
break;
|
|
879
|
+
case "RefBinding":
|
|
880
|
+
props.push({
|
|
881
|
+
name: "ref",
|
|
882
|
+
kind: "ref",
|
|
883
|
+
expr: this.hole(a.hole).code,
|
|
884
|
+
reactive: this.hole(a.hole).reactive,
|
|
885
|
+
// Which variable ends up holding the element, and where it was written.
|
|
886
|
+
...this.hole(a.hole).at ? { at: this.hole(a.hole).at } : {}
|
|
887
|
+
});
|
|
888
|
+
break;
|
|
889
|
+
case "Spread":
|
|
890
|
+
props.push({ name: "", kind: "spread", expr: this.hole(a.hole).code });
|
|
891
|
+
break;
|
|
892
|
+
case "ClassDirective": {
|
|
893
|
+
const h = this.hole(a.hole);
|
|
894
|
+
classEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
|
|
895
|
+
classReactive = classReactive || h.reactive;
|
|
896
|
+
classAt ??= h.at;
|
|
897
|
+
break;
|
|
898
|
+
}
|
|
899
|
+
case "StyleDirective": {
|
|
900
|
+
const h = this.hole(a.hole);
|
|
901
|
+
styleEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
|
|
902
|
+
styleReactive = styleReactive || h.reactive;
|
|
903
|
+
styleAt ??= h.at;
|
|
904
|
+
break;
|
|
905
|
+
}
|
|
906
|
+
case "BindDirective":
|
|
907
|
+
props.push(...this.bindProps(a.name, this.hole(a.hole)));
|
|
908
|
+
break;
|
|
909
|
+
case "UseDirective": {
|
|
910
|
+
const dir = a.name ?? (a.hole != null ? this.hole(a.hole).code : null);
|
|
911
|
+
if (!dir) break;
|
|
912
|
+
usePairs.push(a.name != null && a.hole != null ? `[${dir}, () => ${paren(this.hole(a.hole).code, "arrowBody")}]` : `[${dir}]`);
|
|
913
|
+
break;
|
|
914
|
+
}
|
|
915
|
+
}
|
|
916
|
+
}
|
|
917
|
+
if (classEntries.length > 0) {
|
|
918
|
+
props.push({
|
|
919
|
+
name: "classList",
|
|
920
|
+
kind: "attr",
|
|
921
|
+
expr: `{ ${classEntries.join(", ")} }`,
|
|
922
|
+
reactive: classReactive,
|
|
923
|
+
...classAt ? { at: classAt } : {}
|
|
924
|
+
});
|
|
925
|
+
}
|
|
926
|
+
if (styleEntries.length > 0) {
|
|
927
|
+
props.push({
|
|
928
|
+
name: "style",
|
|
929
|
+
kind: "attr",
|
|
930
|
+
expr: `{ ${styleEntries.join(", ")} }`,
|
|
931
|
+
reactive: styleReactive,
|
|
932
|
+
...styleAt ? { at: styleAt } : {}
|
|
933
|
+
});
|
|
934
|
+
}
|
|
935
|
+
if (usePairs.length > 0) {
|
|
936
|
+
props.push({ name: "use", kind: "attr", expr: `[${usePairs.join(", ")}]` });
|
|
937
|
+
}
|
|
938
|
+
return props;
|
|
939
|
+
}
|
|
940
|
+
/**
|
|
941
|
+
* Lower an event binding. Plain `@click`/`onClick` (no modifiers) stays a
|
|
942
|
+
* DELEGATED handler (unchanged, byte-identical with JSX). `on:click` or any
|
|
943
|
+
* modifier (`.capture`/`.once`/`.passive`/`.prevent`/`.stop`/`.self`) emits a
|
|
944
|
+
* NATIVE `on:name` prop the runtime attaches via addEventListener.
|
|
945
|
+
*/
|
|
946
|
+
eventProp(a) {
|
|
947
|
+
const dom = a.name.toLowerCase();
|
|
948
|
+
const handler = this.hole(a.hole).code;
|
|
949
|
+
const native = a.syntax === "colon" || a.modifiers.length > 0;
|
|
950
|
+
if (!native) {
|
|
951
|
+
return {
|
|
952
|
+
name: "on" + capitalize(a.name),
|
|
953
|
+
kind: "event",
|
|
954
|
+
event: { name: dom, delegated: DELEGATED.has(dom) },
|
|
955
|
+
expr: handler
|
|
956
|
+
};
|
|
957
|
+
}
|
|
958
|
+
const wrapped = this.wrapHandler(handler, a.modifiers);
|
|
959
|
+
const options = this.eventOptions(a.modifiers);
|
|
960
|
+
const value = options ? `[${wrapped}, ${options}]` : wrapped;
|
|
961
|
+
return { name: "on:" + dom, kind: "attr", expr: value };
|
|
962
|
+
}
|
|
963
|
+
/** Wrap a handler for `.prevent`/`.stop`/`.self` (no wrap when none apply). */
|
|
964
|
+
wrapHandler(handler, mods) {
|
|
965
|
+
const guard = mods.includes("self") ? "if (e.target !== e.currentTarget) return; " : "";
|
|
966
|
+
const pre = [];
|
|
967
|
+
if (mods.includes("prevent")) pre.push("e.preventDefault();");
|
|
968
|
+
if (mods.includes("stop")) pre.push("e.stopPropagation();");
|
|
969
|
+
if (!guard && pre.length === 0) return handler;
|
|
970
|
+
return `(e) => { ${guard}${pre.join(" ")} return (${handler})(e); }`;
|
|
971
|
+
}
|
|
972
|
+
/** addEventListener options object from `.capture`/`.once`/`.passive`, or null. */
|
|
973
|
+
eventOptions(mods) {
|
|
974
|
+
const opts = [];
|
|
975
|
+
if (mods.includes("capture")) opts.push("capture: true");
|
|
976
|
+
if (mods.includes("once")) opts.push("once: true");
|
|
977
|
+
if (mods.includes("passive")) opts.push("passive: true");
|
|
978
|
+
return opts.length ? `{ ${opts.join(", ")} }` : null;
|
|
979
|
+
}
|
|
980
|
+
/** `bind:value=${sig}` → `value={read()}` + `onInput={e => write(e…value)}`. */
|
|
981
|
+
bindProps(prop, h) {
|
|
982
|
+
const sigCode = h.code;
|
|
983
|
+
const checked = prop === "checked";
|
|
984
|
+
const evt = checked ? "change" : "input";
|
|
985
|
+
const accessor = checked ? "checked" : "value";
|
|
986
|
+
this.used.add("bindPair");
|
|
987
|
+
const sig = `bindPair(${sigCode})`;
|
|
988
|
+
return [
|
|
989
|
+
{
|
|
990
|
+
name: prop,
|
|
991
|
+
kind: "attr",
|
|
992
|
+
expr: `${sig}[0]()`,
|
|
993
|
+
reactive: true,
|
|
994
|
+
directive: `bind:${prop}`,
|
|
995
|
+
...h.at ? { at: h.at } : {}
|
|
996
|
+
},
|
|
997
|
+
{
|
|
998
|
+
name: "on" + capitalize(evt),
|
|
999
|
+
kind: "event",
|
|
1000
|
+
event: { name: evt, delegated: DELEGATED.has(evt) },
|
|
1001
|
+
// delegated handler: `target` is the bound element (currentTarget is the root)
|
|
1002
|
+
expr: `(e) => ${sig}[1](e.target.${accessor})`
|
|
1003
|
+
}
|
|
1004
|
+
];
|
|
1005
|
+
}
|
|
1006
|
+
/** A plain attribute (incl. lit `?bool`, mixed values), old `mkProp` behavior. */
|
|
1007
|
+
plainAttr(a) {
|
|
1008
|
+
const v = a.value;
|
|
1009
|
+
let name = a.name;
|
|
1010
|
+
if (a.name === "class") {
|
|
1011
|
+
name = v && v.kind === "hole" && this.hole(v.hole).object ? "classList" : "className";
|
|
1012
|
+
} else if (a.name === "html") {
|
|
1013
|
+
name = "innerHTML";
|
|
1014
|
+
}
|
|
1015
|
+
const kind = "attr";
|
|
1016
|
+
const base = { name, kind };
|
|
1017
|
+
if (v == null) {
|
|
1018
|
+
base.literal = true;
|
|
1019
|
+
return base;
|
|
1020
|
+
}
|
|
1021
|
+
if (v.kind === "static") {
|
|
1022
|
+
base.literal = v.value;
|
|
1023
|
+
return base;
|
|
1024
|
+
}
|
|
1025
|
+
if (v.kind === "hole") {
|
|
1026
|
+
const h = this.hole(v.hole);
|
|
1027
|
+
base.expr = h.code;
|
|
1028
|
+
base.reactive = h.reactive;
|
|
1029
|
+
if (h.at) base.at = h.at;
|
|
1030
|
+
return base;
|
|
1031
|
+
}
|
|
1032
|
+
let reactive = false;
|
|
1033
|
+
let at;
|
|
1034
|
+
const body = v.parts.map((p) => {
|
|
1035
|
+
if ("text" in p) return escapeTemplate(p.text);
|
|
1036
|
+
const h = this.hole(p.hole);
|
|
1037
|
+
reactive = reactive || h.reactive;
|
|
1038
|
+
at ??= h.at;
|
|
1039
|
+
return "${" + h.code + "}";
|
|
1040
|
+
}).join("");
|
|
1041
|
+
base.expr = "`" + body + "`";
|
|
1042
|
+
base.reactive = reactive;
|
|
1043
|
+
if (at) base.at = at;
|
|
1044
|
+
return base;
|
|
1045
|
+
}
|
|
1046
|
+
};
|
|
1047
|
+
function lowerTemplate(pieces, holes, used, opts = {}) {
|
|
1048
|
+
const { root } = parseTemplate(pieces, { svg: opts.svg });
|
|
1049
|
+
return new Lowerer(holes, used, opts.sourceFile, opts.positionAt).lowerRoot(root.children);
|
|
1050
|
+
}
|
|
1051
|
+
|
|
1052
|
+
// src/frontend/babel/lower-template.ts
|
|
1053
|
+
var generate = _generate.default ?? _generate;
|
|
1054
|
+
function gen(node) {
|
|
1055
|
+
return generate(node, { concise: true }).code;
|
|
1056
|
+
}
|
|
1057
|
+
function bindHole(expr, used, onNested) {
|
|
1058
|
+
const hole = {
|
|
1059
|
+
code: genExpr(expr, used, onNested),
|
|
1060
|
+
reactive: isReactiveExpr(expr)
|
|
1061
|
+
};
|
|
1062
|
+
if (t.isArrowFunctionExpression(expr) && !t.isBlockStatement(expr.body)) {
|
|
1063
|
+
const body = expr.body;
|
|
1064
|
+
hole.arrow = {
|
|
1065
|
+
params: expr.params.map((p) => gen(p)),
|
|
1066
|
+
body: genExpr(body, used, onNested),
|
|
1067
|
+
bodyReactive: isReactiveExpr(body)
|
|
1068
|
+
};
|
|
1069
|
+
}
|
|
1070
|
+
if (t.isObjectExpression(expr)) hole.object = true;
|
|
1071
|
+
return hole;
|
|
1072
|
+
}
|
|
1073
|
+
function lowerLitTemplate(node, used, opts = {}) {
|
|
1074
|
+
const quasi = node.quasi;
|
|
1075
|
+
const holes = quasi.expressions.map((e) => bindHole(e, used, opts.onNested));
|
|
1076
|
+
return lowerTemplate(buildPieces(quasi), holes, used, opts);
|
|
1077
|
+
}
|
|
1078
|
+
function buildPieces(quasi) {
|
|
1079
|
+
const pieces = [];
|
|
1080
|
+
quasi.quasis.forEach((q, i) => {
|
|
1081
|
+
const text = q.value.cooked ?? q.value.raw;
|
|
1082
|
+
pieces.push({ kind: "static", text, start: q.start ?? 0 });
|
|
1083
|
+
if (i < quasi.expressions.length) {
|
|
1084
|
+
const e = quasi.expressions[i];
|
|
1085
|
+
pieces.push({ kind: "hole", index: i, start: e.start ?? 0, end: e.end ?? 0 });
|
|
1086
|
+
}
|
|
1087
|
+
});
|
|
1088
|
+
return pieces;
|
|
1089
|
+
}
|
|
1090
|
+
|
|
1091
|
+
// src/optimize/analyze-static.ts
|
|
1092
|
+
function propReason(prop) {
|
|
1093
|
+
switch (prop.kind) {
|
|
1094
|
+
case "event":
|
|
1095
|
+
return "event";
|
|
1096
|
+
case "ref":
|
|
1097
|
+
return "ref";
|
|
1098
|
+
case "spread":
|
|
1099
|
+
return "spread";
|
|
1100
|
+
case "class":
|
|
1101
|
+
case "style":
|
|
1102
|
+
return "class-or-style-directive";
|
|
1103
|
+
case "attr":
|
|
1104
|
+
case "prop":
|
|
1105
|
+
if (prop.reactive) return "reactive-prop";
|
|
1106
|
+
if (prop.expr !== void 0) return "expression-prop";
|
|
1107
|
+
return void 0;
|
|
1108
|
+
/* c8 ignore next 2 */
|
|
1109
|
+
default:
|
|
1110
|
+
return "expression-prop";
|
|
1111
|
+
}
|
|
1112
|
+
}
|
|
1113
|
+
function analyzeStatic(root) {
|
|
1114
|
+
const staticElements = [];
|
|
1115
|
+
const reasons = /* @__PURE__ */ new Map();
|
|
1116
|
+
const visit = (node) => {
|
|
1117
|
+
switch (node.kind) {
|
|
1118
|
+
case "text":
|
|
1119
|
+
return true;
|
|
1120
|
+
case "expr":
|
|
1121
|
+
return false;
|
|
1122
|
+
case "component":
|
|
1123
|
+
case "control":
|
|
1124
|
+
for (const child of node.children) visit(child);
|
|
1125
|
+
return false;
|
|
1126
|
+
case "fragment":
|
|
1127
|
+
for (const child of node.children) visit(child);
|
|
1128
|
+
return false;
|
|
1129
|
+
case "element": {
|
|
1130
|
+
let childrenStatic = true;
|
|
1131
|
+
for (const child of node.children) {
|
|
1132
|
+
if (!visit(child)) childrenStatic = false;
|
|
1133
|
+
}
|
|
1134
|
+
let reason;
|
|
1135
|
+
for (const prop of node.props) {
|
|
1136
|
+
reason = propReason(prop);
|
|
1137
|
+
if (reason) break;
|
|
1138
|
+
}
|
|
1139
|
+
if (!reason && !childrenStatic) {
|
|
1140
|
+
reason = childReason(node);
|
|
1141
|
+
}
|
|
1142
|
+
node.static = !reason;
|
|
1143
|
+
if (reason) reasons.set(node, reason);
|
|
1144
|
+
else staticElements.push(node);
|
|
1145
|
+
return node.static;
|
|
1146
|
+
}
|
|
1147
|
+
/* c8 ignore next 2 */
|
|
1148
|
+
default:
|
|
1149
|
+
return false;
|
|
1150
|
+
}
|
|
1151
|
+
};
|
|
1152
|
+
for (const node of Array.isArray(root) ? root : [root]) visit(node);
|
|
1153
|
+
return { staticElements, reasons };
|
|
1154
|
+
}
|
|
1155
|
+
function childReason(node) {
|
|
1156
|
+
for (const child of node.children) {
|
|
1157
|
+
if (child.kind === "expr") return "expression-child";
|
|
1158
|
+
if (child.kind === "component") return "component-child";
|
|
1159
|
+
if (child.kind === "control") return "control-child";
|
|
1160
|
+
if (child.kind === "element" && !child.static) return "expression-child";
|
|
1161
|
+
if (child.kind === "fragment") return "expression-child";
|
|
1162
|
+
}
|
|
1163
|
+
return "expression-child";
|
|
1164
|
+
}
|
|
1165
|
+
|
|
1166
|
+
// src/frontend/babel/build-ir-lit.ts
|
|
1167
|
+
function buildIRFromLit(node, used = /* @__PURE__ */ new Set(), opts = {}) {
|
|
1168
|
+
const ir = lowerLitTemplate(node, used, opts);
|
|
1169
|
+
analyzeStatic(ir);
|
|
1170
|
+
return ir;
|
|
1171
|
+
}
|
|
1172
|
+
|
|
1173
|
+
// src/analyze/reactive-expr.ts
|
|
1174
|
+
var STABLE_MEMBER = "children";
|
|
1175
|
+
function isReactiveShape(shape) {
|
|
1176
|
+
switch (shape.kind) {
|
|
1177
|
+
case "call":
|
|
1178
|
+
return true;
|
|
1179
|
+
case "member":
|
|
1180
|
+
return shape.property !== STABLE_MEMBER;
|
|
1181
|
+
case "compound":
|
|
1182
|
+
return shape.parts.some(isReactiveShape);
|
|
1183
|
+
case "opaque":
|
|
1184
|
+
return false;
|
|
1185
|
+
}
|
|
1186
|
+
}
|
|
1187
|
+
|
|
1188
|
+
// src/analyze/expr-shape.ts
|
|
1189
|
+
var CALL = /* @__PURE__ */ new Set(["CallExpression", "OptionalCallExpression"]);
|
|
1190
|
+
var MEMBER = /* @__PURE__ */ new Set(["MemberExpression", "OptionalMemberExpression"]);
|
|
1191
|
+
function shapeOf(node) {
|
|
1192
|
+
if (!node) return { kind: "opaque" };
|
|
1193
|
+
if (CALL.has(node.type)) return { kind: "call" };
|
|
1194
|
+
if (MEMBER.has(node.type)) {
|
|
1195
|
+
const property = node.property;
|
|
1196
|
+
const computed = node.computed === true;
|
|
1197
|
+
return {
|
|
1198
|
+
kind: "member",
|
|
1199
|
+
property: !computed && property?.type === "Identifier" ? property.name : null
|
|
1200
|
+
};
|
|
1201
|
+
}
|
|
1202
|
+
if (node.type === "ConditionalExpression") {
|
|
1203
|
+
return { kind: "compound", parts: [node.test, node.consequent, node.alternate].map(part) };
|
|
1204
|
+
}
|
|
1205
|
+
if (node.type === "LogicalExpression" || node.type === "BinaryExpression") {
|
|
1206
|
+
return { kind: "compound", parts: [node.left, node.right].map(part) };
|
|
1207
|
+
}
|
|
1208
|
+
if (node.type === "TemplateLiteral") {
|
|
1209
|
+
return { kind: "compound", parts: node.expressions.map(part) };
|
|
1210
|
+
}
|
|
1211
|
+
if (node.type === "ObjectExpression") {
|
|
1212
|
+
const props = node.properties.filter(
|
|
1213
|
+
(p) => (p.type === "ObjectProperty" || p.type === "Property") && p.computed !== true
|
|
1214
|
+
);
|
|
1215
|
+
return { kind: "compound", parts: props.map((p) => part(p.value)) };
|
|
1216
|
+
}
|
|
1217
|
+
if (node.type === "ArrayExpression") {
|
|
1218
|
+
const items = node.elements.filter(
|
|
1219
|
+
(e) => e != null && e.type !== "SpreadElement"
|
|
1220
|
+
);
|
|
1221
|
+
return { kind: "compound", parts: items.map(part) };
|
|
1222
|
+
}
|
|
1223
|
+
return { kind: "opaque" };
|
|
1224
|
+
}
|
|
1225
|
+
var part = (n) => shapeOf(n);
|
|
1226
|
+
|
|
1227
|
+
// src/lower/jsx.ts
|
|
1228
|
+
var SVG_TAGS = /* @__PURE__ */ new Set([
|
|
1229
|
+
"svg",
|
|
1230
|
+
"path",
|
|
1231
|
+
"circle",
|
|
1232
|
+
"rect",
|
|
1233
|
+
"line",
|
|
1234
|
+
"polygon",
|
|
1235
|
+
"polyline",
|
|
1236
|
+
"ellipse",
|
|
1237
|
+
"g",
|
|
1238
|
+
"defs",
|
|
1239
|
+
"clipPath",
|
|
1240
|
+
"text"
|
|
1241
|
+
]);
|
|
1242
|
+
var EVENT_RE = /^on[A-Z]/;
|
|
1243
|
+
var DELEGATED2 = /* @__PURE__ */ new Set([
|
|
1244
|
+
"click",
|
|
1245
|
+
"dblclick",
|
|
1246
|
+
"input",
|
|
1247
|
+
"change",
|
|
1248
|
+
"submit",
|
|
1249
|
+
"focus",
|
|
1250
|
+
"blur",
|
|
1251
|
+
"keydown",
|
|
1252
|
+
"keyup",
|
|
1253
|
+
"keypress",
|
|
1254
|
+
"mousedown",
|
|
1255
|
+
"mouseup"
|
|
1256
|
+
]);
|
|
1257
|
+
var isReactive = (node) => isReactiveShape(shapeOf(node));
|
|
1258
|
+
var posOf = (node, ctx) => {
|
|
1259
|
+
if (!ctx.sourceFile) return void 0;
|
|
1260
|
+
const at = node.loc?.start;
|
|
1261
|
+
return at ? { line: at.line, column: at.column } : void 0;
|
|
1262
|
+
};
|
|
1263
|
+
function literalOf(node) {
|
|
1264
|
+
if (node.type === "StringLiteral" || node.type === "NumericLiteral" || node.type === "BooleanLiteral") {
|
|
1265
|
+
return node.value;
|
|
1266
|
+
}
|
|
1267
|
+
if (node.type === "Literal" && (typeof node.value === "string" || typeof node.value === "number" || typeof node.value === "boolean")) {
|
|
1268
|
+
return node.value;
|
|
1269
|
+
}
|
|
1270
|
+
return void 0;
|
|
1271
|
+
}
|
|
1272
|
+
var isString = (node) => !!node && typeof literalOf(node) === "string";
|
|
1273
|
+
function tagInfo(name, ctx) {
|
|
1274
|
+
if (name.type === "JSXIdentifier") {
|
|
1275
|
+
return { tag: name.name, component: name.name[0] !== name.name[0].toLowerCase() };
|
|
1276
|
+
}
|
|
1277
|
+
if (name.type === "JSXMemberExpression") return { tag: ctx.code(name), component: true };
|
|
1278
|
+
if (name.type === "JSXNamespacedName") {
|
|
1279
|
+
return { tag: `${name.namespace.name}:${name.name.name}`, component: false };
|
|
1280
|
+
}
|
|
1281
|
+
return { tag: "div", component: false };
|
|
1282
|
+
}
|
|
1283
|
+
function attrName(name) {
|
|
1284
|
+
if (name.type === "JSXIdentifier") return name.name === "class" ? "className" : name.name;
|
|
1285
|
+
if (name.type === "JSXNamespacedName") return `${name.namespace.name}:${name.name.name}`;
|
|
1286
|
+
return "unknown";
|
|
1287
|
+
}
|
|
1288
|
+
function buildAttr(attr, ctx) {
|
|
1289
|
+
const name = attrName(attr.name);
|
|
1290
|
+
const isEvent = EVENT_RE.test(name);
|
|
1291
|
+
const isHandler = isEvent || name.startsWith("on:") || name === "ref";
|
|
1292
|
+
const kind = isEvent ? "event" : "attr";
|
|
1293
|
+
const base = { name, kind };
|
|
1294
|
+
if (isEvent) {
|
|
1295
|
+
const evt = name.slice(2).toLowerCase();
|
|
1296
|
+
base.event = { name: evt, delegated: DELEGATED2.has(evt) };
|
|
1297
|
+
}
|
|
1298
|
+
const v = attr.value;
|
|
1299
|
+
if (v == null) {
|
|
1300
|
+
base.literal = true;
|
|
1301
|
+
base.at = posOf(attr, ctx);
|
|
1302
|
+
return base;
|
|
1303
|
+
}
|
|
1304
|
+
if (isString(v)) {
|
|
1305
|
+
base.literal = literalOf(v);
|
|
1306
|
+
base.at = posOf(v, ctx);
|
|
1307
|
+
return base;
|
|
1308
|
+
}
|
|
1309
|
+
if (v.type === "JSXExpressionContainer" && v.expression?.type !== "JSXEmptyExpression") {
|
|
1310
|
+
const expr = v.expression;
|
|
1311
|
+
const literal = literalOf(expr);
|
|
1312
|
+
if (literal !== void 0) {
|
|
1313
|
+
base.literal = literal;
|
|
1314
|
+
base.at = posOf(expr, ctx);
|
|
1315
|
+
return base;
|
|
1316
|
+
}
|
|
1317
|
+
base.expr = ctx.code(expr);
|
|
1318
|
+
base.reactive = isHandler ? false : isReactive(expr);
|
|
1319
|
+
base.at = posOf(expr, ctx);
|
|
1320
|
+
if (expr.type === "JSXElement" || expr.type === "JSXFragment") base.jsxElement = true;
|
|
1321
|
+
return base;
|
|
1322
|
+
}
|
|
1323
|
+
base.literal = true;
|
|
1324
|
+
return base;
|
|
1325
|
+
}
|
|
1326
|
+
function attrExprCode(attr, ctx) {
|
|
1327
|
+
const v = attr.value;
|
|
1328
|
+
if (v == null) return null;
|
|
1329
|
+
if (isString(v)) return JSON.stringify(literalOf(v));
|
|
1330
|
+
if (v.type === "JSXExpressionContainer" && v.expression?.type !== "JSXEmptyExpression") {
|
|
1331
|
+
return ctx.code(v.expression);
|
|
1332
|
+
}
|
|
1333
|
+
return null;
|
|
1334
|
+
}
|
|
1335
|
+
function buildProps(attrs, ctx) {
|
|
1336
|
+
const props = [];
|
|
1337
|
+
const usePairs = [];
|
|
1338
|
+
for (const a of attrs) {
|
|
1339
|
+
if (a.type === "JSXSpreadAttribute") {
|
|
1340
|
+
props.push({ name: "", kind: "spread", expr: ctx.code(a.argument) });
|
|
1341
|
+
continue;
|
|
1342
|
+
}
|
|
1343
|
+
if (a.type !== "JSXAttribute") continue;
|
|
1344
|
+
if (isLoadDirective(attrName(a.name))) continue;
|
|
1345
|
+
const ns = a.name.type === "JSXNamespacedName" ? a.name.namespace.name : null;
|
|
1346
|
+
if (ns === "use") {
|
|
1347
|
+
const dir = a.name.name.name;
|
|
1348
|
+
ctx.used.add(dir);
|
|
1349
|
+
const opts = attrExprCode(a, ctx);
|
|
1350
|
+
usePairs.push(opts != null ? `[${dir}, () => ${paren(opts, "arrowBody")}]` : `[${dir}]`);
|
|
1351
|
+
continue;
|
|
1352
|
+
}
|
|
1353
|
+
if (ns === "oncapture") {
|
|
1354
|
+
const evt = a.name.name.name.toLowerCase();
|
|
1355
|
+
const h = attrExprCode(a, ctx) ?? "undefined";
|
|
1356
|
+
props.push({ name: "on:" + evt, kind: "attr", expr: `[${h}, { capture: true }]` });
|
|
1357
|
+
continue;
|
|
1358
|
+
}
|
|
1359
|
+
props.push(buildAttr(a, ctx));
|
|
1360
|
+
}
|
|
1361
|
+
if (usePairs.length > 0) props.push({ name: "use", kind: "attr", expr: `[${usePairs.join(", ")}]` });
|
|
1362
|
+
return props;
|
|
1363
|
+
}
|
|
1364
|
+
function buildChildren(children, ctx) {
|
|
1365
|
+
const out = [];
|
|
1366
|
+
for (const child of children) {
|
|
1367
|
+
if (child.type === "JSXText") {
|
|
1368
|
+
const text = cleanTemplateText(child.value);
|
|
1369
|
+
if (text) out.push({ kind: "text", value: text });
|
|
1370
|
+
} else if (child.type === "JSXExpressionContainer") {
|
|
1371
|
+
if (child.expression?.type !== "JSXEmptyExpression") {
|
|
1372
|
+
const expr = child.expression;
|
|
1373
|
+
const reactive = isReactive(expr);
|
|
1374
|
+
out.push({
|
|
1375
|
+
kind: "expr",
|
|
1376
|
+
code: ctx.code(expr),
|
|
1377
|
+
reactive,
|
|
1378
|
+
...reactive ? { at: posOf(expr, ctx) } : {}
|
|
1379
|
+
});
|
|
1380
|
+
}
|
|
1381
|
+
} else if (child.type === "JSXElement" || child.type === "JSXFragment") {
|
|
1382
|
+
out.push(buildNode(child, ctx));
|
|
1383
|
+
} else if (child.type === "JSXSpreadChild") {
|
|
1384
|
+
out.push({ kind: "expr", code: ctx.code(child.expression), reactive: false });
|
|
1385
|
+
}
|
|
1386
|
+
}
|
|
1387
|
+
return out;
|
|
1388
|
+
}
|
|
1389
|
+
function readLoad(attrs) {
|
|
1390
|
+
for (const a of attrs) {
|
|
1391
|
+
if (a.type !== "JSXAttribute") continue;
|
|
1392
|
+
const name = attrName(a.name);
|
|
1393
|
+
if (!isLoadDirective(name)) continue;
|
|
1394
|
+
if (a.value && !isString(a.value)) {
|
|
1395
|
+
throw new LoadDirectiveError(
|
|
1396
|
+
`'${name}' needs a literal value, not an expression — the strategy is compile-time.`
|
|
1397
|
+
);
|
|
1398
|
+
}
|
|
1399
|
+
return parseLoadDirective(name, a.value ? literalOf(a.value) : null);
|
|
1400
|
+
}
|
|
1401
|
+
return void 0;
|
|
1402
|
+
}
|
|
1403
|
+
function buildNode(node, ctx) {
|
|
1404
|
+
if (node.type === "JSXFragment") {
|
|
1405
|
+
return { kind: "fragment", children: buildChildren(node.children, ctx) };
|
|
1406
|
+
}
|
|
1407
|
+
const { tag, component } = tagInfo(node.openingElement.name, ctx);
|
|
1408
|
+
const props = buildProps(node.openingElement.attributes, ctx);
|
|
1409
|
+
const children = buildChildren(node.children, ctx);
|
|
1410
|
+
const at = ctx.sourceFile && node.loc?.start ? { file: ctx.sourceFile, line: node.loc.start.line, column: node.loc.start.column } : void 0;
|
|
1411
|
+
if (component) {
|
|
1412
|
+
const load = readLoad(node.openingElement.attributes);
|
|
1413
|
+
return { kind: "component", name: tag, props, children, ...load ? { load } : {}, ...at ? { at } : {} };
|
|
1414
|
+
}
|
|
1415
|
+
return { kind: "element", tag, svg: SVG_TAGS.has(tag), props, children, static: false, ...at ? { at } : {} };
|
|
1416
|
+
}
|
|
1417
|
+
function buildJsxIR(node, ctx) {
|
|
1418
|
+
const ir = buildNode(node, ctx);
|
|
1419
|
+
analyzeStatic(ir);
|
|
1420
|
+
return ir;
|
|
1421
|
+
}
|
|
1422
|
+
|
|
1423
|
+
// src/frontend/babel/build-ir.ts
|
|
1424
|
+
var generate2 = _generate2.default ?? _generate2;
|
|
1425
|
+
function gen2(node) {
|
|
1426
|
+
return generate2(node, { concise: true }).code;
|
|
1427
|
+
}
|
|
1428
|
+
function transformNestedJSX(node, used, onNested) {
|
|
1429
|
+
const clone = t2.cloneNode(node, true);
|
|
1430
|
+
const file = t2.file(t2.program([t2.expressionStatement(clone)]));
|
|
1431
|
+
let changed = false;
|
|
1432
|
+
const emitInto = (path, code, imports) => {
|
|
1433
|
+
for (const s of imports) used.add(s);
|
|
1434
|
+
path.replaceWith(template.expression(code, { placeholderPattern: false, plugins: ["typescript"] })());
|
|
1435
|
+
path.skip();
|
|
1436
|
+
changed = true;
|
|
1437
|
+
};
|
|
1438
|
+
traverse(file, {
|
|
1439
|
+
"JSXElement|JSXFragment"(path) {
|
|
1440
|
+
const jsx = path.node;
|
|
1441
|
+
const nestedIR = buildIR(jsx, used, onNested);
|
|
1442
|
+
onNested?.(nestedIR);
|
|
1443
|
+
const { code, imports, templates } = imperativeBackend.emit(nestedIR, {});
|
|
1444
|
+
emitInto(path, inlineTemplates(code, templates), imports);
|
|
1445
|
+
},
|
|
1446
|
+
// Nested lit templates compose: ${cond ? html`…` : html`…`},
|
|
1447
|
+
// ${list.map(x => html`<li>${x}</li>`)}. Compile them the same way.
|
|
1448
|
+
TaggedTemplateExpression(path) {
|
|
1449
|
+
const tag = path.node.tag;
|
|
1450
|
+
if (!t2.isIdentifier(tag) || tag.name !== "html" && tag.name !== "svg") return;
|
|
1451
|
+
const ir = buildIRFromLit(path.node, used, { svg: tag.name === "svg", onNested });
|
|
1452
|
+
onNested?.(ir);
|
|
1453
|
+
const { code, imports, templates } = imperativeBackend.emit(ir, {});
|
|
1454
|
+
emitInto(path, inlineTemplates(code, templates), imports);
|
|
1455
|
+
}
|
|
1456
|
+
});
|
|
1457
|
+
return changed ? file.program.body[0].expression : node;
|
|
1458
|
+
}
|
|
1459
|
+
function genExpr(node, used, onNested) {
|
|
1460
|
+
return gen2(transformNestedJSX(node, used, onNested));
|
|
1461
|
+
}
|
|
1462
|
+
var SVG_TAGS2 = /* @__PURE__ */ new Set([
|
|
1463
|
+
"svg",
|
|
1464
|
+
"path",
|
|
1465
|
+
"circle",
|
|
1466
|
+
"rect",
|
|
1467
|
+
"line",
|
|
1468
|
+
"polygon",
|
|
1469
|
+
"polyline",
|
|
1470
|
+
"ellipse",
|
|
1471
|
+
"g",
|
|
1472
|
+
"defs",
|
|
1473
|
+
"clipPath",
|
|
1474
|
+
"text"
|
|
1475
|
+
]);
|
|
1476
|
+
function isReactiveExpr(node) {
|
|
1477
|
+
return isReactiveShape(shapeOf(node));
|
|
1478
|
+
}
|
|
1479
|
+
function buildIR(node, used = /* @__PURE__ */ new Set(), onNested) {
|
|
1480
|
+
const ir = buildJsxIR(node, {
|
|
1481
|
+
code: (n) => (
|
|
1482
|
+
// A member-expression tag (`<ns.Foo/>`) is not an Expression, so it cannot go
|
|
1483
|
+
// through the nested-JSX compile: it only ever needs printing.
|
|
1484
|
+
n.type === "JSXMemberExpression" ? gen2(n) : genExpr(n, used, onNested)
|
|
1485
|
+
),
|
|
1486
|
+
used
|
|
1487
|
+
});
|
|
1488
|
+
return ir;
|
|
1489
|
+
}
|
|
1490
|
+
export {
|
|
1491
|
+
SVG_TAGS2 as SVG_TAGS,
|
|
1492
|
+
buildIR,
|
|
1493
|
+
genExpr,
|
|
1494
|
+
isReactiveExpr
|
|
1495
|
+
};
|