feat: allow user to implement custom template load function

.changeset/bright-forks-try.md

@@ -4,7 +4,6 @@
 "@lynx-js/react-webpack-plugin": patch
 "@lynx-js/web-constants": patch
 "@lynx-js/web-elements": patch
-"@lynx-js/react-rsbuild-plugin": patch
 ---
 
 feat: fully support MTS

.changeset/small-carpets-reply.md

@@ -0,0 +1,13 @@
+---
+"@lynx-js/web-core": patch
+---
+
+feat: allow user to implement custom template load function
+
+```js
+lynxView.customTemplateLoader = (url) => {
+  return (await (await fetch(url, {
+    method: 'GET',
+  })).json());
+};
+```

packages/web-platform/web-core/src/apis/LynxView.ts

@@ -8,6 +8,7 @@ import {
 } from './createLynxView.js';
 import {
   type Cloneable,
+  type LynxTemplate,
   type NapiModulesCall,
   type NapiModulesMap,
   type NativeModulesCall,
@@ -44,6 +45,7 @@ export type INapiModulesCall = (
  * @property {INapiModulesCall} onNapiModulesCall [optional] the NapiModule value handler.
  * @property {"false" | "true" | null} injectHeadLinks [optional] @default true set it to "false" to disable injecting the <link href="" ref="stylesheet"> styles into shadowroot
  * @property {number} lynxGroupId [optional] (attribute: "lynx-group-id") the background shared context id, which is used to share webworker between different lynx cards
+ * @property {(string)=>Promise<LynxTemplate>} customTemplateLoader [optional] the custom template loader, which is used to load the template
  *
  * @event error lynx card fired an error
  *
@@ -293,6 +295,13 @@ export class LynxView extends HTMLElement {
     }
   }
 
+  /**
+   * @public
+   * allow user to customize the template loader
+   * @param url the url of the template
+   */
+  customTemplateLoader?: (url: string) => Promise<LynxTemplate>;
+
   /**
    * @private the flag to group all changes into one render operation
    */
@@ -352,6 +361,7 @@ export class LynxView extends HTMLElement {
                   new CustomEvent('error', {}),
                 );
               },
+              customTemplateLoader: this.customTemplateLoader,
             },
           });
           this.#instance = lynxView;

packages/web-platform/web-core/src/index.ts

@@ -3,3 +3,4 @@
 // LICENSE file in the root directory of this source tree.
 export { createLynxView } from './apis/createLynxView.js';
 export { LynxView } from './apis/LynxView.js';
+export type { LynxTemplate } from '@lynx-js/web-constants';

packages/web-platform/web-core/src/uiThread/startUIThread.ts

@@ -16,6 +16,7 @@ import {
   mainThreadStartEndpoint,
   markTimingEndpoint,
   sendGlobalEventEndpoint,
+  type LynxTemplate,
   type MainThreadStartConfigs,
   type NapiModulesCall,
   type NativeModulesCall,
@@ -34,10 +35,10 @@ export function startUIThread(
     nativeModulesCall: NativeModulesCall;
     napiModulesCall: NapiModulesCall;
     onError?: () => void;
+    customTemplateLoader?: (url: string) => Promise<LynxTemplate>;
   },
 ): LynxView {
   const createLynxStartTiming = performance.now() + performance.timeOrigin;
-  const { nativeModulesMap, napiModulesMap } = configs;
   const {
     mainThreadRpc,
     backgroundRpc,
@@ -56,13 +57,11 @@ export function startUIThread(
   };
   markTimingInternal('create_lynx_start', undefined, createLynxStartTiming);
   markTimingInternal('load_template_start');
-  loadTemplate(templateUrl).then((template) => {
+  loadTemplate(templateUrl, callbacks.customTemplateLoader).then((template) => {
     markTimingInternal('load_template_end');
     mainThreadStart({
       ...configs,
       template,
-      nativeModulesMap,
-      napiModulesMap,
     });
   });
   registerReportErrorHandler(

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

@@ -113,12 +113,17 @@ const backgroundInjectWithBind = [
   'Component',
 ];
 
-export async function loadTemplate(url: string): Promise<LynxTemplate> {
+export async function loadTemplate(
+  url: string,
+  customTemplateLoader?: (url: string) => Promise<LynxTemplate>,
+): Promise<LynxTemplate> {
   const cachedTemplate = TemplateCache[url];
   if (cachedTemplate) return cachedTemplate;
-  const template = (await (await fetch(url, {
-    method: 'GET',
-  })).json()) as LynxTemplate;
+  const template = customTemplateLoader
+    ? await customTemplateLoader(url)
+    : (await (await fetch(url, {
+      method: 'GET',
+    })).json()) as LynxTemplate;
   const decodedTemplate: LynxTemplate = {
     ...template,
     lepusCode: generateJavascriptUrl(

packages/web-platform/web-tests/shell-project/index.ts

@@ -2,6 +2,7 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 
+import type { LynxTemplate } from '@lynx-js/web-core';
 import { lynxViewTests } from './lynx-view.ts';
 
 const nativeModulesMap = {
@@ -45,6 +46,35 @@ if (casename) {
         return data.color;
       }
     };
+    if (casename.includes('custom-template-loader')) {
+      lynxView.customTemplateLoader = async () => {
+        const template: LynxTemplate = {
+          styleInfo: {},
+          pageConfig: {
+            enableCSSSelector: true,
+            enableRemoveCSSScope: true,
+            defaultDisplayLinear: true,
+            defaultOverflowVisible: true,
+          },
+          customSections: {},
+          lepusCode: {
+            root: `
+
+              let root = __CreatePage('page', 0);
+              __AddInlineStyle(root, 'min-height', '80px');
+              __AddInlineStyle(root, 'width', '80px');
+              __AddInlineStyle(root, 'background', 'green');
+              __SetID(root, 'target');
+              __FlushElementTree();
+            `,
+          },
+          manifest: {
+            '/app-service.js': '',
+          },
+        };
+        return template;
+      };
+    }
   });
   if (casename2) {
     lynxViewTests(lynxView2 => {

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

@@ -34,7 +34,7 @@
 
 const expectHasText = async (page: Page, text: string) => {
   const hasText = (await page.getByText(text).count()) === 1;
   await expect(hasText).toBe(true);
 };
 
 const expectNoText = async (page: Page, text: string) => {
@@ -91,7 +91,7 @@
       await wait(100);
       const target = page.locator('#target');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('green');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('pink');
     });
@@ -342,6 +342,12 @@
     });
   });
   test.describe('apis', () => {
+    test('api-custom-template-loader', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      const target = page.locator('#target');
+      await expect(target).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
+    });
     test('api-animation-event', async ({ page }, { title }) => {
       await goto(page, title);
       await page.locator('#tap1').click();
@@ -870,7 +876,7 @@
         globalThis.lynxView.sendGlobalEvent('event-test', ['change']);
       });
       await wait(100);
       await expect(target).toHaveCSS(
         'background-color',
         'rgb(0, 128, 0)',
       ); // green;
@@ -1071,7 +1077,7 @@
       await wait(100);
       const target = page.locator('#target');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('green');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('pink');
     });
@@ -1320,7 +1326,7 @@
           await wait(500);
           const count = (await page.getByText('the count is:1').count())
             + (await await page.getByText('the count is:2').count());
           expect(count).toBe(1);
         },
       );