sygnal 5.2.0 → 5.2.1

package/dist/vite/plugin.cjs.js

@@ -10,7 +10,7 @@
  *   export default defineConfig({ plugins: [sygnal()] })
  *
  * What it does:
- *   1. Configures esbuild for automatic JSX transform with sygnal as the import source
+ *   1. Configures OXC for automatic JSX transform with sygnal as the import source
  *   2. Detects files that call `run()` from sygnal and auto-injects HMR wiring
  *
  * The HMR transform finds the pattern:
@@ -34,9 +34,11 @@ function sygnal(options = {}) {
             if (disableJsx)
                 return;
             return {
-                esbuild: {
-                    jsx: 'automatic',
-                    jsxImportSource: 'sygnal',
+                oxc: {
+                    jsx: {
+                        runtime: 'automatic',
+                        importSource: 'sygnal',
+                    },
                 },
             };
         },

package/dist/vite/plugin.mjs

@@ -8,7 +8,7 @@
  *   export default defineConfig({ plugins: [sygnal()] })
  *
  * What it does:
- *   1. Configures esbuild for automatic JSX transform with sygnal as the import source
+ *   1. Configures OXC for automatic JSX transform with sygnal as the import source
  *   2. Detects files that call `run()` from sygnal and auto-injects HMR wiring
  *
  * The HMR transform finds the pattern:
@@ -32,9 +32,11 @@ function sygnal(options = {}) {
             if (disableJsx)
                 return;
             return {
-                esbuild: {
-                    jsx: 'automatic',
-                    jsxImportSource: 'sygnal',
+                oxc: {
+                    jsx: {
+                        runtime: 'automatic',
+                        importSource: 'sygnal',
+                    },
                 },
             };
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sygnal",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "An intuitive framework for building fast and small components or applications based on Cycle.js",
   "main": "./dist/index.cjs.js",
   "types": "./dist/index.d.ts",
@@ -69,6 +69,10 @@
       "import": "./dist/vike/onRenderClient.mjs",
       "require": "./dist/vike/onRenderClient.cjs.js"
     },
+    "./vike/ClientOnly": {
+      "import": "./dist/vike/ClientOnly.mjs",
+      "require": "./dist/vike/ClientOnly.cjs.js"
+    },
     "./types": {
       "import": "./dist/index.d.ts",
       "require": "./dist/index.d.ts"

package/src/component.ts

@@ -91,6 +91,7 @@ export interface ComponentOptions {
   stateSourceName?: string;
   requestSourceName?: string;
   isolateOpts?: string | boolean | Record<string, any>;
+  isolatedState?: boolean;
   onError?: (error: Error, info: { componentName: string }) => any;
   debug?: boolean;
 }
@@ -169,6 +170,7 @@ class Component {
   sourceNames: string[];
   _debug: boolean;
   onError: ((error: Error, info: { componentName: string }) => any) | undefined;
+  isolatedState: boolean;
   isSubComponent: boolean;
   currentState: any;
   currentProps: any;
@@ -202,7 +204,7 @@ class Component {
   _readyChanged$: any;
   _readyChangedListener: any;
 
-  constructor({name = 'NO NAME', sources, intent, model, hmrActions, context, response, view, peers = {}, components = {}, initialState, calculated, storeCalculatedInState = true, DOMSourceName = 'DOM', stateSourceName = 'STATE', requestSourceName = 'HTTP', onError, debug = false}: ComponentOptions) {
+  constructor({name = 'NO NAME', sources, intent, model, hmrActions, context, response, view, peers = {}, components = {}, initialState, calculated, storeCalculatedInState = true, DOMSourceName = 'DOM', stateSourceName = 'STATE', requestSourceName = 'HTTP', isolatedState = false, onError, debug = false}: ComponentOptions) {
     if (!sources || !isObj(sources)) throw new Error(`[${name}] Missing or invalid sources`)
 
     this._componentNumber = COMPONENT_COUNT++
@@ -225,6 +227,7 @@ class Component {
     this.requestSourceName = requestSourceName
     this.sourceNames       = Object.keys(sources)
     this.onError           = onError
+    this.isolatedState     = isolatedState
     this._debug            = debug
 
     // Warn if calculated fields shadow base state keys
@@ -649,7 +652,7 @@ class Component {
     const hmrState = ENVIRONMENT?.__SYGNAL_HMR_STATE
     const effectiveInitialState = (typeof hmrState !== 'undefined') ? hmrState : this.initialState
     const initial  = { type: INITIALIZE_ACTION, data: effectiveInitialState }
-    if (this.isSubComponent && this.initialState) {
+    if (this.isSubComponent && this.initialState && !this.isolatedState) {
       console.warn(`[${this.name}] Initial state provided to sub-component. This will overwrite any state provided by the parent component.`)
     }
     const hasInitialState = (typeof effectiveInitialState !== 'undefined')
@@ -851,6 +854,7 @@ class Component {
       .map((vdom: any) => processLazy(vdom, this))
       .map(processPortals)
       .map(processTransitions)
+      .map(processClientOnly)
       .compose(this.instantiateSubComponents.bind(this))
       .filter((val: any) => val !== undefined)
       .compose(this.renderVdom.bind(this))
@@ -1876,6 +1880,29 @@ function processTransitions(vnode: any): any {
   return vnode
 }
 
+function processClientOnly(vnode: any): any {
+  if (!vnode || !vnode.sel) return vnode
+  if (vnode.sel === 'clientonly') {
+    // On the client, unwrap to children (render them normally)
+    const children = vnode.children || []
+    if (children.length === 0) return { sel: 'div', data: {}, children: [] }
+    if (children.length === 1) return processClientOnly(children[0])
+    // Multiple children: wrap in a div
+    return {
+      sel: 'div',
+      data: {},
+      children: children.map(processClientOnly),
+      text: undefined,
+      elm: undefined,
+      key: undefined,
+    }
+  }
+  if (vnode.children && vnode.children.length > 0) {
+    vnode.children = vnode.children.map(processClientOnly)
+  }
+  return vnode
+}
+
 function applyTransitionHooks(vnode: any, name: string, duration?: number): any {
   const existingInsert = vnode.data?.hook?.insert
   const existingRemove = vnode.data?.hook?.remove

package/src/extra/reducers.ts

@@ -0,0 +1,64 @@
+/**
+ * Reducer helpers for common state update patterns.
+ *
+ * These reduce boilerplate in model definitions by providing
+ * shorthand factories for the most frequent reducer shapes.
+ */
+
+// ── set() ──────────────────────────────────────────────────────────
+/**
+ * Create a reducer that merges a partial update into state.
+ *
+ * Static form — merge a fixed object:
+ *   set({ isEditing: true })
+ *
+ * Dynamic form — function receives (state, data, next, props) and
+ * returns the partial update to merge:
+ *   set((state, title) => ({ title }))
+ */
+export function set<S = any>(
+  partial: Partial<S> | ((state: S, data: any, next: Function, props: any) => Partial<S>)
+): (state: S, data: any, next: Function, props: any) => S {
+  if (typeof partial === 'function') {
+    return (state, data, next, props) => ({
+      ...state,
+      ...partial(state, data, next, props),
+    })
+  }
+  return (state) => ({ ...state, ...partial })
+}
+
+// ── toggle() ───────────────────────────────────────────────────────
+/**
+ * Create a reducer that toggles a boolean field on state.
+ *
+ *   toggle('showModal')
+ *   // equivalent to: (state) => ({ ...state, showModal: !state.showModal })
+ */
+export function toggle<S = any>(field: keyof S & string): (state: S) => S {
+  return (state) => ({ ...state, [field]: !state[field] })
+}
+
+// ── emit() ─────────────────────────────────────────────────────────
+/**
+ * Create a model entry that emits an EVENTS bus event.
+ *
+ * With static data:
+ *   emit('DELETE_LANE', { laneId: 42 })
+ *
+ * With dynamic data derived from state:
+ *   emit('DELETE_LANE', (state) => ({ laneId: state.id }))
+ *
+ * Fire-and-forget (no data):
+ *   emit('REFRESH')
+ */
+export function emit(
+  type: string,
+  data?: any | ((state: any, actionData: any, next: Function, props: any) => any)
+): { EVENTS: (state: any, actionData: any, next: Function, props: any) => { type: string; data: any } } {
+  return {
+    EVENTS: typeof data === 'function'
+      ? (state, actionData, next, props) => ({ type, data: data(state, actionData, next, props) })
+      : () => ({ type, data }),
+  }
+}

package/src/extra/ssr.ts

@@ -193,6 +193,25 @@ function processSSRTree(vnode: any, context: Record<string, any>, parentState?:
     }
   }
 
+  // ClientOnly: render fallback during SSR, skip children (they need a browser)
+  if (sel === 'clientonly') {
+    const props = vnode.data?.props || {}
+    const fallback = props.fallback
+    if (fallback) {
+      // fallback can be a VNode or a string
+      return processSSRTree(fallback, context, parentState)
+    }
+    // No fallback — render an empty placeholder div
+    return {
+      sel: 'div',
+      data: {attrs: {'data-sygnal-clientonly': ''}},
+      children: [],
+      text: undefined,
+      elm: undefined,
+      key: undefined,
+    }
+  }
+
   // Slot: unwrap to children
   if (sel === 'slot') {
     const children = vnode.children || []

package/src/index.d.ts

@@ -378,6 +378,40 @@ export function enableHMR<STATE = any, DRIVERS = {}>(
 export function classes(...classes: ClassesType): string
 export function exactState<STATE>(): <ACTUAL extends STATE>(state: ExactShape<STATE, ACTUAL>) => STATE
 
+// ── Reducer helpers ────────────────────────────────────────────────
+
+/**
+ * Create a reducer that merges a partial update into state.
+ *
+ * Static form — merge a fixed object:
+ *   `set({ isEditing: true })`
+ *
+ * Dynamic form — function receives (state, data, next, props) and
+ * returns the partial update to merge:
+ *   `set((state, title) => ({ title }))`
+ */
+export function set<S = any>(
+  partial: Partial<S> | ((state: S, data: any, next: Function, props: any) => Partial<S>)
+): (state: S, data: any, next: Function, props: any) => S
+
+/**
+ * Create a reducer that toggles a boolean field on state.
+ *
+ *   `toggle('showModal')`
+ */
+export function toggle<S = any>(field: keyof S & string): (state: S) => S
+
+/**
+ * Create a model entry that emits an EVENTS bus event.
+ *
+ *   `emit('DELETE_LANE', (state) => ({ laneId: state.id }))`
+ *   `emit('REFRESH')`
+ */
+export function emit(
+  type: string,
+  data?: any | ((state: any, actionData: any, next: Function, props: any) => any)
+): { EVENTS: (state: any, actionData: any, next: Function, props: any) => { type: string; data: any } }
+
 /**
  * Any object with an events() method (e.g., DOM.select('form')).
  * Uses permissive signature to be compatible with MainDOMSource's overloaded events().

package/src/index.ts

@@ -21,6 +21,7 @@ export { createElement } from './pragma/index'
 export { createCommand } from './extra/command'
 export { createRef, createRef$ } from './extra/ref'
 export { renderComponent } from './extra/testing'
+export { set, toggle, emit } from './extra/reducers'
 export { renderToString } from './extra/ssr'
 export { default as xs } from './extra/xstreamCompat'
 export { getDevTools } from './extra/devtools'

package/src/vike/+config.ts

@@ -15,13 +15,17 @@ export default {
   onRenderHtml: 'import:sygnal/vike/onRenderHtml:onRenderHtml',
   onRenderClient: 'import:sygnal/vike/onRenderClient:onRenderClient',
 
-  passToClient: ['data', 'routeParams'],
+  passToClient: ['data', 'routeParams', 'urlPathname'],
 
   meta: {
     Layout: {
       env: { server: true, client: true },
       cumulative: true,
     },
+    Wrapper: {
+      env: { server: true, client: true },
+      cumulative: true,
+    },
     Head: {
       env: { server: true },
     },

package/src/vike/ClientOnly.ts

@@ -0,0 +1,10 @@
+import {h} from '../cycle/dom/snabbdom';
+
+const ClientOnly = (props: any) => {
+  const {children, ...sanitizedProps} = props;
+  return h('clientonly', {props: sanitizedProps}, children);
+};
+(ClientOnly as any).label = 'clientonly';
+(ClientOnly as any).preventInstantiation = true;
+
+export {ClientOnly};