@lynx-js/web-mainthread-apis 0.13.4 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +93 -0
- package/dist/createMainThreadGlobalThis.d.ts +25 -0
- package/dist/createMainThreadGlobalThis.js +454 -0
- package/dist/createMainThreadLynx.d.ts +3 -0
- package/dist/{MainThreadLynx.js → createMainThreadLynx.js} +2 -5
- package/dist/crossThreadHandlers/registerCallLepusMethodHandler.d.ts +2 -3
- package/dist/crossThreadHandlers/registerCallLepusMethodHandler.js +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/prepareMainThreadAPIs.d.ts +3 -4
- package/dist/prepareMainThreadAPIs.js +30 -16
- package/dist/pureElementPAPIs.d.ts +32 -0
- package/dist/pureElementPAPIs.js +140 -0
- package/dist/utils/createCrossThreadEvent.d.ts +2 -3
- package/dist/utils/createCrossThreadEvent.js +23 -12
- package/dist/utils/createExposureService.d.ts +2 -2
- package/dist/utils/createExposureService.js +4 -5
- package/dist/utils/decodeCssInJs.js +1 -1
- package/package.json +3 -3
- package/dist/MainThreadLynx.d.ts +0 -10
- package/dist/MainThreadRuntime.d.ts +0 -92
- package/dist/MainThreadRuntime.js +0 -186
- package/dist/elementAPI/ElementThreadElement.d.ts +0 -27
- package/dist/elementAPI/ElementThreadElement.js +0 -2
- package/dist/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.d.ts +0 -30
- package/dist/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.js +0 -127
- package/dist/elementAPI/domTree/domTreeFunctions.d.ts +0 -11
- package/dist/elementAPI/domTree/domTreeFunctions.js +0 -49
- package/dist/elementAPI/elementCreating/elementCreatingFunctions.d.ts +0 -15
- package/dist/elementAPI/elementCreating/elementCreatingFunctions.js +0 -123
- package/dist/elementAPI/event/eventFunctions.d.ts +0 -25
- package/dist/elementAPI/event/eventFunctions.js +0 -142
- package/dist/elementAPI/style/styleFunctions.d.ts +0 -10
- package/dist/elementAPI/style/styleFunctions.js +0 -89
- /package/dist/{elementAPI/style → style}/cssPropertyMap.d.ts +0 -0
- /package/dist/{elementAPI/style → style}/cssPropertyMap.js +0 -0
- /package/dist/{elementAPI/style → style}/transformInlineStyle.d.ts +0 -0
- /package/dist/{elementAPI/style → style}/transformInlineStyle.js +0 -0
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
// Copyright 2023 The Lynx Authors. All rights reserved.
|
|
2
2
|
// Licensed under the Apache License Version 2.0 that can be found in the
|
|
3
3
|
// LICENSE file in the root directory of this source tree.
|
|
4
|
-
import { BackgroundThreadStartEndpoint, publishEventEndpoint, publicComponentEventEndpoint, postExposureEndpoint,
|
|
4
|
+
import { BackgroundThreadStartEndpoint, publishEventEndpoint, publicComponentEventEndpoint, postExposureEndpoint, postTimingFlagsEndpoint, dispatchCoreContextOnBackgroundEndpoint, dispatchJSContextOnMainThreadEndpoint, LynxCrossThreadContext, switchExposureServiceEndpoint, getCacheI18nResourcesKey, dispatchI18nResourceEndpoint, } from '@lynx-js/web-constants';
|
|
5
5
|
import { registerCallLepusMethodHandler } from './crossThreadHandlers/registerCallLepusMethodHandler.js';
|
|
6
6
|
import { registerGetCustomSectionHandler } from './crossThreadHandlers/registerGetCustomSectionHandler.js';
|
|
7
|
-
import {
|
|
7
|
+
import { createMainThreadGlobalThis } from './createMainThreadGlobalThis.js';
|
|
8
|
+
import { createExposureService } from './utils/createExposureService.js';
|
|
8
9
|
const moduleCache = {};
|
|
9
|
-
export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, commitDocument, markTimingInternal, reportError) {
|
|
10
|
+
export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, commitDocument, markTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources) {
|
|
10
11
|
const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
|
|
11
12
|
const backgroundStart = backgroundThreadRpc.createCall(BackgroundThreadStartEndpoint);
|
|
12
13
|
const publishEvent = backgroundThreadRpc.createCall(publishEventEndpoint);
|
|
13
14
|
const publicComponentEvent = backgroundThreadRpc.createCall(publicComponentEventEndpoint);
|
|
14
15
|
const postExposure = backgroundThreadRpc.createCall(postExposureEndpoint);
|
|
16
|
+
const dispatchI18nResource = backgroundThreadRpc.createCall(dispatchI18nResourceEndpoint);
|
|
15
17
|
markTimingInternal('lepus_execute_start');
|
|
16
18
|
async function startMainThread(config) {
|
|
17
19
|
let isFp = true;
|
|
18
|
-
const { globalProps, template, browserConfig, nativeModulesMap, napiModulesMap, tagMap, } = config;
|
|
20
|
+
const { globalProps, template, browserConfig, nativeModulesMap, napiModulesMap, tagMap, initI18nResources, } = config;
|
|
19
21
|
const { styleInfo, pageConfig, customSections, cardType, lepusCode } = template;
|
|
20
22
|
markTimingInternal('decode_start');
|
|
21
23
|
const lepusCodeEntries = await Promise.all(Object.entries(lepusCode).map(async ([name, url]) => {
|
|
@@ -39,7 +41,8 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
|
|
|
39
41
|
receiveEventEndpoint: dispatchJSContextOnMainThreadEndpoint,
|
|
40
42
|
sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint,
|
|
41
43
|
});
|
|
42
|
-
const
|
|
44
|
+
const i18nResources = initialI18nResources(initI18nResources);
|
|
45
|
+
const mtsGlobalThis = createMainThreadGlobalThis({
|
|
43
46
|
jsContext,
|
|
44
47
|
tagMap,
|
|
45
48
|
browserConfig,
|
|
@@ -48,18 +51,20 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
|
|
|
48
51
|
pageConfig,
|
|
49
52
|
styleInfo,
|
|
50
53
|
lepusCode: lepusCodeLoaded,
|
|
51
|
-
createElement,
|
|
52
54
|
rootDom,
|
|
53
55
|
callbacks: {
|
|
54
56
|
mainChunkReady: () => {
|
|
55
57
|
markTimingInternal('data_processor_start');
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
58
|
+
let initData = config.initData;
|
|
59
|
+
if (pageConfig.enableJSDataProcessor !== true
|
|
60
|
+
&& mtsGlobalThis.processData) {
|
|
61
|
+
initData = mtsGlobalThis.processData(config.initData);
|
|
62
|
+
}
|
|
59
63
|
markTimingInternal('data_processor_end');
|
|
60
|
-
registerCallLepusMethodHandler(backgroundThreadRpc,
|
|
64
|
+
registerCallLepusMethodHandler(backgroundThreadRpc, mtsGlobalThis);
|
|
61
65
|
registerGetCustomSectionHandler(backgroundThreadRpc, customSections);
|
|
62
|
-
|
|
66
|
+
const { switchExposureService } = createExposureService(rootDom, postExposure);
|
|
67
|
+
backgroundThreadRpc.registerHandler(switchExposureServiceEndpoint, switchExposureService);
|
|
63
68
|
backgroundStart({
|
|
64
69
|
initData,
|
|
65
70
|
globalProps,
|
|
@@ -70,8 +75,8 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
|
|
|
70
75
|
napiModulesMap,
|
|
71
76
|
browserConfig,
|
|
72
77
|
});
|
|
73
|
-
|
|
74
|
-
|
|
78
|
+
mtsGlobalThis.renderPage(initData);
|
|
79
|
+
mtsGlobalThis.__FlushElementTree(undefined, {});
|
|
75
80
|
},
|
|
76
81
|
flushElementTree: async (options, timingFlags) => {
|
|
77
82
|
const pipelineId = options?.pipelineOptions?.pipelineID;
|
|
@@ -108,13 +113,22 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
|
|
|
108
113
|
markTiming: (a, b) => markTimingInternal(b, a),
|
|
109
114
|
publishEvent,
|
|
110
115
|
publicComponentEvent,
|
|
111
|
-
|
|
116
|
+
createElement,
|
|
117
|
+
_I18nResourceTranslation: (options) => {
|
|
118
|
+
const matchedInitI18nResources = i18nResources.data?.find(i => getCacheI18nResourcesKey(i.options)
|
|
119
|
+
=== getCacheI18nResourcesKey(options));
|
|
120
|
+
dispatchI18nResource(matchedInitI18nResources?.resource);
|
|
121
|
+
if (matchedInitI18nResources) {
|
|
122
|
+
return matchedInitI18nResources.resource;
|
|
123
|
+
}
|
|
124
|
+
return triggerI18nResourceFallback(options);
|
|
125
|
+
},
|
|
112
126
|
},
|
|
113
127
|
});
|
|
114
128
|
markTimingInternal('decode_end');
|
|
115
|
-
entry(
|
|
129
|
+
entry(mtsGlobalThis);
|
|
116
130
|
jsContext.__start(); // start the jsContext after the runtime is created
|
|
117
|
-
return
|
|
131
|
+
return mtsGlobalThis;
|
|
118
132
|
}
|
|
119
133
|
return { startMainThread };
|
|
120
134
|
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { type AddClassPAPI, type AddConfigPAPI, type AddDatasetPAPI, type AddInlineStylePAPI, type AppendElementPAPI, type ElementIsEqualPAPI, type FirstElementPAPI, type GetAttributesPAPI, type GetChildrenPAPI, type GetClassesPAPI, type GetComponentIdPAPI, type GetDataByKeyPAPI, type GetDatasetPAPI, type GetElementConfigPAPI, type GetElementUniqueIDPAPI, type GetIDPAPI, type GetParentPAPI, type GetTagPAPI, type InsertElementBeforePAPI, type LastElementPAPI, type NextElementPAPI, type RemoveElementPAPI, type ReplaceElementPAPI, type ReplaceElementsPAPI, type SetClassesPAPI, type SetConfigPAPI, type SetCSSIdPAPI, type SetDatasetPAPI, type SetIDPAPI, type SetInlineStylesPAPI, type UpdateComponentIDPAPI } from '@lynx-js/web-constants';
|
|
2
|
+
export declare const __AppendElement: AppendElementPAPI;
|
|
3
|
+
export declare const __ElementIsEqual: ElementIsEqualPAPI;
|
|
4
|
+
export declare const __FirstElement: FirstElementPAPI;
|
|
5
|
+
export declare const __GetChildren: GetChildrenPAPI;
|
|
6
|
+
export declare const __GetParent: GetParentPAPI;
|
|
7
|
+
export declare const __InsertElementBefore: InsertElementBeforePAPI;
|
|
8
|
+
export declare const __LastElement: LastElementPAPI;
|
|
9
|
+
export declare const __NextElement: NextElementPAPI;
|
|
10
|
+
export declare const __RemoveElement: RemoveElementPAPI;
|
|
11
|
+
export declare const __ReplaceElement: ReplaceElementPAPI;
|
|
12
|
+
export declare const __ReplaceElements: ReplaceElementsPAPI;
|
|
13
|
+
export declare const __AddConfig: AddConfigPAPI;
|
|
14
|
+
export declare const __AddDataset: AddDatasetPAPI;
|
|
15
|
+
export declare const __GetDataset: GetDatasetPAPI;
|
|
16
|
+
export declare const __GetDataByKey: GetDataByKeyPAPI;
|
|
17
|
+
export declare const __GetAttributes: GetAttributesPAPI;
|
|
18
|
+
export declare const __GetComponentID: GetComponentIdPAPI;
|
|
19
|
+
export declare const __GetElementConfig: GetElementConfigPAPI;
|
|
20
|
+
export declare const __GetElementUniqueID: GetElementUniqueIDPAPI;
|
|
21
|
+
export declare const __GetID: GetIDPAPI;
|
|
22
|
+
export declare const __SetID: SetIDPAPI;
|
|
23
|
+
export declare const __GetTag: GetTagPAPI;
|
|
24
|
+
export declare const __SetConfig: SetConfigPAPI;
|
|
25
|
+
export declare const __SetDataset: SetDatasetPAPI;
|
|
26
|
+
export declare const __UpdateComponentID: UpdateComponentIDPAPI;
|
|
27
|
+
export declare const __GetClasses: GetClassesPAPI;
|
|
28
|
+
export declare const __SetCSSId: SetCSSIdPAPI;
|
|
29
|
+
export declare const __SetClasses: SetClassesPAPI;
|
|
30
|
+
export declare const __AddInlineStyle: AddInlineStylePAPI;
|
|
31
|
+
export declare const __AddClass: AddClassPAPI;
|
|
32
|
+
export declare const __SetInlineStyles: SetInlineStylesPAPI;
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
// Copyright 2023 The Lynx Authors. All rights reserved.
|
|
2
|
+
// Licensed under the Apache License Version 2.0 that can be found in the
|
|
3
|
+
// LICENSE file in the root directory of this source tree.
|
|
4
|
+
import { componentIdAttribute, cssIdAttribute, lynxComponentConfigAttribute, lynxDatasetAttribute, lynxTagAttribute, lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
|
|
5
|
+
import { queryCSSProperty } from './style/cssPropertyMap.js';
|
|
6
|
+
import { transformInlineStyleString, transformParsedStyles, } from './style/transformInlineStyle.js';
|
|
7
|
+
import hyphenateStyleName from 'hyphenate-style-name';
|
|
8
|
+
export const __AppendElement = /*#__PURE__*/ (parent, child) => parent.appendChild(child);
|
|
9
|
+
export const __ElementIsEqual = /*#__PURE__*/ (left, right) => left === right;
|
|
10
|
+
export const __FirstElement = /*#__PURE__*/ (element) => element.firstElementChild;
|
|
11
|
+
export const __GetChildren = /*#__PURE__*/ (element) => element.children;
|
|
12
|
+
export const __GetParent = /*#__PURE__*/ (element) => element.parentElement;
|
|
13
|
+
export const __InsertElementBefore = /*#__PURE__*/ (parent, child, ref) => parent.insertBefore(child, ref);
|
|
14
|
+
export const __LastElement = /*#__PURE__*/ (element) => element.lastElementChild;
|
|
15
|
+
export const __NextElement = /*#__PURE__*/ (element) => element.nextElementSibling;
|
|
16
|
+
export const __RemoveElement = /*#__PURE__*/ (parent, child) => parent.removeChild(child);
|
|
17
|
+
export const __ReplaceElement = /*#__PURE__*/ (newElement, oldElement) => oldElement.replaceWith(newElement);
|
|
18
|
+
export const __ReplaceElements = /*#__PURE__*/ (parent, newChildren, oldChildren) => {
|
|
19
|
+
newChildren = Array.isArray(newChildren) ? newChildren : [newChildren];
|
|
20
|
+
if (!oldChildren || (Array.isArray(oldChildren) && oldChildren?.length === 0)) {
|
|
21
|
+
parent.append(...newChildren);
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
oldChildren = Array.isArray(oldChildren) ? oldChildren : [oldChildren];
|
|
25
|
+
for (let ii = 1; ii < oldChildren.length; ii++) {
|
|
26
|
+
__RemoveElement(parent, oldChildren[ii]);
|
|
27
|
+
}
|
|
28
|
+
const firstOldChildren = oldChildren[0];
|
|
29
|
+
firstOldChildren.replaceWith(...newChildren);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
export const __AddConfig = /*#__PURE__*/ (element, type, value) => {
|
|
33
|
+
const currentComponentConfigString = element.getAttribute(lynxComponentConfigAttribute);
|
|
34
|
+
let currentComponentConfig = currentComponentConfigString
|
|
35
|
+
? JSON.parse(decodeURIComponent(currentComponentConfigString))
|
|
36
|
+
: {};
|
|
37
|
+
currentComponentConfig[type] = value;
|
|
38
|
+
element.setAttribute(lynxComponentConfigAttribute, encodeURIComponent(JSON.stringify(currentComponentConfig)));
|
|
39
|
+
};
|
|
40
|
+
export const __AddDataset = /*#__PURE__*/ (element, key, value) => {
|
|
41
|
+
const currentDataset = __GetDataset(element);
|
|
42
|
+
currentDataset[key] = value;
|
|
43
|
+
element.setAttribute(lynxDatasetAttribute, encodeURIComponent(JSON.stringify(currentDataset)));
|
|
44
|
+
value
|
|
45
|
+
? element.setAttribute('data-' + key, value.toString())
|
|
46
|
+
: element.removeAttribute('data-' + key);
|
|
47
|
+
};
|
|
48
|
+
export const __GetDataset = /*#__PURE__*/ (element) => {
|
|
49
|
+
const datasetString = element.getAttribute(lynxDatasetAttribute);
|
|
50
|
+
const currentDataset = datasetString
|
|
51
|
+
? JSON.parse(decodeURIComponent(datasetString))
|
|
52
|
+
: {};
|
|
53
|
+
return currentDataset;
|
|
54
|
+
};
|
|
55
|
+
export const __GetDataByKey = /*#__PURE__*/ (element, key) => {
|
|
56
|
+
const dataset = __GetDataset(element);
|
|
57
|
+
return dataset[key];
|
|
58
|
+
};
|
|
59
|
+
export const __GetAttributes = /*#__PURE__*/ (element) => {
|
|
60
|
+
return Object.fromEntries(element.getAttributeNames().map((attributeName) => [attributeName, element.getAttribute(attributeName)])
|
|
61
|
+
.filter(([, value]) => value));
|
|
62
|
+
};
|
|
63
|
+
export const __GetComponentID = /*#__PURE__*/ (element) => element.getAttribute(componentIdAttribute);
|
|
64
|
+
export const __GetElementConfig = /*#__PURE__*/ (element) => {
|
|
65
|
+
const currentComponentConfigString = element.getAttribute(lynxComponentConfigAttribute);
|
|
66
|
+
return currentComponentConfigString
|
|
67
|
+
? JSON.parse(decodeURIComponent(currentComponentConfigString))
|
|
68
|
+
: {};
|
|
69
|
+
};
|
|
70
|
+
export const __GetElementUniqueID = /*#__PURE__*/ (element) => (element && element.getAttribute
|
|
71
|
+
? Number(element.getAttribute(lynxUniqueIdAttribute))
|
|
72
|
+
: -1);
|
|
73
|
+
export const __GetID = /*#__PURE__*/ (element) => element.getAttribute('id');
|
|
74
|
+
export const __SetID = /*#__PURE__*/ (element, id) => id ? element.setAttribute('id', id) : element.removeAttribute('id');
|
|
75
|
+
export const __GetTag = /*#__PURE__*/ (element) => element.getAttribute(lynxTagAttribute);
|
|
76
|
+
export const __SetConfig = /*#__PURE__*/ (element, config) => {
|
|
77
|
+
element.setAttribute(lynxComponentConfigAttribute, encodeURIComponent(JSON.stringify(config)));
|
|
78
|
+
};
|
|
79
|
+
export const __SetDataset = /*#__PURE__*/ (element, dataset) => {
|
|
80
|
+
element.setAttribute(lynxDatasetAttribute, encodeURIComponent(JSON.stringify(dataset)));
|
|
81
|
+
for (const [key, value] of Object.entries(dataset)) {
|
|
82
|
+
element.setAttribute('data-' + key, value.toString());
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
export const __UpdateComponentID = /*#__PURE__*/ (element, componentID) => element.setAttribute(componentIdAttribute, componentID);
|
|
86
|
+
export const __GetClasses = /*#__PURE__*/ (element) => ((element.getAttribute('class') ?? '').split(' ').filter(e => e));
|
|
87
|
+
export const __SetCSSId = /*#__PURE__*/ (elements, cssId) => {
|
|
88
|
+
for (const element of elements) {
|
|
89
|
+
element.setAttribute(cssIdAttribute, cssId + '');
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
export const __SetClasses = /*#__PURE__*/ (element, classname) => {
|
|
93
|
+
classname
|
|
94
|
+
? element.setAttribute('class', classname)
|
|
95
|
+
: element.removeAttribute('class');
|
|
96
|
+
};
|
|
97
|
+
export const __AddInlineStyle = /*#__PURE__*/ (element, key, value) => {
|
|
98
|
+
let dashName;
|
|
99
|
+
if (typeof key === 'number') {
|
|
100
|
+
const queryResult = queryCSSProperty(key);
|
|
101
|
+
dashName = queryResult.dashName;
|
|
102
|
+
if (queryResult.isX) {
|
|
103
|
+
console.error(`[lynx-web] css property: ${dashName} is not supported.`);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
else {
|
|
107
|
+
dashName = key;
|
|
108
|
+
}
|
|
109
|
+
const valueStr = typeof value === 'number' ? value.toString() : value;
|
|
110
|
+
if (!valueStr) { // null or undefined
|
|
111
|
+
element.style.removeProperty(dashName);
|
|
112
|
+
}
|
|
113
|
+
else {
|
|
114
|
+
const { transformedStyle } = transformParsedStyles([[
|
|
115
|
+
dashName,
|
|
116
|
+
valueStr,
|
|
117
|
+
]]);
|
|
118
|
+
for (const [property, value] of transformedStyle) {
|
|
119
|
+
element.style.setProperty(property, value);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
export const __AddClass = /*#__PURE__*/ (element, className) => {
|
|
124
|
+
const newClassName = ((element.getAttribute('class') ?? '') + ' ' + className)
|
|
125
|
+
.trim();
|
|
126
|
+
element.setAttribute('class', newClassName);
|
|
127
|
+
};
|
|
128
|
+
export const __SetInlineStyles = /*#__PURE__*/ (element, value) => {
|
|
129
|
+
if (!value)
|
|
130
|
+
return;
|
|
131
|
+
const { transformedStyle } = typeof value === 'string'
|
|
132
|
+
? transformInlineStyleString(value)
|
|
133
|
+
: transformParsedStyles(Object.entries(value).map(([k, value]) => [
|
|
134
|
+
hyphenateStyleName(k),
|
|
135
|
+
value,
|
|
136
|
+
]));
|
|
137
|
+
const transformedStyleStr = transformedStyle.map(([property, value]) => `${property}:${value};`).join('');
|
|
138
|
+
element.setAttribute('style', transformedStyleStr);
|
|
139
|
+
};
|
|
140
|
+
//# sourceMappingURL=pureElementPAPIs.js.map
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
import type
|
|
2
|
-
|
|
3
|
-
export declare function createCrossThreadEvent(runtime: MainThreadRuntime, domEvent: Event, eventName: string): LynxCrossThreadEvent;
|
|
1
|
+
import { type LynxCrossThreadEvent, type MinimalRawEventObject } from '@lynx-js/web-constants';
|
|
2
|
+
export declare function createCrossThreadEvent(domEvent: MinimalRawEventObject, eventName: string): LynxCrossThreadEvent;
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
// Copyright 2023 The Lynx Authors. All rights reserved.
|
|
2
|
+
// Licensed under the Apache License Version 2.0 that can be found in the
|
|
3
|
+
// LICENSE file in the root directory of this source tree.
|
|
4
|
+
import { lynxDatasetAttribute, lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
|
|
2
5
|
function toCloneableObject(obj) {
|
|
3
6
|
const cloneableObj = {};
|
|
4
7
|
for (const key in obj) {
|
|
@@ -10,10 +13,12 @@ function toCloneableObject(obj) {
|
|
|
10
13
|
}
|
|
11
14
|
return cloneableObj;
|
|
12
15
|
}
|
|
13
|
-
export function createCrossThreadEvent(
|
|
16
|
+
export function createCrossThreadEvent(domEvent, eventName) {
|
|
14
17
|
const targetElement = domEvent.target;
|
|
15
18
|
const currentTargetElement = domEvent
|
|
16
|
-
.currentTarget
|
|
19
|
+
.currentTarget.getAttribute
|
|
20
|
+
? domEvent.currentTarget
|
|
21
|
+
: undefined;
|
|
17
22
|
const type = domEvent.type;
|
|
18
23
|
const params = {};
|
|
19
24
|
const isTrusted = domEvent.isTrusted;
|
|
@@ -47,21 +52,27 @@ export function createCrossThreadEvent(runtime, domEvent, eventName) {
|
|
|
47
52
|
: changedTouches,
|
|
48
53
|
});
|
|
49
54
|
}
|
|
50
|
-
const
|
|
51
|
-
const
|
|
55
|
+
const currentTargetDatasetString = currentTargetElement?.getAttribute(lynxDatasetAttribute);
|
|
56
|
+
const currentTargetDataset = currentTargetDatasetString
|
|
57
|
+
? JSON.parse(decodeURIComponent(currentTargetDatasetString))
|
|
58
|
+
: {};
|
|
59
|
+
const targetDatasetString = targetElement.getAttribute(lynxDatasetAttribute);
|
|
60
|
+
const targetDataset = targetDatasetString
|
|
61
|
+
? JSON.parse(decodeURIComponent(targetDatasetString))
|
|
62
|
+
: {};
|
|
52
63
|
return {
|
|
53
64
|
type: eventName,
|
|
54
65
|
timestamp: domEvent.timeStamp,
|
|
55
66
|
target: {
|
|
56
|
-
id: targetElement.id,
|
|
57
|
-
dataset:
|
|
58
|
-
uniqueId:
|
|
67
|
+
id: targetElement.getAttribute('id'),
|
|
68
|
+
dataset: targetDataset,
|
|
69
|
+
uniqueId: Number(targetElement.getAttribute(lynxUniqueIdAttribute)),
|
|
59
70
|
},
|
|
60
|
-
currentTarget:
|
|
71
|
+
currentTarget: currentTargetElement
|
|
61
72
|
? {
|
|
62
|
-
id: currentTargetElement.id,
|
|
63
|
-
dataset:
|
|
64
|
-
uniqueId:
|
|
73
|
+
id: currentTargetElement.getAttribute('id'),
|
|
74
|
+
dataset: currentTargetDataset,
|
|
75
|
+
uniqueId: Number(currentTargetElement.getAttribute(lynxUniqueIdAttribute)),
|
|
65
76
|
}
|
|
66
77
|
: null,
|
|
67
78
|
// @ts-expect-error
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type
|
|
2
|
-
export declare function createExposureService(
|
|
1
|
+
import { type postExposureEndpoint, type RpcCallType } from '@lynx-js/web-constants';
|
|
2
|
+
export declare function createExposureService(rootDom: Pick<EventTarget, 'addEventListener'>, postExposure: RpcCallType<typeof postExposureEndpoint>): {
|
|
3
3
|
switchExposureService: (enable: boolean, sendEvent: boolean) => void;
|
|
4
4
|
};
|
|
@@ -3,14 +3,13 @@
|
|
|
3
3
|
// LICENSE file in the root directory of this source tree.
|
|
4
4
|
import { lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
|
|
5
5
|
import { createCrossThreadEvent } from './createCrossThreadEvent.js';
|
|
6
|
-
export function createExposureService(
|
|
7
|
-
const postExposure = runtime.config.callbacks.postExposure;
|
|
6
|
+
export function createExposureService(rootDom, postExposure) {
|
|
8
7
|
let working = true;
|
|
9
8
|
let exposureCache = [];
|
|
10
9
|
let disexposureCache = [];
|
|
11
10
|
const onScreen = new Map();
|
|
12
11
|
function exposureEventHandler(ev) {
|
|
13
|
-
const exposureEvent = createCrossThreadEvent(
|
|
12
|
+
const exposureEvent = createCrossThreadEvent(ev, ev.type);
|
|
14
13
|
exposureEvent.detail['unique-id'] = parseFloat(ev.target.getAttribute(lynxUniqueIdAttribute));
|
|
15
14
|
const exposureID = exposureEvent.detail.exposureID;
|
|
16
15
|
if (ev.type === 'exposure') {
|
|
@@ -34,10 +33,10 @@ export function createExposureService(runtime) {
|
|
|
34
33
|
});
|
|
35
34
|
}
|
|
36
35
|
}, 1000 / 20);
|
|
37
|
-
|
|
36
|
+
rootDom.addEventListener('exposure', exposureEventHandler, {
|
|
38
37
|
passive: true,
|
|
39
38
|
});
|
|
40
|
-
|
|
39
|
+
rootDom.addEventListener('disexposure', exposureEventHandler, {
|
|
41
40
|
passive: true,
|
|
42
41
|
});
|
|
43
42
|
function switchExposureService(enable, sendEvent) {
|
|
@@ -16,7 +16,7 @@ export function decodeCssInJs(classes, styleInfo, cssId) {
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
else {
|
|
19
|
-
|
|
19
|
+
console.warn(`[lynx-web] cannot find styleinfo for cssid ${cssId}`);
|
|
20
20
|
}
|
|
21
21
|
return declarations.map(([property, value]) => `${property}:${value};`).join('');
|
|
22
22
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lynx-js/web-mainthread-apis",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"css-tree": "^3.1.0",
|
|
27
27
|
"hyphenate-style-name": "^1.1.0",
|
|
28
|
-
"@lynx-js/web-constants": "0.
|
|
29
|
-
"@lynx-js/web-style-transformer": "0.3.
|
|
28
|
+
"@lynx-js/web-constants": "0.14.0",
|
|
29
|
+
"@lynx-js/web-style-transformer": "0.3.1"
|
|
30
30
|
}
|
|
31
31
|
}
|
package/dist/MainThreadLynx.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { type MainThreadRuntimeConfig } from './MainThreadRuntime.js';
|
|
2
|
-
export declare function createMainThreadLynx(config: MainThreadRuntimeConfig): {
|
|
3
|
-
getJSContext(): import("@lynx-js/web-constants").LynxContextEventTarget;
|
|
4
|
-
requestAnimationFrame(cb: FrameRequestCallback): number;
|
|
5
|
-
cancelAnimationFrame(handler: number): void;
|
|
6
|
-
__globalProps: unknown;
|
|
7
|
-
getCustomSectionSync(key: string): import("@lynx-js/web-constants").Cloneable;
|
|
8
|
-
markPipelineTiming: (pipelineId: string, timingKey: string) => void;
|
|
9
|
-
};
|
|
10
|
-
export type MainThreadLynx = ReturnType<typeof createMainThreadLynx>;
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import { type LynxTemplate, type PageConfig, type ProcessDataCallback, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type postExposureEndpoint, type LynxContextEventTarget, type LynxJSModule, systemInfo } from '@lynx-js/web-constants';
|
|
2
|
-
import { type MainThreadLynx } from './MainThreadLynx.js';
|
|
3
|
-
import type { LynxRuntimeInfo } from './elementAPI/ElementThreadElement.js';
|
|
4
|
-
export interface MainThreadRuntimeCallbacks {
|
|
5
|
-
mainChunkReady: () => void;
|
|
6
|
-
flushElementTree: (options: FlushElementTreeOptions, timingFlags: string[]) => void;
|
|
7
|
-
_ReportError: RpcCallType<typeof reportErrorEndpoint>;
|
|
8
|
-
__OnLifecycleEvent: (lifeCycleEvent: Cloneable) => void;
|
|
9
|
-
markTiming: (pipelineId: string, timingKey: string) => void;
|
|
10
|
-
publishEvent: RpcCallType<typeof publishEventEndpoint>;
|
|
11
|
-
publicComponentEvent: RpcCallType<typeof publicComponentEventEndpoint>;
|
|
12
|
-
postExposure: RpcCallType<typeof postExposureEndpoint>;
|
|
13
|
-
}
|
|
14
|
-
export interface MainThreadRuntimeConfig {
|
|
15
|
-
pageConfig: PageConfig;
|
|
16
|
-
globalProps: unknown;
|
|
17
|
-
callbacks: MainThreadRuntimeCallbacks;
|
|
18
|
-
styleInfo: StyleInfo;
|
|
19
|
-
customSections: LynxTemplate['customSections'];
|
|
20
|
-
lepusCode: Record<string, LynxJSModule>;
|
|
21
|
-
browserConfig: BrowserConfig;
|
|
22
|
-
tagMap: Record<string, string>;
|
|
23
|
-
createElement: Document['createElement'];
|
|
24
|
-
rootDom: Pick<Element, 'append' | 'addEventListener'>;
|
|
25
|
-
jsContext: LynxContextEventTarget;
|
|
26
|
-
}
|
|
27
|
-
export declare const elementToRuntimeInfoMap: unique symbol;
|
|
28
|
-
export declare const getElementByUniqueId: unique symbol;
|
|
29
|
-
export declare const updateCSSInJsStyle: unique symbol;
|
|
30
|
-
export declare const lynxUniqueIdToElement: unique symbol;
|
|
31
|
-
export declare const switchExposureService: unique symbol;
|
|
32
|
-
export declare class MainThreadRuntime {
|
|
33
|
-
#private;
|
|
34
|
-
config: MainThreadRuntimeConfig;
|
|
35
|
-
/**
|
|
36
|
-
* @private
|
|
37
|
-
*/
|
|
38
|
-
[lynxUniqueIdToElement]: WeakRef<HTMLElement>[];
|
|
39
|
-
/**
|
|
40
|
-
* @private
|
|
41
|
-
*/
|
|
42
|
-
[switchExposureService]: (enable: boolean, sendEvent: boolean) => void;
|
|
43
|
-
/**
|
|
44
|
-
* @private
|
|
45
|
-
*/
|
|
46
|
-
private _lynxUniqueIdToStyleSheet;
|
|
47
|
-
/**
|
|
48
|
-
* @private
|
|
49
|
-
*/
|
|
50
|
-
_page?: HTMLElement;
|
|
51
|
-
/**
|
|
52
|
-
* @private the CreatePage will append it to this
|
|
53
|
-
*/
|
|
54
|
-
_rootDom: Pick<Element, 'append' | 'addEventListener'>;
|
|
55
|
-
_createElement: Document['createElement'];
|
|
56
|
-
/**
|
|
57
|
-
* @private
|
|
58
|
-
*/
|
|
59
|
-
_timingFlags: string[];
|
|
60
|
-
/**
|
|
61
|
-
* @private
|
|
62
|
-
*/
|
|
63
|
-
[elementToRuntimeInfoMap]: WeakMap<HTMLElement, LynxRuntimeInfo>;
|
|
64
|
-
constructor(config: MainThreadRuntimeConfig);
|
|
65
|
-
/**
|
|
66
|
-
* @private
|
|
67
|
-
*/
|
|
68
|
-
[getElementByUniqueId](uniqueId: number): HTMLElement | undefined;
|
|
69
|
-
[updateCSSInJsStyle](uniqueId: number, newStyles: string): void;
|
|
70
|
-
/**
|
|
71
|
-
* @private
|
|
72
|
-
*/
|
|
73
|
-
__lynxGlobalBindingValues: Record<string, any>;
|
|
74
|
-
globalThis: this;
|
|
75
|
-
SystemInfo: typeof systemInfo;
|
|
76
|
-
lynx: MainThreadLynx;
|
|
77
|
-
__globalProps: unknown;
|
|
78
|
-
processData?: ProcessDataCallback;
|
|
79
|
-
ssrEncode?: () => string;
|
|
80
|
-
ssrHydrate?: (encodeData?: string) => void;
|
|
81
|
-
renderPage: (data: unknown) => void;
|
|
82
|
-
__GetTemplateParts?: () => Record<string, Element> | undefined;
|
|
83
|
-
__GetPageElement: () => HTMLElement | undefined;
|
|
84
|
-
_ReportError: RpcCallType<typeof reportErrorEndpoint>;
|
|
85
|
-
__OnLifecycleEvent: (lifeCycleEvent: Cloneable) => void;
|
|
86
|
-
__LoadLepusChunk: (path: string) => boolean;
|
|
87
|
-
__FlushElementTree: (_subTree: unknown, options: FlushElementTreeOptions) => void;
|
|
88
|
-
updatePage?: (data: Cloneable, options?: Record<string, string>) => void;
|
|
89
|
-
runWorklet?: (obj: unknown, event: unknown) => void;
|
|
90
|
-
private __varsUpdateHandlers;
|
|
91
|
-
set _updateVars(handler: () => void);
|
|
92
|
-
}
|