@dongmingzhixiu/vuexir-compiler 0.4.10 → 0.5.0

package/dist/codegen/swiftui.js

@@ -703,6 +703,28 @@ function emitNodeInner(node, ctx) {
                 .join('\n');
         }
         case 'group': {
+            // R136：CSS grid（grid-template-columns: repeat(N,1fr)）→ LazyVGrid
+            if (props.gridColumns !== undefined && (node.children?.length ?? 0) > 0) {
+                const cols = props.gridColumns;
+                const inner = (node.children ?? [])
+                    .map((c, i) => emitNode(c, {
+                    parentAxis: 'column',
+                    level: L + 2,
+                    definiteHeight: false,
+                    warnings: ctx.warnings,
+                    runtime: ctx.runtime,
+                    path: `${ctx.path}[${i}]`,
+                    inheritGap: undefined,
+                    loop: ctx.loop,
+                    dataProps: ctx.dataProps,
+                }))
+                    .join('\n');
+                return [
+                    pad(`LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: ${props.gap ?? 0}), count: ${cols}), spacing: ${props.gap ?? 0}) {`),
+                    inner,
+                    pad('}'),
+                ].join('\n');
+            }
             const dir = props.flexDirection ?? 'column';
             const isRow = dir === 'row';
             const children = node.children ?? [];

package/dist/ir/schema.d.ts

@@ -140,6 +140,8 @@ export interface IrProps {
     absTop?: number;
     absLeft?: number;
     absRight?: number;
+    /** R136：CSS grid 的列数（grid-template-columns: repeat(N, 1fr)） */
+    gridColumns?: number;
     absBottom?: number;
     /** M5 变换：scale / rotate(deg) / translate(x,y) → scaleEffect / rotationEffect / offset */
     transform?: {

package/dist/ir/schema.js

@@ -115,7 +115,7 @@ const PROPS_VALIDATORS = {
 /** 各节点允许的 props 键（P0 最小集，防 Taro 化：未知 prop 即报错） */
 const NODE_ALLOWED_PROPS = {
     root: ['width', 'height', 'background'],
-    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'],
+    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', 'gridColumns'],
     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', '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'],

package/dist/transform/css.js

@@ -49,6 +49,14 @@ function mapDecl(prop, value, warnings) {
 function mapDeclInner(prop, value, warnings) {
     const v = value.trim();
     switch (prop) {
+        case 'grid-template-columns': {
+            // R136：CSS grid 的最小支持——`repeat(N, 1fr)` / `1fr 1fr 1fr` → 列数
+            const rep = String(v).match(/repeat\(\s*(\d+)\s*,/);
+            if (rep)
+                return [['gridColumns', Number(rep[1])]];
+            const cols = String(v).trim().split(/\s+/).filter((x) => x.endsWith('fr')).length;
+            return cols > 1 ? [['gridColumns', cols]] : null;
+        }
         case 'display':
             // display:flex → 容器语义；display:block/none 不映射（flex 为默认容器）
             // R135：CSS 的 display:flex 默认 main axis 是 row（此前默认 column →

package/package.json

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