feat: support load bts chunk from remote address

.changeset/puny-pens-cry.md

@@ -0,0 +1,12 @@
+---
+"@lynx-js/web-worker-runtime": patch
+"@lynx-js/web-constants": patch
+"@lynx-js/web-core": patch
+---
+
+feat: support load bts chunk from remote address
+
+- re-support chunk splitting
+- support lynx.requireModule with a json file
+- support lynx.requireModule, lynx.requireModuleAsync with a remote url
+- support to add a breakpoint in chrome after reloading the web page

packages/web-platform/web-constants/src/types/LynxModule.ts

@@ -41,6 +41,46 @@ export interface LynxTemplate {
   appType: 'card' | 'lazy';
 }
 
+export type BTSChunkEntry = (
+  module: { exports: unknown },
+  exports: unknown,
+  lynxCoreInject: unknown,
+  Card: unknown,
+  setTimeout: unknown,
+  setInterval: unknown,
+  clearInterval: unknown,
+  clearTimeout: unknown,
+  NativeModules: unknown,
+  Component: unknown,
+  ReactLynx: unknown,
+  nativeAppId: unknown,
+  Behavior: unknown,
+  LynxJSBI: unknown,
+  lynx: unknown,
+  // BOM API
+  window: unknown,
+  document: unknown,
+  frames: unknown,
+  location: unknown,
+  navigator: unknown,
+  localStorage: unknown,
+  history: unknown,
+  Caches: unknown,
+  screen: unknown,
+  alert: unknown,
+  confirm: unknown,
+  prompt: unknown,
+  fetch: unknown,
+  XMLHttpRequest: unknown,
+  webkit: unknown,
+  Reporter: unknown,
+  print: unknown,
+  global: unknown,
+  // Lynx API
+  requestAnimationFrame: unknown,
+  cancelAnimationFrame: unknown,
+) => unknown;
+
 export interface LynxJSModule {
   exports?: (lynx_runtime: any) => unknown;
 }

packages/web-platform/web-constants/src/types/NativeApp.ts

