sygnal 5.1.1 → 5.1.2

package/README.md

@@ -21,12 +21,13 @@ A reactive component framework with pure functions, zero side effects, and autom
 **Scaffold a new project:**
 
 ```bash
-npx degit tpresley/sygnal-template my-app
+npm create sygnal-app my-app
 cd my-app
-npm install
 npm run dev
 ```
 
+Choose from Vite (SPA), Vike (SSR), or Astro templates during setup.
+
 **Or add to an existing project:**
 
 ```bash
@@ -386,6 +387,25 @@ import Counter from '../components/Counter.jsx'
 <Counter client:load />
 ```
 
+### Vike Integration
+
+File-based routing with SSR, client-side navigation, and automatic hydration:
+
+```javascript
+// vite.config.js
+import sygnal from 'sygnal/vite'
+import vike from 'vike/plugin'
+export default defineConfig({ plugins: [sygnal({ disableHmr: true }), vike()] })
+```
+
+```javascript
+// pages/+config.js
+import vikeSygnal from 'sygnal/config'
+export default { extends: [vikeSygnal] }
+```
+
+Pages are standard Sygnal components in `pages/*/+Page.jsx`. Supports layouts, data fetching, and SPA mode.
+
 ### TypeScript
 
 Full type definitions included:
@@ -443,6 +463,7 @@ h('div', [h('h1', 'Hello'), h('button.btn', 'Click')])
 |---------|-------------|
 | [Getting Started](./examples/getting-started) | Interactive guide with live demos (Astro) |
 | [Kanban Board](./examples/kanban) | Drag-and-drop with Collections and cross-component communication |
+| [Vike SSR](./examples/vike) | File-based routing with SSR, layouts, and data fetching |
 | [Advanced Features](./examples/advanced-feature-tests) | Portals, slots, disposal, suspense, lazy loading |
 | [TypeScript 2048](./examples/ts-example-2048) | Full game in TypeScript |
 | [AI Discussion Panel](./examples/ai-panel-spa) | Complex SPA with custom drivers |

package/dist/astro/client.cjs.js

@@ -5462,7 +5462,18 @@ function wrapDOMSource(domSource) {
         }
     });
 }
-const ABORT = Symbol('ABORT');
+const ABORT = Symbol.for('sygnal.ABORT');
+/**
+ * Check if a value is the ABORT sentinel.
+ * Uses Symbol.for() identity first, then falls back to description check
+ * in case bundlers (e.g. Vite) create duplicate module instances with
+ * separate Symbol.for() registries.
+ */
+function isAbort(value) {
+    if (value === ABORT)
+        return true;
+    return typeof value === 'symbol' && value.description === 'sygnal.ABORT';
+}
 function normalizeCalculatedEntry(field, entry) {
     if (typeof entry === 'function') {
         return { fn: entry, deps: null };
@@ -6184,7 +6195,7 @@ class Component {
                                 const enhancedState = this.addCalculated(_state);
                                 props.state = enhancedState;
                                 const newState = reducer(enhancedState, data, next, props);
-                                if (newState === ABORT)
+                                if (isAbort(newState))
                                     return _state;
                                 return this.cleanupCalculated(newState);
                             }
@@ -6213,7 +6224,7 @@ class Component {
                             return ABORT;
                         }
                     }
-                }).filter((result) => result !== ABORT);
+                }).filter((result) => !isAbort(result));
             }
             else if (reducer === undefined || reducer === true) {
                 returnStream$ = filtered$.map(({ data }) => data);

package/dist/astro/client.mjs

@@ -5460,7 +5460,18 @@ function wrapDOMSource(domSource) {
         }
     });
 }
