sygnal 4.2.0 → 4.3.0

package/src/extra/devtools.js

@@ -0,0 +1,249 @@
+'use strict'
+
+const DEVTOOLS_SOURCE = '__SYGNAL_DEVTOOLS_PAGE__'
+const EXTENSION_SOURCE = '__SYGNAL_DEVTOOLS_EXTENSION__'
+const DEFAULT_MAX_HISTORY = 200
+
+class SygnalDevTools {
+  constructor() {
+    this._connected = false
+    this._components = new Map()
+    this._stateHistory = []
+    this._maxHistory = DEFAULT_MAX_HISTORY
+  }
+
+  get connected() {
+    return this._connected && typeof window !== 'undefined'
+  }
+
+  // ─── Initialization ─────────────────────────────────────────────────────────
+
+  init() {
+    if (typeof window === 'undefined') return
+
+    window.__SYGNAL_DEVTOOLS__ = this
+
+    window.addEventListener('message', (event) => {
+      if (event.source !== window) return
+      if (event.data?.source === EXTENSION_SOURCE) {
+        this._handleExtensionMessage(event.data)
+      }
+    })
+  }
+
+  _handleExtensionMessage(msg) {
+    switch (msg.type) {
+      case 'CONNECT':
+        this._connected = true
+        if (msg.payload?.maxHistory) this._maxHistory = msg.payload.maxHistory
+        this._sendFullTree()
+        break
+      case 'DISCONNECT':
+        this._connected = false
+        break
+      case 'SET_DEBUG':
+        this._setDebug(msg.payload)
+        break
+      case 'TIME_TRAVEL':
+        this._timeTravel(msg.payload)
+        break
+      case 'GET_STATE':
+        this._sendComponentState(msg.payload.componentId)
+        break
+    }
+  }
+
+  // ─── Hooks (called from component.js) ────────────────────────────────────────
+
+  onComponentCreated(componentNumber, name, instance) {
+    const meta = {
+      id: componentNumber,
+      name: name,
+      isSubComponent: instance.isSubComponent,
+      hasModel: !!instance.model,
+      hasIntent: !!instance.intent,
+      hasContext: !!instance.context,
+      hasCalculated: !!instance.calculated,
+      components: Object.keys(instance.components || {}),
+      parentId: null,
+      children: [],
+      debug: instance._debug,
+      createdAt: Date.now(),
+      _instanceRef: new WeakRef(instance),
+    }
+    this._components.set(componentNumber, meta)
+
+    if (!this.connected) return
+    this._post('COMPONENT_CREATED', this._serializeMeta(meta))
+  }
+
+  onStateChanged(componentNumber, name, state) {
+    if (!this.connected) return
+
+    const entry = {
+      componentId: componentNumber,
+      componentName: name,
+      timestamp: Date.now(),
+      state: this._safeClone(state),
+    }
+
+    this._stateHistory.push(entry)
+    if (this._stateHistory.length > this._maxHistory) {
+      this._stateHistory.shift()
+    }
+
+    this._post('STATE_CHANGED', {
+      componentId: componentNumber,
+      componentName: name,
+      state: entry.state,
+      historyIndex: this._stateHistory.length - 1,
+    })
+  }
+
+  onActionDispatched(componentNumber, name, actionType, data) {
+    if (!this.connected) return
+    this._post('ACTION_DISPATCHED', {
+      componentId: componentNumber,
+      componentName: name,
+      actionType: actionType,
+      data: this._safeClone(data),
+      timestamp: Date.now(),
+    })
+  }
+
+  onSubComponentRegistered(parentNumber, childNumber) {
+    const parent = this._components.get(parentNumber)
+    const child = this._components.get(childNumber)
+    if (parent && child) {
+      child.parentId = parentNumber
+      if (!parent.children.includes(childNumber)) {
+        parent.children.push(childNumber)
+      }
+    }
+
+    if (!this.connected) return
+    this._post('TREE_UPDATED', {
+      parentId: parentNumber,
+      childId: childNumber,
+    })
+  }
+
+  onContextChanged(componentNumber, name, context) {
+    if (!this.connected) return
+    this._post('CONTEXT_CHANGED', {
+      componentId: componentNumber,
+      componentName: name,
+      context: this._safeClone(context),
+    })
+  }
+
+  onDebugLog(componentNumber, message) {
+    if (!this.connected) return
+    this._post('DEBUG_LOG', {
+      componentId: componentNumber,
+      message: message,
+      timestamp: Date.now(),
+    })
+  }
+
+  // ─── Commands (from extension to page) ───────────────────────────────────────
+
+  _setDebug({ componentId, enabled }) {
+    if (typeof componentId === 'undefined' || componentId === null) {
+      if (typeof window !== 'undefined') window.SYGNAL_DEBUG = enabled ? 'true' : false
+      this._post('DEBUG_TOGGLED', { global: true, enabled })
+      return
+    }
+
+    const meta = this._components.get(componentId)
+    if (meta && meta._instanceRef) {
+      const instance = meta._instanceRef.deref()
+      if (instance) {
+        instance._debug = enabled
+        meta.debug = enabled
+        this._post('DEBUG_TOGGLED', { componentId, enabled })
+      }
+    }
+  }
+
+  _timeTravel({ historyIndex }) {
+    const entry = this._stateHistory[historyIndex]
+    if (!entry) return
+
+    const app = typeof window !== 'undefined' && window.__SYGNAL_DEVTOOLS_APP__
+    if (app?.sinks?.STATE?.shamefullySendNext) {
+      app.sinks.STATE.shamefullySendNext(() => ({ ...entry.state }))
+      this._post('TIME_TRAVEL_APPLIED', {
+        historyIndex,
+        state: entry.state,
+      })
+    }
+  }
+
+  _sendComponentState(componentId) {
+    const meta = this._components.get(componentId)
+    if (meta && meta._instanceRef) {
+      const instance = meta._instanceRef.deref()
+      if (instance) {
+        this._post('COMPONENT_STATE', {
+          componentId,
+          state: this._safeClone(instance.currentState),
+          context: this._safeClone(instance.currentContext),
+          props: this._safeClone(instance.currentProps),
+        })
+      }
+    }
+  }
+
+  _sendFullTree() {
+    const tree = []
+    for (const [id, meta] of this._components) {
+      const instance = meta._instanceRef?.deref()
+      tree.push({
+        ...this._serializeMeta(meta),
+        state: instance ? this._safeClone(instance.currentState) : null,
+        context: instance ? this._safeClone(instance.currentContext) : null,
+      })
+    }
+    this._post('FULL_TREE', {
+      components: tree,
+      history: this._stateHistory,
+    })
+  }
+
+  // ─── Transport ───────────────────────────────────────────────────────────────
+
+  _post(type, payload) {
+    if (typeof window === 'undefined') return
+    window.postMessage({
+      source: DEVTOOLS_SOURCE,
+      type,
+      payload,
+    }, '*')
+  }
+
+  _safeClone(obj) {
+    if (obj === undefined || obj === null) return obj
+    try {
+      return JSON.parse(JSON.stringify(obj))
+    } catch (e) {
+      return '[unserializable]'
+    }
+  }
+
+  _serializeMeta(meta) {
+    const { _instanceRef, ...rest } = meta
+    return rest
+  }
+}
+
+// ─── Singleton ────────────────────────────────────────────────────────────────
+
+let instance = null
+
+export function getDevTools() {
+  if (!instance) instance = new SygnalDevTools()
+  return instance
+}
+
+export default getDevTools

