feat: refactor web mainthread implementation in rust

.changeset/cold-parts-tan.md

@@ -0,0 +1,3 @@
+---
+
+---

.changeset/config.json

@@ -37,7 +37,8 @@
   },
   "ignore": [
     "@lynx-js/web-tests",
-    "@lynx-js/example-react"
+    "@lynx-js/example-react",
+    "@lynx-js/web-core-wasm-e2e"
   ],
   "changedFilePatterns": [
     "src/**"

.github/workflows/test.yml

@@ -92,6 +92,7 @@ jobs:
       runs-on: lynx-custom-container
       is-web: true
       codecov-flags: "e2e"
+      web-report-path: "packages/web-platform/web-elements/playwright-report"
       run: |
         export NODE_OPTIONS="--max-old-space-size=32768"
         export PLAYWRIGHT_JUNIT_OUTPUT_NAME=test-report.junit.xml
@@ -128,6 +129,30 @@ jobs:
         export PLAYWRIGHT_JUNIT_OUTPUT_NAME=test-report.junit.xml
         pnpm --filter @lynx-js/web-tests run test --reporter='github,dot,junit,html' --shard=${{ matrix.shard }}/4
         pnpm --filter @lynx-js/web-tests run coverage:ci
+  web-core-wasm-e2e:
+    needs: build
+    uses: ./.github/workflows/workflow-test.yml
+    secrets:
+      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+    name: Playwright ${{ matrix.render }} (${{ matrix.shard }}/2)
+    strategy:
+      fail-fast: false
+      matrix:
+        render: [CSR]
+        shard: [1, 2]
+    with:
+      runs-on: lynx-custom-container
+      is-web: true
+      web-report-name: "playwright-${{ matrix.render }}-shard${{ matrix.shard }}"
+      web-report-path: "packages/web-platform/web-core-wasm-e2e/playwright-report"
+      codecov-flags: "e2e"
+      run: |
+        if [ "${{ matrix.render }}" = "SSR" ]; then
+          export ENABLE_SSR=true
+        fi
+        export NODE_OPTIONS="--max-old-space-size=32768"
+        export PLAYWRIGHT_JUNIT_OUTPUT_NAME=test-report.junit.xml
+        pnpm --filter @lynx-js/web-core-wasm-e2e run test --reporter='github,dot,junit,html' --shard=${{ matrix.shard }}/4
   test-api:
     needs: build
     uses: ./.github/workflows/workflow-test.yml

.github/workflows/workflow-test.yml

@@ -21,6 +21,10 @@ on:
         required: false
         type: string
         default: "playwright-report"
+      web-report-path:
+        required: false
+        type: string
+        default: "packages/web-platform/web-tests/playwright-report"
       codecov-flags:
         required: false
         type: string
@@ -94,7 +98,7 @@ jobs:
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
         with:
           name: ${{ inputs.web-report-name }}
-          path: packages/web-platform/web-tests/playwright-report
+          path: ${{ inputs.web-report-path}}
           if-no-files-found: error
           retention-days: 1
           overwrite: true

AGENTS.md

@@ -245,6 +245,7 @@ These instructions were generated through comprehensive analysis and testing of
 - Includes E2E test suite requiring Playwright
 - Many packages have complex interdependencies
 - Contains performance-critical rendering code
+- See `packages/web-platform/web-core-wasm/AGENTS.md` for specific instructions on `web-core-wasm`.
 
 Remember: This is a complex, multi-language monorepo. Always allow extra time for builds and tests, and follow the exact command sequences provided.
 

packages/web-platform/playwright-fixtures/src/coverage-fixture.ts

@@ -5,7 +5,7 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-
+import { existsSync } from 'node:fs';
 import { test as base } from '@playwright/test';
 import type { Page } from '@playwright/test';
 import v8ToIstanbul from 'v8-to-istanbul';
@@ -36,8 +36,19 @@ export const test: typeof base = base.extend({
     await Promise.all(
       Array.from(pages.values()).flatMap(async (page, index) => {
         const coverage = await page.coverage.stopJSCoverage();
-        const converter = v8ToIstanbul(
+        const sourceFilePath = [
           path.join(path.dirname(testInfo.file), '..', 'www', 'main.js'),
+          path.join(
+            path.dirname(testInfo.file),
+            '..',
+            'www',
+            'static',
+            'js',
+            'index.js',
+          ),
+        ].find((p) => existsSync(p))!;
+        const converter = v8ToIstanbul(
+          sourceFilePath,
         );
         await converter.load();
 

packages/web-platform/web-core-wasm-e2e/resources/web-core.main-thread.json

@@ -0,0 +1,31 @@
+{
+  "styleInfo": {},
+  "lepusCode": {
+    "root": "const self = globalThis.parent??globalThis;self.runtime = globalThis;self.__lynx_worker_type = 'main'; globalThis.registerDataProcessor='pass'; self.registerDataProcessor = registerDataProcessor;",
+    "manifest-chunk.js": "module.exports = 'hello';",
+    "manifest-chunk2.js": "module.exports = 'world';"
+  },
+  "manifest": {
+    "/app-service.js": "globalThis.runtime = lynxCoreInject.tt; globalThis.__lynx_worker_type = 'background'",
+    "/manifest-chunk.js": "module.exports = 'hello';",
+    "/manifest-chunk2.js": "module.exports = 'world';",
+    "/json": "{}"
+  },
+  "customSections": {},
+  "cardType": "react",
+  "appType": "card",
+  "pageConfig": {
+    "enableFiberArch": true,
+    "useLepusNG": true,
+    "enableReuseContext": true,
+    "bundleModuleMode": "ReturnByFunction",
+    "templateDebugUrl": "",
+    "debugInfoOutside": true,
+    "defaultDisplayLinear": true,
+    "enableCSSInvalidation": true,
+    "enableCSSSelector": true,
+    "enableLepusDebug": false,
+    "enableRemoveCSSScope": true,
+    "targetSdkVersion": "2.10"
+  }
+}

packages/web-platform/web-core-wasm-e2e/rsbuild.config.ts

@@ -1,5 +1,4 @@
 import { defineConfig } from '@rsbuild/core';
-import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -31,6 +30,7 @@ export default defineConfig({
         watch: false,
       },
     ],
+    htmlFallback: false,
   },
   html: {
     tags: [

packages/web-platform/web-core-wasm-e2e/shell-project/index.ts

@@ -21,13 +21,125 @@ export const lynxViewTests = (
   });
   if (!lynxView.parentElement) document.body.append(lynxView);
 
-  Object.assign(globalThis, { lynxView });
+  const nativeModulesMap = {
+    CustomModule: URL.createObjectURL(
+      new Blob(
+        [
+          `export default function(NativeModules, NativeModulesCall) {
+      return {
+        async getColor(data, callback) {
+          const color = await NativeModulesCall('getColor', data);
+          callback(color);
+        },
+      }
+    };`,
+        ],
+        { type: 'text/javascript' },
+      ),
+    ),
+  };
+  lynxView.nativeModulesMap = nativeModulesMap;
+  const color_environment = URL.createObjectURL(
+    new Blob(
+      [
+        `export default function(NapiModules, NapiModulesCall) {
+    return {
+      getColor() {
+        NapiModules.color_methods.getColor({ color: 'green' }, color => {
+          console.log(color);
+        });
+      },
+      ColorEngine: class ColorEngine {
+        getColor(name) {
+          NapiModules.color_methods.getColor({ color: 'green' }, color => {
+            console.log(color);
+          });
+        }
+      },
+    };
+  };`,
+      ],
+      { type: 'text/javascript' },
+    ),
+  );
+
+  const color_methods = URL.createObjectURL(
+    new Blob(
+      [
+        `export default function(NapiModules, NapiModulesCall) {
+    return {
+      async getColor(data, callback) {
+        const color = await NapiModulesCall('getColor', data);
+        callback(color);
+      },
+    };
+  };`,
+      ],
+      { type: 'text/javascript' },
+    ),
+  );
+  const event_method = URL.createObjectURL(
+    new Blob(
+      [
+        `export default function(NapiModules, NapiModulesCall, handleDispatch) {
+    return {
+      async bindEvent() {
+        await NapiModulesCall('bindEvent');
+        handleDispatch((data) => console.log(\`bts:\${data}\`));
+      },
+    };
+  };`,
+      ],
+      { type: 'text/javascript' },
+    ),
+  );
+
+  lynxView.napiModulesMap = {
+    color_environment,
+    color_methods,
+    event_method,
+  };
+  lynxView.onNapiModulesCall = async (
+    name,
+    data,
+    moduleName,
+    dispatchNapiModules,
+  ) => {
+    if (name === 'getColor' && moduleName === 'color_methods') {
+      return {
+        data: { color: data.color, tagName: lynxView.tagName },
+      };
+    }
+    if (name === 'bindEvent' && moduleName === 'event_method') {
+      document.querySelector('lynx-view')?.addEventListener('click', () => {
+        dispatchNapiModules('lynx-view');
+      });
+      return;
+    }
+    return undefined;
+  };
+
+  lynxView.initI18nResources = [
+    {
+      options: {
+        locale: 'en',
+        channel: '1',
+        fallback_url: '',
+      },
+      resource: {
+        hello: 'hello',
+        lynx: 'lynx web platform1',
+      },
+    },
+  ];
+
   return lynxView;
 };
 
 const searchParams = new URLSearchParams(document.location.search);
 const casename = searchParams.get('casename');
 const casename2 = searchParams.get('casename2');
+const resourceName = searchParams.get('resourceName');
 const hasdir = searchParams.get('hasdir') === 'true';
 const isSSR = document.location.pathname.includes('ssr');
 
@@ -42,12 +154,15 @@ if (casename) {
   const lynxView = lynxViewTests(
     document.querySelector('lynx-view') as LynxViewElement | undefined,
   );
+
+  if (casename === 'api-inject-style-rules') {
+    lynxView.injectStyleRules = [`.injected-style-rules{background:green}`];
+  }
   lynxView.setAttribute('url', lynxTemplateUrl);
   lynxView.id = 'lynxview1';
   if (casename2) {
     lynxView.setAttribute('lynx-group-id', '2');
   }
-  lynxView.injectStyleRules = [`.injected-style-rules{background:green}`];
   if (casename === 'api-nativemodules-call-delay') {
     setTimeout(() => {
       lynxView.onNativeModulesCall = (name, data, moduleName) => {
@@ -78,3 +193,9 @@ if (casename) {
 } else {
   console.error('cannot find casename');
 }
+if (resourceName) {
+  const lynxView = lynxViewTests(
+    document.querySelector('lynx-view') as LynxViewElement | undefined,
+  );
+  lynxView.setAttribute('url', `/resources/${resourceName}`);
+}