@@ -123,11 +123,14 @@ export interface NativeApp {
 
   cancelAnimationFrame: (id: number) => void;
 
+  readScript: (sourceURL: string, entryName?: string) => string;
+
   loadScript: (sourceURL: string, entryName?: string) => BundleInitReturnObj;
 
   loadScriptAsync(
     sourceURL: string,
     callback: (message: string | null, exports?: BundleInitReturnObj) => void,
+    entryName?: string,
   ): void;
   nativeModuleProxy: Record<string, any>;
 

packages/web-platform/web-constants/src/utils/generateTemplate.ts

@@ -9,65 +9,23 @@ const globalDisallowedVars = ['navigator', 'postMessage'];
 type templateUpgrader = (template: LynxTemplate) => LynxTemplate;
 const templateUpgraders: templateUpgrader[] = [
   (template) => {
-    const defaultInjectStr = [
-      'Card',
-      'setTimeout',
-      'setInterval',
-      'clearInterval',
-      'clearTimeout',
-      'NativeModules',
-      'Component',
-      'ReactLynx',
-      'nativeAppId',
-      'Behavior',
-      'LynxJSBI',
-      'lynx',
-
-      // BOM API
-      'window',
-      'document',
-      'frames',
-      'location',
-      'navigator',
-      'localStorage',
-      'history',
-      'Caches',
-      'screen',
-      'alert',
-      'confirm',
-      'prompt',
-      'fetch',
-      'XMLHttpRequest',
-      '__WebSocket__', // We would provide `WebSocket` using `ProvidePlugin`
-      'webkit',
-      'Reporter',
-      'print',
-      'global',
-
-      // Lynx API
-      'requestAnimationFrame',
-      'cancelAnimationFrame',
-    ].join(',');
     template.appType = template.appType ?? (template.lepusCode.root.startsWith(
         '(function (globDynamicComponentEntry',
       )
       ? 'lazy'
       : 'card');
-    /**
-     * The template version 1 has no module wrapper for bts code
-     */
-    template.manifest = Object.fromEntries(
-      Object.entries(template.manifest).map(([key, value]) => [
-        key,
-        `module.exports={init: (lynxCoreInject) => { var {${defaultInjectStr}} = lynxCoreInject.tt; var module = {exports:{}}; var exports=module.exports; ${value}\n return module.exports; } }`,
-      ]),
-    ) as typeof template.manifest;
     template.version = 2;
+    template.lepusCode = Object.fromEntries(
+      Object.entries(template.lepusCode).filter(([_, content]) =>
+        typeof content === 'string'
+      ),
+    ) as typeof template.lepusCode;
     return template;
   },
 ];
 
 const generateModuleContent = (
+  fileName: string,
   content: string,
   eager: boolean,
   appType: 'card' | 'lazy',
@@ -90,6 +48,8 @@ const generateModuleContent = (
     appType !== 'card' ? 'module.exports=\n' : '',
     content,
     '\n})()',
+    '\n//# sourceURL=',
+    fileName,
   ].join('');
 
 async function generateJavascriptUrl<T extends Record<string, string | {}>>(
@@ -99,21 +59,24 @@ async function generateJavascriptUrl<T extends Record<string, string | {}>>(
   appType: 'card' | 'lazy',
   templateName?: string,
 ): Promise<T> {
-  const processEntry = async ([name, content]: [string, string]) => [
-    name,
-    await createJsModuleUrl(
-      generateModuleContent(
-        content,
-        eager,
-        appType,
-      ),
-      `${templateName}-${name.replaceAll('/', '')}.js`,
-    ),
-  ];
   return Promise.all(
     (Object.entries(obj).filter(([_, content]) =>
       typeof content === 'string'
-    ) as [string, string][]).map(processEntry),
+    ) as [string, string][]).map(async ([name, content]) => {
+      const fileName = `${templateName}/${name.replaceAll('/', '_')}.js`;
+      return [
+        name,
+        await createJsModuleUrl(
+          generateModuleContent(
+            fileName,
+            content,
+            eager,
+            appType,
+          ),
+          fileName,
+        ),
+      ];
+    }),
   ).then(
     Object.fromEntries,
   );
@@ -124,7 +87,7 @@ export async function generateTemplate(
   createJsModuleUrl:
     | ((content: string, name: string) => Promise<string>)
     | ((content: string) => string),
-  templateName?: string,
+  templateName: string,
 ): Promise<LynxTemplate> {
   template.version = template.version ?? 1;
   if (template.version > currentSupportedTemplateVersion) {
@@ -148,12 +111,5 @@ export async function generateTemplate(
       template.appType!,
       templateName,
     ),
-    manifest: await generateJavascriptUrl(
-      template.manifest,
-      createJsModuleUrl as (content: string, name: string) => Promise<string>,
-      false,
-      template.appType!,
-      templateName,
-    ),
   };
 }

packages/web-platform/web-core/src/utils/loadTemplate.ts

@@ -35,6 +35,7 @@ export function createTemplateLoader(
           const decodedTemplate = await generateTemplate(
             template,
             createJsModuleUrl,
+            encodeURIComponent(url),
           );
           resolve(decodedTemplate);
         } catch (e) {

packages/web-platform/web-tests/resources/web-core.main-thread.json

@@ -8,7 +8,8 @@
   "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';"
+    "/manifest-chunk2.js": "module.exports = 'world';",
+    "/json": "{}"
   },
   "customSections": {},
   "cardType": "react",

packages/web-platform/web-tests/tests/react.spec.ts

@@ -1,3 +1,3 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
@@ -23,7 +23,7 @@
     ReturnType<typeof expect<Page>>['toHaveScreenshot']
   >[0],
 ) => {
   await expect(page).toHaveScreenshot([
     `${caseName}`,
     `${subcaseName}`,
     `${label}.png`,
@@ -71,7 +71,7 @@
       await goto(page, title);
       await wait(100);
       const target = await page.locator('#target');
       await expect(target).toHaveCSS('height', '100px');
       await expect(target).toHaveCSS('width', '100px');
       await expect(target).toHaveCSS('background-color', 'rgb(255, 192, 203)');
     });
@@ -81,7 +81,7 @@
       await goto(page, title);
       await wait(100);
       const target = page.locator('#target');
       await target.click();
       await wait(100);
       await expect(await target.getAttribute('style')).toContain('green');
       await page.evaluate(() => {
@@ -107,13 +107,13 @@
           )
             .filter(i => i.getAttribute('lynx-tag') === 'page').length
         ),
       ).toBe(1);
     });
     test('basic-bindtap', async ({ page }, { title }) => {
       await goto(page, title);
       await wait(100);
       const target = page.locator('#target');
       await target.click();
       await wait(100);
       await expect(await target.getAttribute('style')).toContain('green');
       await target.click();
@@ -124,7 +124,7 @@
       await goto(page, title);
       await wait(100);
       const target = page.locator('#target');
       await target.click();
       await wait(100);
       await expect(await target.getAttribute('style')).toContain('green');
       await target.click();
@@ -379,7 +379,7 @@
           xDistance: 10,
           yDistance: 0,
         });
         expect(page.locator('#target1'), 'has touches').toHaveCSS(
           'background-color',
           'rgb(0, 128, 0)',
         ); // green
