sygnal 5.2.0 → 5.3.0

package/src/extra/pwa.ts

@@ -0,0 +1,179 @@
+import xs, {Stream} from 'xstream';
+import {adapt} from '../cycle/run/adapt';
+
+// ── Types ────────────────────────────────────────────────────
+
+export interface ServiceWorkerSource {
+  select(type?: string): any;
+}
+
+export interface ServiceWorkerCommand {
+  action: 'skipWaiting' | 'postMessage' | 'unregister';
+  data?: any;
+}
+
+export interface ServiceWorkerOptions {
+  scope?: string;
+}
+
+export interface InstallPrompt {
+  select(type: 'beforeinstallprompt' | 'appinstalled'): any;
+  prompt(): Promise<any> | undefined;
+}
+
+// ── makeServiceWorkerDriver ──────────────────────────────────
+
+function trackWorker(worker: ServiceWorker, events: EventTarget) {
+  const emit = (type: string, data: any) =>
+    events.dispatchEvent(new CustomEvent('data', {detail: {type, data}}));
+
+  worker.addEventListener('statechange', () => {
+    if (worker.state === 'installed') emit('installed', true);
+    if (worker.state === 'activated') emit('activated', true);
+  });
+
+  if (worker.state === 'installed') emit('waiting', worker);
+  if (worker.state === 'activated') emit('activated', true);
+}
+
+export function makeServiceWorkerDriver(
+  scriptUrl: string,
+  options: ServiceWorkerOptions = {},
+): (sink$: Stream<ServiceWorkerCommand>) => ServiceWorkerSource {
+  return function serviceWorkerDriver(sink$: Stream<ServiceWorkerCommand>): ServiceWorkerSource {
+    const events = new EventTarget();
+
+    if (typeof navigator !== 'undefined' && 'serviceWorker' in navigator) {
+      navigator.serviceWorker
+        .register(scriptUrl, {scope: options.scope})
+        .then((reg) => {
+          const emit = (type: string, data: any) =>
+            events.dispatchEvent(new CustomEvent('data', {detail: {type, data}}));
+
+          if (reg.installing) trackWorker(reg.installing, events);
+          if (reg.waiting) emit('waiting', reg.waiting);
+          if (reg.active) emit('activated', true);
+
+          reg.addEventListener('updatefound', () => {
+            if (reg.installing) trackWorker(reg.installing, events);
+          });
+
+          navigator.serviceWorker.addEventListener('controllerchange', () => {
+            emit('controlling', true);
+          });
+
+          navigator.serviceWorker.addEventListener('message', (e) => {
+            emit('message', (e as MessageEvent).data);
+          });
+        })
+        .catch((err) => {
+          events.dispatchEvent(new CustomEvent('data', {detail: {type: 'error', data: err}}));
+        });
+
+      sink$.addListener({
+        next: (cmd: ServiceWorkerCommand) => {
+          if (cmd.action === 'skipWaiting') {
+            navigator.serviceWorker.ready.then((r) => {
+              if (r.waiting) r.waiting.postMessage({type: 'SKIP_WAITING'});
+            });
+          } else if (cmd.action === 'postMessage') {
+            navigator.serviceWorker.ready.then((r) => {
+              if (r.active) r.active.postMessage(cmd.data);
+            });
+          } else if (cmd.action === 'unregister') {
+            navigator.serviceWorker.ready.then((r) => r.unregister());
+          }
+        },
+        error: (err: any) => console.error('[SW driver] Error in sink stream:', err),
+      });
+    }
+
+    return {
+      select(type?: string) {
+        let cb: ((e: Event) => void) | undefined;
+        const in$ = xs.create<any>({
+          start: (listener) => {
+            cb = ({detail}: any) => {
+              if (!type || detail.type === type) listener.next(detail.data);
+            };
+            events.addEventListener('data', cb);
+          },
+          stop: () => {
+            if (cb) events.removeEventListener('data', cb);
+          },
+        });
+        return adapt(in$);
+      },
+    };
+  };
+}
+
+// ── onlineStatus$ ────────────────────────────────────────────
+
+export function onlineStatus$(): Stream<boolean> {
+  if (typeof window === 'undefined') {
+    return xs.of(true);
+  }
+
+  let cleanup: (() => void) | undefined;
+
+  return xs.create<boolean>({
+    start(listener) {
+      listener.next(navigator.onLine);
+      const on = () => listener.next(true);
+      const off = () => listener.next(false);
+      window.addEventListener('online', on);
+      window.addEventListener('offline', off);
+      cleanup = () => {
+        window.removeEventListener('online', on);
+        window.removeEventListener('offline', off);
+      };
+    },
+    stop() {
+      cleanup?.();
+      cleanup = undefined;
+    },
+  });
+}
+
+// ── createInstallPrompt ──────────────────────────────────────
+
+export function createInstallPrompt(): InstallPrompt {
+  let deferredPrompt: any = null;
+  const events = new EventTarget();
+
+  if (typeof window !== 'undefined') {
+    window.addEventListener('beforeinstallprompt', (e) => {
+      e.preventDefault();
+      deferredPrompt = e;
+      events.dispatchEvent(new CustomEvent('data', {detail: {type: 'beforeinstallprompt', data: true}}));
+    });
+
+    window.addEventListener('appinstalled', () => {
+      deferredPrompt = null;
+      events.dispatchEvent(new CustomEvent('data', {detail: {type: 'appinstalled', data: true}}));
+    });
+  }
+
+  return {
+    select(type: 'beforeinstallprompt' | 'appinstalled') {
+      let cb: ((e: Event) => void) | undefined;
+      const in$ = xs.create<any>({
+        start: (listener) => {
+          cb = ({detail}: any) => {
+            if (detail.type === type) listener.next(detail.data);
+          };
+          events.addEventListener('data', cb);
+        },
+        stop: () => {
+          if (cb) events.removeEventListener('data', cb);
+        },
+      });
+      return adapt(in$);
+    },
+
+    prompt() {
+      return deferredPrompt?.prompt();
+    },
+  };
+}

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().
@@ -561,6 +595,35 @@ export interface CommandSource {
 
 export function createCommand(): Command
 
+// ── PWA Helpers ──────────────────────────────────────────────
+
+export interface ServiceWorkerSource {
+  select(type?: 'installed' | 'activated' | 'waiting' | 'controlling' | 'error' | 'message' | string): Stream<any>;
+}
+
+export interface ServiceWorkerCommand {
+  action: 'skipWaiting' | 'postMessage' | 'unregister';
+  data?: any;
+}
+
+export interface ServiceWorkerOptions {
+  scope?: string;
+}
+
+export function makeServiceWorkerDriver(
+  scriptUrl: string,
+  options?: ServiceWorkerOptions
+): (sink$: Stream<ServiceWorkerCommand>) => ServiceWorkerSource
+
+export function onlineStatus$(): Stream<boolean>
+
+export interface InstallPrompt {
+  select(type: 'beforeinstallprompt' | 'appinstalled'): Stream<any>;
+  prompt(): Promise<any> | undefined;
+}
+
+export function createInstallPrompt(): InstallPrompt
+
 export interface RenderOptions {
   /** Override initial state (defaults to component's .initialState) */
   initialState?: any;

package/src/index.ts

@@ -21,6 +21,8 @@ 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 { makeServiceWorkerDriver, onlineStatus$, createInstallPrompt } from './extra/pwa'
 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};