@lynx-js/react 0.105.0

package/runtime/src/renderToOpcodes/index.ts

@@ -0,0 +1,301 @@
+// 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.
+
+// modified from preact-render-to-string@6.0.3
+// @ts-nocheck
+
+import { Fragment, h, options } from 'preact';
+
+import {
+  CHILDREN,
+  COMMIT,
+  COMPONENT,
+  DIFF,
+  DIFFED,
+  DIRTY,
+  NEXT_STATE,
+  PARENT,
+  RENDER,
+  SKIP_EFFECTS,
+  VNODE,
+} from './constants.js';
+
+/** @typedef {import('preact').VNode} VNode */
+
+const EMPTY_ARR = [];
+const isArray = /* @__PURE__ */ Array.isArray;
+const assign = /* @__PURE__ */ Object.assign;
+
+// Global state for the current render pass
+let beforeDiff, afterDiff, renderHook, ummountHook;
+
+/**
+ * Render Preact JSX + Components to an HTML string.
+ * @param {VNode} vnode	JSX Element / VNode to render
+ * @param {object} [context] Initial root context object
+ */
+export function renderToString(vnode: any, context: any): any[] {
+  // Performance optimization: `renderToString` is synchronous and we
+  // therefore don't execute any effects. To do that we pass an empty
+  // array to `options._commit` (`__c`). But we can go one step further
+  // and avoid a lot of dirty checks and allocations by setting
+  // `options._skipEffects` (`__s`) too.
+  const previousSkipEffects = options[SKIP_EFFECTS];
+  options[SKIP_EFFECTS] = true;
+
+  // store options hooks once before each synchronous render call
+  beforeDiff = options[DIFF];
+  afterDiff = options[DIFFED];
+  renderHook = options[RENDER];
+  ummountHook = options.unmount;
+
+  const parent = h(Fragment, null);
+  parent[CHILDREN] = [vnode];
+
+  const opcodes = [];
+
+  try {
+    _renderToString(
+      vnode,
+      context || EMPTY_OBJ,
+      false,
+      undefined,
+      parent,
+      opcodes,
+    );
+  } finally {
+    // options._commit, we don't schedule any effects in this library right now,
+    // so we can pass an empty queue to this hook.
+    if (options[COMMIT]) options[COMMIT](vnode, EMPTY_ARR);
+    options[SKIP_EFFECTS] = previousSkipEffects;
+    EMPTY_ARR.length = 0;
+  }
+
+  return opcodes;
+}
+
+// Installed as setState/forceUpdate for function components
+function markAsDirty() {
+  this.__d = true;
+}
+
+const EMPTY_OBJ = {};
+
+export const __OpBegin = 0;
+export const __OpEnd = 1;
+export const __OpAttr = 2;
+export const __OpText = 3;
+
+/**
+ * @param {VNode} vnode
+ * @param {Record<string, unknown>} context
+ */
+function renderClassComponent(vnode, context) {
+  let type = /** @type {import("preact").ComponentClass<typeof vnode.props>} */ (vnode.type);
+
+  let c = new type(vnode.props, context);
+
+  vnode[COMPONENT] = c;
+  c[VNODE] = vnode;
+
+  c.props = vnode.props;
+  c.context = context;
+  // turn off stateful re-rendering:
+  c[DIRTY] = true;
+
+  if (c.state == null) c.state = EMPTY_OBJ;
+
+  if (c[NEXT_STATE] == null) {
+    c[NEXT_STATE] = c.state;
+  }
+
+  if (type.getDerivedStateFromProps) {
+    c.state = assign(
+      {},
+      c.state,
+      type.getDerivedStateFromProps(c.props, c.state),
+    );
+  }
+
+  if (renderHook) renderHook(vnode);
+
+  return c.render(c.props, c.state, context);
+}
+
+/**
+ * Recursively render VNodes to HTML.
+ * @param {VNode|any} vnode
+ * @param {any} context
+ * @param {boolean} isSvgMode
+ * @param {any} selectValue
+ * @param {VNode} parent
+ * @param opcodes
+ */
+function _renderToString(
+  vnode,
+  context,
+  isSvgMode,
+  selectValue,
+  parent,
+  opcodes,
+) {
+  // Ignore non-rendered VNodes/values
+  if (vnode == null || vnode === true || vnode === false || vnode === '') {
+    return;
+  }
+
+  // Text VNodes: escape as HTML
+  if (typeof vnode !== 'object') {
+    if (typeof vnode === 'function') return;
+
+    opcodes.push(__OpText, vnode + '');
+    return;
+  }
+
+  // Recurse into children / Arrays
+  if (isArray(vnode)) {
+    parent[CHILDREN] = vnode;
+    for (let i = 0; i < vnode.length; i++) {
+      let child = vnode[i];
+      if (child == null || typeof child === 'boolean') continue;
+
+      _renderToString(child, context, isSvgMode, selectValue, parent, opcodes);
+    }
+    return;
+  }
+
+  // VNodes have {constructor:undefined} to prevent JSON injection:
+  // if (vnode.constructor !== undefined) return;
+
+  vnode[PARENT] = parent;
+  if (beforeDiff) beforeDiff(vnode);
+
+  let type = vnode.type,
+    props = vnode.props,
+    cctx = context,
+    contextType,
+    rendered,
+    component;
+
+  // Invoke rendering on Components
+  if (typeof type === 'function') {
+    if (type === Fragment) {
+      rendered = props.children;
+    } else {
+      contextType = type.contextType;
+      if (contextType != null) {
+        let provider = context[contextType.__c];
+        cctx = provider ? provider.props.value : contextType.__;
+      }
+
+      if (type.prototype && typeof type.prototype.render === 'function') {
+        rendered = /**#__NOINLINE__**/ renderClassComponent(vnode, cctx);
+        component = vnode[COMPONENT];
+      } else {
+        component = {
+          __v: vnode,
+          props,
+          context: cctx,
+          // silently drop state updates
+          setState: markAsDirty,
+          forceUpdate: markAsDirty,
+          __d: true,
+          // hooks
+          __h: [],
+        };
+        vnode[COMPONENT] = component;
+        component.constructor = type;
+        component.render = doRender;
+
+        // If a hook invokes setState() to invalidate the component during rendering,
+        // re-render it up to 25 times to allow "settling" of memoized states.
+        // Note:
+        //   This will need to be updated for Preact 11 to use internal.flags rather than component._dirty:
+        //   https://github.com/preactjs/preact/blob/d4ca6fdb19bc715e49fd144e69f7296b2f4daa40/src/diff/component.js#L35-L44
+        let count = 0;
+        while (component[DIRTY] && count++ < 25) {
+          component[DIRTY] = false;
+
+          if (renderHook) renderHook(vnode);
+
+          rendered = component.render(props, component.state, cctx);
+        }
+        component[DIRTY] = true;
+      }
+
+      if (component.getChildContext != null) {
+        context = assign({}, context, component.getChildContext());
+      }
+    }
+
+    // When a component returns a Fragment node we flatten it in core, so we
+    // need to mirror that logic here too
+    let isTopLevelFragment = rendered != null && rendered.type === Fragment
+      && rendered.key == null;
+    rendered = isTopLevelFragment ? rendered.props.children : rendered;
+
+    // Recurse into children before invoking the after-diff hook
+    _renderToString(rendered, context, isSvgMode, selectValue, vnode, opcodes);
+    if (afterDiff) afterDiff(vnode);
+    vnode[PARENT] = undefined;
+
+    if (ummountHook) ummountHook(vnode);
+
+    return;
+  }
+
+  let children;
+
+  opcodes.push(__OpBegin, vnode);
+
+  for (let name in props) {
+    let v = props[name];
+
+    switch (name) {
+      case 'children':
+        children = v;
+        continue;
+
+      // VDOM-specific props
+      /* c8 ignore next 5 */
+      case 'key':
+      case 'ref':
+      case '__self':
+      case '__source':
+        continue;
+
+      default: {}
+    }
+
+    // write this attribute to the buffer
+    if (v != null && v !== false && typeof v !== 'function') {
+      opcodes.push(__OpAttr, name, v);
+    }
+  }
+
+  if (typeof children === 'string') {
+    // single text child
+    opcodes.push(__OpText, children);
+  } else if (children != null && children !== false && children !== true) {
+    // recurse into this element VNode's children
+    _renderToString(children, context, false, selectValue, vnode, opcodes);
+  }
+
+  if (afterDiff) afterDiff(vnode);
+  vnode[PARENT] = undefined;
+  if (ummountHook) ummountHook(vnode);
+
+  opcodes.push(__OpEnd);
+
+  return;
+}
+
+/** The `.render()` method for a PFC backing instance. */
+function doRender(props, state, context) {
+  return this.constructor(props, context);
+}
+
+export default renderToString;
+export const render: typeof renderToString = renderToString;
+export const renderToStaticMarkup: typeof renderToString = renderToString;

