miaoda-expo-devkit 0.1.1-beta.3 → 0.1.1-beta.30

package/README.md

@@ -264,6 +264,7 @@ sentry-react-native-stub.js
 | `.` | `dist/index.js` | `SentryCapture`、`MetroSymbolicator`、全部类型 |
 | `./metro` | `dist/metro.js` | `withDevStubs`、`withEntryInjection` |
 | `./babel-plugin-jsx-source` | `dist/babel/plugin-jsx-source.js` | Babel 插件：为 JSX 注入 source 信息 |
+| `./babel-preset` | `dist/babel/preset.js` | Babel Preset：集成 jsx-source 和 lucide 插件 |
 | `./sentry-react-native-stub` | `dist/stubs/sentry-react-native-stub.js` | `@sentry/react-native` 模块替换 stub |
 | `./no-op-logbox` | `dist/stubs/no-op-logbox.js` | LogBox no-op stub |
 
@@ -434,3 +435,81 @@ module.exports = {
 |---|---|---|---|
 | `rootDir` | `string` | - | 项目根目录，用于计算相对路径。不提供则使用绝对路径 |
 | `excludePaths` | `string[]` | `[]` | 跳过注入的路径模式列表（相对于 rootDir 的路径片段） |
+
+---
+
+## Babel 插件：lucide-react-native
+
+Metro 没有 tree-shaking，直接写 `import { Star } from "lucide-react-native"` 会把整个图标库（约 1500 个图标）打进 bundle。`babel-plugin-lucide-react-native` 在编译阶段将具名导入改写为直接按文件导入，彻底规避这个问题。
+
+**转换效果：**
+
+```ts
+// 转换前
+import { Star, BookOpen } from "lucide-react-native";
+
+// 转换后（CJS，默认）
+import _Star     from "lucide-react-native/dist/cjs/icons/star";
+import _BookOpen from "lucide-react-native/dist/cjs/icons/book-open";
+```
+
+### 配置
+
+推荐通过内置 Preset 一次性启用所有 Babel 插件：
+
+```js
+// babel.config.js
+module.exports = {
+  presets: [['miaoda-expo-devkit/babel-preset', { excludePaths: ['src/components/ui'] }]],
+};
+```
+
+也可以单独使用：
+
+```js
+module.exports = {
+  plugins: [['miaoda-expo-devkit/babel-plugin-lucide-react-native']],
+};
+```
+
+### 选项
+
+| 选项 | 类型 | 默认值 | 说明 |
+|---|---|---|---|
+| `useES` | `boolean` | `false` | 使用 ESM 格式（`dist/esm/icons/`）而非默认的 CJS |
+
+### 支持的写法
+
+插件可识别所有常见的图标引用写法：
+
+```ts
+import { BookOpen, Star, Crown } from "lucide-react-native";
+
+// JSX 直接使用
+<BookOpen size={24} />
+
+// 赋值给变量
+const icon = BookOpen;
+
+// 对象 value
+const ITEMS = [{ icon: BookOpen }, { icon: Star }];
+
+// 计算属性 key
+const map = { [BookOpen]: 'read' };
+
+// 数组、三元、函数参数
+const list = [BookOpen, Star];
+const active = flag ? BookOpen : Star;
+renderIcon(Crown);
+
+// 导入别名
+import { BookOpen as ReadIcon } from "lucide-react-native";
+<ReadIcon />
+
+// re-export
+export { Star, BookOpen as ReadIcon } from "lucide-react-native";
+```
+
+### 版本兼容性
+
+插件在运行时探测 `lucide-react-native` 的实际目录结构，自动适配新旧版本的路径差异（`>= 1.9` 新增 `icons/` 子目录；旧版 `1.8.x` 图标直接位于 `dist/cjs/`），lucide 升级时无需修改配置。

package/biome-config.json

@@ -1,4 +1,15 @@
 {
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"files": {
+		"includes": [
+			"src/**/*.{js,jsx,ts,tsx,css,scss}",
+			"tailwind.config.js"
+		]
+	},
 	"linter": {
 		"enabled": true,
 		"rules": {
@@ -10,5 +21,17 @@
 	},
 	"formatter": {
 		"enabled": false
-	}
+	},
+	"overrides": [
+		{
+			"includes": ["tailwind.config.js"],
+			"linter": {
+				"rules": {
+					"style": {
+						"noCommonJs": "off"
+					}
+				}
+			}
+		}
+	]
 }

package/dist/babel/plugin-jsx-source.d.ts

@@ -14,8 +14,10 @@ import { types, PluginObj } from '@babel/core';
  *
  * 对于纯文本节点：
  *   <div>hello world</div>
+ *   <div>{"hello world"}</div>
  * 转换后：
  *   <div dataSet={{"mdId": "path/to/file.tsx:10:4", "componentContent": "{\"text\":\"hello world\"}"}}>hello world</div>
+ *   <div dataSet={{"mdId": "path/to/file.tsx:11:4", "componentContent": "{\"text\":\"hello world\"}"}}>{"hello world"}</div>
  *
  * 用法（babel.config.js）：
  *

package/dist/babel/plugin-jsx-source.js

@@ -69,9 +69,18 @@ function getTextNodeContent(t, path) {
   const children = parent.children;
   if (children.length !== 1) return null;
   const child = children[0];
-  if (!t.isJSXText(child)) return null;
-  const text = child.value.trim();
-  return text || null;
+  if (t.isJSXText(child)) {
+    const text = child.value.trim();
+    return text || null;
+  }
+  if (t.isJSXExpressionContainer(child) && t.isStringLiteral(child.expression)) {
+    const text = child.expression.value.trim();
+    return text || null;
+  }
+  if (t.isJSXExpressionContainer(child) && t.isNumericLiteral(child.expression)) {
+    return String(child.expression.value);
+  }
+  return null;
 }
 function shouldSkipElement(t, name) {
   if (t.isJSXIdentifier(name)) {

package/dist/babel/plugin-lucide-react-native.d.ts

@@ -0,0 +1,31 @@
+import babelCore from '@babel/core';
+
+/**
+ * babel-plugin-lucide-react-native
+ *
+ * 将 lucide-react-native 的具名导入转换为按图标文件直接导入，绕过 Metro
+ * 缺乏 tree-shaking 的问题，避免将整个图标库打进 bundle。
+ *
+ * 转换示意：
+ *   import { Star, BookHeart } from "lucide-react-native"
+ *   →
+ *   import _Star     from "lucide-react-native/dist/cjs/icons/star"
+ *   import _BookHeart from "lucide-react-native/dist/cjs/icons/book-heart"
+ */
+
+type Core = typeof babelCore;
+interface Config extends babelCore.PluginPass {
+    opts: {
+        /** 使用 ESM 格式（dist/esm）。默认 false，使用 CJS（dist/cjs）。 */
+        useES?: boolean;
+        /**
+         * lucide-react-native 包根目录的绝对路径（含 package.json 的那一层）。
+         * 不传时通过 require.resolve 自动定位，适用于生产场景。
+         * 测试时可传入特定版本的路径，验证不同版本的兼容性。
+         */
+        lucidePkgRoot?: string;
+    };
+}
+declare function lucideReactNativePlugin({ types: t }: Core): babelCore.PluginObj<Config>;
+
+export { lucideReactNativePlugin as default };