[pull] main from lynx-family:main

.changeset/bumpy-lizards-wear.md

@@ -0,0 +1,3 @@
+---
+
+---

.changeset/rem-unit-transform.md

@@ -0,0 +1,21 @@
+---
+"@lynx-js/web-core": patch
+---
+
+feat(web-core): add support for configurable rem unit transform
+
+- **Description**: Added a new configuration option `transformREM` (also exposed as `transform_rem` on the Rust layer) to the Web Core renderer. When enabled, it recursively converts static `rem` unit values in your styles into dynamic CSS custom properties (`calc(VALUE * var(--rem-unit))`) during template decoding and evaluation. This enables developers to implement responsive font scaling and layout sizing dynamically on the client side simply by modifying the root CSS variable `--rem-unit`.
+
+- **Usage**:
+  You can enable this feature when working with `LynxView` by setting `transformREM` to `true`, or directly as an HTML attribute `transform-rem`:
+
+  ```html
+  <lynx-view url="https://example.com/template.js" transform-rem="true"></lynx-view>
+  ```
+
+  ```javascript
+  const lynxView = document.createElement('lynx-view');
+  lynxView.transformREM = true;
+  ```
+
+  With this enabled, a CSS declaration like `font-size: 1.5rem;` is transparently evaluated as `font-size: calc(1.5 * var(--rem-unit));` by the runtime engine.

.changeset/thin-shrimps-sip.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/css-serializer": patch
+---
+
+feat: support custom property declaration in keyframe rule

packages/react/runtime/__test__/lifecycle.test.jsx

@@ -6,7 +6,7 @@ import { globalEnvManager } from './utils/envManager';
 import { waitSchedule } from './utils/nativeMethod';
 import { globalCommitTaskMap, replaceCommitHook } from '../src/lifecycle/patch/commit';
 import { deinitGlobalSnapshotPatch, initGlobalSnapshotPatch } from '../src/lifecycle/patch/snapshotPatch';
-import { LifecycleConstant } from '../src/lifecycleConstant';
+import { LifecycleConstant } from '../src/lifecycle/constant';
 import { CATCH_ERROR } from '../src/renderToOpcodes/constants';
 import { __root } from '../src/root';
 import { setupPage, backgroundSnapshotInstanceManager } from '../src/snapshot';

packages/react/runtime/__test__/list.test.jsx

@@ -2,12 +2,12 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { elementTree, nativeMethodQueue } from './utils/nativeMethod';
-import { hydrate } from '../src/hydrate';
-import { __pendingListUpdates } from '../src/pendingListUpdates';
+import { hydrate } from '../src/renderToOpcodes/hydrate';
+import { __pendingListUpdates } from '../src/list/pendingListUpdates';
 import { SnapshotInstance, snapshotInstanceManager } from '../src/snapshot';
 import { __root } from '../src/root';
 import { globalEnvManager } from './utils/envManager';
-import { gRecycleMap, gSignMap } from '../src/list';
+import { gRecycleMap, gSignMap } from '../src/list/list';
 
 const HOLE = null;
 

packages/react/runtime/__test__/snapshot/ref.test.jsx

@@ -11,7 +11,7 @@ import { RefProxy, runDelayedUiOps, shouldDelayUiOps } from '../../src/lifecycle
 import { Component, createRef, useState } from '../../src/index';
 import { clearCommitTaskId, replaceCommitHook } from '../../src/lifecycle/patch/commit';
 import { injectUpdateMainThread } from '../../src/lifecycle/patch/updateMainThread';
-import { __pendingListUpdates } from '../../src/pendingListUpdates';
+import { __pendingListUpdates } from '../../src/list/pendingListUpdates';
 import { __root } from '../../src/root';
 import { setupPage } from '../../src/snapshot';
 import { globalEnvManager } from '../utils/envManager';

packages/react/runtime/__test__/utils/envManager.ts

