@ryupold/vode 0.9.4 → 0.9.5

package/.github/workflows/npm-publish.yml

@@ -1,25 +1,24 @@
-name: Publish to https://registry.npmjs.org
-
-on:
-  push:
-    branches:
-      - 'main'
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      id-token: write
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '22.x'
-          registry-url: 'https://registry.npmjs.org'
-      - uses: oven-sh/setup-bun@v2
-      - run: bun install
-      - run: bun run build
-      - run: bun publish --provenance --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+name: Publish to https://registry.npmjs.org
+
+on:
+  push:
+    branches:
+      - 'main'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
+          registry-url: 'https://registry.npmjs.org'
+      - uses: oven-sh/setup-bun@v2
+      - run: bun run build
+      - run: bun publish --provenance --access public
+        env:
+          NPM_CONFIG_TOKEN: ${{ secrets.NPM_TOKEN }}

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Michael Scherbakow
-
-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.
+MIT License
+
+Copyright (c) 2025 Michael Scherbakow
+
+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

@@ -1,127 +1,127 @@
-# vode
-
-Small web framework for minimal websites.
-Each vode app has its own state and renders a tree of HTML elements.
-The state is a singleton object that can be updated, and the UI will re-render when a patch is supplied. Nesting vode-apps is undefined behavior for now.
-
-## Install
-
-```bash
-npm install @ryupold/vode --save
-```
-
-## Patch
-
-The `patch` function returned by `app(...)` is a function that can be passed an object called `Patch` this object is used to update the state and re-render the UI. It takes a `Patch` object that describes the changes to be made to the state in a "trickle down manner". The `Patch` can be a simple object or a function that returns a new `Patch` to the current state. It can also be an async and/or genrator function that yields `Patch`es. Events also can return a `Patch`. When a number | boolean | string | null | undefined is applied as a `Patch`, it will be ignored.
-
-## Usage
-
-index.html
-
-```html
-<html>
-<head>
-    <title>Vode Example</title>
-    <script type="module" src="main.js"></script>
-</head>
-<body>
-    <div id="app"></div>
-</body>
-</html>
-```
-
-main.ts
-```ts
-// import { app, createState} from 'vode.js';
-// import { BR, DIV, INPUT, SPAN } from 'vode-tags.js';
-import { app, createState, BR, DIV, INPUT, SPAN } from '@ryupold/vode';
-
-
-const init = createState({
-    counter: 0,
-});
-
-type State = typeof init;
-
-const appNode = document.getElementById('app');
-
-app<State>(appNode, init,
-    (s: State) => [DIV,
-        [INPUT, {
-            type: 'button',
-            onclick: { counter: s.counter + 1 },
-            value: 'Click me',
-        }],
-        [BR],
-        [SPAN, { style: { color: 'red' } }, `${s.counter}`],
-    ]
-);
-```
-
-## Claude
-
-> Prompt: "what can you tell me about the overall design philosophy of the vode library based on what you see in `src/vode.ts`"
-
-
-Based on my analysis of `src/vode.ts`, here's the overall design philosophy of the vode library:
-
-### Core Design Philosophy
-
-**Functional Virtual DOM with Minimal Abstractions**
-- Uses array-based virtual nodes (`[tag, props?, ...children]`) instead of object-based structures
-- Prioritizes simplicity and performance over complex abstractions
-
-**State-Centric Architecture**
-- Central state object with patch-based updates
-- Immutable-style state management with deep merging
-- Single source of truth pattern
-
-**Zero-Dependency Minimalism**
-- Pure TypeScript/JavaScript implementation
-- No external dependencies or build tools required
-- Direct DOM manipulation without heavy runtime
-
-### Key Architectural Decisions
-
-#### Virtual DOM Structure
-```typescript
-// Simple array-based nodes
-["div", { class: "container" }, "Hello", ["span", "World"]]
-```
-- Minimal memory footprint
-- Easy serialization/debugging
-- Type-safe with TypeScript generics
-
-#### Reactive State Management
-```typescript
-state.patch(newData)           // Direct updates
-state.patch([effect, payload]) // Function-based effects
-state.patch(promise)           // Async support
-```
-- Unified patch system for all state changes
-- Built-in async/generator support
-- Functional effects pattern
-
-#### Performance Optimizations
-- **Memoization**: `memo()` for component caching
-- **Reconciliation**: Intelligent DOM diffing
-- **Batched Updates**: RequestAnimationFrame-based rendering
-- **Memory Management**: Proper cleanup with mount/unmount hooks
-
-#### Developer Experience
-- **Type Safety**: Full TypeScript support with generics
-- **Debugging**: Built-in performance statistics
-- **Flexibility**: Support for HTML, SVG, and MathML
-- **Composability**: Functional component model
-
-### Philosophy Summary
-
-Vode follows a **"less is more"** philosophy, providing a lightweight alternative to heavyweight frameworks while maintaining modern reactive patterns. It emphasizes:
-
-1. **Explicitness over magic** - Clear, predictable behavior
-2. **Performance by design** - Minimal overhead, efficient updates
-3. **Developer control** - Direct state manipulation without hidden abstractions
-4. **Functional paradigms** - Immutable updates, pure components
-5. **Modern web standards** - Leverages native browser APIs effectively
-
+# vode
+
+Small web framework for minimal websites.
+Each vode app has its own state and renders a tree of HTML elements.
+The state is a singleton object that can be updated, and the UI will re-render when a patch is supplied. Nesting vode-apps is undefined behavior for now.
+
+## Install
+
+```bash
+npm install @ryupold/vode --save
+```
+
+## Patch
+
+The `patch` function returned by `app(...)` is a function that can be passed an object called `Patch` this object is used to update the state and re-render the UI. It takes a `Patch` object that describes the changes to be made to the state in a "trickle down manner". The `Patch` can be a simple object or a function that returns a new `Patch` to the current state. It can also be an async and/or genrator function that yields `Patch`es. Events also can return a `Patch`. When a number | boolean | string | null | undefined is applied as a `Patch`, it will be ignored.
+
+## Usage
+
+index.html
+
+```html
+<html>
+<head>
+    <title>Vode Example</title>
+    <script type="module" src="main.js"></script>
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>
+```
+
+main.ts
+```ts
+// import { app, createState} from 'vode.js';
+// import { BR, DIV, INPUT, SPAN } from 'vode-tags.js';
+import { app, createState, BR, DIV, INPUT, SPAN } from '@ryupold/vode';
+
+
+const init = createState({
+    counter: 0,
+});
+
+type State = typeof init;
+
+const appNode = document.getElementById('app');
+
+app<State>(appNode, init,
+    (s: State) => [DIV,
+        [INPUT, {
+            type: 'button',
+            onclick: { counter: s.counter + 1 },
+            value: 'Click me',
+        }],
+        [BR],
+        [SPAN, { style: { color: 'red' } }, `${s.counter}`],
+    ]
+);
+```
+
+## Claude
+
+> Prompt: "what can you tell me about the overall design philosophy of the vode library based on what you see in `src/vode.ts`"
+
+
+Based on my analysis of `src/vode.ts`, here's the overall design philosophy of the vode library:
+
+### Core Design Philosophy
+
+**Functional Virtual DOM with Minimal Abstractions**
+- Uses array-based virtual nodes (`[tag, props?, ...children]`) instead of object-based structures
+- Prioritizes simplicity and performance over complex abstractions
+
+**State-Centric Architecture**
+- Central state object with patch-based updates
+- Immutable-style state management with deep merging
+- Single source of truth pattern
+
+**Zero-Dependency Minimalism**
+- Pure TypeScript/JavaScript implementation
+- No external dependencies or build tools required
+- Direct DOM manipulation without heavy runtime
+
+### Key Architectural Decisions
+
+#### Virtual DOM Structure
+```typescript
+// Simple array-based nodes
+["div", { class: "container" }, "Hello", ["span", "World"]]
+```
+- Minimal memory footprint
+- Easy serialization/debugging
+- Type-safe with TypeScript generics
+
+#### Reactive State Management
+```typescript
+state.patch(newData)           // Direct updates
+state.patch([effect, payload]) // Function-based effects
+state.patch(promise)           // Async support
+```
+- Unified patch system for all state changes
+- Built-in async/generator support
+- Functional effects pattern
+
+#### Performance Optimizations
+- **Memoization**: `memo()` for component caching
+- **Reconciliation**: Intelligent DOM diffing
+- **Batched Updates**: RequestAnimationFrame-based rendering
+- **Memory Management**: Proper cleanup with mount/unmount hooks
+
+#### Developer Experience
+- **Type Safety**: Full TypeScript support with generics
+- **Debugging**: Built-in performance statistics
+- **Flexibility**: Support for HTML, SVG, and MathML
+- **Composability**: Functional component model
+
+### Philosophy Summary
+
+Vode follows a **"less is more"** philosophy, providing a lightweight alternative to heavyweight frameworks while maintaining modern reactive patterns. It emphasizes:
+
+1. **Explicitness over magic** - Clear, predictable behavior
+2. **Performance by design** - Minimal overhead, efficient updates
+3. **Developer control** - Direct state manipulation without hidden abstractions
+4. **Functional paradigms** - Immutable updates, pure components
+5. **Modern web standards** - Leverages native browser APIs effectively
+
 The library appears designed for developers who want React-like reactivity without the complexity and bundle size of modern frameworks.

