@lynx-js/web-constants 0.15.7 → 0.16.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @lynx-js/web-constants
 
+## 0.16.1
+
+### Patch Changes
+
+- feat: supports lazy bundle. (This feature requires `@lynx-js/lynx-core >= 0.1.3`) ([#1235](https://github.com/lynx-family/lynx-stack/pull/1235))
+
+- Updated dependencies []:
+  - @lynx-js/web-worker-rpc@0.16.1
+
+## 0.16.0
+
+### Minor Changes
+
+- refactor: provide the mts a real globalThis ([#1589](https://github.com/lynx-family/lynx-stack/pull/1589))
+
+  Before this change, We create a function wrapper and a fake globalThis for Javascript code.
+
+  This caused some issues.
+
+  After this change, we will create an iframe for createing an isolated Javascript context.
+
+  This means the globalThis will be the real one.
+
+### Patch Changes
+
+- refactor: add `:not([l-e-name])` at the end of selector for lazy component ([#1622](https://github.com/lynx-family/lynx-stack/pull/1622))
+
+- fix: the SystemInfo in bts should be assigned to the globalThis ([#1599](https://github.com/lynx-family/lynx-stack/pull/1599))
+
+- Updated dependencies [[`c1f8715`](https://github.com/lynx-family/lynx-stack/commit/c1f8715a81b2e69ff46fc363013626db4468c209)]:
+  - @lynx-js/web-worker-rpc@0.16.0
+
 ## 0.15.7
 
 ### Patch Changes

package/dist/constants.d.ts

@@ -2,6 +2,7 @@ export declare const lynxUniqueIdAttribute: "l-uid";
 export declare const cssIdAttribute: "l-css-id";
 export declare const componentIdAttribute: "l-comp-id";
 export declare const parentComponentUniqueIdAttribute: "l-p-comp-uid";
+export declare const lynxEntryNameAttribute: "l-e-name";
 export declare const lynxTagAttribute: "lynx-tag";
 export declare const lynxDatasetAttribute: "l-dset";
 export declare const lynxComponentConfigAttribute: "l-comp-cfg";
@@ -11,7 +12,5 @@ export declare const lynxPartIdAttribute: "l-part";
 export declare const lynxDefaultDisplayLinearAttribute: "lynx-default-display-linear";
 export declare const lynxDefaultOverflowVisibleAttribute: "lynx-default-overflow-visible";
 export declare const __lynx_timing_flag: "__lynx_timing_flag";
-export declare const globalMuteableVars: readonly ["registerDataProcessor", "registerWorkletInternal", "lynxWorkletImpl", "runWorklet"];
 export declare const systemInfo: Record<string, string | number>;
 export declare const inShadowRootStyles: string[];
-export declare const globalDisallowedVars: string[];

package/dist/constants.js

@@ -5,6 +5,7 @@ export const lynxUniqueIdAttribute = 'l-uid';
 export const cssIdAttribute = 'l-css-id';
 export const componentIdAttribute = 'l-comp-id';
 export const parentComponentUniqueIdAttribute = 'l-p-comp-uid';
+export const lynxEntryNameAttribute = 'l-e-name';
 export const lynxTagAttribute = 'lynx-tag';
 export const lynxDatasetAttribute = 'l-dset';
 export const lynxComponentConfigAttribute = 'l-comp-cfg';
@@ -14,12 +15,6 @@ export const lynxPartIdAttribute = 'l-part';
 export const lynxDefaultDisplayLinearAttribute = 'lynx-default-display-linear';
 export const lynxDefaultOverflowVisibleAttribute = 'lynx-default-overflow-visible';
 export const __lynx_timing_flag = '__lynx_timing_flag';
-export const globalMuteableVars = [
-    'registerDataProcessor',
-    'registerWorkletInternal',
-    'lynxWorkletImpl',
-    'runWorklet',
-];
 export const systemInfo = {
     platform: 'web',
     lynxSdkVersion: '3.0',
@@ -33,5 +28,4 @@ export const inShadowRootStyles = [
     overflow: visible;
   }`,
 ];
-export const globalDisallowedVars = ['navigator', 'postMessage'];
 //# sourceMappingURL=constants.js.map

package/dist/endpoints.d.ts

@@ -3,7 +3,7 @@ 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 declare const postExposureEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsyncVoid<[{
     exposures: ExposureWorkerEvent[];
     disExposures: ExposureWorkerEvent[];
@@ -57,3 +57,11 @@ export declare const updateGlobalPropsEndpoint: import("@lynx-js/web-worker-rpc/
 export declare const updateI18nResourcesEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsyncVoid<[Cloneable]>;
 export declare const updateI18nResourceEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsyncVoid<[Cloneable]>;
 export declare const dispatchI18nResourceEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsyncVoid<[Cloneable]>;
+export declare const queryComponentEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsync<[string], {
+    code: number;
+    detail: {
+        schema: string;
+    };
+}>;
+export declare const updateBTSTemplateCacheEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsync<[string, LynxTemplate], void>;
+export declare const loadTemplateMultiThread: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsync<[string], LynxTemplate>;

package/dist/endpoints.js

@@ -38,4 +38,7 @@ export const updateGlobalPropsEndpoint = createRpcEndpoint('updateGlobalProps',
 export const updateI18nResourcesEndpoint = createRpcEndpoint('updateI18nResources', false, false);
 export const updateI18nResourceEndpoint = createRpcEndpoint('updateI18nResource', false, false);
 export const dispatchI18nResourceEndpoint = createRpcEndpoint('dispatchI18nResource', false, false);
+export const queryComponentEndpoint = createRpcEndpoint('queryComponent', false, true);
+export const updateBTSTemplateCacheEndpoint = createRpcEndpoint('updateBTSTemplateCacheEndpoint', false, true);
+export const loadTemplateMultiThread = createRpcEndpoint('loadTemplateMultiThread', false, true);
 //# sourceMappingURL=endpoints.js.map

package/dist/types/BackThreadStartConfigs.d.ts

@@ -2,7 +2,6 @@ import type { Cloneable } from './Cloneable.js';
 import type { LynxTemplate } from './LynxModule.js';
 import type { NapiModulesMap } from './NapiModules.js';
 import type { NativeModulesMap } from './NativeModules.js';
-import type { BrowserConfig } from './PageConfig.js';
 export interface BackMainThreadContextConfig {
     initData: unknown;
     globalProps: unknown;
@@ -11,5 +10,4 @@ export interface BackMainThreadContextConfig {
     customSections: Record<string, Cloneable>;
     nativeModulesMap: NativeModulesMap;
     napiModulesMap: NapiModulesMap;
-    browserConfig: BrowserConfig;
 }

package/dist/types/Element.d.ts

@@ -52,7 +52,7 @@ export interface WebFiberElementImpl {
     removeEventListener: (type: string, handler: (ev: Event) => void, options?: {
         capture?: boolean;
     }) => void;
-    innerHTML: string;
+    textContent: string;
     readonly tagName: string;
     readonly firstElementChild: WebFiberElementImpl | null;
     readonly children: WebFiberElementImpl[];

package/dist/types/JSRealm.d.ts

@@ -0,0 +1,5 @@
+export type JSRealm = {
+    globalWindow: typeof globalThis;
+    loadScript: (url: string) => Promise<unknown>;
+    loadScriptSync: (url: string) => unknown;
+};

package/dist/types/JSRealm.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=JSRealm.js.map

package/dist/types/LynxModule.d.ts

@@ -36,6 +36,8 @@ export interface LynxTemplate {
         [key: string]: string;
     };
     elementTemplate: Record<string, ElementTemplateData[]>;
+    version?: number;
+    appType: 'card' | 'lazy';
 }
 export interface LynxJSModule {
     exports?: (lynx_runtime: any) => unknown;

package/dist/types/MainThreadGlobalThis.d.ts

@@ -80,7 +80,7 @@ export type AddClassPAPI = (element: WebFiberElementImpl, className: string) =>
 export type SetClassesPAPI = (element: WebFiberElementImpl, classNames: string | null) => void;
 export type AddInlineStylePAPI = (element: WebFiberElementImpl, key: number | string, value: string | number | null | undefined) => void;
 export type SetInlineStylesPAPI = (element: WebFiberElementImpl, value: string | Record<string, string> | undefined) => void;
-export type SetCSSIdPAPI = (elements: WebFiberElementImpl[], cssId: number | null) => void;
+export type SetCSSIdPAPI = (elements: WebFiberElementImpl[], cssId: number | null, entryName: string | undefined) => void;
 export type GetPageElementPAPI = () => WebFiberElementImpl | undefined;
 export type MarkTemplateElementPAPI = (element: WebFiberElementImpl) => void;
 export type MarkPartElementPAPI = (element: WebFiberElementImpl, partId: string) => void;
@@ -90,6 +90,13 @@ interface JSErrorInfo {
 }
 export type ElementFromBinaryPAPI = (templateId: string, parentComponentUniId: number) => WebFiberElementImpl[];
 export type GetAttributeByNamePAPI = (element: WebFiberElementImpl, 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;
     __GetTemplateParts?: GetTemplatePartsPAPI;
@@ -161,11 +168,8 @@ export interface MainThreadGlobalThis {
     __FlushElementTree: (_subTree: unknown, options: FlushElementTreeOptions) => void;
     _I18nResourceTranslation: (options: I18nResourceTranslationOptions) => unknown | undefined;
     _AddEventListener: (...args: unknown[]) => void;
-    /**
-     * private fields
-     */
-    _updateVars: () => void;
-    __lynxGlobalBindingValues: Record<string, unknown>;
+    __QueryComponent: QueryComponentPAPI;
+    processEvalResult?: (exports: unknown, schema: string) => unknown;
     renderPage: ((data: unknown) => void) | undefined;
     updatePage?: (data: Cloneable, options?: Record<string, string>) => void;
     runWorklet?: (obj: unknown, event: unknown) => void;

package/dist/types/MainThreadLynx.d.ts

@@ -9,4 +9,8 @@ export interface MainThreadLynx {
     getCustomSectionSync: (key: string) => Cloneable;
     markPipelineTiming: (pipelineId: string, timingKey: string) => void;
     SystemInfo: typeof systemInfo;
+    setTimeout: typeof setTimeout;
+    clearTimeout: typeof clearTimeout;
+    setInterval: typeof setInterval;
+    clearInterval: typeof clearInterval;
 }

package/dist/types/MarkTiming.d.ts

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

package/dist/types/NativeApp.d.ts

@@ -82,7 +82,7 @@ export interface NativeApp {
     clearInterval: typeof clearInterval;
     requestAnimationFrame: (cb: () => void) => void;
     cancelAnimationFrame: (id: number) => void;
-    loadScript: (sourceURL: string) => BundleInitReturnObj;
+    loadScript: (sourceURL: string, entryName?: string) => BundleInitReturnObj;
     loadScriptAsync(sourceURL: string, callback: (message: string | null, exports?: BundleInitReturnObj) => void): void;
     nativeModuleProxy: Record<string, any>;
     setNativeProps: (type: IdentifierType, identifier: string, component_id: string, first_only: boolean, native_props: Record<string, unknown>, root_unique_id: number | undefined) => void;
@@ -125,4 +125,13 @@ export interface NativeApp {
     i18nResource: I18nResource;
     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;
 }

package/dist/types/TemplateLoader.d.ts

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

package/dist/types/TemplateLoader.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TemplateLoader.js.map

package/dist/types/index.d.ts

@@ -19,3 +19,5 @@ export * from './I18n.js';
 export * from './BackThreadStartConfigs.js';
 export * from './MarkTiming.js';
 export * from './SSR.js';
+export * from './JSRealm.js';
+export * from './TemplateLoader.js';

package/dist/types/index.js

@@ -19,4 +19,6 @@ export * from './I18n.js';
 export * from './BackThreadStartConfigs.js';
 export * from './MarkTiming.js';
 export * from './SSR.js';
+export * from './JSRealm.js';
+export * from './TemplateLoader.js';
 //# sourceMappingURL=index.js.map

package/dist/utils/generateTemplate.js

@@ -1,118 +1,102 @@
 // Copyright 2023 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.
-import { globalDisallowedVars, globalMuteableVars } from '../constants.js';
-const mainThreadInjectVars = [
-    'lynx',
-    'globalThis',
-    '_ReportError',
-    '_SetSourceMapRelease',
-    '__AddConfig',
-    '__AddDataset',
-    '__GetAttributes',
-    '__GetComponentID',
-    '__GetDataByKey',
-    '__GetDataset',
-    '__GetElementConfig',
-    '__GetElementUniqueID',
-    '__GetID',
-    '__GetTag',
-    '__SetAttribute',
-    '__SetConfig',
-    '__SetDataset',
-    '__SetID',
-    '__UpdateComponentID',
-    '__UpdateComponentInfo',
-    '__GetConfig',
-    '__GetAttributeByName',
-    '__UpdateListCallbacks',
-    '__AppendElement',
-    '__ElementIsEqual',
-    '__FirstElement',
-    '__GetChildren',
-    '__GetParent',
-    '__InsertElementBefore',
-    '__LastElement',
-    '__NextElement',
-    '__RemoveElement',
-    '__ReplaceElement',
-    '__ReplaceElements',
-    '__SwapElement',
-    '__CreateComponent',
-    '__CreateElement',
-    '__CreatePage',
-    '__CreateView',
-    '__CreateText',
-    '__CreateRawText',
-    '__CreateImage',
-    '__CreateScrollView',
-    '__CreateWrapperElement',
-    '__CreateList',
-    '__AddEvent',
-    '__GetEvent',
-    '__GetEvents',
-    '__SetEvents',
-    '__AddClass',
-    '__SetClasses',
-    '__GetClasses',
-    '__AddInlineStyle',
-    '__SetInlineStyles',
-    '__SetCSSId',
-    '__OnLifecycleEvent',
-    '__FlushElementTree',
-    '__LoadLepusChunk',
-    'SystemInfo',
-    '_I18nResourceTranslation',
-    '_AddEventListener',
-    '__GetTemplateParts',
-    '__MarkPartElement',
-    '__MarkTemplateElement',
-    '__GetPageElement',
-    '__ElementFromBinary',
+const currentSupportedTemplateVersion = 2;
+const globalDisallowedVars = ['navigator', 'postMessage'];
+const templateUpgraders = [
+    (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.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; } }`,
+        ]));
+        template.version = 2;
+        return template;
+    },
 ];
-const backgroundInjectVars = [
-    'NativeModules',
-    'globalThis',
-    'lynx',
-    'lynxCoreInject',
-    'SystemInfo',
-];
-const backgroundInjectWithBind = [
-    'Card',
-    'Component',
-];
-const generateModuleContent = (content, injectVars, injectWithBind, muteableVars, globalDisallowedVars, isESM) => [
-    '//# allFunctionsCalledOnLoad\n',
-    isESM ? 'export default ' : 'globalThis.module.exports =',
-    'function(lynx_runtime) {',
-    'const module= {exports:{}};let exports = module.exports;',
-    'var {',
-    injectVars.join(','),
-    '} = lynx_runtime;',
-    ...injectWithBind.map(nm => `const ${nm} = lynx_runtime.${nm}?.bind(lynx_runtime);`),
-    ';var globDynamicComponentEntry = \'__Card__\';',
-    globalDisallowedVars.length !== 0
-        ? `var ${globalDisallowedVars.join('=')}=undefined;`
-        : '',
-    'var {__globalProps} = lynx;',
-    'lynx_runtime._updateVars=()=>{',
-    ...muteableVars.map(nm => `${nm} = lynx_runtime.__lynxGlobalBindingValues.${nm};`),
-    '};\n',
+const generateModuleContent = (content, eager, appType) => 
+/**
+ * About the `allFunctionsCalledOnLoad` directive:
+ * https://v8.dev/blog/preparser#pife
+ * https://github.com/WICG/explicit-javascript-compile-hints-file-based?tab=readme-ov-file
+ * https://v8.dev/blog/explicit-compile-hints
+ * We should ensure the MTS code is parsed eagerly to avoid runtime parse delay.
+ * But for BTS code, we should not do this as it would increase the memory usage.
+ * JavaScript Engines, like V8, already had optimizations for code starts with "(function"
+ * to be parsed eagerly.
+ */
+[
+    eager ? '//# allFunctionsCalledOnLoad' : '',
+    '\n(function() { "use strict"; const ',
+    globalDisallowedVars.join('=void 0,'),
+    '=void 0;\n',
+    appType === 'lazy' ? 'module.exports=\n' : '',
     content,
-    '\n return module.exports;}',
+    '\n})()',
 ].join('');
-async function generateJavascriptUrl(obj, injectVars, injectWithBind, muteableVars, globalDisallowedVars, createJsModuleUrl, isESM, templateName) {
+async function generateJavascriptUrl(obj, createJsModuleUrl, eager, appType, templateName) {
     const processEntry = async ([name, content]) => [
         name,
-        await createJsModuleUrl(generateModuleContent(content, injectVars.concat(muteableVars), injectWithBind, muteableVars, globalDisallowedVars, isESM), `${templateName}-${name.replaceAll('/', '')}.js`),
+        await createJsModuleUrl(generateModuleContent(content, eager, appType), `${templateName}-${name.replaceAll('/', '')}.js`),
     ];
     return Promise.all(Object.entries(obj).filter(([_, content]) => typeof content === 'string').map(processEntry)).then(Object.fromEntries);
 }
 export async function generateTemplate(template, createJsModuleUrl, templateName) {
+    template.version = template.version ?? 1;
+    if (template.version > currentSupportedTemplateVersion) {
+        throw new Error(`Unsupported template, please upgrade your web-platform dependencies`);
+    }
+    let upgrader;
+    while (template.version < currentSupportedTemplateVersion
+        && (upgrader = templateUpgraders[template.version - 1])) {
+        template = upgrader(template);
+    }
     return {
         ...template,
-        lepusCode: await generateJavascriptUrl(template.lepusCode, mainThreadInjectVars, [], globalMuteableVars, templateName ? [] : globalDisallowedVars, createJsModuleUrl, true, templateName),
-        manifest: await generateJavascriptUrl(template.manifest, backgroundInjectVars, backgroundInjectWithBind, [], templateName ? [] : globalDisallowedVars, createJsModuleUrl, false, templateName),
+        lepusCode: await generateJavascriptUrl(template.lepusCode, createJsModuleUrl, true, template.appType, templateName),
+        manifest: await generateJavascriptUrl(template.manifest, createJsModuleUrl, false, template.appType, templateName),
     };
 }
 //# sourceMappingURL=generateTemplate.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-constants",
-  "version": "0.15.7",
+  "version": "0.16.1",
   "private": false,
   "description": "",
   "keywords": [],
@@ -23,9 +23,9 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-worker-rpc": "0.15.7"
+    "@lynx-js/web-worker-rpc": "0.16.1"
   },
   "devDependencies": {
-    "@lynx-js/offscreen-document": "0.1.3"
+    "@lynx-js/offscreen-document": "0.1.4"
   }
 }