feat(web): implement lazy bundle

.changeset/fluffy-masks-mate.md

@@ -0,0 +1,9 @@
+---
+"@lynx-js/web-mainthread-apis": patch
+"@lynx-js/web-worker-runtime": patch
+"@lynx-js/web-core-server": patch
+"@lynx-js/web-constants": patch
+"@lynx-js/web-core": patch
+---
+
+feat: supports lazy bundle. (This feature requires `@lynx-js/lynx-core >= 0.1.3`)

packages/web-platform/offscreen-document/src/webworker/OffscreenElement.ts

@@ -275,6 +275,10 @@ export class OffscreenElement extends EventTarget {
     super.addEventListener(type, callback, options);
   }
 
+  get textContent() {
+    return this[textContent];
+  }
+
   set textContent(text: string) {
     this[ancestorDocument][operations].push(
       OperationType.SetTextContent,

packages/web-platform/web-constants/src/endpoints.ts

@@ -11,7 +11,11 @@ import type { Cloneable, CloneableObject } from './types/Cloneable.js';
 import type { StartMainThreadContextConfig } from './types/MainThreadStartConfigs.js';
 import type { IdentifierType, InvokeCallbackRes } from './types/NativeApp.js';
 import type { ElementAnimationOptions } from './types/Element.js';
-import type { BackMainThreadContextConfig, MarkTiming } from './types/index.js';
+import type {
+  BackMainThreadContextConfig,
+  LynxTemplate,
+  MarkTiming,
+} from './types/index.js';
 
 export const postExposureEndpoint = createRpcEndpoint<
   [{ exposures: ExposureWorkerEvent[]; disExposures: ExposureWorkerEvent[] }],
@@ -240,3 +244,18 @@ export const dispatchI18nResourceEndpoint = createRpcEndpoint<
   [Cloneable],
   void
 >('dispatchI18nResource', false, false);
+
+export const queryComponentEndpoint = createRpcEndpoint<
+  [string],
+  { code: number; detail: { schema: string } }
+>('queryComponent', false, true);
+
+export const updateBTSTemplateCacheEndpoint = createRpcEndpoint<
+  [/** url */ string, LynxTemplate],
+  void
+>('updateBTSTemplateCacheEndpoint', false, true);
+
+export const loadTemplateMultiThread = createRpcEndpoint<
+  [string],
+  LynxTemplate
+>('loadTemplateMultiThread', false, true);

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

@@ -270,6 +270,7 @@ export type SetInlineStylesPAPI = (
 export type SetCSSIdPAPI = (
   elements: WebFiberElementImpl[],
   cssId: number | null,
+  entryName: string | undefined,
 ) => void;
 
 export type GetPageElementPAPI = () => WebFiberElementImpl | undefined;
@@ -301,6 +302,17 @@ export type GetAttributeByNamePAPI = (
   name: string,
 ) => string | null;
 
+export type QueryComponentPAPI = (
+  source: string,
+  resultCallback?: (result: {
+    code: number;
+    data?: {
+      url: string;
+      evalResult: unknown;
+    };
+  }) => void,
+) => null;
+
 export interface MainThreadGlobalThis {
   __ElementFromBinary: ElementFromBinaryPAPI;
 
@@ -381,6 +393,12 @@ export interface MainThreadGlobalThis {
   ) => unknown | undefined;
   // This is an empty implementation, just to avoid business call errors
   _AddEventListener: (...args: unknown[]) => void;
+  __QueryComponent: QueryComponentPAPI;
+  // DSL runtime binding
+  processEvalResult?: (
+    exports: unknown,
+    schema: string,
+  ) => unknown;
   // the following methods is assigned by the main thread user code
   renderPage: ((data: unknown) => void) | undefined;
   updatePage?: (data: Cloneable, options?: Record<string, string>) => void;

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

@@ -7,3 +7,9 @@ export interface MarkTiming {
   pipelineId?: string;
   timeStamp: number;
 }
+
+export type MarkTimingInternal = (
+  timingKey: string,
+  pipelineId?: string,
+  timeStamp?: number,
+) => void;

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

@@ -123,7 +123,7 @@ export interface NativeApp {
 
   cancelAnimationFrame: (id: number) => void;
 
-  loadScript: (sourceURL: string) => BundleInitReturnObj;
+  loadScript: (sourceURL: string, entryName?: string) => BundleInitReturnObj;
 
   loadScriptAsync(
     sourceURL: string,
@@ -219,4 +219,15 @@ export interface NativeApp {
 
   reportException: (error: Error, _: unknown) => void;
   __SetSourceMapRelease: (err: Error) => void;
+
+  queryComponent: (
+    source: string,
+    callback: (
+      ret: { __hasReady: boolean } | {
+        code: number;
+        detail?: { schema: string };
+      },
+    ) => void,
+  ) => void;
+  tt: NativeTTObject | null;
 }

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

@@ -0,0 +1,3 @@
+import type { LynxTemplate } from './LynxModule.js';
+
+export type TemplateLoader = (url: string) => Promise<LynxTemplate>;

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

@@ -20,3 +20,4 @@ export * from './BackThreadStartConfigs.js';
 export * from './MarkTiming.js';
 export * from './SSR.js';
 export * from './JSRealm.js';
+export * from './TemplateLoader.js';

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

@@ -59,15 +59,9 @@ const templateUpgraders: templateUpgrader[] = [
     template.manifest = Object.fromEntries(
       Object.entries(template.manifest).map(([key, value]) => [
         key,
-        `module.exports={init: (lynxCoreInject) => { var {${defaultInjectStr}} = lynxCoreInject.tt; var module = {exports:null}; ${value}\n return module.exports; } }`,
+        `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.lepusCode = Object.fromEntries(
-      Object.entries(template.lepusCode).map(([key, value]) => [
-        key,
-        `(()=>{${value}\n})();`,
-      ]),
-    ) as typeof template.lepusCode;
     template.version = 2;
     return template;
   },
@@ -76,6 +70,7 @@ const templateUpgraders: templateUpgrader[] = [
 const generateModuleContent = (
   content: string,
   eager: boolean,
+  appType: 'card' | 'lazy',
 ) =>
   /**
    * About the `allFunctionsCalledOnLoad` directive:
@@ -92,6 +87,7 @@ const generateModuleContent = (
     '\n(function() { "use strict"; const ',
     globalDisallowedVars.join('=void 0,'),
     '=void 0;\n',
+    appType === 'lazy' ? 'module.exports=\n' : '',
     content,
     '\n})()',
   ].join('');
@@ -100,6 +96,7 @@ async function generateJavascriptUrl<T extends Record<string, string | {}>>(
   obj: T,
   createJsModuleUrl: (content: string, name: string) => Promise<string>,
   eager: boolean,
+  appType: 'card' | 'lazy',
   templateName?: string,
 ): Promise<T> {
   const processEntry = async ([name, content]: [string, string]) => [
@@ -108,6 +105,7 @@ async function generateJavascriptUrl<T extends Record<string, string | {}>>(
       generateModuleContent(
         content,
         eager,
+        appType,
       ),
       `${templateName}-${name.replaceAll('/', '')}.js`,
     ),
@@ -147,12 +145,14 @@ export async function generateTemplate(
       template.lepusCode,
       createJsModuleUrl as (content: string, name: string) => Promise<string>,
       true,
+      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-server/src/createLynxView.ts

@@ -190,6 +190,7 @@ export async function createLynxView(
       i18nResources.setData(initI18nResources);
       return i18nResources;
     },
+    (() => {}) as any,
     {
       __AddEvent(element, eventName, eventData, eventOptions) {
         events.push([

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

@@ -16,10 +16,12 @@ import {
   lynxUniqueIdAttribute,
   type SSRDumpInfo,
   type JSRealm,
+  type TemplateLoader,
 } from '@lynx-js/web-constants';
 import { Rpc } from '@lynx-js/web-worker-rpc';
 import { dispatchLynxViewEvent } from '../utils/dispatchLynxViewEvent.js';
 import { createExposureMonitor } from './crossThreadHandlers/createExposureMonitor.js';
+import type { StartUIThreadCallbacks } from './startUIThread.js';
 
 const {
   prepareMainThreadAPIs,
@@ -93,15 +95,14 @@ function createIFrameRealm(parent: Node): JSRealm {
 export function createRenderAllOnUI(
   mainToBackgroundRpc: Rpc,
   shadowRoot: ShadowRoot,
+  loadTemplate: TemplateLoader,
   markTimingInternal: (
     timingKey: string,
     pipelineId?: string,
     timeStamp?: number,
   ) => void,
   flushMarkTimingInternal: () => void,
-  callbacks: {
-    onError?: (err: Error, release: string, fileName: string) => void;
-  },
+  callbacks: StartUIThreadCallbacks,
   ssrDumpInfo: SSRDumpInfo | undefined,
 ) {
   if (!globalThis.module) {
@@ -138,6 +139,7 @@ export function createRenderAllOnUI(
       i18nResources.setData(initI18nResources);
       return i18nResources;
     },
+    loadTemplate,
   );
   const pendingUpdateCalls: Parameters<
     RpcCallType<typeof updateDataEndpoint>

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

@@ -3,27 +3,30 @@
 // LICENSE file in the root directory of this source tree.
 
 import {
+  loadTemplateMultiThread,
   mainThreadStartEndpoint,
   updateDataEndpoint,
   updateI18nResourcesEndpoint,
+  type TemplateLoader,
 } from '@lynx-js/web-constants';
 import type { Rpc } from '@lynx-js/web-worker-rpc';
 import { registerReportErrorHandler } from './crossThreadHandlers/registerReportErrorHandler.js';
 import { registerFlushElementTreeHandler } from './crossThreadHandlers/registerFlushElementTreeHandler.js';
 import { registerDispatchLynxViewEventHandler } from './crossThreadHandlers/registerDispatchLynxViewEventHandler.js';
 import { createExposureMonitorForMultiThread } from './crossThreadHandlers/createExposureMonitor.js';
+import type { StartUIThreadCallbacks } from './startUIThread.js';
 
 export function createRenderMultiThread(
   mainThreadRpc: Rpc,
   shadowRoot: ShadowRoot,
-  callbacks: {
-    onError?: (err: Error, release: string, fileName: string) => void;
-  },
+  loadTemplate: TemplateLoader,
+  callbacks: StartUIThreadCallbacks,
 ) {
   registerReportErrorHandler(mainThreadRpc, 'lepus.js', callbacks.onError);
   registerFlushElementTreeHandler(mainThreadRpc, { shadowRoot });
   registerDispatchLynxViewEventHandler(mainThreadRpc, shadowRoot);
   createExposureMonitorForMultiThread(mainThreadRpc, shadowRoot);
+  mainThreadRpc.registerHandler(loadTemplateMultiThread, loadTemplate);
   const start = mainThreadRpc.createCall(mainThreadStartEndpoint);
   const updateDataMainThread = mainThreadRpc.createCall(updateDataEndpoint);
   const updateI18nResourcesMainThread = mainThreadRpc.createCall(

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

@@ -6,7 +6,6 @@ import type { LynxView } from '../apis/createLynxView.js';
 import { bootWorkers } from './bootWorkers.js';
 import { createDispose } from './crossThreadHandlers/createDispose.js';
 import {
-  type LynxTemplate,
   type StartMainThreadContextConfig,
   type NapiModulesCall,
   type NativeModulesCall,
@@ -15,8 +14,10 @@ import {
   dispatchMarkTiming,
   flushMarkTiming,
   type SSRDumpInfo,
+  type TemplateLoader,
+  type MarkTimingInternal,
 } from '@lynx-js/web-constants';
-import { loadTemplate } from '../utils/loadTemplate.js';
+import { createTemplateLoader } from '../utils/loadTemplate.js';
 import { createUpdateData } from './crossThreadHandlers/createUpdateData.js';
 import { startBackground } from './startBackground.js';
 import { createRenderMultiThread } from './createRenderMultiThread.js';
@@ -26,7 +27,7 @@ export type StartUIThreadCallbacks = {
   nativeModulesCall: NativeModulesCall;
   napiModulesCall: NapiModulesCall;
   onError?: (err: Error, release: string, fileName: string) => void;
-  customTemplateLoader?: (url: string) => Promise<LynxTemplate>;
+  customTemplateLoader?: TemplateLoader;
 };
 
 export function startUIThread(
@@ -59,10 +60,10 @@ export function startUIThread(
     records: [],
     timeout: null,
   };
-  const markTimingInternal = (
-    timingKey: string,
-    pipelineId?: string,
-    timeStamp?: number,
+  const markTimingInternal: MarkTimingInternal = (
+    timingKey,
+    pipelineId,
+    timeStamp,
   ) => {
     dispatchMarkTiming({
       timingKey,
@@ -74,10 +75,15 @@ export function startUIThread(
   };
   const flushMarkTimingInternal = () =>
     flushMarkTiming(markTiming, cacheMarkTimings);
+  const templateLoader = createTemplateLoader(
+    callbacks.customTemplateLoader,
+    markTimingInternal,
+  );
   const { start, updateDataMainThread, updateI18nResourcesMainThread } = allOnUI
     ? createRenderAllOnUI(
       /* main-to-bg rpc*/ mainThreadRpc,
       shadowRoot,
+      templateLoader,
       markTimingInternal,
       flushMarkTimingInternal,
       callbacks,
@@ -86,12 +92,11 @@ export function startUIThread(
     : createRenderMultiThread(
       /* main-to-ui rpc*/ mainThreadRpc,
       shadowRoot,
+      templateLoader,
       callbacks,
     );
   markTimingInternal('create_lynx_start', undefined, createLynxStartTiming);
-  markTimingInternal('load_template_start');
-  loadTemplate(templateUrl, callbacks.customTemplateLoader).then((template) => {
-    markTimingInternal('load_template_end');
+  templateLoader(templateUrl).then((template) => {
     flushMarkTimingInternal();
     start({
       ...configs,