Alien Signals

Alien Signals exposes a small signal/effect core but no official framework adapter. This is the one state demo that intentionally uses the vanilla renderer instead of presenting a third-party binding as part of the library’s supported API.

Live before-and-after

Executed source

Imported verbatim with ?raw from every implementation file shown below. Playback timing and FLIP controls come from the shared demo harness.

main.tsalien-signals.tsstate-demo.ts

src/alien-signals/main.tsTypeScript · 4 linesCopy

import { mountStateDemo } from "../shared/state-demo.js";
import definition from "../state/stores/alien-signals.js";

await mountStateDemo(definition);

src/state/stores/alien-signals.tsTypeScript · 23 linesCopy

import { effect, signal } from "alien-signals";

import type { StateDemoDefinition } from "../../shared/state-demo.js";

const definition = {
  createSource: (initialState) => {
    const frame = signal(initialState);
    return {
      dispose: () => undefined,
      read: () => frame(),
      subscribe: (listener) =>
        effect(() => {
          frame();
          listener();
        }),
      write: (state) => frame(state),
    };
  },
  label: "Alien Signals",
  packageName: "ALIEN-SIGNALS",
} satisfies StateDemoDefinition;

export default definition;

src/shared/state-demo.tsTypeScript · 128 linesCopy

import { createLikftc } from "@vp-tw/likftc/web";

import {
  createAfterRows,
  createBeforeRows,
  describeRow,
  mountFrameworkDemo,
  type DemoFrameState,
  type DemoItem,
  type DemoRenderedRow,
  type DemoRuntime,
} from "./demo.js";

export interface DemoStateSource {
  readonly dispose: () => void;
  readonly read: () => DemoFrameState;
  readonly subscribe: (listener: () => void) => () => void;
  readonly write: (state: DemoFrameState) => void;
}

export interface StateDemoDefinition {
  readonly createSource: (initialState: DemoFrameState) => DemoStateSource;
  readonly label: string;
  readonly packageName: string;
}

function createPanel(
  corrected: boolean,
  packageName: string,
): {
  readonly list: HTMLOListElement;
  readonly panel: HTMLElement;
} {
  const panel = document.createElement("article");
  panel.className = "runtime-panel";
  const label = document.createElement("small");
  label.textContent = corrected ? `WITH LIKFTC + ${packageName}` : `WITHOUT + ${packageName}`;
  const title = document.createElement("h3");
  title.textContent = corrected ? "Presence identity" : "Logical ID key";
  const list = document.createElement("ol");
  list.dataset["list"] = corrected ? "after" : "before";
  panel.append(label, title, list);
  return { list, panel };
}

function requireChild<ElementType extends Element>(row: ParentNode, selector: string): ElementType {
  const child = row.querySelector<ElementType>(selector);
  if (child === null) throw new Error(`Missing state demo child ${selector}`);
  return child;
}

function createRow(): HTMLLIElement {
  const row = document.createElement("li");
  row.className = "runtime-row";
  row.innerHTML = "<b></b><span></span><code></code><em></em>";
  return row;
}

function updateRow(element: HTMLLIElement, row: DemoRenderedRow): void {
  element.dataset["collision"] = String(row.kind === "collision");
  element.dataset["id"] = row.item.id;
  element.dataset["key"] = row.keyText;
  element.dataset["kind"] = row.kind;
  element.dataset["phase"] = row.kind === "exiting" ? "exiting" : "current";
  element.dataset["slot"] = String(row.slot);
  requireChild<HTMLElement>(element, "b").textContent = row.item.id.toUpperCase();
  requireChild<HTMLElement>(element, "span").textContent = row.item.label;
  requireChild<HTMLElement>(element, "code").textContent = row.keyText;
  requireChild<HTMLElement>(element, "em").textContent = describeRow(row.kind);
}

function syncRows(
  list: HTMLOListElement,
  elements: Map<number | string, HTMLLIElement>,
  rows: readonly DemoRenderedRow[],
): void {
  const activeKeys = new Set(rows.map((row) => row.key));
  for (const [key, element] of elements) {
    if (!activeKeys.has(key)) {
      element.remove();
      elements.delete(key);
    }
  }
  for (const row of rows) {
    const element = elements.get(row.key) ?? createRow();
    elements.set(row.key, element);
    updateRow(element, row);
    list.append(element);
  }
}

export async function mountStateDemo(definition: StateDemoDefinition): Promise<void> {
  await mountFrameworkDemo(`${definition.label} store`, (target, initialState): DemoRuntime => {
    const grid = document.createElement("div");
    grid.className = "runtime-grid";
    const before = createPanel(false, definition.packageName);
    const after = createPanel(true, definition.packageName);
    grid.append(before.panel, after.panel);
    target.append(grid);

    const controller = createLikftc<DemoItem, string>({ getId: (item) => item.id });
    const source = definition.createSource(initialState);
    const beforeRows = new Map<number | string, HTMLLIElement>();
    const afterRows = new Map<number | string, HTMLLIElement>();
    let mounted = false;

    const render = (): void => {
      const state = source.read();
      syncRows(before.list, beforeRows, createBeforeRows(state));
      const entries = controller.update(state.items);
      syncRows(after.list, afterRows, createAfterRows(state, entries));
    };
    const unsubscribe = source.subscribe(() => {
      if (mounted) render();
    });
    render();
    mounted = true;

    return {
      destroy: () => {
        unsubscribe();
        source.dispose();
        grid.remove();
      },
      update: (state) => source.write(state),
    };
  });
}

Alien Signals controls invalidation; Likftc controls identity when an item exits and re-enters.