@flun/node-mobile-app 4.1.2 → 4.2.0

package/template/App.tsx

@@ -1,105 +1,116 @@
+import * as NodeMobile from '@flun/nodejs-mobile-react-native';
 import { useEffect, useState } from 'react';
-import { View, Text, ActivityIndicator, StyleSheet, useColorScheme } from 'react-native';
+import { ActivityIndicator, StyleSheet, Text, useColorScheme, View } from 'react-native';
 import { WebView } from 'react-native-webview';
-import * as NodeMobile from '@flun/nodejs-mobile-react-native';
 import runtime from './mobileApp.runtime';
 
-// 背景色解析:支持以下三种配置
-//   '#ffffff' / 'white' 等字符串 → 固定色
-//   'system'                     → 跟随系统(内部用默认浅/深色)
-//   { light: '#fff', dark: '#000' } → 按系统主题切换
+/**
+ * 背景色解析,支持三种配置:
+ *   - '#ffffff' / 'white' 等字符串:固定色
+ *   - 'system':跟随系统(内部用默认浅/深色)
+ *   - { light: '#fff', dark: '#000' }:按系统主题切换
+ * @param {string|object} bg 背景色配置
+ * @param {string|null|undefined} theme 当前系统主题
+ * @returns {string} 解析后的颜色值
+ */
 const resolveBgColor = (bg: string | { light: string; dark: string }, theme: string | null | undefined): string => {
   if (typeof bg === 'object' && bg !== null)
     return (theme === 'dark' ? bg.dark : bg.light) || bg.light || '#ffffff';
   if (bg === 'system') return theme === 'dark' ? '#121212' : '#ffffff';
   return bg || '#ffffff';
-},
-  App = () => {
-    const systemTheme = useColorScheme(),
-      [url, setUrl] = useState<string | null>(null), [failedReason, setFailedReason] = useState<string | null>(null),
-      [showDetail, setShowDetail] = useState(false),
-      styles = StyleSheet.create({
-        fill: { flex: 1 },
-        loading: { flex: 1, justifyContent: 'center', alignItems: 'center' },
-        errorContainer: {
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-          padding: 24,
-        },
-        errorTitle: { fontSize: 20, fontWeight: '600', marginBottom: 16, color: '#c00' },
-        errorHint: { fontSize: 14, textAlign: 'center', color: '#888' },
-        detailToggle: { fontSize: 13, marginTop: 24, color: '#06c' },
-        detailText: {
-          fontSize: 12,
-          marginTop: 12,
-          paddingHorizontal: 16,
-          color: '#666',
-          fontFamily: 'monospace',
-          textAlign: 'center',
-        },
-      });
-    useEffect(() => {
-      NodeMobile.start('main.js');
+};
 
-      const listener = (msg: unknown) => {
-        if (typeof msg !== 'string') return;
-        if (msg.startsWith('Node started on ')) {
-          const target = msg.slice('Node started on '.length).trim();
-          setFailedReason(null);
-          setUrl(target);
-        } else if (msg.startsWith('Node failed: ')) {
-          const reason = msg.slice('Node failed: '.length).trim();
-          setFailedReason(reason);
-        }
-      };
+/**
+ * 应用根组件:启动 Node 服务,按消息切换 loading / 错误页 / WebView
+ * >查看定义:@see {@link App}
+ * @returns {JSX.Element} 当前状态对应的视图
+ */
+const App = () => {
+  const systemTheme = useColorScheme(),
+    [url, setUrl] = useState<string | null>(null), [failedReason, setFailedReason] = useState<string | null>(null),
+    [showDetail, setShowDetail] = useState(false),
+    styles = StyleSheet.create({
+      fill: { flex: 1 },
+      loading: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+      errorContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+      },
+      errorTitle: { fontSize: 20, fontWeight: '600', marginBottom: 16, color: '#c00' },
+      errorHint: { fontSize: 14, textAlign: 'center', color: '#888' },
+      detailToggle: { fontSize: 13, marginTop: 24, color: '#06c' },
+      detailText: {
+        fontSize: 12,
+        marginTop: 12,
+        paddingHorizontal: 16,
+        color: '#666',
+        fontFamily: 'monospace',
+        textAlign: 'center',
+      },
+    });
+  useEffect(() => {
+    NodeMobile.start('main.js');
 
-      NodeMobile.channel.addListener('message', listener);
-      return () => NodeMobile.channel.removeListener('message', listener);
-    }, []);
+    const listener = (msg: unknown) => {
+      if (typeof msg !== 'string') return;
+      if (msg.startsWith('Node started on ')) {
+        const target = msg.slice('Node started on '.length).trim();
+        setFailedReason(null);
+        setUrl(target);
+      } else if (msg.startsWith('Node failed: ')) {
+        const reason = msg.slice('Node failed: '.length).trim();
+        setFailedReason(reason);
+      }
+    };
 
-    // 失败:显示错误页(用户看提示,开发者点开看详情)
-    if (failedReason) {
-      return (
-        <View style={styles.errorContainer}>
-          <Text style={styles.errorTitle}>应用启动失败</Text>
-          <Text style={styles.errorHint}>请稍后重试,或联系应用发布者</Text>
-          <Text
-            style={styles.detailToggle}
-            onPress={() => setShowDetail((v) => !v)}
-          >
-            {showDetail ? '▼ 收起详细信息' : '▶ 查看详细信息'}
-          </Text>
-          {showDetail && (
-            <Text style={styles.detailText}>{failedReason}</Text>
-          )}
-        </View>
-      );
-    }
+    NodeMobile.channel.addListener('message', listener);
+    return () => NodeMobile.channel.removeListener('message', listener);
+  }, []);
 
