feat: support compile main-thread script to bytecode in external bundle

.changeset/flat-bikes-boil.md

@@ -0,0 +1,6 @@
+---
+"@lynx-js/lynx-bundle-rslib-config": patch
+"@lynx-js/react-umd": patch
+---
+
+Support compile main-thread script to bytecode in external bundle

packages/rspeedy/lynx-bundle-rslib-config/etc/lynx-bundle-rslib-config.api.md

@@ -45,6 +45,7 @@ export interface ExternalBundleWebpackPluginOptions {
         buffer: Buffer;
     }>;
     engineVersion?: string | undefined;
+    mainThreadChunks?: string[] | undefined;
 }
 
 // @public

packages/rspeedy/lynx-bundle-rslib-config/src/externalBundleRslibConfig.ts

@@ -453,8 +453,9 @@ export function defineExternalBundleRslibConfig(
       ),
     ],
     plugins: [
-      externalBundleEntryRsbuildPlugin(),
-      externalBundleRsbuildPlugin(encodeOptions.engineVersion),
+      externalBundleRsbuildPlugin({
+        engineVersion: encodeOptions.engineVersion,
+      }),
     ],
   }
 }
@@ -472,8 +473,12 @@ interface ExposedLayers {
  * - `<name>` for background
  * - `<name>__main-thread` for main thread
  */
-const externalBundleEntryRsbuildPlugin = (): rsbuild.RsbuildPlugin => ({
-  name: 'lynx:external-bundle-entry',
+const externalBundleRsbuildPlugin = ({
+  engineVersion,
+}: {
+  engineVersion: string | undefined
+}): rsbuild.RsbuildPlugin => ({
+  name: 'lynx:external-bundle',
   // ensure dsl plugin has exposed LAYERS
   enforce: 'post',
   setup(api) {
@@ -488,75 +493,85 @@ const externalBundleEntryRsbuildPlugin = (): rsbuild.RsbuildPlugin => ({
       )
     }
 
-    api.modifyBundlerChain((chain) => {
-      // copy entries
-      const entries = chain.entryPoints.entries() ?? {}
+    api.modifyBundlerChain(
+      async (chain, { environment: { name: libName } }) => {
+        // copy entries
+        const entries = chain.entryPoints.entries() ?? {}
 
-      chain.entryPoints.clear()
+        chain.entryPoints.clear()
 
-      const backgroundEntryName: string[] = []
-      const mainThreadEntryName: string[] = []
+        const backgroundEntryName: string[] = []
+        const mainThreadEntryName: string[] = []
+        const mainThreadChunks: string[] = []
 
-      const addLayeredEntry = (
-        entryName: string,
-        entryValue: Rspack.EntryDescription,
-      ) => {
-        chain
-          .entry(entryName)
-          .add(entryValue)
-          .end()
-      }
+        const addLayeredEntry = (
+          entryName: string,
+          entryValue: Rspack.EntryDescription,
+        ) => {
+          const isMainThread = entryValue.layer === LAYERS.MAIN_THREAD
+          if (isMainThread) {
+            mainThreadChunks.push(entryName + '.js')
+          }
 
-      Object.entries(entries).forEach(([entryName, entryPoint]) => {
-        const entryPointValue = entryPoint.values()
-
-        for (const value of entryPointValue) {
-          if (typeof value === 'string' || Array.isArray(value)) {
-            const mainThreadEntry = `${entryName}__main-thread`
-            const backgroundEntry = entryName
-            mainThreadEntryName.push(mainThreadEntry)
-            backgroundEntryName.push(backgroundEntry)
-            addLayeredEntry(mainThreadEntry, {
-              import: value,
-              layer: LAYERS.MAIN_THREAD,
-            })
-            addLayeredEntry(backgroundEntry, {
-              import: value,
-              layer: LAYERS.BACKGROUND,
-            })
-          } else {
-            // object
-            const { layer } = value
-            if (layer === LAYERS.MAIN_THREAD) {
-              mainThreadEntryName.push(entryName)
-              addLayeredEntry(entryName, {
-                ...value,
-                layer: LAYERS.MAIN_THREAD,
-              })
-            } else if (layer === LAYERS.BACKGROUND) {
-              backgroundEntryName.push(entryName)
-              addLayeredEntry(entryName, { ...value, layer: LAYERS.BACKGROUND })
-            } else {
-              // not specify layer
+          chain
+            .entry(entryName)
+            .add(entryValue)
+            .end()
+        }
+
+        Object.entries(entries).forEach(([entryName, entryPoint]) => {
+          const entryPointValue = entryPoint.values()
+
+          for (const value of entryPointValue) {
+            if (typeof value === 'string' || Array.isArray(value)) {
               const mainThreadEntry = `${entryName}__main-thread`
               const backgroundEntry = entryName
               mainThreadEntryName.push(mainThreadEntry)
               backgroundEntryName.push(backgroundEntry)
               addLayeredEntry(mainThreadEntry, {
-                ...value,
+                import: value,
                 layer: LAYERS.MAIN_THREAD,
               })
               addLayeredEntry(backgroundEntry, {
-                ...value,
+                import: value,
                 layer: LAYERS.BACKGROUND,
               })
+            } else {
+              // object
+              const { layer } = value
+              if (layer === LAYERS.MAIN_THREAD) {
+                mainThreadEntryName.push(entryName)
+                addLayeredEntry(entryName, {
+                  ...value,
+                  layer: LAYERS.MAIN_THREAD,
+                })
+              } else if (layer === LAYERS.BACKGROUND) {
+                backgroundEntryName.push(entryName)
+                addLayeredEntry(entryName, {
+                  ...value,
+                  layer: LAYERS.BACKGROUND,
+                })
+              } else {
+                // not specify layer
+                const mainThreadEntry = `${entryName}__main-thread`
+                const backgroundEntry = entryName
+                mainThreadEntryName.push(mainThreadEntry)
+                backgroundEntryName.push(backgroundEntry)
+                addLayeredEntry(mainThreadEntry, {
+                  ...value,
+                  layer: LAYERS.MAIN_THREAD,
+                })
+                addLayeredEntry(backgroundEntry, {
+                  ...value,
+                  layer: LAYERS.BACKGROUND,
+                })
+              }
             }
           }
-        }
-      })
-      // add external bundle wrapper
-      // dprint-ignore
-      chain
+        })
+        // add external bundle wrapper
+        // dprint-ignore
+        chain
         .plugin(MainThreadRuntimeWrapperWebpackPlugin.name)
         .use(MainThreadRuntimeWrapperWebpackPlugin, [{
           test: mainThreadEntryName.map((name) => new RegExp(`${escapeRegex(name)}\\.js$`)),
@@ -567,20 +582,11 @@ const externalBundleEntryRsbuildPlugin = (): rsbuild.RsbuildPlugin => ({
           test: backgroundEntryName.map((name) => new RegExp(`${escapeRegex(name)}\\.js$`)),
         }])
         .end()
-    })
-  },
-})
 
-const externalBundleRsbuildPlugin = (
-  engineVersion: string | undefined,
-): rsbuild.RsbuildPlugin => ({
-  name: 'lynx:gen-external-bundle',
-  async setup(api) {
-    const { getEncodeMode } = await import('@lynx-js/tasm')
+        const { getEncodeMode } = await import('@lynx-js/tasm')
 
-    api.modifyBundlerChain((chain, { environment: { name: libName } }) => {
-      // dprint-ignore
-      chain
+        // dprint-ignore
+        chain
         .plugin(ExternalBundleWebpackPlugin.name)
         .use(
           ExternalBundleWebpackPlugin,
@@ -589,11 +595,13 @@ const externalBundleRsbuildPlugin = (
               bundleFileName: `${libName}.lynx.bundle`,
               encode: getEncodeMode(),
               engineVersion,
+              mainThreadChunks,
             },
           ],
         )
         .end()
-    })
+      },
+    )
   },
 })
 

packages/rspeedy/lynx-bundle-rslib-config/src/webpack/ExternalBundleWebpackPlugin.ts

@@ -42,6 +42,13 @@ export interface ExternalBundleWebpackPluginOptions {
    * @defaultValue '3.5'
    */
   engineVersion?: string | undefined
+
+  /**
+   * The main thread chunks of the external bundle.
+   *
+   * @defaultValue []
+   */
+  mainThreadChunks?: string[] | undefined
 }
 
 const isDebug = (): boolean => {
@@ -128,6 +135,11 @@ export class ExternalBundleWebpackPlugin {
               return ({
                 ...prev,
                 [cur.name.replace(/\.js$/, '')]: {
+                  ...(this.options.mainThreadChunks?.includes(cur.name)
+                    ? {
+                      'encoding': 'JsBytecode',
+                    }
+                    : {}),
                   content: cur.source.source().toString(),
                 },
               })
@@ -154,6 +166,7 @@ export class ExternalBundleWebpackPlugin {
 
     const compilerOptions: Record<string, unknown> = {
       enableFiberArch: true,
+      useLepusNG: true,
       // `lynx.fetchBundle` and `lynx.loadScript` require engineVersion >= 3.5
       targetSdkVersion: this.options.engineVersion ?? '3.5',
       enableCSSInvalidation: true,

packages/rspeedy/lynx-bundle-rslib-config/test/external-bundle.test.ts

@@ -120,7 +120,7 @@
     const decodedResult = await decodeTemplate(
       path.join(fixtureDir, 'dist/utils-dual.lynx.bundle'),
     )
     expect(Object.keys(decodedResult['custom-sections']).sort()).toEqual([
       'utils',
       'utils__main-thread',
     ])
@@ -150,7 +150,7 @@
     const decodedResult = await decodeTemplate(
       path.join(fixtureDir, 'dist/utils-m.lynx.bundle'),
     )
     expect(Object.keys(decodedResult['custom-sections'])).toEqual([
       'utils',
     ])
     expect(decodedResult['custom-sections']['utils']?.includes('.define('))
@@ -238,11 +238,27 @@
     )
 
     // Check custom-sections for CSS keys
     expect(Object.keys(decodedResult['custom-sections']).sort()).toEqual([
       'index',
       'index:CSS',
       'index__main-thread',
     ])
+
+    expect(Array.isArray(decodedResult['custom-sections']['index:CSS'])).toBe(
+      true,
+    )
+    expect(decodedResult['custom-sections']['index:CSS']![0]).toBeTypeOf(
+      'number',
+    )
+
+    expect(decodedResult['custom-sections']['index']).toBeTypeOf('string')
+
+    // MTS should be bytecode
+    expect(
+      Array.isArray(decodedResult['custom-sections']['index__main-thread']),
+    ).toBe(true)
+    expect(decodedResult['custom-sections']['index__main-thread']![0])
+      .toBeTypeOf('number')
   })
 
   it('should include LoadingConsumerModulesRuntimeModule in the main-thread bundle', async () => {
@@ -270,7 +286,7 @@
     )
 
     // Check if the runtime module code injected by LoadingConsumerModulesRuntimeModule is present
     expect(decodedResult['custom-sections']['utils__main-thread']).toContain(
       'var globalModules = globalThis[Symbol.for(\'__LYNX_WEBPACK_MODULES__\')];',
     )
     vi.unstubAllEnvs()
@@ -316,7 +332,7 @@
     const prodMainThread = prodResult['custom-sections']['utils__main-thread']!
 
     // The produced artifacts should be different
     expect(devMainThread).not.toBe(prodMainThread)
 
     // __DEV__ macro should be replaced differently
     expect(devMainThread).toMatch(/isDev:\s*(!0|true)/)
@@ -401,7 +417,7 @@
     const decodedResult = await decodeTemplate(
       path.join(fixtureDir, 'dist/utils-reactlynx.lynx.bundle'),
     )
     expect(Object.keys(decodedResult['custom-sections']).sort()).toEqual([
       'utils',
       'utils__main-thread',
     ])
@@ -455,7 +471,7 @@
         'dist/utils-reactlynx-preset.lynx.bundle',
       ),
     )
     expect(Object.keys(decodedResult['custom-sections']).sort()).toEqual([
       'utils',
       'utils__main-thread',
     ])
@@ -502,7 +518,7 @@
     expect(decodedResult['custom-sections']['utils']).toContain(
       'globalThis[Symbol.for("__LYNX_EXTERNAL_GLOBAL__")].CustomRuntime.React',
     )
     expect(decodedResult['custom-sections']['utils__main-thread']).toContain(
       'globalThis[Symbol.for("__LYNX_EXTERNAL_GLOBAL__")].CustomRuntime.React',
     )
     expect(decodedResult['custom-sections']['utils']).not.toContain(
@@ -627,7 +643,7 @@
         'dist/utils-reactlynx-globalThis.lynx.bundle',
       ),
     )
     expect(Object.keys(decodedResult['custom-sections']).sort()).toEqual([
       'utils',
       'utils__main-thread',
     ])
@@ -721,7 +737,7 @@
   })
 
   it('should handle macros', () => {
     expect(Object.keys(decodedResult['custom-sections']).sort()).toEqual([
       'utils',
       'utils__main-thread',
     ])