@mybricks/to-code-taro 1.1.0 → 1.1.4

package/dist/cjs/handleCom.js

@@ -38,6 +38,7 @@ var import_templates = require("./utils/templates/index");
 var import_component = require("./utils/templates/component");
 var import_renderManager = require("./utils/templates/renderManager");
 var import_handleSlot = __toESM(require("./handleSlot"));
+var import_handleDom = __toESM(require("./handleDom"));
 var import_processComEvents = require("./processors/processComEvents");
 var import_handleProcess = require("./utils/logic/handleProcess");
 var COM_PROTOCOL = {
@@ -56,16 +57,31 @@ var handleCom = (com, config) => {
   const { componentName, eventHandlers, comEventCode } = prepareComponent(com, config);
   const { cssContent, rootStyle } = prepareStyles(com);
   let accumulatedCssContent = cssContent;
+  if (com.child) {
+    rootStyle.position = "relative";
+  }
   const { slotsCode, accumulatedCssContent: slotCss, eventCode, childrenResults } = processComSlots(com, config, accumulatedCssContent);
   accumulatedCssContent = slotCss;
-  const ui = generateUiCode(com, config, componentName, rootStyle, comEventCode, slotsCode, eventHandlers);
+  let childrenUi = "";
+  if (com.child) {
+    const childResult = (0, import_handleDom.default)(com.child, {
+      ...config,
+      depth: config.depth + 1
+    });
+    childrenUi = childResult.ui;
+    if (childResult.cssContent) {
+      accumulatedCssContent += (accumulatedCssContent ? "\n" : "") + childResult.cssContent;
+    }
+  }
+  const ui = generateUiCode(com, config, componentName, rootStyle, comEventCode, slotsCode, eventHandlers, childrenUi);
+  const hasEvents = Object.keys(eventHandlers).length > 0;
   return {
     slots: [],
     scopeSlots: [],
     ui,
     js: eventCode,
     cssContent: accumulatedCssContent,
-    outputsConfig: Object.keys(eventHandlers).length > 0 ? { [meta.id]: eventHandlers } : void 0,
+    outputsConfig: hasEvents ? { [meta.id]: eventHandlers } : void 0,
     childrenResults,
     name: meta.name,
     // 返回解析后的稳定名称
@@ -117,7 +133,13 @@ var processComSlots = (com, config, initialCss) => {
   slotEntries.forEach(([slotId, slot], index) => {
     var _a, _b, _c, _d;
     const children = slot.comAry || slot.children || [];
+    const isLast = index === slotEntries.length - 1;
+    const slotIndent = (0, import_templates.indentation)(config.codeStyle.indent * (config.depth + 2));
     if (children.length === 0) {
+      slotsCode += `${slotIndent}${slotId}: {
+${slotIndent}  render: () => null
+${slotIndent}}${isLast ? "" : ","}
+`;
       return;
     }
     const slotLayout = (_a = com.props.data) == null ? void 0 : _a.layout;
@@ -127,6 +149,8 @@ var processComSlots = (com, config, initialCss) => {
       depth: 1,
       renderManager,
       slotKey: slotId,
+      // 给 slot 根容器打标用（slot wrapper className）
+      parentComId: meta.id,
       // 鸿蒙化：传递父容器的布局配置给插槽
       layout: slotLayout
     });
@@ -135,12 +159,10 @@ var processComSlots = (com, config, initialCss) => {
       accumulatedCssContent += (accumulatedCssContent ? "\n" : "") + result.cssContent;
     }
     const renderId = `${meta.id}_${slotId}`;
-    const baseIndentSize = config.codeStyle.indent;
-    const renderBodyIndent = (0, import_templates.indentation)(config.codeStyle.indent * 2);
-    const formattedContent = (0, import_templates.formatSlotContent)(result.ui, baseIndentSize, renderBodyIndent);
-    if (meta.def.namespace === "mybricks.taro.formContainer" && Array.isArray((_b = props.data) == null ? void 0 : _b.items) && result.childrenResults) {
+    const rawContent = result.ui;
+    if (meta.def.namespace === "mybricks.taro.formContainer" && Array.isArray((_b = props.data) == null ? void 0 : _b.items) && result.directChildren) {
       const items = (_c = props.data) == null ? void 0 : _c.items;
-      result.childrenResults.forEach((childRes) => {
+      result.directChildren.forEach((childRes) => {
         const itemConfig = items.find((it) => it.id === childRes.id);
         if (itemConfig == null ? void 0 : itemConfig.comName) {
           childRes.name = itemConfig.comName;
@@ -150,14 +172,15 @@ var processComSlots = (com, config, initialCss) => {
     const logicCode = buildSlotLogicCode({
       parentComId: meta.id,
       slotKey: slotId,
-      children: result.childrenResults,
+      children: result.directChildren,
       config
     });
     const description = `${meta.title || meta.id}的${slot.title || slotId}插槽`;
     renderManager.register(
       renderId,
-      formattedContent,
-      result.childrenResults,
+      rawContent,
+      result.directChildren,
+      // 仅传入直接子组件，避免递归替换导致的结构破坏
       logicCode,
       slot.type,
       slot.wrap || slot.itemWrap || ((_d = COM_PROTOCOL[meta.def.namespace]) == null ? void 0 : _d.useWrap),
@@ -166,12 +189,11 @@ var processComSlots = (com, config, initialCss) => {
     if (result.childrenResults) {
       allChildrenResults = allChildrenResults.concat(result.childrenResults);
     }
-    const slotIndent = (0, import_templates.indentation)(config.codeStyle.indent * (config.depth + 2));
     slotsCode += (0, import_component.genSlotRenderRef)({
       slotId,
       renderId,
       indent: slotIndent,
-      isLast: index === slotEntries.length - 1
+      isLast
     });
   });
   return { slotsCode, accumulatedCssContent, eventCode, childrenResults: allChildrenResults };
@@ -210,7 +232,7 @@ var buildSlotLogicCode = (args) => {
 `;
   return code;
 };
-var generateUiCode = (com, config, componentName, rootStyle, comEventCode, slotsCode, eventHandlers) => {
+var generateUiCode = (com, config, componentName, rootStyle, comEventCode, slotsCode, eventHandlers, childrenUi) => {
   var _a, _b, _c, _d;
   const { meta, props } = com;
   const scene = config.getCurrentScene();
@@ -225,7 +247,8 @@ var generateUiCode = (com, config, componentName, rootStyle, comEventCode, slots
       componentOutputs: (((_c = sceneCom == null ? void 0 : sceneCom.outputs) == null ? void 0 : _c.length) || 0) > 0 ? sceneCom.outputs : (((_d = meta.outputs) == null ? void 0 : _d.length) || 0) > 0 ? meta.outputs : void 0,
       comEventCode,
       slotsCode,
-      eventHandlers
+      eventHandlers,
+      childrenUi
     },
     {
       codeStyle: config.codeStyle,

package/dist/cjs/handleDom.d.ts

@@ -14,6 +14,8 @@ type HandleDomResult = {
     slots: string[];
     scopeSlots: string[];
     cssContent: string;
+    directChildren?: any[];
+    childrenResults?: any[];
 };
 declare const handleDom: (dom: Dom, config: HandleDomConfig) => HandleDomResult;
 export default handleDom;

package/dist/cjs/handleDom.js

@@ -26,8 +26,9 @@ var import_utils = require("./utils");
 var import_processChildren = require("./utils/logic/processChildren");
 var handleDom = (dom, config) => {
   var _a;
-  const { props, children } = dom;
+  const { props } = dom;
   const domProps = props;
+  const children = (0, import_processChildren.normalizeChildren)(dom);
   const childResults = (0, import_processChildren.processChildren)(children, {
     ...config,
     depth: config.depth + 1
@@ -43,7 +44,9 @@ ${indent}</View>`;
     js: childResults.js,
     slots: childResults.slots,
     scopeSlots: childResults.scopeSlots,
-    cssContent
+    cssContent,
+    directChildren: childResults.directChildren,
+    childrenResults: childResults.childrenResults
   };
 };
 var handleDom_default = handleDom;

package/dist/cjs/handleGlobal.js

@@ -24,6 +24,7 @@ __export(handleGlobal_exports, {
 module.exports = __toCommonJS(handleGlobal_exports);
 var import_utils = require("./utils");
 var import_handleProcess = require("./utils/logic/handleProcess");
+var import_string = require("./utils/common/string");
 var handleGlobal = (params, config) => {
   const { tojson, globalFxs, globalVars } = params;
   const globalImportManager = new import_utils.ImportManager(config);
@@ -64,11 +65,12 @@ var handleGlobal = (params, config) => {
         return tojson.global;
       }
     });
+    const varKey = (0, import_string.getSafeVarName)(com);
     globalVarsRegisterChangeCode += `
-${indent2}this.${com.title}.registerChange((value: any) => {
+${indent2}this.${varKey}.registerChange((value: any) => {
 ${res}
 ${indent2}})`;
-    globalVarsInitCode += `${indent}${com.title}: any = createVariable(${JSON.stringify(com.model.data.initValue || {})})
+    globalVarsInitCode += `${indent}${varKey}: any = createVariable(${JSON.stringify(com.model.data.initValue || {})})
 `;
   });
   let globalFxsInitCode = "";

package/dist/cjs/handleSlot.d.ts

@@ -12,6 +12,8 @@ interface HandleSlotConfig extends BaseConfig {
     hasPopups?: boolean;
     /** handleCom 处理 slots 时的 slot key（如 item/content），用于识别 scope 入参 */
     slotKey?: string;
+    /** 父组件 id（用于给插槽根容器打标 className） */
+    parentComId?: string;
 }
 declare const handleSlot: (ui: UI, config: HandleSlotConfig) => {
     js: string;
@@ -20,6 +22,7 @@ declare const handleSlot: (ui: UI, config: HandleSlotConfig) => {
     cssContent: string;
     slots: any[];
     scopeSlots: any[];
+    directChildren: any[];
     childrenResults: any[];
 };
 export default handleSlot;

package/dist/cjs/handleSlot.js

@@ -31,7 +31,7 @@ var handleSlot = (ui, config) => {
   var _a, _b;
   const importManager = new import_utils.ImportManager(config);
   const { props = {} } = ui;
-  const children = ui.children || ui.comAry || [];
+  const children = (0, import_processChildren.normalizeChildren)(ui);
   const isRoot = config.checkIsRoot();
   const slotId = ((_a = ui.meta) == null ? void 0 : _a.id) || ui.id;
   const addDependencyImport = config.addParentDependencyImport || importManager.addImport.bind(importManager);
@@ -40,7 +40,7 @@ var handleSlot = (ui, config) => {
     const utilsPkg = config.getUtilsPackageName({ isRoot, isPopup: config.isPopup });
     addDependencyImport({
       packageName: utilsPkg,
-      dependencyNames: ["useAppContext", "ScopedComContextProvider"],
+      dependencyNames: ["useAppContext"],
       importType: "named"
     });
     addDependencyImport({
@@ -63,7 +63,7 @@ var handleSlot = (ui, config) => {
   const { initCode, effectCode } = (0, import_processSceneLogic.processSceneLogic)(ui, config, addDependencyImport);
   let cssContent = ((0, import_utils.convertStyleAryToCss)((_b = props.style) == null ? void 0 : _b.styleAry, slotId) || "") + (childResults.cssContent ? "\n" + childResults.cssContent : "");
   const combinedJsCode = `${envDefineCode}${childResults.js}${initCode}${(0, import_scene.wrapInEffect)(indent2, effectCode)}`;
-  const uiResult = generateSlotUi(ui, props, childResults.ui, config);
+  const uiResult = generateSlotUi(ui, props, childResults.ui, childResults.childrenResults, config);
   if (isRoot) {
     const renderDefinitions = renderManager ? renderManager.toCode("") : "";
     finalizeRootComponent(ui, config, importManager, combinedJsCode, renderDefinitions, uiResult, cssContent);
@@ -75,6 +75,7 @@ var handleSlot = (ui, config) => {
     cssContent,
     slots: [],
     scopeSlots: [],
+    directChildren: childResults.directChildren,
     childrenResults: childResults.childrenResults
   };
 };
@@ -82,28 +83,40 @@ var setupImports = (addImport, config, isRoot) => {
   const importParams = { isPopup: config.isPopup };
   const utilsPkg = config.getUtilsPackageName(importParams);
   const comPkg = config.getComponentPackageName(importParams);
-  addImport({ packageName: "react", dependencyNames: ["useRef", "useEffect", "useState"], importType: "named" });
+  addImport({
+    packageName: "react",
+    dependencyNames: ["useRef", "useEffect", "useState", "createContext", "useContext"],
+    importType: "named"
+  });
   addImport({ packageName: "@tarojs/components", dependencyNames: ["View"], importType: "named" });
-  const dependencyNames = ["WithCom", "WithWrapper", "SlotProvider"];
+  const dependencyNames = ["WithCom", "WithWrapper"];
   if (isRoot && config.hasPopups) {
     dependencyNames.push("PopupRenderer");
   }
   addImport({ packageName: utilsPkg, dependencyNames, importType: "named" });
   addImport({ packageName: comPkg, dependencyNames: ["useAppContext"], importType: "named" });
   if (isRoot) {
+    addImport({ packageName: "@/common/pageLife", dependencyNames: ["usePageLife"], importType: "named" });
     if (config.hasPopups) {
-      addImport({ packageName: "../../common/popup", dependencyNames: ["POPUP_MAP", "POPUP_IDS"], importType: "named" });
+      addImport({ packageName: "@/common/popup", dependencyNames: ["POPUP_MAP", "POPUP_IDS"], importType: "named" });
     }
     addImport({ packageName: "./index.global.less", dependencyNames: [], importType: "module" });
   }
 };
-var generateSlotUi = (ui, props, childrenUi, config) => {
+var generateSlotUi = (ui, props, childrenUi, childrenResults, config) => {
   const indent = (0, import_utils.indentation)(config.codeStyle.indent * config.depth);
-  const mergedStyle = { width: "100%", height: "100%", ...ui.style || {}, ...props.style || {} };
+  const slotStyle = ui.style || {};
+  const propsStyle = props.style || {};
+  const mergedStyle = { width: "100%", height: "100%", ...slotStyle, ...propsStyle };
   const layout = config.layout || ui.layout || mergedStyle.layout;
-  const styleCode = JSON.stringify((0, import_utils.convertRootStyle)({ ...mergedStyle, layout }));
+  const smart = isSmartLayout(layout);
+  const layoutAdjustment = smart ? { position: isHasInSmartLayout(childrenResults) ? "fixed" : "relative" } : hasFixedChildren(childrenResults) ? { transform: "translateX(0)" } : {};
+  const styleCode = JSON.stringify((0, import_utils.convertRootStyle)({ ...mergedStyle, layout, ...layoutAdjustment }));
   const rootClassName = (0, import_utils.getRootComponentClassName)(config.getCurrentScene(), config.checkIsRoot());
-  const classNameAttr = rootClassName ? ` className='${rootClassName}'` : "";
+  const parentComId = config == null ? void 0 : config.parentComId;
+  const slotMarkClass = parentComId ? `slot-${parentComId}` : "";
+  const classNameStr = [rootClassName, slotMarkClass].filter(Boolean).join(" ");
+  const classNameAttr = classNameStr ? ` className='${classNameStr}'` : "";
   return `${indent}<View${classNameAttr} style={${styleCode}}>
 ${childrenUi}
 ${indent}</View>`;
@@ -124,4 +137,19 @@ var finalizeRootComponent = (ui, config, importManager, combinedJsCode, renderDe
   });
   config.add({ importManager, content: componentCode, cssContent, name: fileName });
 };
+var hasFixedChildren = (childrenResults) => {
+  return childrenResults.some((item) => {
+    var _a;
+    return ((_a = item == null ? void 0 : item.rootStyle) == null ? void 0 : _a.position) === "fixed";
+  });
+};
+var isSmartLayout = (layout) => {
+  return layout === "smart" || (layout == null ? void 0 : layout.position) === "smart";
+};
+var isHasInSmartLayout = (childrenResults) => {
+  return childrenResults.some((item) => {
+    var _a;
+    return ((_a = item == null ? void 0 : item.rootStyle) == null ? void 0 : _a.inSmartLayout) === true;
+  });
+};
 var handleSlot_default = handleSlot;

package/dist/cjs/processors/processScene.js

@@ -53,6 +53,7 @@ var processScene = (params) => {
     pageConfigHandler
   } = params;
   (0, import_collectJSModules.collectJSModulesFromScene)(scene, jsModulesMap);
+  const localJsModules = Object.entries(scene.coms || {}).map(([comId, comInfo]) => (0, import_collectJSModules.extractJSModuleFromCom)(comId, comInfo)).filter(Boolean);
   const fileName = (_a = config.getFileName) == null ? void 0 : _a.call(config, ui.meta.slotId);
   const currentProvider = (0, import_createProvider.createProvider)(fileName, true);
   const providerMap = (0, import_createProvider.createProviderMap)(currentProvider);
@@ -134,7 +135,8 @@ var processScene = (params) => {
         ...value,
         type: isPopup ? "popup" : (originalScene == null ? void 0 : originalScene.type) ? originalScene.type : "normal",
         meta: scene,
-        pageConfigContent
+        pageConfigContent,
+        jsModules: localJsModules
       });
     },
     addJSModule: (module2) => {