-    // 尚未就绪:loading
-    if (!url) {
-      if (!runtime.showLoading) return <View style={styles.fill} />;
-      return (
-        <View style={styles.loading}>
-          <ActivityIndicator size="large" />
-          <Text>{runtime.loadingText}</Text>
-        </View>
-      );
-    }
+  // 失败:显示错误页(用户看提示,开发者点开看详情)
+  if (failedReason) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorTitle}>应用启动失败</Text>
+        <Text style={styles.errorHint}>请稍后重试,或联系应用发布者</Text>
+        <Text
+          style={styles.detailToggle}
+          onPress={() => setShowDetail((v) => !v)}
+        >
+          {showDetail ? '▼ 收起详细信息' : '▶ 查看详细信息'}
+        </Text>
+        {showDetail && (
+          <Text style={styles.detailText}>{failedReason}</Text>
+        )}
+      </View>
+    );
+  }
 
+  // 尚未就绪:loading
+  if (!url) {
+    if (!runtime.showLoading) return <View style={styles.fill} />;
     return (
-      <WebView
-        source={{ uri: url }}
-        style={[styles.fill, { backgroundColor: resolveBgColor(runtime.webview.backgroundColor, systemTheme) }]}
-        originWhitelist={['*']}
-        javaScriptEnabled={runtime.webview.enableJavaScript}
-        domStorageEnabled={runtime.webview.enableDomStorage}
-        allowFileAccess={runtime.webview.allowFileAccess}
-        allowUniversalAccessFromFileURLs={true}
-        mixedContentMode={runtime.webview.mixedContentMode}
-      />
+      <View style={styles.loading}>
+        <ActivityIndicator size="large" />
+        <Text>{runtime.loadingText}</Text>
+      </View>
     );
-  };
+  }
+
+  return (
+    <WebView
+      source={{ uri: url }}
+      style={[styles.fill, { backgroundColor: resolveBgColor(runtime.webview.backgroundColor, systemTheme) }]}
+      originWhitelist={['*']}
+      javaScriptEnabled={runtime.webview.enableJavaScript}
+      domStorageEnabled={runtime.webview.enableDomStorage}
+      allowFileAccess={runtime.webview.allowFileAccess}
+      allowUniversalAccessFromFileURLs={true}
+      mixedContentMode={runtime.webview.mixedContentMode}
+    />
+  );
+};
 
 export { App };

package/template/babel.config.js

@@ -1,3 +1,9 @@
-export default {
+/**
+ * Babel 编译配置,使用 React Native 官方预设
+ * >查看定义:@see {@link babelConfig}
+ */
+const babelConfig = {
   presets: ['module:@react-native/babel-preset'],
-};
+};
+
+export default babelConfig;

package/template/eslint.config.js

@@ -1,6 +1,12 @@
 import reactNativeConfig from '@react-native/eslint-config/flat';
 
-export default [
+/**
+ * ESLint flat config,基于 React Native 官方配置
+ * >查看定义:@see {@link eslintConfig}
+ */
+const eslintConfig = [
     ...reactNativeConfig,
     // 你的自定义配置写在这里
-];
+];
+
+export default eslintConfig;

package/template/metro.config.js

@@ -3,8 +3,8 @@ import exclusionListModule from 'metro-config/private/defaults/exclusionList';
 import { dirname, resolve } from 'path';
 import { fileURLToPath } from 'url';
 
-const exclusionList = exclusionListModule.default,
-  __filename = fileURLToPath(import.meta.url), __dirname = dirname(__filename), workspaceRoot = resolve(__dirname, '..'),
+const exclusionList = exclusionListModule.default, __filename = fileURLToPath(import.meta.url),
+  __dirname = dirname(__filename), workspaceRoot = resolve(__dirname, '..'),
   config = {
     watchFolders: [__dirname, resolve(workspaceRoot, 'node_modules')],
     resolver: {
@@ -13,4 +13,10 @@ const exclusionList = exclusionListModule.default,
     }
   };
 
-export default mergeConfig(getDefaultConfig(__dirname), config);
+/**
+ * Metro 打包配置,合并默认配置与 workspace 解析路径
+ * >查看定义:@see {@link metroConfig}
+ */
+const metroConfig = mergeConfig(getDefaultConfig(__dirname), config);
+
+export default metroConfig;

package//350/207/252/345/256/232/344/271/211libnode/346/214/207/345/215/227.md

@@ -40,7 +40,7 @@
 - GitHub
   - 源码仓库:[OpenFlun/nodejs-mobile](https://github.com/OpenFlun/nodejs-mobile)
   - Release 页面:[Releases](https://github.com/OpenFlun/nodejs-mobile/releases)
-- Gitee(国内)
+- Gitee(中国)
   - 源码仓库:[OpenFlun/nodejs-mobile](https://gitee.com/OpenFlun/nodejs-mobile)
   - Release 页面:[Releases](https://gitee.com/OpenFlun/nodejs-mobile/releases)
 
@@ -221,7 +221,7 @@ Start-Sleep -Seconds 5
 ### 3.1 准备源码与 NDK
 
 ```bash
-# 克隆源码(国内推荐 Gitee)
+# 克隆源码(中国推荐 Gitee)
 git clone https://gitee.com/OpenFlun/nodejs-mobile.git
 cd nodejs-mobile