-const ABORT = Symbol('ABORT');
+const ABORT = Symbol.for('sygnal.ABORT');
+/**
+ * Check if a value is the ABORT sentinel.
+ * Uses Symbol.for() identity first, then falls back to description check
+ * in case bundlers (e.g. Vite) create duplicate module instances with
+ * separate Symbol.for() registries.
+ */
+function isAbort(value) {
+    if (value === ABORT)
+        return true;
+    return typeof value === 'symbol' && value.description === 'sygnal.ABORT';
+}
 function normalizeCalculatedEntry(field, entry) {
     if (typeof entry === 'function') {
         return { fn: entry, deps: null };
@@ -6182,7 +6193,7 @@ class Component {
                                 const enhancedState = this.addCalculated(_state);
                                 props.state = enhancedState;
                                 const newState = reducer(enhancedState, data, next, props);
-                                if (newState === ABORT)
+                                if (isAbort(newState))
                                     return _state;
                                 return this.cleanupCalculated(newState);
                             }
@@ -6211,7 +6222,7 @@ class Component {
                             return ABORT;
                         }
                     }
-                }).filter((result) => result !== ABORT);
+                }).filter((result) => !isAbort(result));
             }
             else if (reducer === undefined || reducer === true) {
                 returnStream$ = filtered$.map(({ data }) => data);

package/dist/astro/cycle/dom/DocumentDOMSource.d.ts

@@ -1,10 +1,12 @@
-import { Stream, MemoryStream } from 'xstream';
+import { MemoryStream } from 'xstream';
 import { EventsFnOptions } from './DOMSource';
+import { EnrichedEventStream } from './enrichEventStream';
 export declare class DocumentDOMSource {
     private _name;
-    constructor(_name: string);
+    private _selector;
+    constructor(_name: string, selector?: string);
     select(selector: string): DocumentDOMSource;
-    elements(): MemoryStream<Array<Document>>;
-    element(): MemoryStream<Document>;
-    events<K extends keyof DocumentEventMap>(eventType: K, options?: EventsFnOptions, bubbles?: boolean): Stream<DocumentEventMap[K]>;
+    elements(): MemoryStream<Array<Document | Element>>;
+    element(): MemoryStream<Document | Element | null>;
+    events<K extends keyof DocumentEventMap>(eventType: K, options?: EventsFnOptions, bubbles?: boolean): EnrichedEventStream<DocumentEventMap[K]>;
 }

package/dist/astro/cycle/dom/MainDOMSource.d.ts

@@ -3,6 +3,7 @@ import { EventsFnOptions } from './DOMSource';
 import { DocumentDOMSource } from './DocumentDOMSource';
 import { BodyDOMSource } from './BodyDOMSource';
 import { VNode } from './snabbdom';
+import { EnrichedEventStream } from './enrichEventStream';
 import { Scope, IsolateSink } from './isolate';
 import { IsolateModule } from './IsolateModule';
 import { EventDelegator } from './EventDelegator';
@@ -24,7 +25,7 @@ export declare class MainDOMSource {
     get namespace(): Array<Scope>;
     select<T extends keyof SpecialSelector>(selector: T): SpecialSelector[T];
     select(selector: string): MainDOMSource;
-    events<K extends keyof HTMLElementEventMap>(eventType: K, options?: EventsFnOptions, bubbles?: boolean): Stream<HTMLElementEventMap[K]>;
+    events<K extends keyof HTMLElementEventMap>(eventType: K, options?: EventsFnOptions, bubbles?: boolean): EnrichedEventStream<HTMLElementEventMap[K]>;
     dispose(): void;
     isolateSource: (source: MainDOMSource, scope: string) => MainDOMSource;
     isolateSink: IsolateSink<VNode>;

package/dist/astro/cycle/dom/enrichEventStream.d.ts

@@ -0,0 +1,24 @@
+import { Stream } from 'xstream';
+export interface EnrichedEventStream<T = Event> extends Stream<T> {
+    value(): EnrichedEventStream<string>;
+    value<R>(fn: (val: string) => R): EnrichedEventStream<R>;
+    checked(): EnrichedEventStream<boolean>;
+    checked<R>(fn: (val: boolean) => R): EnrichedEventStream<R>;
+    data(name: string): EnrichedEventStream<string | undefined>;
+    data<R>(name: string, fn: (val: string | undefined) => R): EnrichedEventStream<R>;
+    target(): EnrichedEventStream<EventTarget | null>;
+    target<R>(fn: (el: EventTarget | null) => R): EnrichedEventStream<R>;
+    key(): EnrichedEventStream<string>;
+    key<R>(fn: (key: string) => R): EnrichedEventStream<R>;
+}
+/**
+ * Adds chainable convenience methods to a DOM event stream.
+ *
+ *   DOM.select('.input').events('input').value()
+ *   DOM.input('.input').value()
+ *   DOM.select('.item').events('click').data('id')
+ *   DOM.click('.item').data('id', Number)
+ *   DOM.change('.checkbox').checked()
+ *   DOM.keydown('.field').key()
+ */
+export declare function enrichEventStream(stream$: any): any;

package/dist/astro/server.cjs.js

@@ -514,6 +514,12 @@ function vnodeToHtml(vnode) {
     if (VOID_ELEMENTS.has(tag)) {
         return html;
     }
+    // If innerHTML is set via props, use it as raw content (no escaping)
+    if (vnode.data?.props?.innerHTML != null) {
+        html += String(vnode.data.props.innerHTML);
+        html += `</${tag}>`;
+        return html;
+    }
     // Children — snabbdom uses `text` for single text children (even when
     // `children` holds a text element object). Prioritize `text` when set.
     if (vnode.text != null) {

package/dist/astro/server.mjs

@@ -510,6 +510,12 @@ function vnodeToHtml(vnode) {
     if (VOID_ELEMENTS.has(tag)) {
         return html;
     }
+    // If innerHTML is set via props, use it as raw content (no escaping)
+    if (vnode.data?.props?.innerHTML != null) {
+        html += String(vnode.data.props.innerHTML);
+        html += `</${tag}>`;
+        return html;
+    }
     // Children — snabbdom uses `text` for single text children (even when
     // `children` holds a text element object). Prioritize `text` when set.
     if (vnode.text != null) {

package/dist/cycle/dom/DocumentDOMSource.d.ts

@@ -1,10 +1,12 @@
-import { Stream, MemoryStream } from 'xstream';
+import { MemoryStream } from 'xstream';
 import { EventsFnOptions } from './DOMSource';
+import { EnrichedEventStream } from './enrichEventStream';
 export declare class DocumentDOMSource {
     private _name;
-    constructor(_name: string);
+    private _selector;
+    constructor(_name: string, selector?: string);
     select(selector: string): DocumentDOMSource;
-    elements(): MemoryStream<Array<Document>>;
-    element(): MemoryStream<Document>;
-    events<K extends keyof DocumentEventMap>(eventType: K, options?: EventsFnOptions, bubbles?: boolean): Stream<DocumentEventMap[K]>;
+    elements(): MemoryStream<Array<Document | Element>>;
+    element(): MemoryStream<Document | Element | null>;
+    events<K extends keyof DocumentEventMap>(eventType: K, options?: EventsFnOptions, bubbles?: boolean): EnrichedEventStream<DocumentEventMap[K]>;
 }

package/dist/cycle/dom/MainDOMSource.d.ts

@@ -3,6 +3,7 @@ import { EventsFnOptions } from './DOMSource';
 import { DocumentDOMSource } from './DocumentDOMSource';
 import { BodyDOMSource } from './BodyDOMSource';
 import { VNode } from './snabbdom';
+import { EnrichedEventStream } from './enrichEventStream';
 import { Scope, IsolateSink } from './isolate';
 import { IsolateModule } from './IsolateModule';
 import { EventDelegator } from './EventDelegator';
@@ -24,7 +25,7 @@ export declare class MainDOMSource {
     get namespace(): Array<Scope>;
     select<T extends keyof SpecialSelector>(selector: T): SpecialSelector[T];
     select(selector: string): MainDOMSource;
-    events<K extends keyof HTMLElementEventMap>(eventType: K, options?: EventsFnOptions, bubbles?: boolean): Stream<HTMLElementEventMap[K]>;
+    events<K extends keyof HTMLElementEventMap>(eventType: K, options?: EventsFnOptions, bubbles?: boolean): EnrichedEventStream<HTMLElementEventMap[K]>;
     dispose(): void;
     isolateSource: (source: MainDOMSource, scope: string) => MainDOMSource;
     isolateSink: IsolateSink<VNode>;

package/dist/cycle/dom/enrichEventStream.d.ts

@@ -0,0 +1,24 @@
+import { Stream } from 'xstream';
+export interface EnrichedEventStream<T = Event> extends Stream<T> {
+    value(): EnrichedEventStream<string>;
+    value<R>(fn: (val: string) => R): EnrichedEventStream<R>;
+    checked(): EnrichedEventStream<boolean>;
+    checked<R>(fn: (val: boolean) => R): EnrichedEventStream<R>;
+    data(name: string): EnrichedEventStream<string | undefined>;
+    data<R>(name: string, fn: (val: string | undefined) => R): EnrichedEventStream<R>;
+    target(): EnrichedEventStream<EventTarget | null>;
+    target<R>(fn: (el: EventTarget | null) => R): EnrichedEventStream<R>;
+    key(): EnrichedEventStream<string>;
+    key<R>(fn: (key: string) => R): EnrichedEventStream<R>;
+}
+/**
+ * Adds chainable convenience methods to a DOM event stream.
+ *
+ *   DOM.select('.input').events('input').value()
+ *   DOM.input('.input').value()
+ *   DOM.select('.item').events('click').data('id')
+ *   DOM.click('.item').data('id', Number)
+ *   DOM.change('.checkbox').checked()
+ *   DOM.keydown('.field').key()
+ */
+export declare function enrichEventStream(stream$: any): any;

package/dist/index.cjs.js

@@ -2205,7 +2205,18 @@ function wrapDOMSource(domSource) {
         }
     });
 }
-const ABORT = Symbol('ABORT');
+const ABORT = Symbol.for('sygnal.ABORT');
+/**
+ * Check if a value is the ABORT sentinel.
+ * Uses Symbol.for() identity first, then falls back to description check
+ * in case bundlers (e.g. Vite) create duplicate module instances with
+ * separate Symbol.for() registries.
+ */
+function isAbort(value) {
+    if (value === ABORT)
+        return true;
+    return typeof value === 'symbol' && value.description === 'sygnal.ABORT';
+}
 function normalizeCalculatedEntry(field, entry) {
     if (typeof entry === 'function') {
         return { fn: entry, deps: null };
@@ -2927,7 +2938,7 @@ class Component {
                                 const enhancedState = this.addCalculated(_state);
                                 props.state = enhancedState;
                                 const newState = reducer(enhancedState, data, next, props);
-                                if (newState === ABORT)
+                                if (isAbort(newState))
                                     return _state;
                                 return this.cleanupCalculated(newState);
                             }
@@ -2956,7 +2967,7 @@ class Component {
                             return ABORT;
                         }
                     }
-                }).filter((result) => result !== ABORT);
+                }).filter((result) => !isAbort(result));
             }
             else if (reducer === undefined || reducer === true) {
                 returnStream$ = filtered$.map(({ data }) => data);
@@ -6326,6 +6337,12 @@ function vnodeToHtml(vnode) {
     if (VOID_ELEMENTS.has(tag)) {
         return html;
     }
+    // If innerHTML is set via props, use it as raw content (no escaping)
+    if (vnode.data?.props?.innerHTML != null) {
+        html += String(vnode.data.props.innerHTML);
+        html += `</${tag}>`;
+        return html;
+    }
     // Children — snabbdom uses `text` for single text children (even when
     // `children` holds a text element object). Prioritize `text` when set.
     if (vnode.text != null) {

package/dist/index.esm.js

@@ -2184,7 +2184,18 @@ function wrapDOMSource(domSource) {
         }
     });
 }
