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,47 @@ export interface LynxTemplate {
   appType: 'card' | 'lazy';
 }
 
+export type BTSChunkEntry = (
+  postMessage: undefined,
+  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

@@ -5,69 +5,27 @@
 import type { LynxTemplate } from '../types/LynxModule.js';
 
 const currentSupportedTemplateVersion = 2;
-const globalDisallowedVars = ['navigator', 'postMessage'];
+const globalDisallowedVars = ['navigator', 'postMessage', 'window'];
 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,30 +48,34 @@ const generateModuleContent = (
     appType !== 'card' ? 'module.exports=\n' : '',
     content,
     '\n})()',
+    '\n//# sourceURL=',
+    fileName,
   ].join('');
 
 async function generateJavascriptUrl<T extends Record<string, string | {}>>(
   obj: T,
   createJsModuleUrl: (content: string, name: string) => Promise<string>,
   eager: boolean,
   appType: 'card' | 'lazy',
-  templateName?: string,
+  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]) => {
+      return [
+        name,
+        await createJsModuleUrl(
+          generateModuleContent(
+            `${templateName}/${name.replaceAll('/', '_')}.js`,
+            content,
+            eager,
+            appType,
+          ),
+          `${templateName}-${name.replaceAll('/', '_')}.js`,
+        ),
+      ];
+    }),
   ).then(
     Object.fromEntries,
   );
@@ -124,7 +86,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 +110,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`,
@@ -1019,7 +1019,7 @@
         // @ts-expect-error
         return Object.keys(globalThis.timing);
       });
       expect(timingKeys).toContain('create_lynx_start');
       expect(timingKeys).toContain('dispatch_start');
       expect(timingKeys).toContain('layout_start');
       expect(timingKeys).toContain('layout_end');
@@ -1111,8 +1111,8 @@
         document.querySelector('lynx-view')!.remove();
       });
       await wait(50);
       expect(message).toContain('fin');
       expect(page.workers().length).toStrictEqual(0);
     });
 
     test('api-error', async ({ page }, { title }) => {
@@ -1148,7 +1148,7 @@
       });
       await goto(page, 'api-error');
       await wait(500);
       expect(offset).toBe(true);
     });
     test('api-error-mts', async ({ page }, { title }) => {
       test.skip(isSSR, 'No need to test this on SSR');
@@ -1478,7 +1478,7 @@
             { fullPage: false },
           );
           await wait(100);
           await page.evaluate(() => {
             document.querySelector('lynx-view')!.shadowRoot!.querySelector(
               '#y',
             )!.scrollTop = 800;
@@ -1672,7 +1672,7 @@
         });
         await goto(page, title);
         await wait(200);
         !isSSR && expect(mts).toBe(true);
         expect(bts).toBe(true);
       },
     );
@@ -1691,7 +1691,7 @@
         });
         await goto(page, title);
         await wait(200);
         !isSSR && expect(mts).toBe(true);
         expect(bts).toBe(true);
       },
     );
@@ -1872,21 +1872,19 @@
     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');
         await expect(target).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
       },
     );
     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');
         await expect(target).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
       },
     );
 
@@ -2679,7 +2677,7 @@
           });
           await wait(1000);
           const lastEvent = eventDetails.pop();
           expect(lastEvent.index).toBe(1);
           expect(lastEvent.isDragged).not.toBe(undefined);
         },
       );
@@ -2967,7 +2965,7 @@
             inputDom?.setSelectionRange(2, 5);
           });
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('2-5');
         },
       );
       test(
@@ -4299,7 +4297,7 @@
             )?.click();
           });
           await wait(200);
           expect(val).toBe(true);
           expect(selectionBegin).toBe(true);
           expect(selectionEnd).toBe(true);
         },
@@ -4318,7 +4316,7 @@
             textareaDom?.setSelectionRange(2, 5);
           });
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('2-5');
         },
       );
 

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

@@ -204,6 +204,24 @@ test.describe('web core tests', () => {
     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);