@lynx-js/web-mainthread-apis 0.7.1 → 0.9.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.
Files changed (13) hide show
  1. package/CHANGELOG.md +62 -0
  2. package/dist/MainThreadRuntime.d.ts +12 -8
  3. package/dist/MainThreadRuntime.js +11 -4
  4. package/dist/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.d.ts +0 -1
  5. package/dist/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.js +3 -6
  6. package/dist/elementAPI/attributeAndProperty/createAttributeAndPropertyFunctionsWithContext.d.ts +5 -0
  7. package/dist/elementAPI/attributeAndProperty/createAttributeAndPropertyFunctionsWithContext.js +13 -0
  8. package/dist/elementAPI/createOffscreenDocument.js +1 -1
  9. package/dist/elementAPI/elementCreating/elementCreatingFunctions.d.ts +1 -1
  10. package/dist/elementAPI/elementCreating/elementCreatingFunctions.js +6 -8
  11. package/dist/utils/processStyleInfo.d.ts +2 -2
  12. package/dist/utils/processStyleInfo.js +4 -5
  13. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,67 @@
1
1
  # @lynx-js/web-mainthread-apis
2
2
 
3
+ ## 0.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - refractor: remove entryId concept ([#217](https://github.com/lynx-family/lynx-stack/pull/217))
8
+
9
+ After the PR #198
10
+ All contents are isolated by a shadowroot.
11
+ Therefore we don't need to add the entryId selector to avoid the lynx-view's style taking effect on the whole page.
12
+
13
+ ### Patch Changes
14
+
15
+ - refactor: clean the decodeOperations implementation ([#261](https://github.com/lynx-family/lynx-stack/pull/261))
16
+
17
+ - refactor: remove customelement defined detecting logic ([#247](https://github.com/lynx-family/lynx-stack/pull/247))
18
+
19
+ Before this commit, for those element with tag without `-`, we always try to detect if the `x-${tagName}` is defined.
20
+
21
+ After this commit, we pre-define a map(could be override by the `overrideLynxTagToHTMLTagMap`) to make that transformation for tag name.
22
+
23
+ This change is a path to SSR and the MTS support.
24
+
25
+ - Updated dependencies [[`5b5e090`](https://github.com/lynx-family/lynx-stack/commit/5b5e090fdf0e896f1c38a49bf3ed9889117c4fb8), [`f447811`](https://github.com/lynx-family/lynx-stack/commit/f4478112a08d3cf2d1483b87d591ea4e3b6cc2ea), [`b844e75`](https://github.com/lynx-family/lynx-stack/commit/b844e751f566d924256365d37aec4c86c520ec00), [`6f16827`](https://github.com/lynx-family/lynx-stack/commit/6f16827d1f4d7364870d354fc805a8868c110f1e), [`d2d55ef`](https://github.com/lynx-family/lynx-stack/commit/d2d55ef9fe438c35921d9db0daa40d5228822ecc)]:
26
+ - @lynx-js/web-constants@0.9.0
27
+ - @lynx-js/web-style-transformer@0.2.3
28
+
29
+ ## 0.8.0
30
+
31
+ ### Minor Changes
32
+
33
+ - refactor: remove web-elements/lazy and loadNewTag ([#123](https://github.com/lynx-family/lynx-stack/pull/123))
34
+
35
+ - remove @lynx-js/web-elements/lazy
36
+ - remove loadElement
37
+ - remove loadNewTag callback
38
+
39
+ **This is a breaking change**
40
+
41
+ Now we removed the default lazy loading preinstalled in web-core
42
+
43
+ Please add the following statement in your web project
44
+
45
+ ```
46
+ import "@lynx-js/web-elements/all";
47
+ ```
48
+
49
+ - feat: use shadowroot to isolate one lynx-view ([#198](https://github.com/lynx-family/lynx-stack/pull/198))
50
+
51
+ Before this commit, we have been detecting if current browser supports the `@scope` rule.
52
+ This allows us to scope one lynx-view's styles.
53
+
54
+ After this commit we always create a shadowroot to scope then.
55
+
56
+ Also for the new shadowroot pattern, we add a new **attribute** `inject-head-links`.
57
+ By default, we will iterate all `<link rel="stylesheet">` in the `<head>`, and use `@import url()` to import them inside the shadowroot.
58
+ Developers could add a `inject-head-links="false"` to disable this behavior.
59
+
60
+ ### Patch Changes
61
+
62
+ - Updated dependencies [[`e9e8370`](https://github.com/lynx-family/lynx-stack/commit/e9e8370e070a50cbf65a4ebc46c2e37ea1e0be40), [`ec4e1ce`](https://github.com/lynx-family/lynx-stack/commit/ec4e1ce0d7612d6c0701792a46c78cd52130bad4), [`f0a717c`](https://github.com/lynx-family/lynx-stack/commit/f0a717c630700e16ab0af7f1fe370fd60ac75b30)]:
63
+ - @lynx-js/web-constants@0.8.0
64
+
3
65
  ## 0.7.1
4
66
 
5
67
  ### Patch Changes
package/dist/MainThreadRuntime.d.ts CHANGED
@@ -1,11 +1,11 @@
1
- import { type ElementOperation, type LynxLifecycleEvent, type LynxTemplate, type PageConfig, type ProcessDataCallback, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig } from '@lynx-js/web-constants';
1
+ import { type ElementOperation, type LynxTemplate, type PageConfig, type ProcessDataCallback, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type onLifecycleEventEndpoint, type reportErrorEndpoint, type flushElementTreeEndpoint } from '@lynx-js/web-constants';
2
2
  import { type MainThreadLynx } from './MainThreadLynx.js';
3
+ import type { RpcCallType } from '../../web-worker-rpc/src/TypeUtils.js';
3
4
  export interface MainThreadRuntimeCallbacks {
4
5
  mainChunkReady: () => void;
5
- onNewTag: (tag: string) => void;
6
- flushElementTree: (operations: ElementOperation[], options: FlushElementTreeOptions, styleContent?: string) => void;
7
- _ReportError: (error: Error, info?: unknown) => void;
8
- __OnLifecycleEvent: (lynxLifecycleEvents: LynxLifecycleEvent) => void;
6
+ flushElementTree: RpcCallType<typeof flushElementTreeEndpoint>;
7
+ _ReportError: RpcCallType<typeof reportErrorEndpoint>;
8
+ __OnLifecycleEvent: RpcCallType<typeof onLifecycleEventEndpoint>;
9
9
  markTiming: (pipelineId: string, timingKey: string) => void;
10
10
  }
11
11
  export interface MainThreadConfig {
@@ -15,13 +15,17 @@ export interface MainThreadConfig {
15
15
  styleInfo: StyleInfo;
16
16
  customSections: LynxTemplate['customSections'];
17
17
  lepusCode: LynxTemplate['lepusCode'];
18
- entryId: string;
19
18
  browserConfig: BrowserConfig;
19
+ tagMap: Record<string, string>;
20
20
  }
21
21
  export declare class MainThreadRuntime {
22
22
  #private;
23
23
  private config;
24
24
  private isFp;
25
+ /**
26
+ * @private
27
+ */
28
+ _timingFlags: string[];
25
29
  operationsRef: {
26
30
  operations: ElementOperation[];
27
31
  };
@@ -36,8 +40,8 @@ export declare class MainThreadRuntime {
36
40
  __globalProps: unknown;
37
41
  processData?: ProcessDataCallback;
38
42
  renderPage: (data: unknown) => void;
39
- _ReportError: (e: Error, info: unknown) => void;
40
- __OnLifecycleEvent: (lynxLifecycleEvents: LynxLifecycleEvent) => void;
43
+ _ReportError: RpcCallType<typeof reportErrorEndpoint>;
44
+ __OnLifecycleEvent: RpcCallType<typeof onLifecycleEventEndpoint>;
41
45
  __LoadLepusChunk: (path: string) => boolean;
42
46
  __FlushElementTree: (_subTree: unknown, options: FlushElementTreeOptions) => void;
43
47
  updatePage?: (data: Cloneable, options?: Record<string, string>) => void;
package/dist/MainThreadRuntime.js CHANGED
@@ -10,9 +10,14 @@ import * as domTreeApis from './elementAPI/domTree/domTreeFunctions.js';
10
10
  import * as eventApis from './elementAPI/event/eventFunctions.js';
11
11
  import * as styleApis from './elementAPI/style/styleFunctions.js';
12
12
  import { flattenStyleInfo, genCssContent, genCssInJsInfo, transformToWebCss, } from './utils/processStyleInfo.js';
13
+ import { createAttributeAndPropertyFunctionsWithContext } from './elementAPI/attributeAndProperty/createAttributeAndPropertyFunctionsWithContext.js';
13
14
  export class MainThreadRuntime {
14
15
  config;
15
16
  isFp = true;
17
+ /**
18
+ * @private
19
+ */
20
+ _timingFlags = [];
16
21
  operationsRef = {
17
22
  operations: [],
18
23
  };
@@ -25,11 +30,11 @@ export class MainThreadRuntime {
25
30
  const cssInJs = this.config.pageConfig.enableCSSSelector
26
31
  ? {}
27
32
  : genCssInJsInfo(this.config.styleInfo);
28
- Object.assign(this, attributeAndPropertyApis, domTreeApis, eventApis, styleApis, initializeElementCreatingFunction({
33
+ Object.assign(this, createAttributeAndPropertyFunctionsWithContext(this), attributeAndPropertyApis, domTreeApis, eventApis, styleApis, initializeElementCreatingFunction({
29
34
  operationsRef: this.operationsRef,
30
35
  pageConfig: config.pageConfig,
31
- onNewTag: config.callbacks.onNewTag,
32
36
  styleInfo: cssInJs,
37
+ tagMap: config.tagMap,
33
38
  }));
34
39
  this.__LoadLepusChunk = (path) => {
35
40
  try {
@@ -80,10 +85,12 @@ export class MainThreadRuntime {
80
85
  __LoadLepusChunk;
81
86
  __FlushElementTree = (_subTree, options) => {
82
87
  const operations = this.operationsRef.operations;
88
+ const timingFlags = this._timingFlags;
83
89
  this.operationsRef.operations = [];
90
+ this._timingFlags = [];
84
91
  this.config.callbacks.flushElementTree(operations, options, this.isFp
85
- ? genCssContent(this.config.styleInfo, this.config.entryId, this.config.pageConfig, this.config.browserConfig)
86
- : undefined);
92
+ ? genCssContent(this.config.styleInfo, this.config.pageConfig)
93
+ : undefined, timingFlags);
87
94
  this.isFp = false;
88
95
  };
89
96
  updatePage;
package/dist/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.d.ts CHANGED
@@ -16,7 +16,6 @@ export declare function __GetElementConfig(element: ElementThreadElement): Recor
16
16
  export declare function __GetElementUniqueID(element: ElementThreadElement | unknown): number;
17
17
  export declare function __GetID(element: ElementThreadElement): string;
18
18
  export declare function __GetTag(element: ElementThreadElement): string;
19
- export declare function __SetAttribute(element: ElementThreadElement, key: string, value: string | null | undefined): void;
20
19
  export declare function __SetConfig(element: ElementThreadElement, config: Record<string, any>): void;
21
20
  export declare function __SetDataset(element: ElementThreadElement, dataset: Record<string, any>): void;
22
21
  export declare function __SetID(element: ElementThreadElement, id: string): void;
package/dist/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.js CHANGED
@@ -1,7 +1,7 @@
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 { componentIdAttribute } from '@lynx-js/web-constants';
4
+ import { componentIdAttribute, lynxTagAttribute } from '@lynx-js/web-constants';
5
5
  import { RefCountType, } from '../ElementThreadElement.js';
6
6
  export function __AddConfig(element, type, value) {
7
7
  element.property.componentConfig[type] = value;
@@ -35,10 +35,7 @@ export function __GetID(element) {
35
35
  return element.attributes.id ?? '';
36
36
  }
37
37
  export function __GetTag(element) {
38
- return element.tag;
39
- }
40
- export function __SetAttribute(element, key, value) {
41
- element.setAttribute(key, value ?? null);
38
+ return element.getAttribute(lynxTagAttribute);
42
39
  }
43
40
  export function __SetConfig(element, config) {
44
41
  element.property.componentConfig = config;
@@ -50,7 +47,7 @@ export function __SetID(element, id) {
50
47
  element.setAttribute('id', id);
51
48
  }
52
49
  export function __UpdateComponentID(element, componentID) {
53
- __SetAttribute(element, componentIdAttribute, componentID);
50
+ element.setAttribute(componentIdAttribute, componentID);
54
51
  }
55
52
  export function __GetConfig(element) {
56
53
  return element.property.componentConfig;
package/dist/elementAPI/attributeAndProperty/createAttributeAndPropertyFunctionsWithContext.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import type { MainThreadRuntime } from '../../MainThreadRuntime.js';
2
+ import type { ElementThreadElement } from '../ElementThreadElement.js';
3
+ export declare function createAttributeAndPropertyFunctionsWithContext(runtime: MainThreadRuntime): {
4
+ __SetAttribute: (element: ElementThreadElement, key: string, value: string | null | undefined) => void;
5
+ };
package/dist/elementAPI/attributeAndProperty/createAttributeAndPropertyFunctionsWithContext.js ADDED
@@ -0,0 +1,13 @@
1
+ import { __lynx_timing_flag } from '@lynx-js/web-constants';
2
+ export function createAttributeAndPropertyFunctionsWithContext(runtime) {
3
+ function __SetAttribute(element, key, value) {
4
+ element.setAttribute(key, value ?? null);
5
+ if (key === __lynx_timing_flag && value) {
6
+ runtime._timingFlags.push(value);
7
+ }
8
+ }
9
+ return {
10
+ __SetAttribute,
11
+ };
12
+ }
13
+ //# sourceMappingURL=createAttributeAndPropertyFunctionsWithContext.js.map
package/dist/elementAPI/createOffscreenDocument.js CHANGED
@@ -4,7 +4,7 @@ export function createOffscreenDocument(options) {
4
4
  let incrementalUniqueId = 0;
5
5
  function createElement(tagName) {
6
6
  const uniqueId = incrementalUniqueId++;
7
- if (tagName === 'list') {
7
+ if (tagName === 'x-list') {
8
8
  return new ListElement(tagName, uniqueId, pageConfig, operationsRef, styleInfo);
9
9
  }
10
10
  else {
package/dist/elementAPI/elementCreating/elementCreatingFunctions.d.ts CHANGED
@@ -5,8 +5,8 @@ export interface initializeElementCreatingFunctionConfig {
5
5
  operations: ElementOperation[];
6
6
  };
7
7
  pageConfig: PageConfig;
8
- onNewTag: (tag: string) => void;
9
8
  styleInfo: CssInJsInfo;
9
+ tagMap: Record<string, string>;
10
10
  }
11
11
  export declare function initializeElementCreatingFunction(config: initializeElementCreatingFunctionConfig): {
12
12
  __CreateView: (parentComponentUniqueId: number) => ElementThreadElement;
package/dist/elementAPI/elementCreating/elementCreatingFunctions.js CHANGED
@@ -1,14 +1,13 @@
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 { cssIdAttribute, parentComponentUniqueIdAttribute, } from '@lynx-js/web-constants';
4
+ import { cssIdAttribute, parentComponentUniqueIdAttribute, lynxTagAttribute, } from '@lynx-js/web-constants';
5
5
  import { __UpdateComponentID } from '../attributeAndProperty/attributeAndPropertyFunctions.js';
6
6
  import { ListElement, ElementThreadElement, } from '../ElementThreadElement.js';
7
7
  import { __SetCSSId } from '../style/styleFunctions.js';
8
8
  import { createOffscreenDocument } from '../createOffscreenDocument.js';
9
9
  export function initializeElementCreatingFunction(config) {
10
- const tagSet = new Set();
11
- const { operationsRef, pageConfig, styleInfo } = config;
10
+ const { operationsRef, pageConfig, styleInfo, tagMap } = config;
12
11
  const document = createOffscreenDocument({
13
12
  pageConfig,
14
13
  operationsRef,
@@ -17,11 +16,9 @@ export function initializeElementCreatingFunction(config) {
17
16
  function createLynxElement(tag, parentComponentUniqueId, cssId, componentId,
18
17
  // @ts-expect-error
19
18
  info) {
20
- if (!tagSet.has(tag)) {
21
- config.onNewTag(tag);
22
- tagSet.add(tag);
23
- }
24
- const element = document.createElement(tag);
19
+ const htmlTag = tagMap[tag] ?? tag;
20
+ const element = document.createElement(htmlTag);
21
+ element.setAttribute(lynxTagAttribute, tag);
25
22
  // element.parentComponentUniqueId = parentComponentUniqueId;
26
23
  element.setAttribute(parentComponentUniqueIdAttribute, parentComponentUniqueId.toString());
27
24
  if (cssId !== undefined)
@@ -54,6 +51,7 @@ export function initializeElementCreatingFunction(config) {
54
51
  }
55
52
  function __CreatePage(componentID, cssID, info) {
56
53
  const page = createLynxElement('page', 0, cssID, componentID, info);
54
+ page.setAttribute('part', 'page');
57
55
  page.setAttribute(parentComponentUniqueIdAttribute, page.uniqueId.toString());
58
56
  return page;
59
57
  }
package/dist/utils/processStyleInfo.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type StyleInfo, type CssInJsInfo, type PageConfig, type BrowserConfig } from '@lynx-js/web-constants';
1
+ import { type StyleInfo, type CssInJsInfo, type PageConfig } from '@lynx-js/web-constants';
2
2
  export declare function flattenStyleInfo(styleInfo: StyleInfo): void;
3
3
  /**
4
4
  * apply the lynx css -> web css transformation
@@ -7,7 +7,7 @@ export declare function transformToWebCss(styleInfo: StyleInfo): void;
7
7
  /**
8
8
  * generate those styles applied by <style>...</style>
9
9
  */
10
- export declare function genCssContent(styleInfo: StyleInfo, entryId: string, pageConfig: PageConfig, browserConfig: BrowserConfig): string;
10
+ export declare function genCssContent(styleInfo: StyleInfo, pageConfig: PageConfig): string;
11
11
  /**
12
12
  * generate the css-in-js data
13
13
  */
package/dist/utils/processStyleInfo.js CHANGED
@@ -1,7 +1,7 @@
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 { cssIdAttribute, lynxTagAttribute, cardIdAttribute, } from '@lynx-js/web-constants';
4
+ import { cssIdAttribute, lynxTagAttribute, } from '@lynx-js/web-constants';
5
5
  import { transformLynxStyles } from '@lynx-js/web-style-transformer';
6
6
  export function flattenStyleInfo(styleInfo) {
7
7
  function flattenOneStyleInfo(cssId) {
@@ -48,7 +48,7 @@ export function transformToWebCss(styleInfo) {
48
48
  /**
49
49
  * generate those styles applied by <style>...</style>
50
50
  */
51
- export function genCssContent(styleInfo, entryId, pageConfig, browserConfig) {
51
+ export function genCssContent(styleInfo, pageConfig) {
52
52
  function getExtraSelectors(cssId) {
53
53
  let prepend = '', suffix = '';
54
54
  if (!pageConfig.enableRemoveCSSScope) {
@@ -60,9 +60,8 @@ export function genCssContent(styleInfo, entryId, pageConfig, browserConfig) {
60
60
  suffix += `[${lynxTagAttribute}]`;
61
61
  }
62
62
  }
63
- if (!browserConfig.supportAtScope) {
64
- prepend = `[${cardIdAttribute}="${entryId}"] `
65
- + prepend;
63
+ else {
64
+ suffix += `[${lynxTagAttribute}]`;
66
65
  }
67
66
  return { prepend, suffix };
68
67
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lynx-js/web-mainthread-apis",
3
- "version": "0.7.1",
3
+ "version": "0.9.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.7.1",
29
- "@lynx-js/web-style-transformer": "0.2.2"
28
+ "@lynx-js/web-constants": "0.9.0",
29
+ "@lynx-js/web-style-transformer": "0.2.3"
30
30
  }
31
31
  }