package/src/extra/driverFactories.js

@@ -14,11 +14,11 @@ function driverFromAsync(promiseReturningFunction, opts = {}) {
   const functionName = promiseReturningFunction.name || '[anonymous function]'
   const functionArgsType = typeof functionArgs
   if (functionArgsType !== 'string' && functionArgsType !== 'function' && !(Array.isArray(functionArgs) && functionArgs.every((arg) => typeof arg === 'string'))) {
-    throw new Error(`The 'args' option for driverFromAsync(${ functionName }) must be a string, array of strings, or a function.  Received ${functionArgsType}`)
+    throw new Error(`The 'args' option for driverFromAsync(${functionName}) must be a string, array of strings, or a function.  Received ${functionArgsType}`)
   }
 
   if (typeof selectorProperty !== 'string') {
-    throw new Error(`The 'selector' option for driverFromAsync(${ functionName }) must be a string.  Received ${typeof selectorProperty}`)
+    throw new Error(`The 'selector' option for driverFromAsync(${functionName}) must be a string.  Received ${typeof selectorProperty}`)
   }
 
   return (fromApp$) => {
@@ -47,7 +47,7 @@ function driverFromAsync(promiseReturningFunction, opts = {}) {
             argArr = functionArgs.map((arg) => preProcessed[arg])
           }
         }
-        const errMsg = `Error in driver created using driverFromAsync(${ functionName })`
+        const errMsg = `Error in driver created using driverFromAsync(${functionName})`
         promiseReturningFunction(...argArr)
           .then((innerVal) => {
             const constructReply = (rawVal) => {
@@ -57,7 +57,7 @@ function driverFromAsync(promiseReturningFunction, opts = {}) {
                 if (typeof outgoing === 'object' && outgoing !== null) {
                   outgoing[selectorProperty] = incoming[selectorProperty]
                 } else {
-                  console.warn(`The 'return' option for driverFromAsync(${ functionName }) was not set, but the promise returned an non-object.  The result will be returned as-is, but the '${selectorProperty}' property will not be set, so will not be filtered by the 'select' method of the driver.`)
+                  console.warn(`The 'return' option for driverFromAsync(${functionName}) was not set, but the promise returned an non-object.  The result will be returned as-is, but the '${selectorProperty}' property will not be set, so will not be filtered by the 'select' method of the driver.`)
                 }
               } else if (typeof returnProperty === 'string') {
                 outgoing = {
@@ -65,7 +65,7 @@ function driverFromAsync(promiseReturningFunction, opts = {}) {
                   [selectorProperty]: incoming[selectorProperty]
                 }
               } else {
-                throw new Error(`The 'return' option for driverFromAsync(${ functionName }) must be a string.  Received ${typeof returnProperty}`)
+                throw new Error(`The 'return' option for driverFromAsync(${functionName}) must be a string.  Received ${typeof returnProperty}`)
               }
               return outgoing
             }
@@ -81,12 +81,12 @@ function driverFromAsync(promiseReturningFunction, opts = {}) {
                       .then((innerProcessedOutgoing) => {
                         sendFn(constructReply(innerProcessedOutgoing))
                       })
-                      .catch((err) => console.error(`${ errMsg }: ${ err }`))
+                      .catch((err) => console.error(`${errMsg}: ${err}`))
                   } else {
-                    sendFn(constructReply(rocessedOutgoing))
+                    sendFn(constructReply(processedOutgoing))
                   }
                 })
-                .catch((err) => console.error(`${ errMsg }: ${ err }`))
+                .catch((err) => console.error(`${errMsg}: ${err}`))
             } else {
               const processedOutgoing = postFunction(innerVal, incoming)
               if (typeof processedOutgoing.then === 'function') {
@@ -94,19 +94,19 @@ function driverFromAsync(promiseReturningFunction, opts = {}) {
                   .then((innerProcessedOutgoing) => {
                     sendFn(constructReply(innerProcessedOutgoing))
                   })
-                  .catch((err) => console.error(`${ errMsg }: ${ err }`))
+                  .catch((err) => console.error(`${errMsg}: ${err}`))
               } else {
                 sendFn(constructReply(processedOutgoing))
               }
             }
           })
