@lynx-js/web-mainthread-apis 0.7.0 → 0.8.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 (14) hide show
  1. package/CHANGELOG.md +70 -0
  2. package/dist/MainThreadLynx.d.ts +1 -1
  3. package/dist/MainThreadLynx.js +1 -0
  4. package/dist/MainThreadRuntime.d.ts +8 -4
  5. package/dist/MainThreadRuntime.js +20 -5
  6. package/dist/elementAPI/ElementThreadElement.d.ts +1 -2
  7. package/dist/elementAPI/ElementThreadElement.js +2 -4
  8. package/dist/elementAPI/createOffscreenDocument.d.ts +13 -0
  9. package/dist/elementAPI/createOffscreenDocument.js +18 -0
  10. package/dist/elementAPI/elementCreating/elementCreatingFunctions.d.ts +0 -1
  11. package/dist/elementAPI/elementCreating/elementCreatingFunctions.js +11 -10
  12. package/dist/utils/processStyleInfo.d.ts +2 -2
  13. package/dist/utils/processStyleInfo.js +4 -5
  14. package/package.json +8 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,75 @@
1
1
  # @lynx-js/web-mainthread-apis
2
2
 
3
+ ## 0.8.0
4
+
5
+ ### Minor Changes
6
+
7
+ - refactor: remove web-elements/lazy and loadNewTag ([#123](https://github.com/lynx-family/lynx-stack/pull/123))
8
+
9
+ - remove @lynx-js/web-elements/lazy
10
+ - remove loadElement
11
+ - remove loadNewTag callback
12
+
13
+ **This is a breaking change**
14
+
15
+ Now we removed the default lazy loading preinstalled in web-core
16
+
17
+ Please add the following statement in your web project
18
+
19
+ ```
20
+ import "@lynx-js/web-elements/all";
21
+ ```
22
+
23
+ - feat: use shadowroot to isolate one lynx-view ([#198](https://github.com/lynx-family/lynx-stack/pull/198))
24
+
25
+ Before this commit, we have been detecting if current browser supports the `@scope` rule.
26
+ This allows us to scope one lynx-view's styles.
27
+
28
+ After this commit we always create a shadowroot to scope then.
29
+
30
+ Also for the new shadowroot pattern, we add a new **attribute** `inject-head-links`.
31
+ By default, we will iterate all `<link rel="stylesheet">` in the `<head>`, and use `@import url()` to import them inside the shadowroot.
32
+ Developers could add a `inject-head-links="false"` to disable this behavior.
33
+
34
+ ### Patch Changes
35
+
36
+ - 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)]:
37
+ - @lynx-js/web-constants@0.8.0
38
+
39
+ ## 0.7.1
40
+
41
+ ### Patch Changes
42
+
43
+ - Support NPM provenance. ([#30](https://github.com/lynx-family/lynx-stack/pull/30))
44
+
45
+ - fix: some valus should be updateable by global scope ([#130](https://github.com/lynx-family/lynx-stack/pull/130))
46
+
47
+ Now we add an allowlist to allow some identifiers could be updated by globalThis.
48
+
49
+ For those values in the allowlist:
50
+
51
+ ```
52
+ globalThis.foo = 'xx';
53
+ console.log(foo); //'xx'
54
+ ```
55
+
56
+ - refactor: isolate the globalThis in mts ([#90](https://github.com/lynx-family/lynx-stack/pull/90))
57
+
58
+ After this commit, developers' mts code won't be able to access the globalThis
59
+
60
+ The following usage will NOT work
61
+
62
+ ```
63
+ globalThis.foo = () =>{};
64
+ foo();//crash
65
+ ```
66
+
67
+ - refractor: improve some internal logic for element creating in MTS ([#71](https://github.com/lynx-family/lynx-stack/pull/71))
68
+
69
+ - Updated dependencies [[`c617453`](https://github.com/lynx-family/lynx-stack/commit/c617453aea967aba702967deb2916b5c883f03bb), [`2044571`](https://github.com/lynx-family/lynx-stack/commit/204457166531dae6e9f653db56b14187553b7666), [`399a6d9`](https://github.com/lynx-family/lynx-stack/commit/399a6d973024aa8a46ab2f2f13e7c82214066f9e), [`7da7601`](https://github.com/lynx-family/lynx-stack/commit/7da7601f00407970c485046ad73eeb8534aaa4f6)]:
70
+ - @lynx-js/web-style-transformer@0.2.2
71
+ - @lynx-js/web-constants@0.7.1
72
+
3
73
  ## 0.7.0
4
74
 
5
75
  ### Patch Changes
package/dist/MainThreadLynx.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { MainThreadConfig, MainThreadRuntime } from './MainThreadRuntime.js';
1
+ import { type MainThreadConfig, MainThreadRuntime } from './MainThreadRuntime.js';
2
2
  export declare function createMainThreadLynx(config: MainThreadConfig, lepusRuntime: MainThreadRuntime): {
3
3
  requestAnimationFrame(cb: FrameRequestCallback): number;
4
4
  cancelAnimationFrame(handler: number): void;
package/dist/MainThreadLynx.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { MainThreadRuntime, } from './MainThreadRuntime.js';
1
2
  export function createMainThreadLynx(config, lepusRuntime) {
2
3
  return {
3
4
  requestAnimationFrame(cb) {
package/dist/MainThreadRuntime.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- import type { ElementOperation, LynxLifecycleEvent, LynxTemplate, PageConfig, ProcessDataCallback, StyleInfo, FlushElementTreeOptions, Cloneable, BrowserConfig } from '@lynx-js/web-constants';
2
- import { MainThreadLynx } from './MainThreadLynx.js';
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';
2
+ import { type MainThreadLynx } from './MainThreadLynx.js';
3
3
  export interface MainThreadRuntimeCallbacks {
4
4
  mainChunkReady: () => void;
5
- onNewTag: (tag: string) => void;
6
5
  flushElementTree: (operations: ElementOperation[], options: FlushElementTreeOptions, styleContent?: string) => void;
7
6
  _ReportError: (error: Error, info?: unknown) => void;
8
7
  __OnLifecycleEvent: (lynxLifecycleEvents: LynxLifecycleEvent) => void;
@@ -26,7 +25,11 @@ export declare class MainThreadRuntime {
26
25
  operations: ElementOperation[];
27
26
  };
28
27
  constructor(config: MainThreadConfig);
29
- get globalThis(): typeof globalThis & this;
28
+ /**
29
+ * @private
30
+ */
31
+ __lynxGlobalBindingValues: Record<string, any>;
32
+ get globalThis(): this;
30
33
  lynx: MainThreadLynx;
31
34
  NativeModules: undefined;
32
35
  __globalProps: unknown;
@@ -37,4 +40,5 @@ export declare class MainThreadRuntime {
37
40
  __LoadLepusChunk: (path: string) => boolean;
38
41
  __FlushElementTree: (_subTree: unknown, options: FlushElementTreeOptions) => void;
39
42
  updatePage?: (data: Cloneable, options?: Record<string, string>) => void;
43
+ _updateVars?: () => void;
40
44
  }
package/dist/MainThreadRuntime.js CHANGED
@@ -1,6 +1,8 @@
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 {} from '@lynx-js/web-constants';
5
+ import { globalMuteableVars } from '@lynx-js/web-constants';
4
6
  import { createMainThreadLynx } from './MainThreadLynx.js';
5
7
  import { initializeElementCreatingFunction } from './elementAPI/elementCreating/elementCreatingFunctions.js';
6
8
  import * as attributeAndPropertyApis from './elementAPI/attributeAndProperty/attributeAndPropertyFunctions.js';
@@ -26,7 +28,6 @@ export class MainThreadRuntime {
26
28
  Object.assign(this, attributeAndPropertyApis, domTreeApis, eventApis, styleApis, initializeElementCreatingFunction({
27
29
  operationsRef: this.operationsRef,
28
30
  pageConfig: config.pageConfig,
29
- onNewTag: config.callbacks.onNewTag,
30
31
  styleInfo: cssInJs,
31
32
  }));
32
33
  this.__LoadLepusChunk = (path) => {
@@ -49,11 +50,24 @@ export class MainThreadRuntime {
49
50
  queueMicrotask(this.config.callbacks.mainChunkReady);
50
51
  },
51
52
  });
53
+ for (const nm of globalMuteableVars) {
54
+ Object.defineProperty(this, nm, {
55
+ get: () => {
56
+ return this.__lynxGlobalBindingValues[nm];
57
+ },
58
+ set: (v) => {
59
+ this.__lynxGlobalBindingValues[nm] = v;
60
+ this._updateVars?.();
61
+ },
62
+ });
63
+ }
52
64
  }
65
+ /**
66
+ * @private
67
+ */
68
+ __lynxGlobalBindingValues = {};
53
69
  get globalThis() {
54
- const global = Object.assign(globalThis, this);
55
- Object.defineProperty(global, 'renderPage', Object.getOwnPropertyDescriptor(this, 'renderPage'));
56
- return global;
70
+ return this;
57
71
  }
58
72
  lynx;
59
73
  NativeModules = undefined;
@@ -67,10 +81,11 @@ export class MainThreadRuntime {
67
81
  const operations = this.operationsRef.operations;
68
82
  this.operationsRef.operations = [];
69
83
  this.config.callbacks.flushElementTree(operations, options, this.isFp
70
- ? genCssContent(this.config.styleInfo, this.config.entryId, this.config.pageConfig, this.config.browserConfig)
84
+ ? genCssContent(this.config.styleInfo, this.config.pageConfig)
71
85
  : undefined);
72
86
  this.isFp = false;
73
87
  };
74
88
  updatePage;
89
+ _updateVars;
75
90
  }
76
91
  //# sourceMappingURL=MainThreadRuntime.js.map
package/dist/elementAPI/ElementThreadElement.d.ts CHANGED
@@ -6,7 +6,6 @@ export declare enum RefCountType {
6
6
  export declare class ElementThreadElement {
7
7
  tag: string;
8
8
  uniqueId: number;
9
- parentComponentUniqueId: number;
10
9
  readonly pageConfig: PageConfig;
11
10
  private operationsRef;
12
11
  styleInfo: CssInJsInfo;
@@ -34,7 +33,7 @@ export declare class ElementThreadElement {
34
33
  };
35
34
  children: ElementThreadElement[];
36
35
  parent?: ElementThreadElement;
37
- constructor(tag: string, uniqueId: number, parentComponentUniqueId: number, pageConfig: PageConfig, operationsRef: {
36
+ constructor(tag: string, uniqueId: number, pageConfig: PageConfig, operationsRef: {
38
37
  operations: ElementOperation[];
39
38
  }, styleInfo: CssInJsInfo);
40
39
  setProperty(key: string, value: any): void;
package/dist/elementAPI/ElementThreadElement.js CHANGED
@@ -18,7 +18,6 @@ export var RefCountType;
18
18
  export class ElementThreadElement {
19
19
  tag;
20
20
  uniqueId;
21
- parentComponentUniqueId;
22
21
  pageConfig;
23
22
  operationsRef;
24
23
  styleInfo;
@@ -50,10 +49,10 @@ export class ElementThreadElement {
50
49
  };
51
50
  children = [];
52
51
  parent;
53
- constructor(tag, uniqueId, parentComponentUniqueId, pageConfig, operationsRef, styleInfo) {
52
+ // public parentComponentUniqueId!: number;
53
+ constructor(tag, uniqueId, pageConfig, operationsRef, styleInfo) {
54
54
  this.tag = tag;
55
55
  this.uniqueId = uniqueId;
56
- this.parentComponentUniqueId = parentComponentUniqueId;
57
56
  this.pageConfig = pageConfig;
58
57
  this.operationsRef = operationsRef;
59
58
  this.styleInfo = styleInfo;
@@ -67,7 +66,6 @@ export class ElementThreadElement {
67
66
  type: OperationType.Create,
68
67
  uid: uniqueId,
69
68
  tag: tag,
70
- puid: parentComponentUniqueId.toString(),
71
69
  });
72
70
  }
73
71
  setProperty(key, value) {
package/dist/elementAPI/createOffscreenDocument.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import type { CssInJsInfo, ElementOperation, PageConfig } from '@lynx-js/web-constants';
2
+ import { ElementThreadElement } from './ElementThreadElement.js';
3
+ interface OffscreenDocument {
4
+ createElement(tagName: string): ElementThreadElement;
5
+ }
6
+ export declare function createOffscreenDocument(options: {
7
+ pageConfig: PageConfig;
8
+ styleInfo: CssInJsInfo;
9
+ operationsRef: {
10
+ operations: ElementOperation[];
11
+ };
12
+ }): OffscreenDocument;
13
+ export {};
package/dist/elementAPI/createOffscreenDocument.js ADDED
@@ -0,0 +1,18 @@
1
+ import { ListElement, ElementThreadElement } from './ElementThreadElement.js';
2
+ export function createOffscreenDocument(options) {
3
+ const { pageConfig, styleInfo, operationsRef } = options;
4
+ let incrementalUniqueId = 0;
5
+ function createElement(tagName) {
6
+ const uniqueId = incrementalUniqueId++;
7
+ if (tagName === 'list') {
8
+ return new ListElement(tagName, uniqueId, pageConfig, operationsRef, styleInfo);
9
+ }
10
+ else {
11
+ return new ElementThreadElement(tagName, uniqueId, pageConfig, operationsRef, styleInfo);
12
+ }
13
+ }
14
+ return {
15
+ createElement,
16
+ };
17
+ }
18
+ //# sourceMappingURL=createOffscreenDocument.js.map
package/dist/elementAPI/elementCreating/elementCreatingFunctions.d.ts CHANGED
@@ -5,7 +5,6 @@ export interface initializeElementCreatingFunctionConfig {
5
5
  operations: ElementOperation[];
6
6
  };
7
7
  pageConfig: PageConfig;
8
- onNewTag: (tag: string) => void;
9
8
  styleInfo: CssInJsInfo;
10
9
  }
11
10
  export declare function initializeElementCreatingFunction(config: initializeElementCreatingFunctionConfig): {
package/dist/elementAPI/elementCreating/elementCreatingFunctions.js CHANGED
@@ -1,23 +1,24 @@
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, } from '@lynx-js/web-constants';
4
+ import { cssIdAttribute, parentComponentUniqueIdAttribute, } 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
+ import { createOffscreenDocument } from '../createOffscreenDocument.js';
8
9
  export function initializeElementCreatingFunction(config) {
9
- let incrementalUniqueId = 0;
10
- const tagSet = new Set();
11
10
  const { operationsRef, pageConfig, styleInfo } = config;
11
+ const document = createOffscreenDocument({
12
+ pageConfig,
13
+ operationsRef,
14
+ styleInfo,
15
+ });
12
16
  function createLynxElement(tag, parentComponentUniqueId, cssId, componentId,
13
17
  // @ts-expect-error
14
18
  info) {
15
- if (!tagSet.has(tag)) {
16
- config.onNewTag(tag);
17
- tagSet.add(tag);
18
- }
19
- const uniqueId = incrementalUniqueId++;
20
- const element = new (tag === 'list' ? ListElement : ElementThreadElement)(tag, uniqueId, parentComponentUniqueId, pageConfig, operationsRef, styleInfo);
19
+ const element = document.createElement(tag);
20
+ // element.parentComponentUniqueId = parentComponentUniqueId;
21
+ element.setAttribute(parentComponentUniqueIdAttribute, parentComponentUniqueId.toString());
21
22
  if (cssId !== undefined)
22
23
  __SetCSSId([element], cssId);
23
24
  else if (parentComponentUniqueId >= 0) { // don't infer for uniqueid === -1
@@ -48,7 +49,7 @@ export function initializeElementCreatingFunction(config) {
48
49
  }
49
50
  function __CreatePage(componentID, cssID, info) {
50
51
  const page = createLynxElement('page', 0, cssID, componentID, info);
51
- page.parentComponentUniqueId = page.uniqueId;
52
+ page.setAttribute(parentComponentUniqueIdAttribute, page.uniqueId.toString());
52
53
  return page;
53
54
  }
54
55
  function __CreateView(parentComponentUniqueId) {
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,9 +1,14 @@
1
1
  {
2
2
  "name": "@lynx-js/web-mainthread-apis",
3
- "version": "0.7.0",
3
+ "version": "0.8.0",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [],
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/lynx-family/lynx-stack.git",
10
+ "directory": "packages/web-platform/web-mainthread-apis"
11
+ },
7
12
  "license": "Apache-2.0",
8
13
  "type": "module",
9
14
  "main": "dist/index.js",
@@ -20,7 +25,7 @@
20
25
  "dependencies": {
21
26
  "css-tree": "^3.1.0",
22
27
  "hyphenate-style-name": "^1.1.0",
23
- "@lynx-js/web-constants": "0.7.0",
24
- "@lynx-js/web-style-transformer": "0.2.1"
28
+ "@lynx-js/web-constants": "0.8.0",
29
+ "@lynx-js/web-style-transformer": "0.2.2"
25
30
  }
26
31
  }