package/index.ts

@@ -1,3 +1,3 @@
-export * from "./src/vode.js";
-export * from "./src/vode-tags.js";
+export * from "./src/vode.js";
+export * from "./src/vode-tags.js";
 export * from "./src/html.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ryupold/vode",
-    "version": "0.9.4",
+    "version": "0.9.5",
     "description": "Small web framework for minimal websites",
     "author": "Michael Scherbakow (ryupold)",
     "license": "MIT",
@@ -23,7 +23,7 @@
     "module": "index.ts",
     "scripts": {
         "build": "bun build index.ts --outfile index.js",
-        "pack": "bun run build && bun pm pack",
+        "pack": "rm *.tgz && bun run build && bun pm pack",
         "publish": "bun publish --provenance --access public",
         "clean": "tsc -b --clean",
         "watch": "tsc -b -w"

package/src/html.ts

@@ -1,37 +1,37 @@
-import { Props, Vode } from "./vode.js";
-
-export function htmlToVode<S extends object | unknown>(html: string): (Vode<S> | string)[] {
-    const div = document.createElement('div');
-    div.innerHTML = html.trim();
-
-    const vodes: (Vode<S> | string)[] = [];
-    for (const child of div.childNodes) {
-        const v = elementToVode<S>(<Element>child);
-        if (v != null) vodes.push(v);
-    }
-    return vodes;
-}
-
-function elementToVode<S>(element: Element): Vode<S> | string | undefined | null {
-    if (element.nodeType === Node.TEXT_NODE) {
-        return element.textContent;
-    }
-    if (element.nodeType !== Node.ELEMENT_NODE) {
-        return undefined;
-    }
-    const vode = <Vode<S>>[element.tagName.toLowerCase()];
-
-    if (element.hasAttributes()) {
-        const props = <Props<S>>{};
-        for (const att of element.attributes) {
-            props[att.name] = att.value;
-        }
-        (<any[]>vode).push(props);
-    }
-
-    for (const child of element.childNodes) {
-        const v = elementToVode(<Element>child);
-        if (v && (typeof v !== "string" || v.length > 0)) (<any[]>vode).push(v);
-    }
-    return vode;
-}
+import { Props, Vode } from "./vode.js";
+
+export function htmlToVode<S extends object | unknown>(html: string): (Vode<S> | string)[] {
+    const div = document.createElement('div');
+    div.innerHTML = html.trim();
+
+    const vodes: (Vode<S> | string)[] = [];
+    for (const child of div.childNodes) {
+        const v = elementToVode<S>(<Element>child);
+        if (v != null) vodes.push(v);
+    }
+    return vodes;
+}
+
+function elementToVode<S>(element: Element): Vode<S> | string | undefined | null {
+    if (element.nodeType === Node.TEXT_NODE) {
+        return element.textContent;
+    }
+    if (element.nodeType !== Node.ELEMENT_NODE) {
+        return undefined;
+    }
+    const vode = <Vode<S>>[element.tagName.toLowerCase()];
+
+    if (element.hasAttributes()) {
+        const props = <Props<S>>{};
+        for (const att of element.attributes) {
+            props[att.name] = att.value;
+        }
+        (<any[]>vode).push(props);
+    }
+
+    for (const child of element.childNodes) {
+        const v = elementToVode(<Element>child);
+        if (v && (typeof v !== "string" || v.length > 0)) (<any[]>vode).push(v);
+    }
+    return vode;
+}