@@ -9,7 +9,7 @@ import {
 import { setupBackgroundDocument, setupDocument } from '../../src/document.js';
 import { deinitGlobalSnapshotPatch } from '../../src/lifecycle/patch/snapshotPatch.js';
 import { shouldDelayUiOps } from '../../src/lifecycle/ref/delay.js';
-import { clearListGlobal } from '../../src/list.js';
+import { clearListGlobal } from '../../src/list/list.js';
 import { globalPipelineOptions, setPipeline } from '../../src/lynx/performance.js';
 import { __root, setRoot } from '../../src/root.js';
 import { SnapshotInstance, snapshotInstanceManager } from '../../src/snapshot/snapshot.js';

packages/react/runtime/src/debug/profile.ts

@@ -2,13 +2,12 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 
-/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
+import { noop } from '../utils.js';
 
 export const isProfiling: boolean = /* @__PURE__ */ Boolean(
   lynx.performance?.isProfileRecording?.(),
 );
 
-const noop = () => {};
 const noopFlowId = () => 0;
 
 export const profileStart = /* @__PURE__ */ ((() => {

packages/react/runtime/src/lifecycle/event/delayLifecycleEvents.ts

@@ -1,7 +1,7 @@
 // Copyright 2025 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 type { LifecycleConstant } from '../../lifecycleConstant.js';
+import type { LifecycleConstant } from '../../lifecycle/constant.js';
 
 const delayedLifecycleEvents: [type: LifecycleConstant, data: unknown][] = [];
 

packages/react/runtime/src/lifecycle/event/jsReady.ts

@@ -2,7 +2,7 @@
 // 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 { profileEnd, profileStart } from '../../debug/profile.js';
-import { LifecycleConstant } from '../../lifecycleConstant.js';
+import { LifecycleConstant } from '../../lifecycle/constant.js';
 import { __root } from '../../root.js';
 
 let isJSReady: boolean;

packages/react/runtime/src/lifecycle/patch/commit.ts

@@ -30,7 +30,7 @@ import {
 import { takeGlobalSnapshotPatch } from './snapshotPatch.js';
 import type { SnapshotPatch } from './snapshotPatch.js';
 import { profileEnd, profileStart } from '../../debug/profile.js';
-import { LifecycleConstant } from '../../lifecycleConstant.js';
+import { LifecycleConstant } from '../../lifecycle/constant.js';
 import { globalPipelineOptions, markTiming, markTimingLegacy, setPipeline } from '../../lynx/performance.js';
 import { COMMIT } from '../../renderToOpcodes/constants.js';
 import { backgroundSnapshotInstanceManager } from '../../snapshot/backgroundSnapshot.js';

packages/react/runtime/src/lifecycle/patch/updateMainThread.ts

@@ -9,9 +9,9 @@ import type { PatchList, PatchOptions } from './commit.js';
 import { setMainThreadHydrating } from './isMainThreadHydrating.js';
 import { snapshotPatchApply } from './snapshotPatchApply.js';
 import { prettyFormatSnapshotPatch } from '../../debug/formatPatch.js';
-import { LifecycleConstant } from '../../lifecycleConstant.js';
+import { LifecycleConstant } from '../../lifecycle/constant.js';
+import { __pendingListUpdates } from '../../list/pendingListUpdates.js';
 import { markTiming, setPipeline } from '../../lynx/performance.js';
-import { __pendingListUpdates } from '../../pendingListUpdates.js';
 import { __page } from '../../snapshot/definition.js';
 import { applyRefQueue } from '../../snapshot/workletRef.js';
 import { isMtsEnabled } from '../../worklet/functionality.js';

packages/react/runtime/src/lifecycle/reload.ts

@@ -9,21 +9,21 @@
 
 import { render } from 'preact';
 
-import { hydrate } from '../hydrate.js';
-import { LifecycleConstant } from '../lifecycleConstant.js';
-import { __pendingListUpdates } from '../pendingListUpdates.js';
-import { __root, setRoot } from '../root.js';
 import { destroyBackground } from './destroy.js';
+import { increaseReloadVersion } from './pass.js';
+import { renderMainThread } from './render.js';
+import { profileEnd, profileStart } from '../debug/profile.js';
+import { LifecycleConstant } from '../lifecycle/constant.js';
+import { __pendingListUpdates } from '../list/pendingListUpdates.js';
+import { hydrate } from '../renderToOpcodes/hydrate.js';
+import { __root, setRoot } from '../root.js';
+import { __page } from '../snapshot/definition.js';
 import { SnapshotInstance, snapshotInstanceManager } from '../snapshot/snapshot.js';
 import { applyRefQueue } from '../snapshot/workletRef.js';
 import { isEmptyObject } from '../utils.js';
 import { clearJSReadyEventIdSwap, isJSReady } from './event/jsReady.js';
-import { increaseReloadVersion } from './pass.js';
 import { deinitGlobalSnapshotPatch } from './patch/snapshotPatch.js';
 import { shouldDelayUiOps } from './ref/delay.js';
-import { renderMainThread } from './render.js';
-import { profileEnd, profileStart } from '../debug/profile.js';
-import { __page } from '../snapshot/definition.js';
 
 function reloadMainThread(data: unknown, options: UpdatePageOption): void {
   if (typeof __PROFILE__ !== 'undefined' && __PROFILE__) {

packages/react/runtime/src/list.ts → packages/react/runtime/src/list/list.ts

@@ -1,10 +1,10 @@
 // Copyright 2024 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 { LifecycleConstant } from './lifecycleConstant.js';
-import type { SnapshotInstance } from './snapshot/snapshot.js';
-import { applyRefQueue } from './snapshot/workletRef.js';
-import { maybePromise } from './utils.js';
+import { LifecycleConstant } from '../lifecycle/constant.js';
+import type { SnapshotInstance } from '../snapshot/snapshot.js';
+import { applyRefQueue } from '../snapshot/workletRef.js';
+import { maybePromise } from '../utils.js';
 
 export const gSignMap: Record<number, Map<number, SnapshotInstance>> = {};
 export const gRecycleMap: Record<number, Map<string, Map<number, SnapshotInstance>>> = {};

packages/react/runtime/src/listUpdateInfo.ts → packages/react/runtime/src/list/listUpdateInfo.ts

@@ -1,11 +1,10 @@
 // Copyright 2025 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 { profileEnd, profileStart } from './debug/profile.js';
-import { hydrate } from './hydrate.js';
 import { componentAtIndexFactory, enqueueComponentFactory } from './list.js';
-import type { SnapshotInstance } from './snapshot/snapshot.js';
+import { profileEnd, profileStart } from '../debug/profile.js';
+import { hydrate } from '../renderToOpcodes/hydrate.js';
+import type { SnapshotInstance } from '../snapshot/snapshot.js';
 
 export interface ListUpdateInfo {
   flush(): number | undefined;

packages/react/runtime/src/lynx-api.ts

@@ -9,7 +9,7 @@ import type { Consumer, FC, ReactNode } from 'react';
 import { factory, withInitDataInState } from './compat/initData.js';
 import { profileEnd, profileStart } from './debug/profile.js';
 import { useLynxGlobalEventListener } from './hooks/useLynxGlobalEventListener.js';
-import { LifecycleConstant } from './lifecycleConstant.js';
+import { LifecycleConstant } from './lifecycle/constant.js';
 import { flushDelayedLifecycleEvents } from './lynx/tt.js';
 import { __root } from './root.js';
 

packages/react/runtime/src/lynx/calledByNative.ts

@@ -1,15 +1,15 @@
 // Copyright 2024 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 { hydrate } from '../hydrate.js';
+import { markTiming, setPipeline } from './performance.js';
+import { LifecycleConstant } from '../lifecycle/constant.js';
 import { isJSReady, jsReady, jsReadyEventIdSwap, resetJSReady } from '../lifecycle/event/jsReady.js';
 import { reloadMainThread } from '../lifecycle/reload.js';
 import { renderMainThread } from '../lifecycle/render.js';
-import { LifecycleConstant } from '../lifecycleConstant.js';
-import { ssrHydrateByOpcodes } from '../opcodes.js';
-import { __pendingListUpdates } from '../pendingListUpdates.js';
+import { __pendingListUpdates } from '../list/pendingListUpdates.js';
+import { hydrate } from '../renderToOpcodes/hydrate.js';
+import { ssrHydrateByOpcodes } from '../renderToOpcodes/opcodes.js';
 import { __root, setRoot } from '../root.js';
-import { markTiming, setPipeline } from './performance.js';
 import { __page, setupPage } from '../snapshot/definition.js';
 import { SnapshotInstance } from '../snapshot/snapshot.js';
 import { applyRefQueue } from '../snapshot/workletRef.js';

packages/react/runtime/src/lynx/tt.ts

@@ -3,13 +3,13 @@
 // LICENSE file in the root directory of this source tree.
 import { process, render } from 'preact';
 
-import { LifecycleConstant, NativeUpdateDataType } from '../lifecycleConstant.js';
-import type { FirstScreenData } from '../lifecycleConstant.js';
 import { PerformanceTimingFlags, PipelineOrigins, beginPipeline, markTiming } from './performance.js';
 import { runWithForce } from './runWithForce.js';
 import { printSnapshotInstanceToString } from '../debug/printSnapshot.js';
 import { profileEnd, profileStart } from '../debug/profile.js';
 import { getSnapshotVNodeSource } from '../debug/vnodeSource.js';
+import { LifecycleConstant, NativeUpdateDataType } from '../lifecycle/constant.js';
+import type { FirstScreenData } from '../lifecycle/constant.js';
 import { destroyBackground } from '../lifecycle/destroy.js';
 import { delayedEvents, delayedPublishEvent } from '../lifecycle/event/delayEvents.js';
 import { delayLifecycleEvent, delayedLifecycleEvents } from '../lifecycle/event/delayLifecycleEvents.js';

packages/react/runtime/src/hydrate.ts → packages/react/runtime/src/renderToOpcodes/hydrate.ts

@@ -2,14 +2,14 @@
 // 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 { profileEnd, profileStart } from './debug/profile.js';
-import { componentAtIndexFactory, enqueueComponentFactory, gRecycleMap, gSignMap } from './list.js';
-import { __pendingListUpdates } from './pendingListUpdates.js';
-import { DynamicPartType } from './snapshot/dynamicPartType.js';
-import type { PlatformInfo } from './snapshot/platformInfo.js';
-import { unref } from './snapshot/ref.js';
-import type { SnapshotInstance } from './snapshot/snapshot.js';
-import { isEmptyObject } from './utils.js';
+import { profileEnd, profileStart } from '../debug/profile.js';
+import { componentAtIndexFactory, enqueueComponentFactory, gRecycleMap, gSignMap } from '../list/list.js';
+import { __pendingListUpdates } from '../list/pendingListUpdates.js';
+import { DynamicPartType } from '../snapshot/dynamicPartType.js';
+import type { PlatformInfo } from '../snapshot/platformInfo.js';
+import { unref } from '../snapshot/ref.js';
+import type { SnapshotInstance } from '../snapshot/snapshot.js';
+import { isEmptyObject } from '../utils.js';
 
 const UNREACHABLE_ITEM_KEY_NOT_FOUND = 'UNREACHABLE_ITEM_KEY_NOT_FOUND';
 

packages/react/runtime/src/opcodes.ts → packages/react/runtime/src/renderToOpcodes/opcodes.ts

@@ -2,9 +2,9 @@
 // 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 { hydrate } from './hydrate.js';
-import { componentAtIndexFactory, enqueueComponentFactory, gRecycleMap, gSignMap } from './list.js';
-import { CHILDREN } from './renderToOpcodes/constants.js';
-import { SnapshotInstance } from './snapshot/snapshot.js';
+import { componentAtIndexFactory, enqueueComponentFactory, gRecycleMap, gSignMap } from '../list/list.js';
+import { CHILDREN } from './constants.js';
+import { SnapshotInstance } from '../snapshot/snapshot.js';
 
 const OpcodeBegin = 0;
 const OpcodeEnd = 1;

packages/react/runtime/src/snapshot/backgroundSnapshot.ts

@@ -10,11 +10,6 @@
 
 import type { Worklet } from '@lynx-js/react/worklet-runtime/bindings';
 
-import { profileEnd, profileStart } from '../debug/profile.js';
-import { clearSnapshotVNodeSource, getSnapshotVNodeSource, moveSnapshotVNodeSource } from '../debug/vnodeSource.js';
-import { processGestureBackground } from '../gesture/processGestureBagkround.js';
-import type { GestureKind } from '../gesture/types.js';
-import { diffArrayAction, diffArrayLepus } from '../hydrate.js';
 import { snapshotManager } from './definition.js';
 import type { Snapshot } from './definition.js';
 import { DynamicPartType } from './dynamicPartType.js';
@@ -25,6 +20,10 @@ import { hydrationMap } from './snapshotInstanceHydrationMap.js';
 import { transformSpread } from './spread.js';
 import type { SerializedSnapshotInstance } from './types.js';
 import { traverseSnapshotInstance } from './utils.js';
+import { profileEnd, profileStart } from '../debug/profile.js';
+import { clearSnapshotVNodeSource, getSnapshotVNodeSource, moveSnapshotVNodeSource } from '../debug/vnodeSource.js';
+import { processGestureBackground } from '../gesture/processGestureBagkround.js';
+import type { GestureKind } from '../gesture/types.js';
 import { globalBackgroundSnapshotInstancesToRemove } from '../lifecycle/patch/globalState.js';
 import {
   SnapshotOperation,
@@ -34,6 +33,7 @@ import {
 } from '../lifecycle/patch/snapshotPatch.js';
 import type { SnapshotPatch } from '../lifecycle/patch/snapshotPatch.js';
 import { globalPipelineOptions } from '../lynx/performance.js';
+import { diffArrayAction, diffArrayLepus } from '../renderToOpcodes/hydrate.js';
 import { isDirectOrDeepEqual } from '../utils.js';
 import { onPostWorkletCtx } from '../worklet/ctx.js';
 

packages/react/runtime/src/snapshot/list.ts

@@ -2,8 +2,8 @@
 // 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 { hydrate } from '../hydrate.js';
-import { componentAtIndexFactory, enqueueComponentFactory, gRecycleMap, gSignMap } from '../list.js';
+import { componentAtIndexFactory, enqueueComponentFactory, gRecycleMap, gSignMap } from '../list/list.js';
+import { hydrate } from '../renderToOpcodes/hydrate.js';
 import type { SnapshotInstance } from '../snapshot/snapshot.js';
 
 const destroyLifetimeHandlerMap = new Map<number, () => void>();

packages/react/runtime/src/snapshot/platformInfo.ts

@@ -1,8 +1,8 @@
 // Copyright 2025 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 { ListUpdateInfoRecording } from '../listUpdateInfo.js';
-import { __pendingListUpdates } from '../pendingListUpdates.js';
+import { ListUpdateInfoRecording } from '../list/listUpdateInfo.js';
+import { __pendingListUpdates } from '../list/pendingListUpdates.js';
 import type { SnapshotInstance } from '../snapshot/snapshot.js';
 
 const platformInfoVirtualAttributes: Set<string> = /* @__PURE__ */ new Set<string>([

packages/react/runtime/src/snapshot/snapshot.ts

@@ -10,10 +10,6 @@
 
 import type { Worklet, WorkletRefImpl } from '@lynx-js/react/worklet-runtime/bindings';
 
-import { clearSnapshotVNodeSource } from '../debug/vnodeSource.js';
-import { SnapshotOperation, __globalSnapshotPatch } from '../lifecycle/patch/snapshotPatch.js';
-import { ListUpdateInfoRecording } from '../listUpdateInfo.js';
-import { __pendingListUpdates } from '../pendingListUpdates.js';
 import { DEFAULT_CSS_ID, DEFAULT_ENTRY_NAME } from './constants.js';
 import { snapshotManager } from './definition.js';
 import type { Snapshot } from './definition.js';
@@ -23,6 +19,10 @@ import type { PlatformInfo } from './platformInfo.js';
 import { unref } from './ref.js';
 import type { SerializedSnapshotInstance } from './types.js';
 import { traverseSnapshotInstance } from './utils.js';
+import { clearSnapshotVNodeSource } from '../debug/vnodeSource.js';
+import { SnapshotOperation, __globalSnapshotPatch } from '../lifecycle/patch/snapshotPatch.js';
+import { ListUpdateInfoRecording } from '../list/listUpdateInfo.js';
+import { __pendingListUpdates } from '../list/pendingListUpdates.js';
 import { isDirectOrDeepEqual } from '../utils.js';
 
 export const snapshotInstanceManager: {

packages/react/runtime/src/snapshot/spread.ts

@@ -12,8 +12,8 @@
 import type { Element, Worklet, WorkletRefImpl } from '@lynx-js/react/worklet-runtime/bindings';
 
 import type { BackgroundSnapshotInstance } from './backgroundSnapshot.js';
-import { ListUpdateInfoRecording } from '../listUpdateInfo.js';
-import { __pendingListUpdates } from '../pendingListUpdates.js';
+import { ListUpdateInfoRecording } from '../list/listUpdateInfo.js';
+import { __pendingListUpdates } from '../list/pendingListUpdates.js';
 import { SnapshotInstance } from '../snapshot/snapshot.js';
 import { isDirectOrDeepEqual, isEmptyObject, pick } from '../utils.js';
 import { updateEvent } from './event.js';

packages/react/runtime/src/worklet/ref/updateInitValue.ts

@@ -6,7 +6,7 @@ import { updateWorkletRefInitValueChanges } from '@lynx-js/react/worklet-runtime
 
 import { takeWorkletRefInitValuePatch } from './workletRefPool.js';
 import type { workletRefInitValuePatch } from './workletRefPool.js';
-import { LifecycleConstant } from '../../lifecycleConstant.js';
+import { LifecycleConstant } from '../../lifecycle/constant.js';
 
 function updateMTRefInitValue({ data }: { data: string }): void {
   // This update ignores reloadVersion check.

packages/react/runtime/types/types.d.ts

@@ -4,7 +4,7 @@
 
 import { EventEmitter } from '@lynx-js/types';
 
-import { LifecycleConstant } from '../src/lifecycleConstant.js';
+import { LifecycleConstant } from '../src/lifecycle/constant.js';
 import { Lynx as LynxApi } from '../src/lynx-api.js';
 import type { InitData, InitDataRaw } from '../src/lynx-api.js';