package/runtime/src/root.ts

@@ -0,0 +1,19 @@
+// 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 { BackgroundSnapshotInstance } from './backgroundSnapshot.js';
+import { SnapshotInstance } from './snapshot.js';
+
+let __root: (SnapshotInstance | BackgroundSnapshotInstance) & { __jsx?: React.ReactNode };
+
+function setRoot(root: typeof __root): void {
+  __root = root;
+}
+
+if (__LEPUS__) {
+  setRoot(new SnapshotInstance('root'));
+} else if (__JS__) {
+  setRoot(new BackgroundSnapshotInstance('root'));
+}
+
+export { __root, setRoot };

package/runtime/src/snapshot/event.ts

@@ -0,0 +1,33 @@
+// 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 { SnapshotInstance } from '../snapshot.js';
+
+function updateEvent(
+  snapshot: SnapshotInstance,
+  expIndex: number,
+  _oldValue: any,
+  elementIndex: number,
+  eventType: string,
+  eventName: string,
+  spreadKey: string,
+): void {
+  const value = snapshot.__values![expIndex];
+  let event;
+  if (!value) {
+    event = undefined;
+  } else if (typeof value === 'string') {
+    event = value;
+  } else {
+    event = `${snapshot.__id}:${expIndex}:${spreadKey}`;
+  }
+
+  // todo: reuseId?
+
+  snapshot.__values![expIndex] = event;
+  if (snapshot.__elements) {
+    __AddEvent(snapshot.__elements[elementIndex]!, eventType, eventName, event);
+  }
+}
+
+export { updateEvent };