@@ -1593,7 +1593,7 @@
       await goto(page, title);
       await wait(100);
       const target = page.locator('#target');
       await expect(target).toHaveCSS('background-color', 'rgb(255, 192, 203)'); // pink
       await page.evaluate(() => {
         // @ts-expect-error
         globalThis.lynxView.sendGlobalEvent('event-test', ['change']);
@@ -1608,7 +1608,7 @@
       await goto(page, title);
       await wait(100);
       const result = page.locator('#result');
       await expect(result).toHaveCSS('background-color', 'rgb(255, 192, 203)'); // pink
       await page.locator('#target').click();
       await wait(100);
       await expect(result).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
@@ -1617,7 +1617,7 @@
       await goto(page, title);
       await wait(100);
       const result = page.locator('#result');
       await expect(result).toHaveCSS('background-color', 'rgb(255, 192, 203)'); // pink
       await page.locator('#target').click();
       await wait(100);
       await expect(result).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
@@ -1672,8 +1672,8 @@
         });
         await goto(page, title);
         await wait(200);
         !isSSR && expect(mts).toBe(true);
         expect(bts).toBe(true);
       },
     );
     test(
@@ -1691,7 +1691,7 @@
         });
         await goto(page, title);
         await wait(200);
         !isSSR && expect(mts).toBe(true);
         expect(bts).toBe(true);
       },
     );
@@ -1872,7 +1872,6 @@
     test(
       'config-splitchunk-split-by-experience',
       async ({ page }, { title }) => {
-        test.skip(true, 'incorrectly implemented test case');
         await goto(page, title, undefined, true);
         await wait(1500);
         const target = page.locator('#target');
@@ -1882,7 +1881,6 @@
     test(
       'config-splitchunk-split-by-module',
       async ({ page }, { title }) => {
-        test.skip(true, 'incorrectly implemented test case');
         await goto(page, title, undefined, true);
         await wait(1500);
         const target = page.locator('#target');
@@ -2196,7 +2194,7 @@
           await wait(300);
           // --initialtextinitial
           let count = await page.getByText('--').count();
           expect(count).toBe(1);
           count = await page.getByText('initial').count();
           expect(count).toBeGreaterThanOrEqual(1);
           await page.locator('#target').click();
@@ -2901,7 +2899,7 @@
         await page.locator('input').press('Enter');
         await wait(100);
         const result = await page.locator('.result').first().innerText();
         expect(result).toBe('bindconfirm');
       });
       // input/bindconfirm test-case end
 
@@ -2950,7 +2948,7 @@
               )?.click();
           });
           await wait(200);
           expect(val).toBe(true);
           expect(selectionBegin).toBe(true);
           expect(selectionEnd).toBe(true);
         },
@@ -4220,7 +4218,7 @@
             // NOTE: dataset is not included in the previous json value, so we should
             // manually find it from the JSHandle.
             const dataset = await (
               await (await msg.args()[0]!.getProperty('target')).getProperty(
                 'dataset',
               )
             ).jsonValue();
@@ -4259,7 +4257,7 @@
           await wait(100);
           expect(bindblur).toBeTruthy();
           expect(bindfocus).toBeTruthy();
           expect(bindinput).toBeTruthy();
         },
       );
       // x-textarea/bindinput test-case end

packages/web-platform/web-tests/tests/web-core.test.ts

@@ -167,7 +167,7 @@
     );
     await goto(page);
     const mainWorker = await getMainThreadWorker(page);
     await mainWorker.evaluate(() => {
       globalThis.runtime.renderPage = () => {};
     });
     const worker = await getBackgroundThreadWorker(page);
@@ -204,10 +204,28 @@
     expect(success).toBe(true);
     expect(fail).toBe(false);
   });
+
+  test('api-nativeApp-readScript', async ({ page, browserName }) => {
+    // firefox dose not support this.
+    test.skip(browserName === 'firefox');
+    await goto(page);
+    const mainWorker = await getMainThreadWorker(page);
+    await mainWorker.evaluate(() => {
+      globalThis.runtime.renderPage = () => {};
+    });
+    await wait(3000);
+    const backWorker = await getBackgroundThreadWorker(page);
+    const jsonContent = await backWorker.evaluate(() => {
+      const nativeApp = globalThis.runtime.lynx.getNativeApp();
+      return nativeApp.readScript('json');
+    });
+    await wait(100);
+    expect(jsonContent).toBe('{}');
+  });
   test('registerDataProcessor-as-global-var-update', async ({ page, browserName }) => {
     await goto(page);
     const mainWorker = await getMainThreadWorker(page);
     const registerDataProcessor = await mainWorker.evaluate(() => {
       return globalThis.runtime.registerDataProcessor;
     });
     expect(registerDataProcessor).toBe('pass');