@planet-matrix/mobius-model 0.1.1

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./signal-core/index";
+export * from "./signal-operators";

package/src/signal-core/README.md

@@ -0,0 +1,4 @@
+# Signals
+
+- https://github.com/stackblitz/alien-signals
+- https://github.com/johnsoncodehk/alien-signals-starter

package/src/signal-core/flags.ts

@@ -0,0 +1,275 @@
+export const FLAG_DICT = {
+  /**
+   * 当前节点没有任何特性。
+   */
+  None: 0,
+  /**
+   * 当前节点的值是可变的。值的变化可以通过此节点继续传递。
+   */
+  Mutable: 1,
+  /**
+   * 当前节点的值可能发生了变化，待确定。
+   */
+  Pending: 2,
+  /**
+   * 当前节点的值发生了变化。
+   */
+  Dirty: 4,
+  /**
+   * 当前节点正在进行观察。当上游节点的值发生变化时应该通知当前节点。
+   */
+  Watching: 8,
+
+  /**
+   * 当前节点正在进行依赖收集。
+   *
+   * 目前只考虑到以下用途：
+   *
+   * 1. 用于防止在某节点依赖收集过程中依赖发生变化导致该节点重复运行。
+   *    ```
+   *    const count = signal(0);
+   *    effect(() => {
+   *      count(count() + 1);
+   *    })
+   *    ```
+   */
+  Tracking: 16,
+  /**
+   * 当前节点正在进行依赖收集，且正在尝试复用现存连接。
+   */
+  TrackingReusing: 32,
+} as const;
+
+export const hasMutable = (flags: number): boolean => {
+  return (flags & FLAG_DICT.Mutable) !== 0;
+}
+export const setMutable = (flags?: number | undefined): number => {
+  return flags === undefined ? FLAG_DICT.Mutable : (flags | FLAG_DICT.Mutable);
+}
+export const unsetMutable = (flags: number): number => {
+  return flags & ~FLAG_DICT.Mutable;
+}
+export const toggleMutable = (flags: number): number => {
+  return flags ^ FLAG_DICT.Mutable;
+}
+export const hasDirty = (flags: number): boolean => {
+  return (flags & FLAG_DICT.Dirty) !== 0;
+}
+export const setDirty = (flags?: number | undefined): number => {
+  return flags === undefined ? FLAG_DICT.Dirty : (flags | FLAG_DICT.Dirty);
+}
+export const unsetDirty = (flags: number): number => {
+  return flags & ~FLAG_DICT.Dirty;
+}
+export const toggleDirty = (flags: number): number => {
+  return flags ^ FLAG_DICT.Dirty;
+}
+export const hasPending = (flags: number): boolean => {
+  return (flags & FLAG_DICT.Pending) !== 0;
+}
+export const setPending = (flags?: number | undefined): number => {
+  return flags === undefined ? FLAG_DICT.Pending : (flags | FLAG_DICT.Pending);
+}
+export const unsetPending = (flags: number): number => {
+  return flags & ~FLAG_DICT.Pending;
+}
+export const togglePending = (flags: number): number => {
+  return flags ^ FLAG_DICT.Pending;
+}
+export const hasWatching = (flags: number): boolean => {
+  return (flags & FLAG_DICT.Watching) !== 0;
+}
+export const setWatching = (flags?: number | undefined): number => {
+  return flags === undefined ? FLAG_DICT.Watching : (flags | FLAG_DICT.Watching);
+}
+export const unsetWatching = (flags: number): number => {
+  return flags & ~FLAG_DICT.Watching;
+}
+export const toggleWatching = (flags: number): number => {
+  return flags ^ FLAG_DICT.Watching;
+}
+export const hasTracking = (flags: number): boolean => {
+  return (flags & FLAG_DICT.Tracking) !== 0;
+}
+export const setTracking = (flags?: number | undefined): number => {
+  return flags === undefined ? FLAG_DICT.Tracking : (flags | FLAG_DICT.Tracking);
+}
+export const unsetTracking = (flags: number): number => {
+  return flags & ~FLAG_DICT.Tracking;
+}
+export const toggleTracking = (flags: number): number => {
+  return flags ^ FLAG_DICT.Tracking;
+}
+export const hasTrackingReusing = (flags: number): boolean => {
+  return (flags & FLAG_DICT.TrackingReusing) !== 0;
+}
+export const setTrackingReusing = (flags?: number): number => {
+  return flags === undefined ? FLAG_DICT.TrackingReusing : (flags | FLAG_DICT.TrackingReusing);
+}
+export const unsetTrackingReusing = (flags: number): number => {
+  return flags & ~FLAG_DICT.TrackingReusing;
+}
+export const toggleTrackingReusing = (flags: number): number => {
+  return flags ^ FLAG_DICT.TrackingReusing;
+}
+
+export class Flags {
+  private flags: number;
+
+  constructor() {
+    this.flags = FLAG_DICT.None;
+  }
+
+  static clone(flags: Flags): Flags {
+    const newFlags = new Flags();
+    newFlags.set(flags.get());
+    return newFlags;
+  }
+
+  get(): number {
+    return this.flags;
+  }
+
+  set(flags: number): this {
+    this.flags = flags;
+    return this;
+  }
+
+  clear(): this {
+    this.flags = FLAG_DICT.None;
+    return this;
+  }
+
+  hasMutable(): boolean {
+    return hasMutable(this.flags);
+  }
+  setMutable(): this {
+    this.flags = setMutable(this.flags);
+    return this;
+  }
+  unsetMutable(): this {
+    this.flags = unsetMutable(this.flags);
+    return this;
+  }
+  toggleMutable(): this {
+    this.flags = toggleMutable(this.flags);
+    return this;
+  }
+
+  hasDirty(): boolean {
+    return hasDirty(this.flags);
+  }
+  setDirty(): this {
+    this.flags = setDirty(this.flags);
+    return this;
+  }
+  unsetDirty(): this {
+    this.flags = unsetDirty(this.flags);
+    return this;
+  }
+  toggleDirty(): this {
+    this.flags = toggleDirty(this.flags);
+    return this;
+  }
+
+  hasPending(): boolean {
+    return hasPending(this.flags);
+  }
+  setPending(): this {
+    this.flags = setPending(this.flags);
+    return this;
+  }
+  unsetPending(): this {
+    this.flags = unsetPending(this.flags);
+    return this;
+  }
+  togglePending(): this {
+    this.flags = togglePending(this.flags);
+    return this;
+  }
+
+  hasWatching(): boolean {
+    return hasWatching(this.flags);
+  }
+  setWatching(): this {
+    this.flags = setWatching(this.flags);
+    return this;
+  }
+  unsetWatching(): this {
+    this.flags = unsetWatching(this.flags);
+    return this;
+  }
+  toggleWatching(): this {
+    this.flags = toggleWatching(this.flags);
+    return this;
+  }
+
+  hasTracking(): boolean {
+    return hasTracking(this.flags);
+  }
+  setTracking(): this {
+    this.flags = setTracking(this.flags);
+    return this;
+  }
+  unsetTracking(): this {
+    this.flags = unsetTracking(this.flags);
+    return this;
+  }
+  toggleTracking(): this {
+    this.flags = toggleTracking(this.flags);
+    return this;
+  }
+
+  hasTrackingReusing(): boolean {
+    return hasTrackingReusing(this.flags);
+  }
+  setTrackingReusing(): this {
+    this.flags = setTrackingReusing(this.flags);
+    return this;
+  }
+  unsetTrackingReusing(): this {
+    this.flags = unsetTrackingReusing(this.flags);
+    return this;
+  }
+  toggleTrackingReusing(): this {
+    this.flags = toggleTrackingReusing(this.flags);
+    return this;
+  }
+
+  toString(): string {
+    if (this.flags === FLAG_DICT.None) {
+      return 'Flags(None)';
+    }
+
+    const activeFlags: string[] = [];
+
+    if (this.hasMutable()) {
+      activeFlags.push('Mutable')
+    };
+    if (this.hasPending()) {
+      activeFlags.push('Pending')
+    };
+    if (this.hasDirty()) {
+      activeFlags.push('Dirty')
+    };
+    if (this.hasWatching()) {
+      activeFlags.push('Watching')
+    };
+    if (this.hasTracking()) {
+      activeFlags.push('Tracking')
+    };
+    if (this.hasTrackingReusing()) {
+      activeFlags.push('TrackingReusing')
+    };
+
+    return `Flags(${activeFlags.join(' | ')})`;
+  }
+}
+
+export const flags = (flags?: number | undefined): Flags => {
+  const f = new Flags();
+  if (flags !== undefined) {
+    f.set(flags);
+  }
+  return f;
+}