package/runtime/src/snapshot/gesture.ts

@@ -0,0 +1,25 @@
+import { SnapshotInstance } from '../snapshot.js';
+import { processGesture } from '../gesture/processGesture.js';
+
+export function updateGesture(
+  snapshot: SnapshotInstance,
+  expIndex: number,
+  _oldValue: any,
+  elementIndex: number,
+  workletType: string,
+): void {
+  if (!snapshot.__elements) {
+    return;
+  }
+  if (__PROFILE__) {
+    console.profile('updateGesture');
+  }
+  const value = snapshot.__values![expIndex];
+
+  if (workletType === 'main-thread') {
+    processGesture(snapshot.__elements[elementIndex]!, value);
+  }
+  if (__PROFILE__) {
+    console.profileEnd();
+  }
+}

package/runtime/src/snapshot/platformInfo.ts

@@ -0,0 +1,48 @@
+import { __pendingListUpdates, ListUpdateInfoRecording } from '../list.js';
+import { SnapshotInstance } from '../snapshot.js';
+
+const platformInfoVirtualAttributes: Set<string> = /* @__PURE__ */ new Set<string>(['reuse-identifier']);
+const platformInfoAttributes: Set<string> = /* @__PURE__ */ new Set<string>([
+  'reuse-identifier',
+  'full-span',
+  'item-key',
+  'sticky-top',
+  'sticky-bottom',
+  'estimated-height',
+  'estimated-height-px',
+  'estimated-main-axis-size-px',
+]);
+
+function updateListItemPlatformInfo(
+  ctx: SnapshotInstance,
+  index: number,
+  oldValue: any,
+  elementIndex: number,
+): void {
+  const newValue = ctx.__listItemPlatformInfo = ctx.__values![index];
+
+  // @ts-ignore
+  const list = ctx.__parent;
+  if (list?.__snapshot_def.isListHolder) {
+    (__pendingListUpdates.values[list.__id] ??= new ListUpdateInfoRecording(list)).onSetAttribute(
+      ctx,
+      newValue,
+      oldValue,
+    );
+  }
+
+  // In this updater, unlike `updateSpread`, the shape of the value is guaranteed to be an fixed object.
+  // No adding / removing keys.
+  if (ctx.__elements) {
+    const e = ctx.__elements[elementIndex]!;
+    const value = ctx.__values![index];
+    for (const k in value) {
+      if (platformInfoVirtualAttributes.has(k)) {
+        continue;
+      }
+      __SetAttribute(e, k, value[k]);
+    }
+  }
+}
+
+export { updateListItemPlatformInfo, platformInfoAttributes };

package/runtime/src/snapshot/ref.ts

