@lynx-js/web-constants 0.14.1 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @lynx-js/web-constants
 
+## 0.15.0
+
+### Minor Changes
+
+- refactor: move exposure system to web-core ([#1254](https://github.com/lynx-family/lynx-stack/pull/1254))
+
+  **THIS IS A BREAKING CHANGE**
+
+  **You'll need to upgrade your @lynx-js/web-elements to >= 0.8.0**
+
+  For SSR and better performance, we moved the lynx's exposure system from web-element to web-core.
+
+  Before this commit, we create Intersection observers by creating HTMLElements.
+
+  After this commit, we will create such Intersection observers after dom stabled.
+
+  Also, the setInterval for exposure has been removed, now we use an on time lazy timer for such features.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @lynx-js/web-worker-rpc@0.15.0
+
+## 0.14.2
+
+### Patch Changes
+
+- feat: merge multiple markTiming RPC communication events together and send them together, which can effectively reduce the number of RPC communications. ([#1178](https://github.com/lynx-family/lynx-stack/pull/1178))
+
+- chore: extract shared logic from web-core and web-core-server's loadTemplate into a unified generateTemplate function ([#1211](https://github.com/lynx-family/lynx-stack/pull/1211))
+
+- Updated dependencies []:
+  - @lynx-js/web-worker-rpc@0.14.2
+
 ## 0.14.1
 
 ### Patch Changes

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 } from './types/index.js';
+import type { BackMainThreadContextConfig, MarkTiming } from './types/index.js';
 export declare const postExposureEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsyncVoid<[{
     exposures: ExposureWorkerEvent[];
     disExposures: ExposureWorkerEvent[];
@@ -27,12 +27,13 @@ export declare const BackgroundThreadStartEndpoint: import("@lynx-js/web-worker-
 export declare const reportErrorEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsyncVoid<[Error, unknown, string]>;
 export declare const flushElementTreeEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsync<[operations: (string | number)[]], void>;
 export declare const callLepusMethodEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsync<[name: string, data: unknown], void>;
+export declare const multiThreadExposureChangedEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsyncVoid<[string[]]>;
 export declare const invokeUIMethodEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsync<[type: IdentifierType, identifier: string, component_id: string, method: string, params: object, root_unique_id: number | undefined], InvokeCallbackRes>;
 export declare const setNativePropsEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsync<[type: IdentifierType, identifier: string, component_id: string, first_only: boolean, native_props: object, root_unique_id: number | undefined], void>;
 export declare const nativeModulesCallEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsync<[name: string, data: Cloneable, moduleName: string], any>;
 export declare const napiModulesCallEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsyncWithTransfer<[name: string, data: Cloneable, moduleName: string], any>;
 export declare const getCustomSectionsEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsync<[string], Cloneable>;
-export declare const markTimingEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsyncVoid<[timingKey: string, pipelineId: string | undefined, timeStamp: number]>;
+export declare const markTimingEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsyncVoid<[MarkTiming[]]>;
 export declare const postTimingFlagsEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsyncVoid<[timingFlags: string[], pipelineId: string | undefined]>;
 export declare const triggerComponentEventEndpoint: import("@lynx-js/web-worker-rpc/dist/RpcEndpoint.js").RpcEndpointAsyncVoid<[id: string, params: {
     eventDetail: CloneableObject;

package/dist/endpoints.js

@@ -18,6 +18,7 @@ export const BackgroundThreadStartEndpoint = createRpcEndpoint('start', false, t
 export const reportErrorEndpoint = createRpcEndpoint('reportError', false, false);
 export const flushElementTreeEndpoint = createRpcEndpoint('flushElementTree', false, true);
 export const callLepusMethodEndpoint = createRpcEndpoint('callLepusMethod', false, true);
+export const multiThreadExposureChangedEndpoint = createRpcEndpoint('multiThreadExposureChangedEndpoint', false, false);
 export const invokeUIMethodEndpoint = createRpcEndpoint('__invokeUIMethod', false, true);
 export const setNativePropsEndpoint = createRpcEndpoint('__setNativeProps', false, true);
 export const nativeModulesCallEndpoint = createRpcEndpoint('nativeModulesCall', false, true);

package/dist/types/MarkTiming.d.ts

@@ -0,0 +1,5 @@
+export interface MarkTiming {
+    timingKey: string;
+    pipelineId?: string;
+    timeStamp: number;
+}

package/dist/types/MarkTiming.js

@@ -0,0 +1,5 @@
+// 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.
+export {};
+//# sourceMappingURL=MarkTiming.js.map

package/dist/types/StyleInfo.d.ts

@@ -16,7 +16,10 @@ export interface OneInfo {
 export interface StyleInfo {
     [cssId: string]: OneInfo;
 }
-export interface CssInJsInfo {
+/**
+ * CSS Info for Old Generation CSS System
+ */
+export interface CssOGInfo {
     [cssId: string]: {
         [className: string]: [string, string][];
     };

package/dist/types/index.d.ts

@@ -17,3 +17,4 @@ export * from './MainThreadGlobalThis.js';
 export * from './MainThreadLynx.js';
 export * from './I18n.js';
 export * from './BackThreadStartConfigs.js';
+export * from './MarkTiming.js';

package/dist/types/index.js

@@ -17,4 +17,5 @@ export * from './MainThreadGlobalThis.js';
 export * from './MainThreadLynx.js';
 export * from './I18n.js';
 export * from './BackThreadStartConfigs.js';
+export * from './MarkTiming.js';
 //# sourceMappingURL=index.js.map

package/dist/utils/LynxCrossThreadContext.js

@@ -1,3 +1,6 @@
+// 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 { DispatchEventResult, } from '../types/LynxContextEventTarget.js';
 export class LynxCrossThreadContext extends EventTarget {
     _config;

package/dist/utils/generateTemplate.d.ts

@@ -0,0 +1,3 @@
+import type { LynxTemplate } from '../types/LynxModule.js';
+export declare function generateTemplate(template: LynxTemplate, createJsModuleUrl: (content: string) => string): Promise<LynxTemplate>;
+export declare function generateTemplate(template: LynxTemplate, createJsModuleUrl: (content: string, name: string) => Promise<string>, templateName: string): Promise<LynxTemplate>;

package/dist/utils/generateTemplate.js

@@ -0,0 +1,123 @@
+// 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 { 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',
+    '__GetConfig',
+    '__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',
+];
+const backgroundInjectVars = [
+    'NativeModules',
+    'globalThis',
+    'lynx',
+    'lynxCoreInject',
+    'SystemInfo',
+];
+const backgroundInjectWithBind = [
+    'Card',
+    'Component',
+];
+async function generateJavascriptUrl(obj, injectVars, injectWithBind, muteableVars, createJsModuleUrl, templateName) {
+    injectVars = injectVars.concat(muteableVars);
+    const generateModuleContent = (content) => [
+        '//# allFunctionsCalledOnLoad\n',
+        '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__\';',
+        'var {__globalProps} = lynx;',
+        'lynx_runtime._updateVars=()=>{',
+        ...muteableVars.map(nm => `${nm} = lynx_runtime.__lynxGlobalBindingValues.${nm};`),
+        '};\n',
+        content,
+        '\n return module.exports;}',
+    ].join('');
+    if (!templateName) {
+        createJsModuleUrl;
+    }
+    const processEntry = templateName
+        ? async ([name, content]) => [
+            name,
+            await createJsModuleUrl(generateModuleContent(content), `${templateName}-${name.replaceAll('/', '')}.js`),
+        ]
+        : async ([name, content]) => [
+            name,
+            await createJsModuleUrl(generateModuleContent(content)),
+        ];
+    return Promise.all(Object.entries(obj).map(processEntry)).then(Object.fromEntries);
+}
+export async function generateTemplate(template, createJsModuleUrl, templateName) {
+    if (!templateName) {
+        return {
+            ...template,
+            lepusCode: await generateJavascriptUrl(template.lepusCode, mainThreadInjectVars, [], globalMuteableVars, createJsModuleUrl),
+            manifest: await generateJavascriptUrl(template.manifest, backgroundInjectVars, backgroundInjectWithBind, [], createJsModuleUrl),
+        };
+    }
+    return {
+        ...template,
+        lepusCode: await generateJavascriptUrl(template.lepusCode, mainThreadInjectVars, [], globalMuteableVars, createJsModuleUrl, templateName),
+        manifest: await generateJavascriptUrl(template.manifest, backgroundInjectVars, backgroundInjectWithBind, [], createJsModuleUrl, templateName),
+    };
+}
+//# sourceMappingURL=generateTemplate.js.map

package/dist/utils/index.d.ts

@@ -1 +1,3 @@
 export { LynxCrossThreadContext } from './LynxCrossThreadContext.js';
+export { dispatchMarkTiming, flushMarkTiming } from './markTiming.js';
+export { generateTemplate } from './generateTemplate.js';

package/dist/utils/index.js

@@ -1,2 +1,7 @@
+// 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.
 export { LynxCrossThreadContext } from './LynxCrossThreadContext.js';
+export { dispatchMarkTiming, flushMarkTiming } from './markTiming.js';
+export { generateTemplate } from './generateTemplate.js';
 //# sourceMappingURL=index.js.map

package/dist/utils/markTiming.d.ts

@@ -0,0 +1,15 @@
+import type { MarkTiming } from '../types/MarkTiming.js';
+export declare const dispatchMarkTiming: ({ timingKey, pipelineId, timeStamp, markTiming, cacheMarkTimings }: {
+    timingKey: string;
+    pipelineId?: string;
+    timeStamp?: number;
+    markTiming: (markTimings: MarkTiming[]) => void;
+    cacheMarkTimings: {
+        records: MarkTiming[];
+        timeout: NodeJS.Timeout | null;
+    };
+}) => void;
+export declare const flushMarkTiming: (markTiming: (markTimings: MarkTiming[]) => void, cacheMarkTimings: {
+    records: MarkTiming[];
+    timeout: NodeJS.Timeout | null;
+}) => void;

package/dist/utils/markTiming.js

@@ -0,0 +1,26 @@
+// 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.
+export const dispatchMarkTiming = ({ timingKey, pipelineId, timeStamp, markTiming, cacheMarkTimings }) => {
+    cacheMarkTimings.records.push({
+        timingKey,
+        pipelineId,
+        timeStamp: timeStamp ?? performance.now() + performance.timeOrigin,
+    });
+    if (!cacheMarkTimings.timeout) {
+        cacheMarkTimings.timeout = setTimeout(() => {
+            markTiming(cacheMarkTimings.records);
+            cacheMarkTimings.records = [];
+            cacheMarkTimings.timeout = null;
+        }, 500);
+    }
+};
+export const flushMarkTiming = (markTiming, cacheMarkTimings) => {
+    markTiming(cacheMarkTimings.records);
+    cacheMarkTimings.records = [];
+    if (cacheMarkTimings.timeout) {
+        clearTimeout(cacheMarkTimings.timeout);
+        cacheMarkTimings.timeout = null;
+    }
+};
+//# sourceMappingURL=markTiming.js.map

package/package.json

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