-          .catch((err) => console.error(`${ errMsg }: ${ err }`))
+          .catch((err) => console.error(`${errMsg}: ${err}`))
       },
       error: (err) => {
-        console.error(`Error recieved from sink stream in driver created using driverFromAsync(${ functionName }): ${ err }`)
+        console.error(`Error received from sink stream in driver created using driverFromAsync(${functionName}):`, err)
       },
       complete: () => {
-        console.warn(`Unexpected completion of sink stream to driver created using driverFromAsync(${ functionName })`)
+        console.warn(`Unexpected completion of sink stream to driver created using driverFromAsync(${functionName})`)
       }
     })
 

package/src/extra/eventDriver.js

@@ -9,7 +9,8 @@ export default function eventBusDriver(out$) {
   const events = new EventTarget()
 
   out$.subscribe({
-    next: event => events.dispatchEvent(new CustomEvent('data', { detail: event }))
+    next: event => events.dispatchEvent(new CustomEvent('data', { detail: event })),
+    error: err => console.error('[EVENTS driver] Error in sink stream:', err)
   })
 
   return {

package/src/extra/logDriver.js

@@ -4,6 +4,9 @@ export default function logDriver(out$) {
   out$.addListener({
     next: (val) => {
       console.log(val)
+    },
+    error: (err) => {
+      console.error('[LOG driver] Error in sink stream:', err)
     }
   })
 }

package/src/extra/processDrag.js

@@ -3,6 +3,12 @@
 import xs from './xstreamCompat.js'
 
 export default function processDrag({ draggable, dropZone } = {}, options = {}) {
+  if (draggable && typeof draggable.events !== 'function') {
+    throw new Error('processDrag: draggable must have an .events() method (e.g. DOM.select(...))')
+  }
+  if (dropZone && typeof dropZone.events !== 'function') {
+    throw new Error('processDrag: dropZone must have an .events() method (e.g. DOM.select(...))')
+  }
   const { effectAllowed = 'move' } = options
 
   const dragStart$ = draggable

package/src/extra/processForm.js

@@ -3,6 +3,9 @@
 import xs from './xstreamCompat.js'
 
 export default function processForm(form, options={}) {
+  if (!form || typeof form.events !== 'function') {
+    throw new Error('processForm: first argument must have an .events() method (e.g. DOM.select(...))')
+  }
   let { events = ['input', 'submit'], preventDefault = true } = options
   if (typeof events === 'string') events = [events]
 

package/src/extra/run.js

@@ -4,8 +4,15 @@ import { makeDOMDriver } from "@cycle/dom"
 import eventBusDriver from "./eventDriver"
 import logDriver from "./logDriver"
 import component, { ABORT } from "../component"
+import { getDevTools } from "./devtools"
 
 export default function run(app, drivers={}, options={}) {
+  // Initialize DevTools instrumentation bridge early (before component creation)
+  if (typeof window !== 'undefined') {
+    const dt = getDevTools()
+    dt.init()
+  }
+
   const { mountPoint='#root', fragments=true, useDefaultDrivers=true } = options
   if (!app.isSygnalComponent) {
     const name = app.name || app.componentName || app.label || "FUNCTIONAL_COMPONENT"
@@ -55,6 +62,11 @@ export default function run(app, drivers={}, options={}) {
 
   const exposed = { sources, sinks, dispose }
 
+  // Store app reference for time-travel
+  if (typeof window !== 'undefined') {
+    window.__SYGNAL_DEVTOOLS_APP__ = exposed
+  }
+
   const swapToComponent = (newComponent, state) => {
     const persistedState = (typeof window !== 'undefined') ? window.__SYGNAL_HMR_PERSISTED_STATE : undefined
     const fallbackState = typeof persistedState !== 'undefined' ? persistedState : app.initialState

package/src/index.d.ts

@@ -3,7 +3,8 @@ import type { StateSource } from '@cycle/state'
 import xsDefault from 'xstream'
 import type { MemoryStream, Stream } from 'xstream'
 
-export type ABORT = '~#~#~ABORT~#~#~'
+export declare const ABORT: unique symbol
+export type ABORT = typeof ABORT
 
 export type DriverSpec<SOURCE = any, SINK = any> = {
   source: SOURCE;
@@ -188,9 +189,13 @@ interface ComponentIntent<STATE, DRIVERS, ACTIONS> {
   (args: CombinedSources<STATE, DRIVERS>): Partial<Actions<ACTIONS>>
 }
 
+type CalculatedFieldValue<FULL_STATE, RETURN> =
+  | StateOnlyReducer<FULL_STATE, RETURN>
+  | [ReadonlyArray<string & keyof FULL_STATE>, StateOnlyReducer<FULL_STATE, RETURN>]
+
 type Calculated<STATE, CALCULATED> = keyof CALCULATED extends never
-  ? { [field: string]: boolean | StateOnlyReducer<STATE, any> }
-  : { [CALCULATED_KEY in keyof CALCULATED]: boolean | StateOnlyReducer<STATE, CALCULATED[CALCULATED_KEY]> }
+  ? { [field: string]: boolean | CalculatedFieldValue<STATE, any> }
+  : { [CALCULATED_KEY in keyof CALCULATED]: boolean | CalculatedFieldValue<STATE & CALCULATED, CALCULATED[CALCULATED_KEY]> }
 
 type Context<STATE, CONTEXT> = keyof CONTEXT extends never
   ? { [field: string]: boolean | StateOnlyReducer<STATE, any> }
@@ -444,7 +449,6 @@ export function driverFromAsync<INCOMING = any, RETURN = any, OUTGOING = any>(
   options?: DriverFromAsyncOptions<INCOMING, OUTGOING, RETURN>
 ): (fromApp$: Stream<INCOMING>) => AsyncDriverFromFunction<INCOMING, OUTGOING>
 
-export const ABORT: ABORT
 export const xs: typeof xsDefault
 
 export { default as debounce } from 'xstream/extra/debounce'

package/src/index.js

@@ -13,6 +13,7 @@ export { default as run } from './extra/run'
 export { default as enableHMR } from './extra/hmr'
 export { default as classes } from './extra/classes'
 export { default as xs } from './extra/xstreamCompat.js'
+export { getDevTools } from './extra/devtools'
 
 // export dom helper functions (h, div, ...)
 export * from '@cycle/dom'

package/src/pragma/index.js

@@ -13,17 +13,29 @@ const createTextElement = (text) => !is.text(text) ? undefined : {
   key: undefined
 }
 
-const considerSvg = (vnode) => !is.svg(vnode) ? vnode :
-  fn.assign(vnode,
-    { data: fn.omit('props', fn.extend(vnode.data,
-      { ns: 'http://www.w3.org/2000/svg', attrs: fn.omit('className', fn.extend(vnode.data.props,
-        { class: vnode.data.props ? vnode.data.props.className : undefined }
-      )) }
+const applySvg = (vnode) => {
+  // Skip text vnodes (sel is undefined) and nullish values
+  if (!vnode || is.undefinedv(vnode.sel)) return vnode
+
+  const data = vnode.data || {}
+  const props = data.props || {}
+  const propsWithoutClassName = fn.omit('className', props)
+  const classAttr = props.className !== undefined ? { class: props.className } : {}
+  const mergedAttrs = fn.assign({}, propsWithoutClassName, classAttr, data.attrs || {})
+
+  return fn.assign(vnode,
+    { data: fn.omit('props', fn.assign({}, data,
+      { ns: 'http://www.w3.org/2000/svg', attrs: mergedAttrs }
     )) },
-    { children: is.undefinedv(vnode.children) ? undefined :
-      vnode.children.map((child) => considerSvg(child))
+    // foreignObject contains HTML, not SVG — do not recurse into its children
+    { children: (!Array.isArray(vnode.children) || vnode.sel === 'foreignObject')
+      ? vnode.children
+      : vnode.children.map((child) => applySvg(child))
     }
   )
+}
+
+const considerSvg = (vnode) => !is.svg(vnode) ? vnode : applySvg(vnode)
 
 const rewrites = {
   for: 'attrs',
@@ -79,7 +91,7 @@ const applyFocusProps = (data) => {
   return data
 }
 
-const sanitizeData = (data, modules) => applyFocusProps(considerSvg(rewriteModules(fn.deepifyKeys(data, modules), modules)))
+const sanitizeData = (data, modules) => applyFocusProps(rewriteModules(fn.deepifyKeys(data, modules), modules))
 
 const sanitizeText = (children) => children.length > 1 || !is.text(children[0]) ? undefined : children[0].toString()
 

package/src/pragma/is.js

@@ -17,7 +17,32 @@ export const fun = (v) => typeof v === 'function'
 
 export const vnode = (v) => object(v) && 'sel' in v && 'data' in v && 'children' in v && 'text' in v
 
-const svgPropsMap = { svg: 1, circle: 1, ellipse: 1, line: 1, polygon: 1,
-  polyline: 1, rect: 1, g: 1, path: 1, text: 1 }
+const svgPropsMap = {
+  // Container / structural
+  svg: 1, g: 1, defs: 1, symbol: 1, use: 1,
+  // Shape
+  circle: 1, ellipse: 1, line: 1, path: 1, polygon: 1, polyline: 1, rect: 1,
+  // Text  (no HTML collision: HTML has no <text>, <tspan>, or <textPath>)
+  text: 1, tspan: 1, textPath: 1,
+  // Gradient / paint
+  linearGradient: 1, radialGradient: 1, stop: 1, pattern: 1,
+  // Clipping / masking
+  clipPath: 1, mask: 1,
+  // Marker
+  marker: 1,
+  // Filter primitives
+  filter: 1, feBlend: 1, feColorMatrix: 1, feComponentTransfer: 1,
+  feComposite: 1, feConvolveMatrix: 1, feDiffuseLighting: 1,
+  feDisplacementMap: 1, feDropShadow: 1, feFlood: 1, feGaussianBlur: 1,
+  feImage: 1, feMerge: 1, feMergeNode: 1, feMorphology: 1, feOffset: 1,
+  fePointLight: 1, feSpecularLighting: 1, feSpotLight: 1, feTile: 1,
+  feTurbulence: 1, feFuncR: 1, feFuncG: 1, feFuncB: 1, feFuncA: 1,
+  // Descriptive  (excluding 'title' — collides with HTML <title>)
+  desc: 1, metadata: 1,
+  // Other  (excluding 'a', 'image', 'style', 'script' — collide with HTML)
+  foreignObject: 1, switch: 1,
+  // Animation
+  animate: 1, animateMotion: 1, animateTransform: 1, set: 1, mpath: 1,
+}
 
 export const svg = (v) => v.sel in svgPropsMap

package/src/switchable.js

@@ -30,7 +30,7 @@ export default function switchable(factories, name$, initial, opts={}) {
     const mapFunction = (nameType === 'function' && name$) || (state => state[name$])
     return sources => {
       const state$ = sources && ((typeof stateSourceName === 'string' && sources[stateSourceName]) || sources.STATE || sources.state).stream
-      if (!state$ instanceof Stream) throw new Error(`Could not find the state source: ${ stateSourceName }`)
+      if (!(state$ instanceof Stream)) throw new Error(`Could not find the state source: ${stateSourceName}`)
       const _name$ = state$
         .map(mapFunction)
         .filter(name => typeof name === 'string')