@@ -0,0 +1,151 @@
+// 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 type { Worklet, WorkletRef } from '@lynx-js/react/worklet-runtime/bindings';
+
+import { nextCommitTaskId } from '../lifecycle/patchUpdate.js';
+import { SnapshotInstance, backgroundSnapshotInstanceManager } from '../snapshot.js';
+import { workletUnRef } from './workletRef.js';
+
+let globalRefPatch: Record<string, number | null> = {};
+let globalRefsToRemove: Map</* commitId */ number, Map</* sign */ string, /* ref */ any>> = /* @__PURE__ */ new Map();
+let globalRefsToSet: Map</* commitId */ number, Record<string, number>> = /* @__PURE__ */ new Map();
+let nextRefId = 1;
+
+function unref(snapshot: SnapshotInstance, recursive: boolean): void {
+  snapshot.__ref_set?.forEach(v => {
+    globalRefPatch[v] = null;
+  });
+  snapshot.__ref_set?.clear();
+
+  snapshot.__worklet_ref_set?.forEach(v => {
+    if (v) {
+      workletUnRef(v as Worklet | WorkletRef<unknown>);
+    }
+  });
+  snapshot.__worklet_ref_set?.clear();
+
+  if (recursive) {
+    snapshot.childNodes.forEach(it => {
+      unref(it, recursive);
+    });
+  }
+}
+
+function applyRef(ref: any, value: any) {
+  // TODO: ref: exceptions thrown in user functions should be able to be caught by an Error Boundary
+  if (typeof ref == 'function') {
+    let hasRefUnmount = typeof ref._unmount == 'function';
+    if (hasRefUnmount) {
+      // @ts-ignore TS doesn't like moving narrowing checks into variables
+      ref._unmount();
+    }
+
+    if (!hasRefUnmount || value != null) {
+      // Store the cleanup function on the function
+      // instance object itself to avoid shape
+      // transitioning vnode
+      ref._unmount = ref(value);
+    }
+  } else ref.current = value;
+}
+
+function updateBackgroundRefs(commitId: number): void {
+  const oldRefMap = globalRefsToRemove.get(commitId);
+  if (oldRefMap) {
+    globalRefsToRemove.delete(commitId);
+    for (let ref of oldRefMap.values()) {
+      applyRef(ref, null);
+    }
+  }
+  const newRefMap = globalRefsToSet.get(commitId);
+  if (newRefMap) {
+    globalRefsToSet.delete(commitId);
+    for (const sign in newRefMap) {
+      const ref = backgroundSnapshotInstanceManager.getValueBySign(sign);
+      if (ref) {
+        // TODO: ref: support __REF_FIRE_IMMEDIATELY__
+        const v = newRefMap[sign]
+          && lynx.createSelectorQuery().selectUniqueID(
+            newRefMap[sign],
+          );
+        applyRef(ref, v);
+      }
+    }
+  }
+}
+
+function updateRef(
+  snapshot: SnapshotInstance,
+  expIndex: number,
+  oldValue: any,
+  elementIndex: number,
+  spreadKey: string,
+): void {
+  const value = snapshot.__values![expIndex];
+  let ref;
+  if (!value) {
+    ref = undefined;
+  } else if (typeof value === 'string') {
+    ref = value;
+  } else {
+    ref = `${snapshot.__id}:${expIndex}:${spreadKey}`;
+  }
+
+  snapshot.__values![expIndex] = ref;
+  if (snapshot.__elements && ref) {
+    __SetAttribute(snapshot.__elements[elementIndex]!, 'has-react-ref', true);
+    const uid = __GetElementUniqueID(snapshot.__elements[elementIndex]!);
+    globalRefPatch[ref] = uid;
+    snapshot.__ref_set ??= new Set();
+    snapshot.__ref_set.add(ref);
+  }
+  if (oldValue !== ref) {
+    snapshot.__ref_set?.delete(oldValue);
+  }
+}
+
+function takeGlobalRefPatchMap(): Record<string, number | null> {
+  const patch = globalRefPatch;
+  globalRefPatch = {};
+  return patch;
+}
+
+function transformRef(ref: unknown): Function | (object & Record<'current', unknown>) | null | undefined {
+  if (ref === undefined || ref === null) {
+    return ref;
+  }
+  if (typeof ref === 'function' || (typeof ref === 'object' && 'current' in ref)) {
+    if ('__ref' in ref) {
+      return ref;
+    }
+    return Object.defineProperty(ref, '__ref', { value: nextRefId++ });
+  }
+  throw new Error(
+    `Elements' "ref" property should be a function, or an object created `
+      + `by createRef(), but got [${typeof ref}] instead`,
+  );
+}
+
+function markRefToRemove(sign: string, ref: unknown): void {
+  if (!ref) {
+    return;
+  }
+  let oldRefs = globalRefsToRemove.get(nextCommitTaskId);
+  if (!oldRefs) {
+    oldRefs = new Map();
+    globalRefsToRemove.set(nextCommitTaskId, oldRefs);
+  }
+  oldRefs.set(sign, ref);
+}
+
+export {
+  updateRef,
+  takeGlobalRefPatchMap,
+  updateBackgroundRefs,
+  unref,
+  transformRef,
+  globalRefsToRemove,
+  globalRefsToSet,
+  markRefToRemove,
+};