@expo-harmony/expo__log-box 55.0.12-harmony.1

package/README.md

@@ -0,0 +1,47 @@
+# @expo-harmony/expo__log-box
+
+[**GitHub 仓库**](https://github.com/renbaoshuo/expo-harmony/tree/master/packages/expo__log-box)
+
+为 HarmonyOS 开发构建提供 Expo LogBox 的日志检查器和原生错误页面，与官方 `@expo/log-box` 配套使用。
+
+## 安装
+
+```bash
+npm install @expo-harmony/expo__log-box @expo/log-box@55.0.12
+```
+
+本包适配 Expo SDK 55 的 `@expo/log-box`，提供鸿蒙端的原生视图和错误页。原生模块和视图通过 Expo Harmony 自动链接。最低支持 HarmonyOS 5.0.1（API 13），宿主的 `compatibleSdkVersion` 也要满足这一要求。Expo LogBox 是实验功能，安装后还需要注册配置插件并组合 Metro 配置，两者都要求设置 `EXPO_UNSTABLE_LOG_BOX=1`，见下文。
+
+## Config Plugin
+
+在 `app.json` 的 `plugins` 中注册插件。
+
+```json
+{
+  "expo": {
+    "plugins": ["@expo-harmony/expo__log-box"],
+    "harmony": { "bundleName": "com.example.app" }
+  }
+}
+```
+
+再在 `metro.config.js` 中组合配置。
+
+```js
+const { getDefaultConfig } = require('expo/metro-config');
+const { withHarmonyConfig } = require('@expo-harmony/metro-config');
+const { withLogBox } = require('@expo-harmony/expo__log-box/metro');
+
+module.exports = withLogBox(withHarmonyConfig(getDefaultConfig(__dirname)));
+```
+
+prebuild、原生构建和 Metro 启动均需设置 `EXPO_UNSTABLE_LOG_BOX=1`（也接受 `true`）。插件把开关写入原生工程配置，原生端只在 debug 构建中启用。变更开关后需重新生成并构建应用，只启用 Metro 时会报告原生配置不匹配。
+
+`@expo-harmony/expo__log-box` 的 `withLogBox` 只改写 HarmonyOS 平台上的模块解析，其他平台和其他包不受影响。
+
+## Author
+
+**expo-harmony** © [Baoshuo](https://github.com/renbaoshuo), Released under the MIT License.<br>
+Authored and maintained by Baoshuo with help from [contributors](https://github.com/renbaoshuo/expo-harmony/contributors).
+
+> [Personal Website](https://baoshuo.ren) · [Blog](https://blog.baoshuo.ren) · GitHub [@renbaoshuo](https://github.com/renbaoshuo) · Twitter [@renbaoshuo](https://twitter.com/renbaoshuo)

package/app.plugin.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const { createRunOncePlugin } = require('@expo/config-plugins');
+const { HarmonyManifest, registerHarmonyConfigPlugin, withModuleJson } = require('@expo-harmony/config-plugins');
+const pkg = require('./package.json');
+
+function withLogBox(config) {
+  if (!config.harmony?.bundleName && !config.platforms?.includes('harmony')) return config;
+  config = registerHarmonyConfigPlugin(config, pkg.name);
+
+  return withModuleJson(config, (mod) => {
+    const enabled = ['1', 'true'].includes(process.env.EXPO_UNSTABLE_LOG_BOX?.toLowerCase());
+    HarmonyManifest.setMetadata(mod.modResults.module, {
+      name: 'expo.logBox.enabled',
+      value: String(enabled),
+    });
+    return mod;
+  });
+}
+
+module.exports = createRunOncePlugin(withLogBox, pkg.name, pkg.version);

package/expo-module.config.json

@@ -0,0 +1,19 @@
+{
+  "platforms": [
+    "harmony"
+  ],
+  "harmony": {
+    "modules": [
+      "ExpoLogBoxModule"
+    ],
+    "rootViewComponents": [
+      "ExpoLogBoxRootView"
+    ],
+    "reactNativeHostHandlers": [
+      "ExpoLogBoxReactNativeHostHandler"
+    ],
+    "runtimeBindings": [
+      "ExpoLogBoxRuntimeBinding"
+    ]
+  }
+}

package/harmony/library/oh-package.json5

@@ -0,0 +1,24 @@
+{
+  "name": "@expo-harmony/expo__log-box",
+  "version": "55.0.12-harmony.1",
+  "description": "HarmonyOS port of @expo/log-box",
+  "keywords": [
+    "react-native",
+    "expo",
+    "expo-harmony",
+    "harmonyos"
+  ],
+  "homepage": "https://github.com/renbaoshuo/expo-harmony/tree/master/packages/expo__log-box#readme",
+  "repository": "https://github.com/renbaoshuo/expo-harmony",
+  "author": {
+    "name": "Baoshuo",
+    "email": "i@baoshuo.ren",
+    "url": "https://github.com/renbaoshuo"
+  },
+  "main": "Index.ets",
+  "license": "MIT",
+  "dependencies": {
+    "@expo-harmony/expo-modules-core": "55.0.25-harmony.4",
+    "@rnoh/react-native-openharmony": "0.84.1"
+  }
+}

package/index.d.ts

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

package/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = Object.freeze({});

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@expo-harmony/expo__log-box",
+  "version": "55.0.12-harmony.1",
+  "description": "HarmonyOS port of @expo/log-box",
+  "keywords": [
+    "react-native",
+    "expo",
+    "expo-harmony",
+    "harmonyos"
+  ],
+  "homepage": "https://github.com/renbaoshuo/expo-harmony/tree/master/packages/expo__log-box#readme",
+  "bugs": "https://github.com/renbaoshuo/expo-harmony/issues",
+  "license": "MIT",
+  "author": "Baoshuo <i@baoshuo.ren>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/renbaoshuo/expo-harmony.git",
+    "directory": "packages/expo__log-box"
+  },
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": "./index.js",
+    "./metro": "./plugin/withLogBox.js",
+    "./app.plugin.js": "./app.plugin.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "harmony:clean": "expo-harmony-module prepare --clean-only",
+    "harmony:build": "node ./scripts/sync-log-box-bundle.mjs && expo-harmony-module prepare",
+    "prepack": "node ./scripts/sync-log-box-bundle.mjs && expo-harmony-module prepack"
+  },
+  "peerDependencies": {
+    "@expo-harmony/expo-modules-core": "55.0.25-harmony.4",
+    "@expo/log-box": "55.0.12",
+    "expo": "55.0.26",
+    "expo-modules-core": "55.0.25",
+    "react": "^19.2.0",
+    "react-native": "^0.83.6 || ^0.84.1"
+  },
+  "dependencies": {
+    "@expo-harmony/config-plugins": "55.0.10-harmony.5",
+    "@expo/config-plugins": "55.0.10"
+  },
+  "devDependencies": {
+    "@expo-harmony/expo-module-scripts": "55.0.0-harmony.4",
+    "@expo-harmony/expo-modules-core": "55.0.25-harmony.4",
+    "@expo/log-box": "55.0.12",
+    "@react-native-oh/react-native-harmony": "0.84.1",
+    "expo": "55.0.26",
+    "expo-modules-core": "55.0.25",
+    "react": "19.2.3",
+    "react-native": "0.84.1",
+    "stacktrace-parser": "0.1.11"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/plugin/withLogBox.js

@@ -0,0 +1,38 @@
+'use strict';
+
+const path = require('node:path');
+
+/** Keep Expo's inspector/parser; adapt only its DOM host on Harmony. */
+function withLogBox(config) {
+  const resolve = config.resolver?.resolveRequest;
+  const root = path.dirname(require.resolve('@expo/log-box/package.json'));
+  const inspector = path.join(root, 'swap-rn-logbox.js');
+  const parser = path.join(root, 'swap-rn-logbox-parser.js');
+  const nativeInspector = path.join(root, 'src/logbox-rn-polyfill.tsx');
+  const dom = path.join(root, 'src/logbox-dom-polyfill.tsx');
+  const enabled = ['1', 'true'].includes(process.env.EXPO_UNSTABLE_LOG_BOX?.toLowerCase());
+
+  return {
+    ...config,
+    resolver: {
+      ...config.resolver,
+      resolveRequest: Object.assign(function resolveRequest(context, name, platform) {
+        const result = (resolve ?? context.resolveRequest)(context, name, platform);
+        if (platform !== 'harmony' || !enabled || result.type !== 'sourceFile') return result;
+
+        if (result.filePath.endsWith('/Libraries/LogBox/LogBoxInspectorContainer.js')) {
+          return { type: 'sourceFile', filePath: inspector };
+        }
+        if (result.filePath.endsWith('/Libraries/LogBox/Data/parseLogBoxLog.js')) {
+          return { type: 'sourceFile', filePath: parser };
+        }
+        if (context.originModulePath === nativeInspector && result.filePath === dom) {
+          return { type: 'sourceFile', filePath: path.join(__dirname, '../src/LogBoxDOMView.tsx') };
+        }
+        return result;
+      }, { harmonyRuntime: resolve?.harmonyRuntime }),
+    },
+  };
+}
+
+module.exports = { withLogBox };

package/src/LogBoxDOMView.tsx

@@ -0,0 +1,66 @@
+import React, { useRef } from 'react';
+import { requireNativeModule, requireNativeViewManager } from 'expo-modules-core';
+import { View, type ViewProps } from 'react-native';
+import type LogBoxPolyfillDOM from '@expo/log-box/src/logbox-dom-polyfill';
+import { getInjectEventScript, NATIVE_ACTION, NATIVE_ACTION_RESULT } from 'expo/src/dom/injection';
+
+type Props = React.ComponentProps<typeof LogBoxPolyfillDOM>;
+type NativeRef = { injectJavaScript(script: string): Promise<void> };
+type NativeProps = ViewProps & {
+  payload: string;
+  onMessage(event: { nativeEvent: { data: string } }): void;
+  ref: React.Ref<NativeRef>;
+};
+
+const NativeView = requireNativeViewManager<NativeProps>('ExpoLogBox');
+
+export default function LogBoxDOMView({ dom, ...props }: Props) {
+  const ref = useRef<NativeRef>(null);
+  const native = requireNativeModule<{ enabled: boolean; copyTextAsync(text: string): Promise<void> }>('ExpoLogBox');
+  if (!native.enabled) {
+    throw new Error('Expo LogBox requires EXPO_UNSTABLE_LOG_BOX=1 for both Harmony prebuild and Metro. Rebuild the application after enabling the plugin.');
+  }
+
+  const actions: Record<string, unknown> = {
+    ...Object.fromEntries(Object.entries(props).filter(([, value]) => typeof value === 'function')),
+    // RNOH 0.84 has neither the public Clipboard export nor its native module.
+    onCopyText: (text: string) => native.copyTextAsync(text),
+  };
+  const payload = JSON.stringify({
+    names: Object.keys(actions),
+    props: Object.fromEntries(Object.entries(props).filter(([, value]) => typeof value !== 'function')),
+  });
+
+  const onMessage: NativeProps['onMessage'] = async ({ nativeEvent }) => {
+    const { type, data } = JSON.parse(nativeEvent.data);
+    if (type !== NATIVE_ACTION || typeof data?.uid !== 'string' || typeof data.actionId !== 'string') return;
+
+    const view = ref.current;
+    const { uid, actionId, args } = data;
+    let result: unknown;
+    let error: { message: string; stack?: string } | undefined;
+
+    try {
+      const action = actions[actionId];
+      if (!Object.hasOwn(actions, actionId) || typeof action !== 'function' || !Array.isArray(args)) {
+        throw new Error(`Invalid LogBox action: ${actionId}`);
+      }
+      result = await (action as (...args: unknown[]) => unknown)(...args);
+    } catch (cause) {
+      error = cause instanceof Error ? { message: cause.message, stack: cause.stack } : { message: String(cause) };
+    }
+
+    // Dismiss/reload can unmount this view while an action is pending.
+    if (view && view === ref.current) {
+      await view.injectJavaScript(getInjectEventScript({
+        type: NATIVE_ACTION_RESULT, data: { uid, actionId, result, error },
+      }));
+    }
+  };
+
+  return (
+    <View style={[{ flex: 1 }, dom?.containerStyle]}>
+      <NativeView ref={ref} payload={payload} onMessage={onMessage} style={[{ flex: 1 }, dom?.style]} />
+    </View>
+  );
+}