@mybricks/to-code-taro 1.0.2 → 1.0.3

package/dist/esm/utils/style/converter.js

@@ -0,0 +1,176 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import pxtransform from "./pxtransform";
+import { kebabToCamel, camelToKebab } from "../common/string";
+/** 转换根节点样式 */
+export var convertRootStyle = function convertRootStyle(style) {
+  var rootStyle = {};
+  Object.entries(style || {}).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    // 忽略一些不需要的属性
+    if (key === "_new" || key === "themesId" || key === "visibility" || key === "styleAry") {
+      return;
+    }
+    if (key === "layout") {
+      if (_typeof(value) === "object" && value !== null) {
+        // 处理 layout 对象，动态转换所有属性
+        var layoutObj = value;
+        Object.entries(layoutObj).forEach(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+            lKey = _ref4[0],
+            lValue = _ref4[1];
+          if (lKey === "position") {
+            if (lValue === "smart") {
+              rootStyle["position"] = "absolute";
+            } else if (lValue !== "inherit") {
+              rootStyle["position"] = lValue;
+            }
+          } else {
+            // 所有布局属性转为小驼峰（React 行内样式使用 camelCase）
+            var camelLayoutKey = kebabToCamel(lKey);
+            rootStyle[camelLayoutKey] = pxtransform(lValue);
+          }
+        });
+      } else if (value === "flex-row") {
+        rootStyle["display"] = "flex";
+        rootStyle["flexDirection"] = "row";
+      } else if (value === "flex-column") {
+        rootStyle["display"] = "flex";
+        rootStyle["flexDirection"] = "column";
+      } else if (value === "smart") {
+        // 处理 layout: 'smart'
+        rootStyle["position"] = "relative";
+      }
+      return;
+    }
+
+    // 根样式转换，统一转为小驼峰（React 行内样式使用 camelCase）
+    // 如果 key 已经是 kebab-case，转换为 camelCase；如果已经是 camelCase，保持不变
+    var camelKey = key.includes('-') ? kebabToCamel(key) : key;
+    if (typeof value === "string" || typeof value === "number") {
+      rootStyle[camelKey] = pxtransform(value);
+    }
+  });
+  return rootStyle;
+};
+
+/** 转换组件样式为 Taro/React 样式 */
+export var convertComponentStyle = function convertComponentStyle(style) {
+  var resultStyle = {};
+  var rootStyle = convertRootStyle(style);
+  if (style.styleAry) {
+    // 处理样式数组
+    style.styleAry.forEach(function (_ref5) {
+      var css = _ref5.css,
+        selector = _ref5.selector;
+      var transformedCss = {};
+      Object.entries(css).forEach(function (_ref6) {
+        var _ref7 = _slicedToArray(_ref6, 2),
+          cssKey = _ref7[0],
+          cssValue = _ref7[1];
+        if (cssKey === "layout") {
+          if (_typeof(cssValue) === "object" && cssValue !== null) {
+            var layoutObj = cssValue;
+            Object.entries(layoutObj).forEach(function (_ref8) {
+              var _ref9 = _slicedToArray(_ref8, 2),
+                lKey = _ref9[0],
+                lValue = _ref9[1];
+              if (lKey === "position") {
+                if (lValue === "smart") {
+                  transformedCss["position"] = "absolute";
+                } else if (lValue !== "inherit") {
+                  transformedCss["position"] = lValue;
+                }
+              } else {
+                // 布局属性转为小驼峰（React 行内样式使用 camelCase）
+                transformedCss[kebabToCamel(lKey)] = lValue;
+              }
+            });
+          } else if (cssValue === "flex-row") {
+            transformedCss["display"] = "flex";
+            transformedCss["flexDirection"] = "row";
+          } else if (cssValue === "flex-column") {
+            transformedCss["display"] = "flex";
+            transformedCss["flexDirection"] = "column";
+          } else if (cssValue === "smart") {
+            transformedCss["position"] = "relative";
+          }
+        } else {
+          // CSS 属性转为小驼峰（React 行内样式使用 camelCase）
+          // 如果 cssKey 已经是 kebab-case，转换为 camelCase；如果已经是 camelCase，保持不变
+          var camelKey = cssKey.includes('-') ? kebabToCamel(cssKey) : cssKey;
+          transformedCss[camelKey] = pxtransform(cssValue);
+        }
+      });
+      resultStyle[selector] = transformedCss;
+    });
+  }
+  resultStyle["root"] = rootStyle;
+  return resultStyle;
+};
+
+/** 转换 styleAry 为 CSS 字符串 */
+export var convertStyleAryToCss = function convertStyleAryToCss(styleAry, parentSelector) {
+  if (!Array.isArray(styleAry)) return "";
+  var prefix = parentSelector ? ".".concat(parentSelector, " ") : "";
+  return styleAry.map(function (_ref10) {
+    var selector = _ref10.selector,
+      css = _ref10.css;
+    if (!selector || !css) return "";
+
+    // 处理选择器，如果是以 > 开头，处理空格
+    var finalSelector = selector;
+    if (finalSelector.startsWith(">")) {
+      finalSelector = "".concat(prefix).concat(finalSelector);
+    } else {
+      finalSelector = "".concat(prefix).concat(finalSelector);
+    }
+    var transformedCss = {};
+    Object.entries(css).forEach(function (_ref11) {
+      var _ref12 = _slicedToArray(_ref11, 2),
+        key = _ref12[0],
+        value = _ref12[1];
+      if (key === "layout") {
+        if (_typeof(value) === "object" && value !== null) {
+          var layoutObj = value;
+          Object.entries(layoutObj).forEach(function (_ref13) {
+            var _ref14 = _slicedToArray(_ref13, 2),
+              lKey = _ref14[0],
+              lValue = _ref14[1];
+            if (lKey === "position") {
+              if (lValue === "smart") {
+                transformedCss["position"] = "absolute";
+              } else if (lValue !== "inherit") {
+                transformedCss["position"] = lValue;
+              }
+            } else {
+              transformedCss[kebabToCamel(lKey)] = lValue;
+            }
+          });
+        } else if (value === "flex-row") {
+          transformedCss["display"] = "flex";
+          transformedCss["flexDirection"] = "row";
+        } else if (value === "flex-column") {
+          transformedCss["display"] = "flex";
+          transformedCss["flexDirection"] = "column";
+        } else if (value === "smart") {
+          transformedCss["position"] = "relative";
+        }
+      } else {
+        transformedCss[kebabToCamel(key)] = value;
+      }
+    });
+    var cssString = Object.entries(transformedCss).map(function (_ref15) {
+      var _ref16 = _slicedToArray(_ref15, 2),
+        key = _ref16[0],
+        value = _ref16[1];
+      // 使用通用工具转换驼峰为中划线
+      var kebabKey = camelToKebab(key);
+      var formattedValue = typeof value === "number" ? "".concat(value, "px") : value;
+      return "  ".concat(kebabKey, ": ").concat(formattedValue, ";");
+    }).join("\n");
+    return "".concat(finalSelector, " {\n").concat(cssString, "\n}");
+  }).join("\n\n");
+};