-const ABORT = Symbol('ABORT');
+const ABORT = Symbol.for('sygnal.ABORT');
+/**
+ * Check if a value is the ABORT sentinel.
+ * Uses Symbol.for() identity first, then falls back to description check
+ * in case bundlers (e.g. Vite) create duplicate module instances with
+ * separate Symbol.for() registries.
+ */
+function isAbort(value) {
+    if (value === ABORT)
+        return true;
+    return typeof value === 'symbol' && value.description === 'sygnal.ABORT';
+}
 function normalizeCalculatedEntry(field, entry) {
     if (typeof entry === 'function') {
         return { fn: entry, deps: null };
@@ -2906,7 +2917,7 @@ class Component {
                                 const enhancedState = this.addCalculated(_state);
                                 props.state = enhancedState;
                                 const newState = reducer(enhancedState, data, next, props);
-                                if (newState === ABORT)
+                                if (isAbort(newState))
                                     return _state;
                                 return this.cleanupCalculated(newState);
                             }
@@ -2935,7 +2946,7 @@ class Component {
                             return ABORT;
                         }
                     }
-                }).filter((result) => result !== ABORT);
+                }).filter((result) => !isAbort(result));
             }
             else if (reducer === undefined || reducer === true) {
                 returnStream$ = filtered$.map(({ data }) => data);
@@ -6305,6 +6316,12 @@ function vnodeToHtml(vnode) {
     if (VOID_ELEMENTS.has(tag)) {
         return html;
     }
+    // If innerHTML is set via props, use it as raw content (no escaping)
+    if (vnode.data?.props?.innerHTML != null) {
+        html += String(vnode.data.props.innerHTML);
+        html += `</${tag}>`;
+        return html;
+    }
     // Children — snabbdom uses `text` for single text children (even when
     // `children` holds a text element object). Prioritize `text` when set.
     if (vnode.text != null) {