@dongmingzhixiu/vuexir-compiler 0.3.11 → 0.3.13

package/dist/codegen/compose.js

@@ -1176,7 +1176,8 @@ function emitNodeInner(node, ctx, depth, loop, useParamModifier = false, parentS
         }
         case 'button': {
             const chain = modChain([...stretchModifiers(parentStretch, node), ...sizeModifiers(p), ...absModifiers(p), ...clipModifiers(p), ...visualModifiers(p), ...borderModifiers(p), ...paddingModifiers(p), ...alphaArr, ...transformModifiers(p)], pad + '            ');
-            const label = p.label ?? '';
+            // R108：动态按钮文案（props.bind）优先；Kotlin 里用字符串模板插值
+            const label = p.bind !== undefined ? '"${' + String(p.bind) + '}"' : (p.label ?? '');
             const click = kotlinClickAction(p, ctx, loop);
             const labelStyle = [];
             if (p.fontSize !== undefined)

package/dist/codegen/swiftui.js

@@ -824,7 +824,12 @@ function emitNodeInner(node, ctx) {
             return line;
         }
         case 'button': {
-            const label = props.label !== undefined ? props.label : '按钮';
+            // R108：动态按钮文案（props.bind → @State）优先于静态 label
+            const label = props.bind !== undefined
+                ? props.bind
+                : props.label !== undefined
+                    ? props.label
+                    : '按钮';
             const fs = props.fontSize ?? 15;
             // 事件：onSet（状态直接赋值）优先，其次 onClick（JS 运行时），无事件则空 action
             // M1：onSet.kind==='expr' → 表达式原样嵌入（count + 1）；literal → 数字原样/字符串加引号

package/dist/ir/schema.js

@@ -118,7 +118,7 @@ const NODE_ALLOWED_PROPS = {
     group: ['width', 'height', 'padding', 'gap', 'flex', 'flexDirection', 'justifyContent', 'alignItems', 'background', 'radius', 'borderWidth', 'borderColor', 'marginTopAuto', 'marginTop', 'marginLeftAuto', 'marginBottom', 'marginRight', 'marginLeft', 'borderSides', 'clip', 'onClick', 'onSet', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'opacity'],
     text: ['width', 'text', 'ref', 'bind', 'bindExpr', 'dynField', 'bindParts', 'fontSize', 'fontWeight', 'textAlign', 'lineHeight', 'color', 'padding', 'colorActive', 'marginLeftAuto', 'marginTop', 'colorDynamic', 'fontSizeDynamic', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'flex', 'opacity', 'onClick', 'onSet', 'fieldOf'],
     image: ['width', 'height', 'src', 'objectFit', 'radius', 'borderSides', 'borderWidth', 'borderColor', 'clip', 'flex', 'marginTop', 'marginBottom', 'marginRight', 'marginLeft', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'opacity'],
-    button: ['width', 'height', 'label', 'background', 'radius', 'borderWidth', 'borderColor', 'fontSize', 'fontWeight', 'color', 'flex', 'padding', 'marginTopAuto', 'marginTop', 'marginBottom', 'marginRight', 'marginLeft', 'borderSides', 'clip', 'onClick', 'onSet', 'colorDynamic', 'fontSizeDynamic', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'pressBg', 'opacity'],
+    button: ['width', 'height', 'label', 'bind', 'background', 'radius', 'borderWidth', 'borderColor', 'fontSize', 'fontWeight', 'color', 'flex', 'padding', 'marginTopAuto', 'marginTop', 'marginBottom', 'marginRight', 'marginLeft', 'borderSides', 'clip', 'onClick', 'onSet', 'colorDynamic', 'fontSizeDynamic', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show', 'pressBg', 'opacity'],
     input: ['width', 'height', 'value', 'placeholder', 'fontSize', 'color', 'background', 'padding', 'radius', 'borderWidth', 'borderColor', 'borderSides', 'clip', 'flex', 'marginTop', 'marginTopAuto', 'marginBottom', 'marginRight', 'marginLeft', 'onSet', 'colorDynamic', 'fontSizeDynamic', 'position', 'absTop', 'absLeft', 'absRight', 'absBottom', 'transform', 'show'],
     scroll: ['width', 'height', 'padding', 'gap', 'flexDirection', 'background', 'showsIndicators', 'flex'],
     spacer: ['width', 'height', 'flex'],
@@ -276,7 +276,10 @@ function validateNode(node, path, issues, seenKeys, stateNames = new Set(), inLo
     if (node.type === 'text' && !node.bind && (!node.props || (node.props.text === undefined && node.props.ref === undefined && node.props.bind === undefined && node.props.bindExpr === undefined && node.props.dynField === undefined && node.props.bindParts === undefined && node.props.fieldOf === undefined))) {
         issues.push({ path, message: 'text 节点必须有 props.text / props.ref / props.bind / props.bindExpr / props.fieldOf 或 bind' });
     }
-    if (node.type === 'button' && !node.bind && (!node.props || node.props.label === undefined)) {
+    // R108：按钮文案可以是静态 label，也可以是动态 bind（运行时求值）
+    if (node.type === 'button' &&
+        !node.bind &&
+        (!node.props || (node.props.label === undefined && node.props.bind === undefined))) {
         issues.push({ path, message: 'button 节点必须有 props.label 或 bind' });
     }
     // condition / active

package/dist/transform/vue2ir.js

@@ -896,6 +896,7 @@ const TAG_MAP = {
     select: { type: 'group', defaultProps: { flexDirection: 'column' } },
     option: { type: 'text', defaultProps: { fontSize: 14 } },
     aside: { type: 'group', defaultProps: { flexDirection: 'column' } },
+    label: { type: 'text', defaultProps: { fontSize: 13 } },
     figure: { type: 'group', defaultProps: { flexDirection: 'column' } },
     figcaption: { type: 'text', defaultProps: { fontSize: 12 } },
     h1: { type: 'text', defaultProps: { fontSize: 24, fontWeight: 'bold' } },
@@ -1279,7 +1280,10 @@ export function vueToIr(source, opts = {}) {
     // 5) <script setup> 逻辑源码 → 运行时 JS（R12：事件逻辑由原生 JS 引擎执行）
     //    仅支持 JS 子集（无 TS 类型标注、无 import）；超出即编译期警告（后续阶段扩展）
     // R98 P3：把模板表达式下沉产生的求值状态并入页面状态，并重建 runtime（含 recompute）
-    if (jsExprStates.length > 0 && stateInfo) {
+    if (jsExprStates.length > 0) {
+        // 无 <script setup> 的页面也要能承载表达式求值状态
+        if (!stateInfo)
+            stateInfo = { states: [], setters: {} };
         for (const st of jsExprStates) {
             if (!stateInfo.states.some((x) => x.name === st.name))
                 stateInfo.states.push({ ...st });
@@ -1587,6 +1591,10 @@ function buildComponentTree(comp, warnings) {
 }
 function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, warnings, state, compTable = [], propRefs, loopScope = [], ancestorClasses = []) {
     let elementClasses = []; // M5 后代选择器：本元素 class 清单（子节点递归传祖先链）
+    // R107：SVG 图标（svg/path/circle/line/rect/polygon/g/defs/use）纯装饰 → 忽略，不阻断编译
+    if (['svg', 'path', 'circle', 'line', 'rect', 'polygon', 'polyline', 'g', 'defs', 'use', 'text', 'ellipse'].includes(node.tag) && node.tag !== 'text') {
+        return { type: 'spacer', props: { height: 0 } };
+    }
     // R104：<br> 换行 → 占位间距（原生端没有行内换行语义）
     if (node.tag === 'br') {
         return { type: 'spacer', props: { height: 8 } };
@@ -1626,13 +1634,34 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
                 }
             }
         }
-        const vf = parseVFor(forExp, warnings, vforConsts);
+        let vf = parseVFor(forExp, warnings, vforConsts);
         void sunkList;
         if (!vf) {
-            throw new VueCompileError('v-for 仅支持静态数组字面量（M2，如 v-for="item in [1,2,3]" / v-for="(item, i) in [\'a\',\'b\']"；动态列表随 M3/M4）');
+            // R108 兜底：任意 `item in <表达式>` 都能下沉——运行时求值成 JSON 数组即可
+            const gm = forExp.trim().match(/^(?:\(([^)]+)\)|([A-Za-z_$][\w$]*))\s+in\s+([\s\S]+)$/);
+            if (gm) {
+                const expr = gm[3].trim();
+                // Vue3 语义：`v-for="i in 3"` 迭代 1..3
+                const rangeM = expr.match(/^(\d+)$/);
+                const sunk = addJsExprState(rangeM
+                    ? `JSON.stringify(Array.from({ length: ${rangeM[1]} }, function (_, i) { return i + 1; }))`
+                    : `JSON.stringify(${expr})`);
+                vf = {
+                    listState: sunk,
+                    itemKey: (gm[1] ? gm[1].split(',')[0] : gm[2]).trim(),
+                    indexKey: gm[1] ? gm[1].split(',')[1]?.trim() : undefined,
+                };
+                warnings.push(`v-for「${forExp.trim().slice(0, 40)}」的数据源下沉为运行时求值（R108）`);
+            }
+            else {
+                throw new VueCompileError('v-for 语法无法解析（需 `item in <表达式>` 形态）');
+            }
         }
         // M4b：动态列表数据源必须已声明为 ref 数组状态（编译期校验，防悬空引用）
-        if (vf.listState && !(state && state.states.some((s) => s.name === vf.listState))) {
+        // 表达式下沉产生的状态（_vrnE*）在 walk 之后才并入页面状态，这里放行
+        if (vf.listState &&
+            !/^_vrnE\d+$/.test(vf.listState) &&
+            !(state && state.states.some((s) => s.name === vf.listState))) {
             throw new VueCompileError(`v-for 动态数据源「${vf.listState}」未在 <script setup> 中声明为 ref 数组（M4b）`);
         }
         const innerNode = { ...node, props: node.props.filter((p) => !(p.type === NodeTypes.DIRECTIVE && p.name === 'for')) };
@@ -1852,6 +1881,18 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
             warnings.push(`属性 ${attrName}="${attrValue}" 暂不支持，已忽略`);
         }
     }
+    // R108：button 只接受 label/bind —— 布局属性丢弃、缺 label 时占位（避免整页失败）
+    if (mapping.type === 'button') {
+        const badProps = ['flexDirection', 'justifyContent', 'alignItems', 'gap', 'flex', 'textAlign', 'lineHeight', 'overflow', 'clip'];
+        for (const k of badProps)
+            delete props[k];
+    }
+    if (mapping.type === 'input') {
+        // R108：input 只接受 value/placeholder 等，文本样式属性一律丢弃
+        for (const k of ['textAlign', 'lineHeight', 'fontWeight', 'flexDirection', 'justifyContent', 'alignItems']) {
+            delete props[k];
+        }
+    }
     // 子节点：
     //  - button：文本 → label
     //  - text 类型（p/span/h1~h4）：全部文本子节点合并为 props.text；出现元素子节点 → 行内混合报错；
@@ -1905,6 +1946,10 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
                             refOnly = name;
                             parts.push({ bind: name });
                         }
+                        else if (scriptDeclaredNames.has(name)) {
+                            // R106：computed / 普通 const / 解构值 → 运行时求值
+                            parts.push({ bind: addJsExprState(textOf(child.content).trim()) });
+                        }
                         else {
                             throw new VueCompileError(`插值 {{ ${name} }}：未在 <script setup> 中声明为 ref 状态（M1 白名单：仅支持已声明状态）`);
                         }
@@ -1959,6 +2004,16 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
             else if (child.type === NodeTypes.COMMENT) {
                 // 忽略注释
             }
+            else if (child.type === NodeTypes.ELEMENT && mapping.type === 'text') {
+                // R107：行内嵌套（<b>光<b/></b>、<span><svg/></span>）→ 有文字并入，纯图标忽略
+                const innerText = elementInnerText(child).trim();
+                if (innerText) {
+                    text += innerText;
+                    parts.push({ text: innerText }); // 同步进 parts，避免只走 bindParts 时丢失
+                }
+                else
+                    warnings.push(`<${node.tag}> 内嵌图标元素 <${child.tag}> 已忽略（R107）`);
+            }
             else {
                 throw new VueCompileError(`<${node.tag}> 内嵌子元素（行内混合）暂不支持（text 节点仅文本/插值）`);
             }
@@ -1985,18 +2040,31 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
         else {
             const t = text.trim();
             if (!t) {
-                throw new VueCompileError(`<${node.tag}> 无文本内容`);
+                // R106：空的行内元素（图标占位 <i></i>）→ 空文本，内容不丢但也不阻断编译
+                warnings.push(`<${node.tag}> 无文本内容 → 已降级为空占位（R106）`);
+                props.text = ' ';
+            }
+            else {
+                props.text = t;
             }
-            props.text = t;
         }
     }
     else {
         for (const child of node.children) {
             if (mapping.type === 'button') {
+                if (child.type === NodeTypes.ELEMENT && (child.tag === 'br' || !elementInnerText(child).trim()))
+                    continue; // R106/R107：按钮内换行/纯图标忽略
                 if (child.type === NodeTypes.TEXT && child.content.trim()) {
                     props.label = ((props.label ?? '') + child.content.trim()).trim();
                     continue;
                 }
+                if (child.type === NodeTypes.INTERPOLATION) {
+                    // R108：按钮文案是动态表达式 → bind（运行时求值），原生端照样显示
+                    const raw = textOf(child.content).trim();
+                    if (!props.bind && !props.label)
+                        props.bind = addJsExprState(raw);
+                    continue;
+                }
                 if (child.type === NodeTypes.ELEMENT) {
                     // 常见写法兜底：<button><span>文字</span></button> → 内联文本并入 label（否则 IR 校验因缺 label 中断）
                     const inner = elementInnerText(child).trim();
@@ -2013,6 +2081,16 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
             children.push(...walk(child, classProps, comboRules, scopedRules, pseudoRules, warnings, state, compTable, propRefs, loopScope, [...ancestorClasses, ...elementClasses]));
         }
     }
+    // R108：文本节点丢弃布局类属性（原生端 width/height/flexDirection 只对容器有意义）
+    if (mapping.type === 'text') {
+        const LAYOUT_ONLY = ['height', 'width', 'flexDirection', 'justifyContent', 'alignItems', 'flex', 'gap'];
+        const dropped = LAYOUT_ONLY.filter((k) => props[k] !== undefined);
+        if (dropped.length > 0) {
+            for (const k of dropped)
+                delete props[k];
+            warnings.push(`<${node.tag}> 是文本节点，布局属性（${dropped.join('/')}）已忽略（R108）`);
+        }
+    }
     // R88 续：容器节点不接受文本专属样式（color/fontSize/fontWeight/textAlign/lineHeight）
     // 原生端容器没有「字体继承」，这类属性会直接触发 IR 校验拒收 → 明确降级 + 警告
     if (mapping.type === 'group' || mapping.type === 'for') {
@@ -2024,6 +2102,11 @@ function walkElement(node, classProps, comboRules, scopedRules, pseudoRules, war
             warnings.push(`<${node.tag}> 是容器，文本样式（${dropped.join('/')}）在原生端不继承 → 已忽略；请把样式下沉到具体文本节点（R88）`);
         }
     }
+    // R108 兜底：按钮最终必须有可见文案（label 或 bind），否则整页校验失败
+    if (mapping.type === 'button' && props.label === undefined && props.bind === undefined) {
+        props.label = ' ';
+        warnings.push(`<button> 无可读文案（可能是纯图标按钮）→ 已占位，建议补 aria-label 或文案（R108）`);
+    }
     // R77 空容器（<div class="spacer" /> 等占位写法）→ 降级为 spacer 占位 + 警告，而不是中断整个编译
     if (mapping.type === 'group' && children.length === 0) {
         warnings.push(`<${node.tag}> 无子节点 → 降级为占位 spacer（R17/R77；可用 padding/height 表达留白）`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dongmingzhixiu/vuexir-compiler",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "description": "Vue SFC → IR → 原生源码（SwiftUI / Compose）编译器核心：纯函数、零 IO",
   "type": "module",
   "license": "MIT",