sinho 0.1.0

package/.github/workflows/ci.yml

@@ -0,0 +1,24 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: CI
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js
+      uses: actions/setup-node@v3
+      with:
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build
+    - run: npm test

package/.github/workflows/deploy-docs.yml

@@ -0,0 +1,47 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy Website
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+    paths: ["web/**"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Dependencies
+        run: npm install && cd ./web && npm install
+      - name: Build
+        run: npm run build && cd web && npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./web/build
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "proseWrap": "always"
+}

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present Yichuan Shen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+# 🚥 Sinho
+
+A lightweight signal-based library for building web components with a React-like
+API.
+
+- 🌌 Web standards with custom HTML elements
+- ⚛️ React-like API
+- ✒️ Declarative templating with JSX (no additional parsing)
+- 🚥 Fine-grained reactivity with signals
+- 🛟 Type-safe components with TypeScript
+- 🪶 Lightweight (~4KB minified and compressed)
+
+```tsx
+import { Component, useSignal, defineComponents } from "sinho";
+
+class Counter extends Component("x-counter") {
+  render() {
+    const [value, setValue] = useSignal(0);
+
+    return (
+      <>
+        <p>Counter: {value}</p>
+        <p>
+          <button onclick={() => setValue((n) => n + 1)}>Increment</button>{" "}
+          <button onclick={() => setValue((n) => n - 1)}>Decrement</button>
+        </p>
+      </>
+    );
+  }
+}
+
+defineComponents(Counter);
+```

package/ci/check-size.js

@@ -0,0 +1,8 @@
+import zlib from "node:zlib";
+import fs from "node:fs";
+
+const content = fs.readFileSync("./dist/bundle.min.js");
+const gzip = zlib.gzipSync(content);
+
+console.log(gzip.byteLength, "bytes");
+console.log(gzip.byteLength / 1024, "KB");

package/dist/array_mutation.d.ts

@@ -0,0 +1,16 @@
+import { Signal, SignalLike } from "./scope.js";
+export type ArrayMutation = {
+    _type: "a" | "r";
+    _key: unknown;
+    _index: number;
+} | {
+    _type: "m";
+    _key: unknown;
+    _from: number;
+    _to: number;
+};
+export interface ArrayMutationResult {
+    _mutations: ArrayMutation[];
+    _map: Map<unknown, number>;
+}
+export declare const useArrayMutation: <T extends unknown>(array: SignalLike<readonly T[]>, keyFn: (entry: T, index: number) => unknown) => Signal<ArrayMutationResult>;

package/dist/array_mutation.js

@@ -0,0 +1,75 @@
+import { useEffect, useSignal } from "./scope.js";
+const getIndexMap = (array, keyFn) => {
+    const keyMap = new Map();
+    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 const useArrayMutation = (array, keyFn) => {
+    const [result, setResult] = useSignal({
+        _mutations: [],
+        _map: new Map(),
+    });
+    let indexMap = new Map();
+    useEffect(() => {
+        const mutations = [];
+        const oldIndexMap = indexMap;
+        const newIndexMap = getIndexMap(array(), keyFn);
+        const transformToOldIndex = (i = NaN) => mutations
+            .map((mutation) => 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;
+};
+//# sourceMappingURL=array_mutation.js.map

package/dist/array_mutation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"array_mutation.js","sourceRoot":"","sources":["../src/array_mutation.ts"],"names":[],"mappings":"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"}