sinho 0.1.0

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "sinho",
+  "version": "0.1.0",
+  "description": "A lightweight signal-based library for building web components with a React-like API.",
+  "keywords": [
+    "ui",
+    "framework",
+    "signal",
+    "webcomponent"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yishn/sinho.git"
+  },
+  "author": "Yichuan Shen",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/yishn/sinho/issues"
+  },
+  "type": "module",
+  "homepage": "https://github.com/yishn/sinho#readme",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/mod.d.ts",
+        "default": "./dist/mod.js"
+      }
+    },
+    "./jsx-runtime": {
+      "import": {
+        "types": "./dist/jsx-runtime/mod.d.ts",
+        "default": "./dist/jsx-runtime/mod.js"
+      }
+    },
+    "./min": {
+      "import": {
+        "types": "./dist/mod.d.ts",
+        "default": "./dist/bundle.min.js"
+      }
+    },
+    "./min/jsx-runtime": {
+      "import": {
+        "types": "./dist/mod.d.ts",
+        "default": "./dist/bundle.min.js"
+      }
+    }
+  },
+  "scripts": {
+    "format": "prettier --write .",
+    "format-check": "prettier --check .",
+    "build": "tsc && npm run bundle && npm run minify",
+    "bundle": "rollup ./dist/mod.js --file ./dist/bundle.js --format es --plugin @rollup/plugin-node-resolve && rollup ./dist/mod.d.ts --file ./dist/bundle.d.ts --format es --plugin rollup-plugin-dts",
+    "minify": "terser ./dist/bundle.js --output ./dist/bundle.min.js --config-file ./terser.config.json",
+    "test": "node --test --experimental-test-coverage",
+    "build-test": "npm run build && npm test",
+    "check-size": "node ./ci/check-size.js",
+    "build-samples": "tsc --project ./samples/tsconfig.json && rollup ./samples/dist/counter/mod.js --file ./samples/dist/counter/bundle.js --format es --plugin @rollup/plugin-node-resolve && rollup ./samples/dist/theme/mod.js --file ./samples/dist/theme/bundle.js --format es --plugin @rollup/plugin-node-resolve && rollup ./samples/dist/todo/mod.js --file ./samples/dist/todo/bundle.js --format es --plugin @rollup/plugin-node-resolve"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^14.4.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@types/node": "^20.11.30",
+    "copyfiles": "^2.4.1",
+    "prettier": "^3.2.5",
+    "rollup": "^4.13.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "serve": "^14.2.1",
+    "terser": "^5.29.2",
+    "typescript": "^5.4.3"
+  }
+}

package/src/array_mutation.ts

@@ -0,0 +1,118 @@
+import { Signal, SignalLike, useEffect, useSignal } from "./scope.js";
+
+const getIndexMap = <T>(
+  array: readonly T[],
+  keyFn: (entry: T, index: number) => unknown,
+): Map<unknown, number> => {
+  const keyMap = new Map<unknown, number>();
+
+  for (let i = 0; i < array.length; i++) {
+    const key = keyFn(array[i], i);
+
+    if (keyMap.has(key)) {
+      throw new Error(`Duplicate key '${key}'`);
+    }
+
+    keyMap.set(key, i);
+  }
+
+  return keyMap;
+};
+
+export type ArrayMutation =
+  | {
+      _type: "a" | "r"; // add | remove
+      _key: unknown;
+      _index: number;
+    }
+  | {
+      _type: "m"; // move
+      _key: unknown;
+      _from: number;
+      _to: number;
+    };
+
+export interface ArrayMutationResult {
+  _mutations: ArrayMutation[];
+  _map: Map<unknown, number>;
+}
+
+export const useArrayMutation = <T extends unknown>(
+  array: SignalLike<readonly T[]>,
+  keyFn: (entry: T, index: number) => unknown,
+): Signal<ArrayMutationResult> => {
+  const [result, setResult] = useSignal<ArrayMutationResult>({
+    _mutations: [],
+    _map: new Map(),
+  });
+
+  let indexMap = new Map<unknown, number>();
+
+  useEffect(() => {
+    const mutations: ArrayMutation[] = [];
+    const oldIndexMap = indexMap;
+    const newIndexMap = getIndexMap(array(), keyFn);
+
+    const transformToOldIndex = (i: number = NaN) =>
+      mutations
+        .map((mutation): ((i: number) => number) =>
+          mutation._type == "r"
+            ? (j) =>
+                j < mutation._index ? j : j == mutation._index ? NaN : j - 1
+            : mutation._type == "a"
+              ? (j) => (j < mutation._index ? j : j + 1)
+              : mutation._type == "m"
+                ? (j) =>
+                    mutation._to <= j && j < mutation._from
+                      ? j + 1
+                      : j == mutation._from
+                        ? mutation._to
+                        : j
+                : (j) => j,
+        )
+        .reduce((i, fn) => fn(i), i);
+
+    for (const key of oldIndexMap.keys()) {
+      const i = transformToOldIndex(oldIndexMap.get(key));
+
+      if (!newIndexMap.has(key)) {
+        mutations.push({
+          _type: "r",
+          _key: key,
+          _index: i,
+        });
+      }
+    }
+
+    for (let i = 0; i < array().length; i++) {
+      const key = keyFn(array()[i], i);
+      const oldIndex = transformToOldIndex(oldIndexMap.get(key));
+
+      if (isNaN(oldIndex)) {
+        mutations.push({
+          _type: "a",
+          _key: key,
+          _index: i,
+        });
+      } else if (oldIndex != i) {
+        mutations.push({
+          _type: "m",
+          _key: key,
+          _from: oldIndex,
+          _to: i,
+        });
+      }
+    }
+
+    if (mutations.length > 0) {
+      setResult({
+        _mutations: mutations,
+        _map: newIndexMap,
+      });
+    }
+
+    indexMap = newIndexMap;
+  });
+
+  return result;
+};