package/dist/esm/utils/style/types.d.ts

@@ -0,0 +1,23 @@
+export interface Style {
+    layout?: "smart" | "flex-column" | "flex-row" | {
+        display?: string;
+        position?: string;
+        flexDirection?: string;
+        alignItems?: string;
+        justifyContent?: string;
+        flexWrap?: string;
+        rowGap?: number;
+        columnGap?: number;
+    };
+    width?: string | number;
+    height?: string | number;
+    styleAry?: Array<{
+        selector: string;
+        css: Record<string, any>;
+    }>;
+    slots?: Record<string, {
+        layout?: string | object;
+        [key: string]: any;
+    }>;
+    [key: string]: any;
+}

package/dist/esm/utils/style/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mybricks/to-code-taro",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "To code for Taro",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/dist/esm/utils/pageConfig/pageConfig.js

@@ -1,60 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-/**
- * 页面配置工具
- * 负责从 systemPage 组件数据生成 definePageConfig 配置字符串
- */
-
-var TARO_NAVIGATION_BAR_PROPERTIES = ['navigationBarBackgroundColor', 'navigationBarTextStyle', 'navigationBarTitleText', 'navigationStyle'];
-var TARO_PAGE_CONFIG_TEMPLATE_PROPERTIES = ['navigationBarBackgroundColor', 'navigationBarTextStyle', 'navigationBarTitleText', 'navigationStyle', 'transparentTitle', 'backgroundColor', 'backgroundTextStyle', 'backgroundColorTop', 'backgroundColorBottom', 'enablePullDownRefresh', 'onReachBottomDistance', 'pageOrientation', 'disableScroll', 'disableSwipeBack', 'enableShareAppMessage', 'enableShareTimeline', 'usingComponents', 'renderer'];
-
-/**
- * 从 systemPage 组件数据生成 definePageConfig 配置字符串
- * @param systemPageData systemPage 组件的 model.data
- * @returns definePageConfig 配置字符串
- */
-export function generatePageConfigContent(systemPageData) {
-  var pageConfig = {};
-  if (systemPageData) {
-    var useNavigationStyle = systemPageData.useNavigationStyle;
-
-    // 确定要使用的属性列表
-    var propertiesToUse = [];
-    if (useNavigationStyle === 'default') {
-      // 如果 useNavigationStyle 为 default，使用 TARO_NAVIGATION_BAR_PROPERTIES
-      propertiesToUse = TARO_NAVIGATION_BAR_PROPERTIES;
-    } else {
-      // 否则使用 TARO_PAGE_CONFIG_TEMPLATE_PROPERTIES
-      propertiesToUse = TARO_PAGE_CONFIG_TEMPLATE_PROPERTIES;
-    }
-
-    // 从 systemPageData 中提取配置属性
-    propertiesToUse.forEach(function (prop) {
-      if (systemPageData[prop] !== undefined && systemPageData[prop] !== null) {
-        var value = systemPageData[prop];
-        // 处理不同类型的值
-        if (typeof value === 'string') {
-          pageConfig[prop] = "'".concat(value, "'");
-        } else if (typeof value === 'boolean' || typeof value === 'number') {
-          pageConfig[prop] = value;
-        } else if (_typeof(value) === 'object') {
-          pageConfig[prop] = JSON.stringify(value);
-        }
-      }
-    });
-  }
-
-  // 如果没有找到任何配置，设置默认的 navigationBarTitleText
-  if (Object.keys(pageConfig).length === 0) {
-    pageConfig.navigationBarTitleText = "'\u9875\u9762'";
-  }
-
-  // 生成配置字符串
-  var configLines = Object.entries(pageConfig).map(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      key = _ref2[0],
-      value = _ref2[1];
-    return "  ".concat(key, ": ").concat(value);
-  });
-  return "export default definePageConfig({\n".concat(configLines.join(',\n'), "\n})");
-}