package/src/signal-core/index.ts

@@ -0,0 +1,3 @@
+export * from "./flags"
+export * from "./reactive-system"
+export * from "./primitive"

package/src/signal-core/primitive.ts

@@ -0,0 +1,275 @@
+import type { Flags } from "./flags"
+import { createReactiveSystem } from "./reactive-system"
+import { flags } from "./flags"
+import type { Link, Node } from "./reactive-system"
+
+const VOID = Symbol("void") as unknown;
+
+const queue: Effect[] = [];
+const flush = (): void => {
+  while (queue.length !== 0) {
+    queue.shift()!.run();
+  }
+}
+
+let batchDepth = 0;
+export const startBatch = (): void => {
+  batchDepth = batchDepth + 1;
+}
+export const endBatch = (): void => {
+  batchDepth = batchDepth - 1;
+  if (batchDepth === 0) {
+    flush();
+  }
+}
+
+const reactiveSystem = createReactiveSystem({
+  update(node: Signal | Computed) {
+    return node.update();
+  },
+  notify(node: Effect) {
+    const nodes = []
+    let currentNode: Effect | undefined = node
+    while (currentNode !== undefined) {
+      if (currentNode.flags.hasWatching() === false) {
+        break
+      }
+      node.notify();
+      nodes.push(currentNode);
+      const nextNode: Node | undefined = currentNode?.headSubLink?.sub
+      currentNode = nextNode instanceof Effect ? nextNode : undefined
+    }
+    queue.push(...nodes.toReversed());
+  },
+  unwatched(node: Signal | Computed | Effect) {
+    return node.stop();
+  }
+});
+const {
+  unlinkAllDepLinksOfNode,
+
+  withTracking,
+  track,
+
+  shallowPropagate,
+  deeeeepPropagate,
+  resolvePending,
+} = reactiveSystem
+
+/**
+ * Signal 的值只有在被获取的时候才会更新。
+ */
+export class Signal<T = unknown> implements Node {
+  headSubLink: Link | undefined;
+  tailSubLink: Link | undefined;
+  flags: Flags;
+
+  value: T;
+  pendingValue: T;
+
+  constructor(value: T) {
+    this.headSubLink = undefined;
+    this.tailSubLink = undefined;
+    this.flags = flags().setMutable();
+
+    this.pendingValue = value;
+    this.value = value;
+  }
+
+  get(): T {
+    let valueChanged = false
+
+    // 如果包含 Dirty 标记，则进行更新
+    const shouldUpdate = this.flags.hasDirty();
+    if (shouldUpdate === true) {
+      valueChanged = this.update()
+    }
+
+    // 如果值发生变化，则更新直接下游节点的标记
+    if (valueChanged === true) {
+      shallowPropagate(this);
+    }
+
+    // 自动进行依赖收集
+    track(this);
+
+    return this.value;
+  }
+
+  set(value: T): void {
+    // 将新值暂存起来，等用到的时候再执行更新
+    this.pendingValue = value;
+    // 为当前节点添加 Dirty 标记
+    this.flags.setDirty();
+
+    // 更新所有下游节点的标记
+    deeeeepPropagate(this);
+
+    // 执行更新队列
+    if (batchDepth === 0) {
+      flush();
+    }
+  }
+
+  /**
+   * 返回值表示更新前后值是否变化。
+   */
+  update(): boolean {
+    this.flags.unsetDirty();
+
+    const oldValue = this.value;
+    const newValue = this.pendingValue;
+    this.value = newValue;
+
+    return oldValue !== newValue;
+  }
+
+  stop(): void {
+    // do nothing
+  }
+}
+
+/**
+ * Computed 的值只有在被获取的时候才会更新。
+ * Computed 的值只有在上游节点的值发生变化时才会更新。
+ * Computed 的下游节点全部解除连接时会自动与所有上游节点解除连接，并回到初始状态。
+ */
+export class Computed<T = unknown> implements Node {
+  headDepLink: Link | undefined;
+  tailDepLink: Link | undefined;
+  headSubLink: Link | undefined;
+  tailSubLink: Link | undefined;
+  flags: Flags;
+
+  value: T;
+  getValue: () => T;
+
+  constructor(getValue: () => T) {
+    this.headDepLink = undefined;
+    this.tailDepLink = undefined;
+    this.headSubLink = undefined;
+    this.tailSubLink = undefined;
+    // 值在创建时尚未计算，因此初始时添加 Dirty 标记
+    this.flags = flags().setMutable().setDirty();
+
+    // undefined 可能是使用者期待的合法值，因此这里使用 VOID 占位
+    // oxlint-disable-next-line no-unsafe-type-assertion
+    this.value = VOID as T;
+    this.getValue = getValue;
+  }
+
+  get(): T {
+    let valueChanged = false;
+
+    // 如果包含 Pending 标记，则进行解决
+    const shouldResolve = this.flags.hasPending();
+    if (shouldResolve === true) {
+      resolvePending(this);
+    }
+
+    // 如果包含 Dirty 标记，则进行更新
+    const shouldUpdate = this.flags.hasDirty();
+    if (shouldUpdate === true) {
+      valueChanged = this.update()
+    }
+
+    // 如果值变化，则通知下游（仅通知直接下游）
+    if (valueChanged === true) {
+      shallowPropagate(this);
+    }
+
+    // 自动进行依赖收集
+    track(this);
+
+    return this.value;
+  }
+
+  /**
+   * 返回值表示更新前后值是否变化。
+   */
+  update(): boolean {
+    const result = withTracking(this, () => {
+      const oldValue = this.value;
+      const newValue = this.getValue();
+      this.value = newValue;
+      return oldValue !== newValue;
+    })
+    return result;
+  }
+
+  stop(): void {
+    unlinkAllDepLinksOfNode(this);
+    this.flags = flags().setMutable().setDirty();
+  }
+}
+
+/**
+ * Effect 会在创建时立即执行一次传入的函数。
+ * Effect 会在每次上游节点的值发生变化时重新执行传入的函数。
+ * Effect 在任意时刻最多只能一个待运行。
+ * Effect 可以与 Effect 建立连接。
+ * 作为上游节点的 Effect 在没有下游节点时会自动与所有上游节点解除连接，并将标记清空。
+ */
+export class Effect implements Node {
+  headDepLink: Link | undefined;
+  tailDepLink: Link | undefined;
+  headSubLink: Link | undefined;
+  tailSubLink: Link | undefined;
+  flags: Flags;
+
+  fn: () => void;
+
+  constructor(fn: () => void) {
+    this.headDepLink = undefined;
+    this.tailDepLink = undefined;
+    this.headSubLink = undefined;
+    this.tailSubLink = undefined;
+    // 在创建完成后即进入观察状态，因此初始时添加 Watching 标记
+    this.flags = flags().setWatching();
+
+    this.fn = fn;
+    this.internalRun();
+  }
+
+  notify(): void {
+    this.flags.unsetWatching();
+  }
+
+  run(): void {
+    this.flags.setWatching();
+
+    // 如果包含 Pending 标记，则进行解决
+    const shouldResolve = this.flags.hasPending();
+    if (shouldResolve === true) {
+      resolvePending(this);
+    }
+
+    // 如果包含 Dirty 标记，则进行更新
+    const shouldRun = this.flags.hasDirty();
+    if (shouldRun === true) {
+      this.internalRun();
+    }
+  }
+
+  private internalRun(): void {
+    track(this);
+    withTracking(this, () => {
+      return this.fn();
+    })
+  }
+
+  stop(): void {
+    unlinkAllDepLinksOfNode(this);
+    this.flags.clear();
+  }
+}
+
+export const signal = <T>(initialValue: T): Signal<T> => {
+  return new Signal(initialValue);
+}
+export const computed = <T>(getter: () => T): Computed<T> => {
+  return new Computed<T>(getter);
+}
+export const effect = (fn: () => void): Effect => {
+  return new Effect(fn);
+}