@lynx-js/web-core 0.13.3 → 0.13.5

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @lynx-js/web-core
 
+## 0.13.5
+
+### Patch Changes
+
+- refactor: move some internal status to dom's attribute ([#945](https://github.com/lynx-family/lynx-stack/pull/945))
+
+  It's essential for SSR
+
+- refactor: avoid to create many style element for cssog ([#1026](https://github.com/lynx-family/lynx-stack/pull/1026))
+
+- refactor: move component config info to attribute ([#984](https://github.com/lynx-family/lynx-stack/pull/984))
+
+- fix: ensure render starts after dom connected ([#1020](https://github.com/lynx-family/lynx-stack/pull/1020))
+
+- refactor: save dataset on an attribute ([#981](https://github.com/lynx-family/lynx-stack/pull/981))
+
+  On lynx, the `data-*` attributes have different behaviors than the HTMLElement has.
+
+  The dataset will be treated as properties, the key will not be applied the camel-case <-> hyphenate name transformation.
+
+  Before this commit we use it as a runtime data, but after this commit we will use encodeURI(JSON.stringify(dataset)) to encode it as a string.
+
+- refactor: implement mts apis in closure pattern ([#1004](https://github.com/lynx-family/lynx-stack/pull/1004))
+
+- Updated dependencies [[`70b82d2`](https://github.com/lynx-family/lynx-stack/commit/70b82d23744d6b6ec945dff9f8895ab3488ba4c8), [`5651e24`](https://github.com/lynx-family/lynx-stack/commit/5651e24827358963c3261252bcc53c2ad981c13e), [`9499ea9`](https://github.com/lynx-family/lynx-stack/commit/9499ea91debdf73b2d31af0b31bcbc216135543b), [`50f0193`](https://github.com/lynx-family/lynx-stack/commit/50f01933942268b697bf5abe790da86c932f1dfc), [`57bf0ef`](https://github.com/lynx-family/lynx-stack/commit/57bf0ef19f1d79bc52ab6a4f0cd2939e7901d98b), [`5651e24`](https://github.com/lynx-family/lynx-stack/commit/5651e24827358963c3261252bcc53c2ad981c13e), [`0525fbf`](https://github.com/lynx-family/lynx-stack/commit/0525fbf38baa7a977a7a8c66e8a4d8bf34cc3b68), [`b6b87fd`](https://github.com/lynx-family/lynx-stack/commit/b6b87fd11dbc76c28f3b5022aa8c6afeb773d90f), [`c014327`](https://github.com/lynx-family/lynx-stack/commit/c014327ad0cf599b32d4182d95116b46c35f5fa5)]:
+  - @lynx-js/web-mainthread-apis@0.13.5
+  - @lynx-js/web-constants@0.13.5
+  - @lynx-js/offscreen-document@0.1.1
+  - @lynx-js/web-worker-runtime@0.13.5
+  - @lynx-js/web-worker-rpc@0.13.5
+
+## 0.13.4
+
+### Patch Changes
+
+- feat: lynx-view supports `updateGlobalProps` method, which can be used to update lynx.\_\_globalProps ([#918](https://github.com/lynx-family/lynx-stack/pull/918))
+
+- feat: supports `lynx.getElementById()` && `animate()`. ([#912](https://github.com/lynx-family/lynx-stack/pull/912))
+
+  After this commit, you can use `lynx.getElementById()` to get the element by id, and use `element.animate()` to animate the element.
+
+- Updated dependencies [[`96d3133`](https://github.com/lynx-family/lynx-stack/commit/96d3133b149b61af01c5478f4dc7b0a071137d98), [`75e5b2f`](https://github.com/lynx-family/lynx-stack/commit/75e5b2ff16ecf5f7072a45cd130e653dee747461), [`569618d`](https://github.com/lynx-family/lynx-stack/commit/569618d8e2665f5c9e1672f7ee5900ec2a5179a2), [`f9f88d6`](https://github.com/lynx-family/lynx-stack/commit/f9f88d6fb9c42d3370a6622d9d799d671ffcf1a7)]:
+  - @lynx-js/web-mainthread-apis@0.13.4
+  - @lynx-js/offscreen-document@0.1.0
+  - @lynx-js/web-worker-runtime@0.13.4
+  - @lynx-js/web-constants@0.13.4
+  - @lynx-js/web-worker-rpc@0.13.4
+
 ## 0.13.3
 
 ### Patch Changes

package/dist/apis/LynxView.d.ts

@@ -29,7 +29,7 @@ export type INapiModulesCall = (name: string, data: any, moduleName: string, lyn
  * @event error lynx card fired an error
  *
  * @example
- * HTML Exmaple
+ * HTML Example
  *
  * Note that you should declarae the size of lynx-view
  *
@@ -41,7 +41,7 @@ export type INapiModulesCall = (name: string, data: any, moduleName: string, lyn
  * React 19 Example
  * ```jsx
  * <lynx-view url={myLynxCardUrl} rawData={{}} globalProps={{}} style={{height:'300px', width:'300px'}}>
- * </lynx-vew>
+ * </lynx-view>
  * ```
  */
 export declare class LynxView extends HTMLElement {
@@ -118,6 +118,12 @@ export declare class LynxView extends HTMLElement {
      * update the `__initData` and trigger essential flow
      */
     updateData(data: Cloneable, updateDataType: UpdateDataType, callback?: () => void): void;
+    /**
+     * @public
+     * @method
+     * update the `__globalProps`
+     */
+    updateGlobalProps(data: Cloneable): void;
     /**
      * @public
      * @method

package/dist/apis/LynxView.js

@@ -26,7 +26,7 @@ import { inShadowRootStyles, } from '@lynx-js/web-constants';
  * @event error lynx card fired an error
  *
  * @example
- * HTML Exmaple
+ * HTML Example
  *
  * Note that you should declarae the size of lynx-view
  *
@@ -38,7 +38,7 @@ import { inShadowRootStyles, } from '@lynx-js/web-constants';
  * React 19 Example
  * ```jsx
  * <lynx-view url={myLynxCardUrl} rawData={{}} globalProps={{}} style={{height:'300px', width:'300px'}}>
- * </lynx-vew>
+ * </lynx-view>
  * ```
  */
 export class LynxView extends HTMLElement {
@@ -54,6 +54,7 @@ export class LynxView extends HTMLElement {
      */
     static observedAttributes = LynxView.observedAttributeAsProperties.map(nm => nm.toLowerCase());
     #instance;
+    #connected = false;
     #url;
     /**
      * @public
@@ -196,6 +197,14 @@ export class LynxView extends HTMLElement {
     updateData(data, updateDataType, callback) {
         this.#instance?.updateData(data, updateDataType, callback);
     }
+    /**
+     * @public
+     * @method
+     * update the `__globalProps`
+     */
+    updateGlobalProps(data) {
+        this.#instance?.updateGlobalProps(data);
+    }
     /**
      * @public
      * @method
@@ -296,7 +305,7 @@ export class LynxView extends HTMLElement {
      * @private
      */
     #render() {
-        if (!this.#rendering) {
+        if (!this.#rendering && this.#connected) {
             this.#rendering = true;
             queueMicrotask(() => {
                 this.#rendering = false;
@@ -374,6 +383,7 @@ export class LynxView extends HTMLElement {
      * @private
      */
     connectedCallback() {
+        this.#connected = true;
         this.#render();
     }
 }

package/dist/apis/createLynxView.d.ts

@@ -17,5 +17,6 @@ export interface LynxView {
     updateData(data: Cloneable, updateDataType: UpdateDataType, callback?: () => void): void;
     dispose(): Promise<void>;
     sendGlobalEvent: RpcCallType<typeof sendGlobalEventEndpoint>;
+    updateGlobalProps: (data: Cloneable) => void;
 }
 export declare function createLynxView(configs: LynxViewConfigs): LynxView;

package/dist/uiThread/createRenderAllOnUI.js

@@ -7,13 +7,13 @@ export function createRenderAllOnUI(mainToBackgroundRpc, shadowRoot, markTimingI
     const { startMainThread } = prepareMainThreadAPIs(mainToBackgroundRpc, shadowRoot, document.createElement.bind(document), () => { }, markTimingInternal, () => {
         callbacks.onError?.();
     });
-    let runtime;
+    let mtsGlobalThis;
     const start = async (configs) => {
         const mainThreadRuntime = startMainThread(configs);
-        runtime = await mainThreadRuntime;
+        mtsGlobalThis = await mainThreadRuntime;
     };
     const updateDataMainThread = async (...args) => {
-        runtime.updatePage?.(...args);
+        mtsGlobalThis.updatePage?.(...args);
     };
     return {
         start,

package/dist/uiThread/crossThreadHandlers/registerInvokeUIMethodHandler.js

@@ -40,7 +40,7 @@ export function registerInvokeUIMethodHandler(rpc, shadowRoot) {
                 }
             }
             catch (e) {
-                console.error(`[lynx-web] invokeUIMethod: apply method faild with`, e, element);
+                console.error(`[lynx-web] invokeUIMethod: apply method failed with`, e, element);
                 code = ErrorCode.PARAM_INVALID;
             }
         }, (error) => {

package/dist/uiThread/crossThreadHandlers/registerTriggerElementMethodEndpointHandler.d.ts

@@ -0,0 +1,2 @@
+import type { Rpc } from '@lynx-js/web-worker-rpc';
+export declare function registerTriggerElementMethodEndpointHandler(rpc: Rpc, shadowRoot: ShadowRoot): void;

package/dist/uiThread/crossThreadHandlers/registerTriggerElementMethodEndpointHandler.js

@@ -0,0 +1,32 @@
+// 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 { 
+// componentIdAttribute,
+triggerElementMethodEndpoint, } from '@lynx-js/web-constants';
+import { AnimationOperation, } from '@lynx-js/web-constants';
+export function registerTriggerElementMethodEndpointHandler(rpc, shadowRoot) {
+    const animationMap = new Map();
+    rpc.registerHandler(triggerElementMethodEndpoint, (method, id, options) => {
+        if (method === 'animate') {
+            switch (options.operation) {
+                case AnimationOperation.START:
+                    animationMap.set(options.id, shadowRoot.querySelector(id)?.animate(options.keyframes, options.timingOptions));
+                    break;
+                case AnimationOperation.PLAY:
+                    animationMap.get(options.id)?.play();
+                    break;
+                case AnimationOperation.PAUSE:
+                    animationMap.get(options.id)?.pause();
+                    break;
+                case AnimationOperation.CANCEL:
+                    animationMap.get(options.id)?.cancel();
+                    break;
+                case AnimationOperation.FINISH:
+                    animationMap.get(options.id)?.finish();
+                    break;
+            }
+        }
+    });
+}
+//# sourceMappingURL=registerTriggerElementMethodEndpointHandler.js.map

package/dist/uiThread/startBackground.js

@@ -6,6 +6,7 @@ import { registerTriggerComponentEventHandler } from './crossThreadHandlers/regi
 import { registerSelectComponentHandler } from './crossThreadHandlers/registerSelectComponentHandler.js';
 import { registerNapiModulesCallHandler } from './crossThreadHandlers/registerNapiModulesCallHandler.js';
 import { registerDispatchLynxViewEventHandler } from './crossThreadHandlers/registerDispatchLynxViewEventHandler.js';
+import { registerTriggerElementMethodEndpointHandler } from './crossThreadHandlers/registerTriggerElementMethodEndpointHandler.js';
 export function startBackground(backgroundRpc, shadowRoot, callbacks) {
     registerInvokeUIMethodHandler(backgroundRpc, shadowRoot);
     registerNativePropsHandler(backgroundRpc, shadowRoot);
@@ -14,6 +15,7 @@ export function startBackground(backgroundRpc, shadowRoot, callbacks) {
     registerNativeModulesCallHandler(backgroundRpc, callbacks.nativeModulesCall);
     registerNapiModulesCallHandler(backgroundRpc, callbacks.napiModulesCall);
     registerDispatchLynxViewEventHandler(backgroundRpc, shadowRoot);
+    registerTriggerElementMethodEndpointHandler(backgroundRpc, shadowRoot);
     const sendGlobalEvent = backgroundRpc.createCall(sendGlobalEventEndpoint);
     const markTiming = backgroundRpc.createCall(markTimingEndpoint);
     const updateDataBackground = backgroundRpc.createCall(updateDataEndpoint);

package/dist/uiThread/startUIThread.js

@@ -3,7 +3,7 @@
 // LICENSE file in the root directory of this source tree.
 import { bootWorkers } from './bootWorkers.js';
 import { createDispose } from './crossThreadHandlers/createDispose.js';
-import {} from '@lynx-js/web-constants';
+import { updateGlobalPropsEndpoint, } from '@lynx-js/web-constants';
 import { loadTemplate } from '../utils/loadTemplate.js';
 import { createUpdateData } from './crossThreadHandlers/createUpdateData.js';
 import { startBackground } from './startBackground.js';
@@ -37,6 +37,7 @@ export function startUIThread(templateUrl, configs, shadowRoot, lynxGroupId, thr
         updateData: createUpdateData(updateDataMainThread, updateDataBackground),
         dispose: createDispose(backgroundRpc, terminateWorkers),
         sendGlobalEvent,
+        updateGlobalProps: backgroundRpc.createCall(updateGlobalPropsEndpoint),
     };
 }
 //# sourceMappingURL=startUIThread.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core",
-  "version": "0.13.3",
+  "version": "0.13.5",
   "private": false,
   "description": "",
   "keywords": [],
@@ -24,15 +24,15 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/offscreen-document": "0.0.4",
-    "@lynx-js/web-constants": "0.13.3",
-    "@lynx-js/web-mainthread-apis": "0.13.3",
-    "@lynx-js/web-worker-rpc": "0.13.3",
-    "@lynx-js/web-worker-runtime": "0.13.3"
+    "@lynx-js/offscreen-document": "0.1.1",
+    "@lynx-js/web-constants": "0.13.5",
+    "@lynx-js/web-mainthread-apis": "0.13.5",
+    "@lynx-js/web-worker-rpc": "0.13.5",
+    "@lynx-js/web-worker-runtime": "0.13.5"
   },
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.2",
-    "@lynx-js/web-elements": "0.7.3"
+    "@lynx-js/web-elements": "0.7.5"
   },
   "peerDependencies": {
     "@lynx-js/lynx-core": "0.1.2",