@thyn/core 0.0.344 → 0.0.347

package/.github/workflows/static.yml

@@ -0,0 +1,48 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+  # 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: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install dependencies
+        run: npm i
+        working-directory: ./docs
+      - name: Build project
+        run: npm run build
+        working-directory: ./docs
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: 'docs/dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/.github/workflows/test.yml

@@ -0,0 +1,39 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - '*'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install core dependencies
+        working-directory: packages/core
+        run: npm install
+
+      - name: Run core tests
+        working-directory: packages/core
+        run: npm test
+
+      - name: Install vite-plugin dependencies
+        working-directory: packages/vite-plugin
+        run: npm install
+
+      - name: Run vite-plugin tests
+        working-directory: packages/vite-plugin
+        run: npm test

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 thwarmon
+
+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,50 @@
+# Thyn
+
+**Thyn** is an experimental JavaScript UI framework for building fast, memory-efficient web apps. It compiles `.thyn` single-file components into highly optimized DOM operations.
+
+- Fast runtime performance (see [jsbenchmarks](https://jsbenchmarks.com/) and [js-framekworks-benchmark](https://krausest.github.io/js-framework-benchmark/2025/table_chrome_143.0.7499.41.html))
+- Tiny bundles
+- Minimal memory footprint
+- Uses `.thyn` single-file components
+- **Experimental** — limited tooling and ecosystem
+
+---
+
+## Getting Started
+```sh
+npx degit thynjs/template my-app
+cd my-app
+npm install
+npm run dev
+```
+
+
+## Example: Counter
+
+```vue
+<script>
+  const count = $signal(0);
+
+  $effect(() => {
+    console.log(`Count is ${count()}`);
+  });
+</script>
+
+<button onclick={() => count(c => c + 1)}>
+  Count: {{ count() }}
+</button>
+
+<style>
+  /* Styles are scoped by default to prevent style bleeding 🎉 */
+  button {
+    background: #333;
+    border: 0;
+    color: #fff;
+  }
+</style>
+```
+
+---
+
+## Status
+Thyn is in early development. Expect sharp edges and limited integrations. Feedback welcome!

package/dist/{element.js → core/element.js}

@@ -300,8 +300,8 @@ export function list(props, terminal = false) {
             return;
         }
         if (start < 0) {
-            for (let i = nextItems.length; i < oldLength; i++) {
-                const e = childNodes[offset + --oldLength];
+            for (let i = oldLength - 1; i >= nextItems.length; i--) {
+                const e = childNodes[offset + i];
                 teardownNode(e);
                 remove(e);
             }
@@ -327,7 +327,7 @@ export function list(props, terminal = false) {
         for (const e of removalQueue) {
             remove(e);
         }
-        if (oldLength - start === removalQueue.length) {
+        if (oldLength - start === removalQueue.length && newLength === oldLength) {
             prevItems = nextItems;
             nextItems = null;
             return;
@@ -337,10 +337,7 @@ export function list(props, terminal = false) {
             if (childNodes[i + offset] &&
                 (!nextItems[i] ||
                     prevItems[i] !== nextItems[i])) {
-                keyMap.set(prevItems[i], {
-                    el: childNodes[i + offset],
-                    item: prevItems[i],
-                });
+                keyMap.set(prevItems[i], childNodes[i + offset]);
             }
         }
         while (start <= newLength) {
@@ -351,22 +348,18 @@ export function list(props, terminal = false) {
                 continue;
             }
             if (oldChd === undefined) {
-                parent.insertBefore(render(newChd), endBookend);
+                parent.insertBefore(render(newChd), childNodeList[start + offset] ?? endBookend);
                 start++;
                 continue;
             }
             const mappedOld = keyMap.get(newChd);
             if (mappedOld) {
                 const oldDom = childNodeList[start + offset];
-                const { el, item } = mappedOld;
-                if (oldDom !== el) {
-                    const tmp = el.nextSibling;
-                    parent.insertBefore(el, oldDom);
+                if (oldDom !== mappedOld) {
+                    const tmp = mappedOld.nextSibling;
+                    parent.insertBefore(mappedOld, oldDom);
                     parent.insertBefore(oldDom, tmp);
                 }
-                else if (item !== newChd) {
-                    replaceWith(newChd, el, render);
-                }
                 keyMap.delete(newChd);
             }
             else if (oldChd !== newChd) {
@@ -374,10 +367,6 @@ export function list(props, terminal = false) {
             }
             start++;
         }
-        for (const { el } of keyMap.values()) {
-            teardownNode(el);
-            remove(el);
-        }
         keyMap = null;
         prevItems = nextItems;
         nextItems = null;
@@ -507,7 +496,7 @@ export function isolatedTerminalList(props) {
             ch.remove();
             childNodes[i] = null;
         }
-        if (oldLength - start === removalQueueIndices.length) {
+        if (oldLength - start === removalQueueIndices.length && newLength === oldLength) {
             prevItems = nextItems;
             nextItems = null;
             childNodes = null;
@@ -518,10 +507,7 @@ export function isolatedTerminalList(props) {
             if (childNodes[i + 1] &&
                 (!nextItems[i] ||
                     prevItems[i] !== nextItems[i])) {
-                keyMap.set(prevItems[i], {
-                    el: childNodes[i + 1],
-                    item: prevItems[i],
-                });
+                keyMap.set(prevItems[i], childNodes[i + 1]);
             }
         }
         while (start <= newLength) {
@@ -532,24 +518,20 @@ export function isolatedTerminalList(props) {
                 continue;
             }
             if (oldChd === undefined) {
-                parent.insertBefore(render(newChd), endBookend);
+                parent.insertBefore(render(newChd), childNodeList[start + 1]);
                 start++;
                 continue;
             }
             const mappedOld = keyMap.get(newChd);
             if (mappedOld) {
                 const oldDom = childNodeList[start + 1];
-                const { el, item } = mappedOld;
-                if (oldDom !== el) {
-                    const tmp = el.nextSibling;
-                    parent.insertBefore(el, oldDom);
+                if (oldDom !== mappedOld) {
+                    const tmp = mappedOld.nextSibling;
+                    parent.insertBefore(mappedOld, oldDom);
                     if (oldDom !== tmp) {
                         parent.insertBefore(oldDom, tmp);
                     }
                 }
-                else if (item !== newChd) {
-                    replaceWith(newChd, el, render);
-                }
                 keyMap.delete(newChd);
             }
             else if (oldChd !== newChd) {
@@ -557,10 +539,6 @@ export function isolatedTerminalList(props) {
             }
             start++;
         }
-        for (const { el } of keyMap.values()) {
-            shallowTeardown(el);
-            el.remove();
-        }
         keyMap = null;
         prevItems = nextItems;
         nextItems = null;

package/dist/core/index.d.ts

@@ -0,0 +1 @@
+export * from "./router.js";

package/dist/core/index.js

@@ -0,0 +1 @@
+export * from "./router.js";

package/dist/{router.d.ts → core/router.d.ts}

@@ -1,5 +1,5 @@
 export declare const router: {
-    path: import("./signals.js").Signal<string>;
+    readonly path: any;
     param: (name: string) => string | undefined;
 };
 interface Route {

package/dist/{router.js → core/router.js}

@@ -1,11 +1,27 @@
 import { component, show } from "./element.js";
 import { $signal, staticEffect } from "./signals.js";
-const params = $signal({});
+let params = null;
+let routerPath = null;
+let initialized = false;
+function initRouter() {
+    if (initialized)
+        return;
+    params = $signal({});
+    routerPath = $signal(location.pathname);
+    initialized = true;
+}
 export const router = {
-    path: $signal(location.pathname),
-    param: (name) => params()[name],
+    get path() {
+        initRouter();
+        return routerPath;
+    },
+    param: (name) => {
+        initRouter();
+        return params()[name];
+    },
 };
 export function Router({ routes }) {
+    initRouter();
     const current = $signal(null);
     const compiledRoutes = routes.map(route => {
         const compiledRoute = {
@@ -21,7 +37,7 @@ export function Router({ routes }) {
         return compiledRoute;
     });
     staticEffect(() => {
-        const pn = router.path();
+        const pn = routerPath();
         if (pn !== location.pathname) {
             history.pushState({}, "", pn);
         }
@@ -48,6 +64,7 @@ export function Router({ routes }) {
     })));
 }
 export function Link({ slot, to }) {
+    initRouter();
     const a = document.createElement("a");
     a.href = to;
     for (const ch of slot) {
@@ -59,7 +76,7 @@ export function Link({ slot, to }) {
             !(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)) {
             e.preventDefault();
             history.pushState({}, "", to);
-            router.path(to);
+            routerPath(to);
         }
     };
     return a;

package/dist/index.d.ts

@@ -1,2 +1,5 @@
-export { addChildren, addEffect, component, createReactiveTextNode, fixedComponent, isolatedTerminalList, list, markAsReactive, mount, setAttribute, setProperty, setReactiveAttribute, setReactiveProperty, show, terminalList } from "./element.js";
-export { $effect, $signal, staticEffect } from "./signals.js";
+export * from "./core/signals.js";
+export * from "./core/element.js";
+export * from "./core/router.js";
+export { default } from "./plugin/index.js";
+export { transformSFC, compileSFC } from "./plugin/index.js";

package/dist/index.js

@@ -1,2 +1,5 @@
-export { addChildren, addEffect, component, createReactiveTextNode, fixedComponent, isolatedTerminalList, list, markAsReactive, mount, setAttribute, setProperty, setReactiveAttribute, setReactiveProperty, show, terminalList } from "./element.js";
-export { $effect, $signal, staticEffect } from "./signals.js";
+export * from "./core/signals.js";
+export * from "./core/element.js";
+export * from "./core/router.js";
+export { default } from "./plugin/index.js";
+export { transformSFC, compileSFC } from "./plugin/index.js";

package/dist/plugin/html-parser.d.ts

@@ -0,0 +1,31 @@
+interface Node {
+    nodeType: number;
+    nodeName: string;
+    textContent: string;
+    childNodes: Node[];
+}
+interface Element extends Node {
+    tagName: string;
+    attributes: Array<{
+        name: string;
+        value: string;
+    }>;
+    children: Element[];
+    firstElementChild: Element | null;
+    hasAttribute(name: string): boolean;
+    getAttribute(name: string): string | null;
+    setAttribute(name: string, value: string): void;
+    removeAttribute(name: string): void;
+    classList: {
+        add(className: string): void;
+    };
+}
+interface DocumentFragment {
+    childNodes: Node[];
+    firstElementChild: Element | null;
+}
+interface TemplateElement extends Element {
+    content: DocumentFragment;
+}
+export declare function parseHTML(html: string): TemplateElement;
+export {};

package/dist/plugin/html-parser.js

@@ -0,0 +1,275 @@
+function parseAttributes(attrStr) {
+    const attrs = [];
+    let i = 0;
+    while (i < attrStr.length) {
+        // Skip whitespace
+        while (i < attrStr.length && /\s/.test(attrStr[i]))
+            i++;
+        if (i >= attrStr.length)
+            break;
+        // Parse attribute name
+        let name = "";
+        while (i < attrStr.length && !/[\s=]/.test(attrStr[i])) {
+            name += attrStr[i];
+            i++;
+        }
+        if (!name)
+            break;
+        // Skip whitespace
+        while (i < attrStr.length && /\s/.test(attrStr[i]))
+            i++;
+        let value = "";
+        if (i < attrStr.length && attrStr[i] === "=") {
+            i++; // skip '='
+            // Skip whitespace
+            while (i < attrStr.length && /\s/.test(attrStr[i]))
+                i++;
+            if (i < attrStr.length) {
+                const quote = attrStr[i];
+                if (quote === '"' || quote === "'") {
+                    i++; // skip opening quote
+                    while (i < attrStr.length && attrStr[i] !== quote) {
+                        value += attrStr[i];
+                        i++;
+                    }
+                    if (i < attrStr.length)
+                        i++; // skip closing quote
+                }
+                else {
+                    // Unquoted value - take until whitespace
+                    while (i < attrStr.length && !/\s/.test(attrStr[i])) {
+                        value += attrStr[i];
+                        i++;
+                    }
+                }
+            }
+        }
+        attrs.push({ name, value });
+    }
+    return attrs;
+}
+function createTextNode(text) {
+    return {
+        nodeType: 3,
+        nodeName: "#text",
+        textContent: text,
+        childNodes: [],
+    };
+}
+function createElement(tagName, attributes = []) {
+    const children = [];
+    const childNodes = [];
+    const element = {
+        nodeType: 1,
+        nodeName: tagName.toUpperCase(),
+        tagName: tagName.toUpperCase(),
+        textContent: "",
+        attributes: [...attributes],
+        children,
+        childNodes,
+        firstElementChild: null,
+        hasAttribute(name) {
+            return this.attributes.some((attr) => attr.name === name);
+        },
+        getAttribute(name) {
+            const attr = this.attributes.find((attr) => attr.name === name);
+            return attr ? attr.value : null;
+        },
+        setAttribute(name, value) {
+            const existing = this.attributes.find((attr) => attr.name === name);
+            if (existing) {
+                existing.value = value;
+            }
+            else {
+                this.attributes.push({ name, value });
+            }
+        },
+        removeAttribute(name) {
+            this.attributes = this.attributes.filter((attr) => attr.name !== name);
+        },
+        classList: {
+            add: (className) => {
+                const existing = element.getAttribute("class");
+                const classes = existing ? existing.split(" ").filter(Boolean) : [];
+                if (!classes.includes(className)) {
+                    classes.push(className);
+                    element.setAttribute("class", classes.join(" "));
+                }
+            },
+        },
+    };
+    return element;
+}
+// Find next tag position, properly handling quoted strings
+function findNextTag(html, startIndex) {
+    let i = startIndex;
+    while (i < html.length) {
+        // Find the next '<'
+        while (i < html.length && html[i] !== '<') {
+            i++;
+        }
+        if (i >= html.length)
+            return null;
+        const tagStart = i;
+        i++; // skip '<'
+        // Check if it's a closing tag
+        const isClose = i < html.length && html[i] === '/';
+        if (isClose)
+            i++;
+        // Parse tag name
+        let tagName = '';
+        while (i < html.length && /[a-zA-Z0-9-]/.test(html[i])) {
+            tagName += html[i];
+            i++;
+        }
+        if (!tagName) {
+            // Not a valid tag, continue searching
+            i = tagStart + 1;
+            continue;
+        }
+        // Parse attributes, respecting quotes
+        let attrs = '';
+        let inQuote = null;
+        let tagEnd = -1;
+        while (i < html.length) {
+            const char = html[i];
+            if (inQuote) {
+                attrs += char;
+                if (char === inQuote) {
+                    inQuote = null;
+                }
+                i++;
+            }
+            else if (char === '"' || char === "'") {
+                attrs += char;
+                inQuote = char;
+                i++;
+            }
+            else if (char === '>') {
+                tagEnd = i + 1; // Include the '>'
+                i++;
+                break;
+            }
+            else {
+                attrs += char;
+                i++;
+            }
+        }
+        if (tagEnd === -1) {
+            // Malformed tag (no closing >), continue searching
+            i = tagStart + 1;
+            continue;
+        }
+        // Check for self-closing
+        const trimmedAttrs = attrs.trim();
+        const isSelfClose = trimmedAttrs.endsWith('/');
+        const finalAttrs = isSelfClose ? trimmedAttrs.slice(0, -1).trim() : trimmedAttrs;
+        return {
+            index: tagStart,
+            endIndex: tagEnd,
+            isClose,
+            tagName,
+            attrs: finalAttrs,
+            isSelfClose
+        };
+    }
+    return null;
+}
+export function parseHTML(html) {
+    const match = html.match(/<template([^>]*)>([\s\S]*)<\/template>/i);
+    if (!match) {
+        throw new Error("No <template> tag found in HTML");
+    }
+    const content = match[2].trim();
+    const stack = [];
+    const textChunks = [];
+    const fragmentChildren = [];
+    const fragmentElements = [];
+    let pos = 0;
+    const flushText = () => {
+        if (textChunks.length > 0) {
+            const text = textChunks.join("");
+            textChunks.length = 0;
+            const textNode = createTextNode(text);
+            if (stack.length > 0) {
+                const parent = stack[stack.length - 1];
+                parent.childNodes.push(textNode);
+            }
+            else {
+                fragmentChildren.push(textNode);
+            }
+        }
+    };
+    while (pos < content.length) {
+        const tagInfo = findNextTag(content, pos);
+        if (!tagInfo) {
+            // No more tags, add remaining as text
+            if (pos < content.length) {
+                textChunks.push(content.slice(pos));
+            }
+            break;
+        }
+        // Add text before this tag
+        if (tagInfo.index > pos) {
+            textChunks.push(content.slice(pos, tagInfo.index));
+        }
+        const { isClose, tagName, attrs, isSelfClose, endIndex } = tagInfo;
+        if (isClose) {
+            flushText();
+            if (stack.length > 0) {
+                const closedElement = stack.pop();
+                if (closedElement.tagName.toLowerCase() !== tagName.toLowerCase()) {
+                    throw new Error(`Mismatched tags: expected </${closedElement.tagName}>, got </${tagName}>`);
+                }
+                // Update parent's firstElementChild if needed
+                const parent = stack.length > 0 ? stack[stack.length - 1] : null;
+                if (parent && !parent.firstElementChild) {
+                    parent.firstElementChild = closedElement;
+                }
+            }
+        }
+        else {
+            flushText();
+            const attributes = parseAttributes(attrs);
+            const element = createElement(tagName, attributes);
+            if (stack.length === 0) {
+                // Top-level element
+                fragmentChildren.push(element);
+                fragmentElements.push(element);
+            }
+            else {
+                const parent = stack[stack.length - 1];
+                parent.children.push(element);
+                parent.childNodes.push(element);
+                if (!parent.firstElementChild) {
+                    parent.firstElementChild = element;
+                }
+            }
+            if (!isSelfClose) {
+                stack.push(element);
+            }
+        }
+        // Move position past this tag
+        pos = endIndex;
+    }
+    // Flush any remaining text
+    if (stack.length === 0) {
+        flushText();
+    }
+    if (stack.length > 0) {
+        throw new Error(`Unclosed tags remain: ${stack.map(e => e.tagName).join(', ')}`);
+    }
+    const fragment = {
+        childNodes: fragmentChildren,
+        firstElementChild: fragmentElements[0] || null,
+    };
+    const templateAttrs = parseAttributes(match[1].trim());
+    const templateElement = {
+        ...createElement("template", templateAttrs),
+        content: fragment,
+    };
+    templateElement.childNodes = [...fragmentChildren];
+    templateElement.children = [...fragmentElements];
+    templateElement.firstElementChild = fragmentElements[0] || null;
+    return templateElement;
+}