sygnal 3.1.0 → 4.0.1

package/dist/index.cjs.js

@@ -2,9 +2,9 @@
 
 var isolate = require('@cycle/isolate');
 var state = require('@cycle/state');
+var dom = require('@cycle/dom');
 var xs$1 = require('xstream');
 var run$1 = require('@cycle/run');
-var dom = require('@cycle/dom');
 
 function collection(component, stateLense, opts={}) {
   const {
@@ -66,6 +66,13 @@ function collection(component, stateLense, opts={}) {
   return isolate(state.makeCollection(collectionOpts), isolateOpts)(sources)
 }
 
+const Collection = (props) => {
+  const { children, ...sanitizedProps } = props;
+  return dom.h('collection', { props: sanitizedProps }, children)
+};
+Collection.label = 'collection';
+Collection.preventInstantiation = true;
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var dropRepeats$1 = {};
@@ -2845,6 +2852,13 @@ function _switchable (factories, sources, name$, switched=['DOM'], stateSourceNa
   return switchedSinks
 }
 
+const Switchable = (props) => {
+  const { children, ...sanitizedProps } = props;
+  return dom.h('switchable', { props: sanitizedProps }, children)
+};
+Switchable.label = 'switchable';
+Switchable.preventInstantiation = true;
+
 var delay$1 = {};
 
 Object.defineProperty(delay$1, "__esModule", { value: true });
@@ -3276,7 +3290,8 @@ class Component {
     const props$ = sources.props$;
     if (props$) {
       this.sources.props$ = props$.map(val => {
-        this.currentProps = val;
+        const { sygnalFactory, sygnalOptions, ...sanitizedProps } = val;
+        this.currentProps = sanitizedProps;
         return val
       });
     }
@@ -3420,7 +3435,7 @@ class Component {
     }
 
     const state$ = this.sources[this.stateSourceName]?.stream.startWith({}).compose(_default$5(objIsEqual)) || xs$1.never();
-    const parentContext$ = this.sources.__parentContext$.startWith({}).compose(_default$5(objIsEqual)) || xs$1.of({});
+    const parentContext$ = this.sources.__parentContext$?.startWith({}).compose(_default$5(objIsEqual)) || xs$1.of({});
     if (this.context && !isObj(this.context)) {
       console.error(`[${this.name}] Context must be an object mapping names to values of functions: ignoring provided ${ typeof this.context }`);
     }
@@ -3610,7 +3625,11 @@ class Component {
     const renderParameters$ = this.collectRenderParameters();
 
     this.vdom$ = renderParameters$
-      .map(this.view)
+      .map(params => {
+        const { props, state, children, context, ...peers } = params;
+        const { sygnalFactory, sygnalOptions, ...sanitizedProps} = props || {};
+        return this.view({ ...sanitizedProps, state, children, context, peers }, state, context, peers)
+      })
       .compose(this.log('View rendered'))
       .map(vDom => vDom || { sel: 'div', data: {}, children: [] })
       .compose(this.instantiateSubComponents.bind(this))
@@ -3653,20 +3672,22 @@ class Component {
             this.log(`<${ name }> Triggered a next() action: <${ type }> ${ delay }ms delay`, true);
           };
 
-          const extra = { props: this.currentProps, children: this.currentChildren, context: this.currentContext };
+          const props = { ...this.currentProps, children: this.currentChildren, context: this.currentContext };
 
           let data = action.data;
           if (isStateSink) {
             return (state) => {
               const _state = this.isSubComponent ? this.currentState : state;
               const enhancedState = this.addCalculated(_state);
-              const newState = reducer(enhancedState, data, next, extra);
+              props.state = enhancedState;
+              const newState = reducer(enhancedState, data, next, props);
               if (newState == ABORT$1) return _state
               return this.cleanupCalculated(newState)
             }
           } else {
             const enhancedState = this.addCalculated(this.currentState);
-            const reduced = reducer(enhancedState, data, next, extra);
+            props.state = enhancedState;
+            const reduced = reducer(enhancedState, data, next, props);
             const type = typeof reduced;
             if (isObj(reduced) || ['string', 'number', 'boolean', 'function'].includes(type)) return reduced
             if (type == 'undefined') {
@@ -4760,8 +4781,8 @@ function run(app, drivers={}, options={}) {
 /**
  * return a validated and properly separated string of CSS class names from any number of strings, arrays, and objects
  *
- * @param  {...String|Array|Object} args any number of strings or arrays with valid CSS class names, or objects where the keys are valid class names and the values evaluate to true or false
- * @return {String} list of `active` classes separated by spaces
+ * @param  { ...String | Array | Object } args any number of strings or arrays with valid CSS class names, or objects where the keys are valid class names and the values evaluate to true or false
+ * @return { String } list of `active` classes separated by spaces
  *
  * any `string` or `array` arguments are simply validated and appended to the result
  * `objects` will evaluate the values (which can be booleans or functions), and the keys with `thruthy` values will be validated and appended to the result
@@ -5124,6 +5145,8 @@ var _default = sampleCombine$1.default = sampleCombine;
 
 exports.xs = xs$1;
 exports.ABORT = ABORT$1;
+exports.Collection = Collection;
+exports.Switchable = Switchable;
 exports.classes = classes;
 exports.collection = collection;
 exports.component = component;

package/dist/index.d.ts

@@ -0,0 +1,221 @@
+/// <reference path="../src/sygnal.d.ts" />
+import { Stream } from 'xstream';
+export { MemoryStream, Stream } from 'xstream';
+import { MainDOMSource } from '@cycle/dom';
+import { StateSource } from '@cycle/state';
+
+type ABORT = '~#~#~ABORT~#~#~'
+
+/**
+ * A function that takes component properties and returns a JSX element.
+ *
+ * @template STATE - State type
+ * @template PROPS - Props type
+ * @template CONTEXT - Context type
+ *
+ * @param { PROPS & { state?: STATE, children?: JSX.Element | JSX.Element[], context?: CONTEXT } } props - Component props augmented with the current state, children, context, and any peers
+ * @returns { JSX.Element } The JSX element rendered by the component.
+ */
+type ComponentProps<STATE, PROPS, CONTEXT> = (
+  props: PROPS & { state?: STATE, children?: JSX.Element | JSX.Element[], context?: CONTEXT },
+  state: STATE,
+  context: CONTEXT,
+  peers: { [peer: string]: JSX.Element | JSX.Element[] }
+) => JSX.Element;
+
+
+type NextFunction<ACTIONS=any> = ACTIONS extends object
+  ? <ACTION_KEY extends keyof ACTIONS>(
+      action: ACTION_KEY,
+      data?: ACTIONS[ACTION_KEY],
+      delay?: number
+    ) => void
+  : (action: string, data?: any, delay?: number) => void;
+
+type Reducer<STATE, PROPS, ACTIONS = any, DATA = any, RETURN = any> = (
+  state: STATE,
+  args: DATA,
+  next: NextFunction<ACTIONS>,
+  props: PROPS
+) => RETURN | ABORT | undefined;
+
+type StateOnlyReducer<STATE, RETURN = any> = (
+  state: STATE
+) => RETURN | ABORT;
+
+type Event<DATA=any> = { type: string, data: DATA }
+
+/**
+ * Valid values for a sink
+ * 
+ * - true: Whatever value is received from the intent for this action is passed on as-is.
+ * - Function: A reducer
+ */
+type SinkValue<STATE, PROPS, ACTIONS, DATA, RETURN> = true | Reducer<STATE, PROPS, ACTIONS, DATA, RETURN> 
+
+type DefaultSinks<STATE, PROPS, ACTIONS, DATA> = {
+  STATE?: SinkValue<STATE, PROPS, ACTIONS, DATA, STATE>;
+  EVENTS?: SinkValue<STATE, PROPS, ACTIONS, DATA, Event>;
+  LOG?: SinkValue<STATE, PROPS, ACTIONS, DATA, any>;
+  PARENT?: SinkValue<STATE, PROPS, ACTIONS, DATA, any>;
+};
+
+type CustomDriverSinks<STATE, PROPS, DRIVERS, ACTIONS, ACTION_ENTRY> = keyof DRIVERS extends never ? {
+  [driver: string]: SinkValue<STATE, PROPS, ACTIONS, any, any>;
+} : {
+  [DRIVER_KEY in keyof DRIVERS]: SinkValue<STATE, PROPS, ACTIONS, ACTION_ENTRY, DRIVERS[DRIVER_KEY] extends { source: any, sink: any } ? DRIVERS[DRIVER_KEY]["sink"] : any>;
+}
+
+type ModelEntry<STATE, PROPS, DRIVERS, ACTIONS, ACTION_ENTRY> = SinkValue<STATE, PROPS, ACTIONS, ACTION_ENTRY, STATE> | Partial<DefaultSinks<STATE, PROPS, ACTIONS, ACTION_ENTRY> & CustomDriverSinks<STATE, PROPS, DRIVERS, ACTIONS, ACTION_ENTRY>>;
+
+type WithDefaultActions<STATE, ACTIONS> = ACTIONS & {
+  BOOTSTRAP?: never;
+  INITIALIZE?: STATE;
+  HYDRATE?: any;
+} 
+
+type ComponentModel<STATE, PROPS, DRIVERS, ACTIONS> = keyof ACTIONS extends never ? {
+  [action: string]: ModelEntry<STATE, PROPS, DRIVERS, WithDefaultActions<STATE, { [action: string]: any }>, any>;
+} : {
+  [ACTION_KEY in keyof WithDefaultActions<STATE, ACTIONS>]?: ModelEntry<STATE, PROPS, DRIVERS, WithDefaultActions<STATE, ACTIONS>, WithDefaultActions<STATE, ACTIONS>[ACTION_KEY]>;
+};
+
+type ChildSource = {
+  select: (type: string) => Stream<any>
+}
+
+type DefaultDrivers<STATE, EVENTS=any> = {
+  STATE: {
+    source: StateSource<STATE>;
+    sink: STATE; 
+  };
+  DOM: {
+    source: MainDOMSource;
+    sink: never;
+  };
+  EVENTS: {
+    source: Stream<Event<EVENTS>>;
+    sink: EVENTS;
+  };
+  LOG: {
+    source: never;
+    sink: any;
+  }
+  CHILD: {
+    source: ChildSource;
+    sink: never;
+  }
+}
+
+type Sources<DRIVERS> = {
+  [DRIVER_KEY in keyof DRIVERS]: DRIVERS[DRIVER_KEY] extends { source: infer SOURCE } ? SOURCE : never;
+}
+
+type Actions<ACTIONS> = keyof ACTIONS extends never ? {
+  [action: string]: Stream<any>;
+} : {
+  [ACTION_KEY in keyof ACTIONS]: Stream<ACTIONS[ACTION_KEY]>;
+}
+
+type CombinedSources<STATE, DRIVERS> = Sources<DefaultDrivers<STATE> & DRIVERS>;
+
+interface ComponentIntent<STATE, DRIVERS, ACTIONS> {
+  (args: CombinedSources<STATE, DRIVERS>): Partial<Actions<ACTIONS>>;
+}
+
+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]>;
+}
+
+type Context<STATE, CONTEXT> = keyof CONTEXT extends never ? {
+  [field: string]: boolean | StateOnlyReducer<STATE, any>;
+} : {
+  [CONTEXT_KEY in keyof CONTEXT]: boolean | StateOnlyReducer<STATE, CONTEXT[CONTEXT_KEY]>;
+}
+
+type Lense<PARENT_STATE=any, CHILD_STATE=any> = {
+  get: (state: PARENT_STATE) => CHILD_STATE;
+  set: (state: PARENT_STATE, childState: CHILD_STATE) => PARENT_STATE;
+}
+
+type Filter<ITEM=any> = (item: ITEM) => boolean
+
+type SortFunction<ITEM=any> = (a: ITEM, b: ITEM) => number
+type SortObject<ITEM=any> = {
+  [field: string]: 'asc' | 'dec' | SortFunction<ITEM>;
+}
+
+type FixDrivers<DRIVERS> = 
+    0 extends (1 & DRIVERS) 
+        ? {} 
+        : DRIVERS extends object 
+            ? DRIVERS 
+            : {};
+/**
+ * Sygnal Component
+ * @template STATE - State
+ * @template PROPS - Props (from JSX element)
+ * @template DRIVERS - Custom Drivers (default drivers are automatically applied)
+ * @template ACTIONS - Actions (key = action name; value = type expected for Observable values for that action)
+ * @template CALCULATED - Calculated state values (key = calculated variable name; value = type of the calculated variable)
+ * @template CONTEXT - Context (key = context variable name; value = type of the context variable)
+ */
+type Component<STATE=any, PROPS={[prop: string]: any}, DRIVERS={}, ACTIONS={}, CALCULATED={}, CONTEXT={}> = ComponentProps<STATE & CALCULATED, PROPS, CONTEXT> & {
+  label?: string;
+  DOMSourceName?: string;
+  stateSourceName?: string;
+  requestSourceName?: string;
+  model?: ComponentModel<STATE & CALCULATED, PROPS, FixDrivers<DRIVERS>, ACTIONS>;
+  intent?: ComponentIntent<STATE & CALCULATED, FixDrivers<DRIVERS>, ACTIONS>;
+  initialState?: STATE;
+  calculated?: Calculated<STATE, CALCULATED>;
+  storeCalculatedInState?: boolean;
+  context?: Context<STATE & CALCULATED, CONTEXT>;
+  peers?: { [name: string]: Component };
+  components?: { [name: string]: Component };
+  debug?: boolean;
+};
+
+/**
+ * Sygnal Root Component
+ * @template STATE - State
+ * @template DRIVERS - Custom Drivers (default drivers are automatically applied)
+ * @template ACTIONS - Actions (key = action name; value = type expected for Observable values for that action)
+ * @template CALCULATED - Calculated state values (key = calculated variable name; value = type of the calculated variable)
+ * @template CONTEXT - Context (key = context variable name; value = type of the context variable)
+ */
+type RootComponent<STATE=any, DRIVERS={}, ACTIONS={}, CALCULATED=any, CONTEXT=any> = Component<STATE, any, DRIVERS, ACTIONS, CALCULATED, CONTEXT>
+
+type CollectionProps<PROPS=any> = {
+  of: any;
+  from: string | Lense;
+  filter?: Filter;
+  sort?: string | SortFunction | SortObject;
+} & Omit<PROPS, 'of' | 'from' | 'filter' | 'sort'>;
+
+type SwitchableProps<PROPS=any> = {
+  of: any;
+  current: string;
+  state?: string | Lense;
+} & Omit<PROPS, 'of' | 'state' | 'current'>;
+
+/**
+ * JSX Types
+ */
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [elemName: string]: any;
+      collection: CollectionProps<any>;
+      switchable: SwitchableProps<any>;
+    }
+
+    interface Element {
+      children?: JSX.Element;
+    }
+  }
+}
+
+export type { CollectionProps, Component, Event, Filter, Lense, RootComponent, SortFunction, SortObject, SwitchableProps };

package/dist/index.esm.js

@@ -1,10 +1,10 @@
 import isolate from '@cycle/isolate';
 import { makeCollection, StateSource, withState } from '@cycle/state';
+import { h, makeDOMDriver } from '@cycle/dom';
+export * from '@cycle/dom';
 import xs$1, { Stream as Stream$1 } from 'xstream';
 export { default as xs } from 'xstream';
 import { setup } from '@cycle/run';
-import { makeDOMDriver } from '@cycle/dom';
-export * from '@cycle/dom';
 
 function collection(component, stateLense, opts={}) {
   const {
@@ -66,6 +66,13 @@ function collection(component, stateLense, opts={}) {
   return isolate(makeCollection(collectionOpts), isolateOpts)(sources)
 }
 
+const Collection = (props) => {
+  const { children, ...sanitizedProps } = props;
+  return h('collection', { props: sanitizedProps }, children)
+};
+Collection.label = 'collection';
+Collection.preventInstantiation = true;
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var dropRepeats$1 = {};
@@ -2845,6 +2852,13 @@ function _switchable (factories, sources, name$, switched=['DOM'], stateSourceNa
   return switchedSinks
 }
 
+const Switchable = (props) => {
+  const { children, ...sanitizedProps } = props;
+  return h('switchable', { props: sanitizedProps }, children)
+};
+Switchable.label = 'switchable';
+Switchable.preventInstantiation = true;
+
 var delay$1 = {};
 
 Object.defineProperty(delay$1, "__esModule", { value: true });
@@ -3276,7 +3290,8 @@ class Component {
     const props$ = sources.props$;
     if (props$) {
       this.sources.props$ = props$.map(val => {
-        this.currentProps = val;
+        const { sygnalFactory, sygnalOptions, ...sanitizedProps } = val;
+        this.currentProps = sanitizedProps;
         return val
       });
     }
@@ -3420,7 +3435,7 @@ class Component {
     }
 
     const state$ = this.sources[this.stateSourceName]?.stream.startWith({}).compose(_default$5(objIsEqual)) || xs$1.never();
-    const parentContext$ = this.sources.__parentContext$.startWith({}).compose(_default$5(objIsEqual)) || xs$1.of({});
+    const parentContext$ = this.sources.__parentContext$?.startWith({}).compose(_default$5(objIsEqual)) || xs$1.of({});
     if (this.context && !isObj(this.context)) {
       console.error(`[${this.name}] Context must be an object mapping names to values of functions: ignoring provided ${ typeof this.context }`);
     }
@@ -3610,7 +3625,11 @@ class Component {
     const renderParameters$ = this.collectRenderParameters();
 
     this.vdom$ = renderParameters$
-      .map(this.view)
+      .map(params => {
+        const { props, state, children, context, ...peers } = params;
+        const { sygnalFactory, sygnalOptions, ...sanitizedProps} = props || {};
+        return this.view({ ...sanitizedProps, state, children, context, peers }, state, context, peers)
+      })
       .compose(this.log('View rendered'))
       .map(vDom => vDom || { sel: 'div', data: {}, children: [] })
       .compose(this.instantiateSubComponents.bind(this))
@@ -3653,20 +3672,22 @@ class Component {
             this.log(`<${ name }> Triggered a next() action: <${ type }> ${ delay }ms delay`, true);
           };
 
-          const extra = { props: this.currentProps, children: this.currentChildren, context: this.currentContext };
+          const props = { ...this.currentProps, children: this.currentChildren, context: this.currentContext };
 
           let data = action.data;
           if (isStateSink) {
             return (state) => {
               const _state = this.isSubComponent ? this.currentState : state;
               const enhancedState = this.addCalculated(_state);
-              const newState = reducer(enhancedState, data, next, extra);
+              props.state = enhancedState;
+              const newState = reducer(enhancedState, data, next, props);
               if (newState == ABORT$1) return _state
               return this.cleanupCalculated(newState)
             }
           } else {
             const enhancedState = this.addCalculated(this.currentState);
-            const reduced = reducer(enhancedState, data, next, extra);
+            props.state = enhancedState;
+            const reduced = reducer(enhancedState, data, next, props);
             const type = typeof reduced;
             if (isObj(reduced) || ['string', 'number', 'boolean', 'function'].includes(type)) return reduced
             if (type == 'undefined') {
@@ -4760,8 +4781,8 @@ function run(app, drivers={}, options={}) {
 /**
  * return a validated and properly separated string of CSS class names from any number of strings, arrays, and objects
  *
- * @param  {...String|Array|Object} args any number of strings or arrays with valid CSS class names, or objects where the keys are valid class names and the values evaluate to true or false
- * @return {String} list of `active` classes separated by spaces
+ * @param  { ...String | Array | Object } args any number of strings or arrays with valid CSS class names, or objects where the keys are valid class names and the values evaluate to true or false
+ * @return { String } list of `active` classes separated by spaces
  *
  * any `string` or `array` arguments are simply validated and appended to the result
  * `objects` will evaluate the values (which can be booleans or functions), and the keys with `thruthy` values will be validated and appended to the result
@@ -5122,4 +5143,4 @@ sampleCombine = function sampleCombine() {
 };
 var _default = sampleCombine$1.default = sampleCombine;
 
-export { ABORT$1 as ABORT, classes, collection, component, _default$2 as debounce, _default$4 as delay, driverFromAsync, _default$5 as dropRepeats, processForm, run, _default as sampleCombine, switchable, _default$1 as throttle };
+export { ABORT$1 as ABORT, Collection, Switchable, classes, collection, component, _default$2 as debounce, _default$4 as delay, driverFromAsync, _default$5 as dropRepeats, processForm, run, _default as sampleCombine, switchable, _default$1 as throttle };

package/dist/jsx-dev-runtime.js

@@ -0,0 +1,224 @@
+import _extend from 'extend';
+
+const undefinedv = (v) => v === undefined;
+
+const number = (v) => typeof v === 'number';
+
+const string = (v) => typeof v === 'string';
+
+const text = (v) => string(v) || number(v);
+
+const array = (v) => Array.isArray(v);
+
+const object = (v) => typeof v === 'object' && v !== null;
+
+const fun = (v) => typeof v === 'function';
+
+const vnode$1 = (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 svg = (v) => v.sel in svgPropsMap;
+
+// TODO: stop using extend here
+
+const extend = (...objs) => _extend(true, ...objs);
+
+const assign = (...objs) => _extend(false, ...objs);
+
+const reduceDeep = (arr, fn, initial) => {
+  let result = initial;
+  for (let i = 0; i < arr.length; i++) {
+    const value = arr[i];
+    if (array(value)) {
+      result = reduceDeep(value, fn, result);
+    } else {
+      result = fn(result, value);
+    }
+  }
+  return result
+};
+
+const mapObject = (obj, fn) => Object.keys(obj).map(
+  (key) => fn(key, obj[key])
+).reduce(
+  (acc, curr) => extend(acc, curr),
+  {}
+);
+
+const deepifyKeys = (obj, modules) => mapObject(obj,
+  (key, val) => {
+    const dashIndex = key.indexOf('-');
+    if (dashIndex > -1 && modules[key.slice(0, dashIndex)] !== undefined) {
+      const moduleData = {
+        [key.slice(dashIndex + 1)]: val
+      };
+      return {
+        [key.slice(0, dashIndex)]: moduleData
+      }
+    }
+    return { [key]: val }
+  }
+);
+
+const omit = (key, obj) => mapObject(obj,
+  (mod, data) => mod !== key ? ({ [mod]: data }) : {}
+);
+
+// Const fnName = (...params) => guard ? default : ...
+
+const createTextElement = (text$1) => !text(text$1) ? undefined : {
+  text: text$1,
+  sel: undefined,
+  data: undefined,
+  children: undefined,
+  elm: undefined,
+  key: undefined
+};
+
+const considerSvg = (vnode) => !svg(vnode) ? vnode :
+  assign(vnode,
+    { data: omit('props', extend(vnode.data,
+      { ns: 'http://www.w3.org/2000/svg', attrs: omit('className', extend(vnode.data.props,
+        { class: vnode.data.props ? vnode.data.props.className : undefined }
+      )) }
+    )) },
+    { children: undefinedv(vnode.children) ? undefined :
+      vnode.children.map((child) => considerSvg(child))
+    }
+  );
+
+const rewrites = {
+  for: 'attrs',
+  role: 'attrs',
+  tabindex: 'attrs',
+  'aria-*': 'attrs',
+  key: null
+};
+
+const rewriteModules = (data, modules) => mapObject(data, (key, val) => {
+  const inner = { [key]: val };
+  if (rewrites[key] && modules[rewrites[key]] !== undefined) {
+    return { [rewrites[key]]: inner }
+  }
+  if (rewrites[key] === null) {
+    return {}
+  }
+  const keys = Object.keys(rewrites);
+  for (let i = 0; i < keys.length; i++) {
+    const k = keys[i];
+    if (k.charAt(k.length - 1) === '*' && key.indexOf(k.slice(0, -1)) === 0 && modules[rewrites[k]] !== undefined) {
+      return { [rewrites[k]]: inner }
+    }
+  }
+  if (modules[key] !== undefined) {
+    return { [modules[key] ? modules[key] : key]: val }
+  }
+  if (modules.props !== undefined) {
+    return { props: inner }
+  }
+  return inner
+});
+
+const sanitizeData = (data, modules) => considerSvg(rewriteModules(deepifyKeys(data, modules), modules));
+
+const sanitizeText = (children) => children.length > 1 || !text(children[0]) ? undefined : children[0].toString();
+
+const sanitizeChildren = (children) => reduceDeep(children, (acc, child) => {
+  const vnode = vnode$1(child) ? child : createTextElement(child);
+  acc.push(vnode);
+  return acc
+}
+, []);
+
+const defaultModules = {
+  attrs: '',
+  props: '',
+  class: '',
+  data: 'dataset',
+  style: '',
+  hook: '',
+  on: ''
+};
+
+const createElementWithModules = (modules) => {
+  return (sel, data, ...children) => {
+    if (typeof sel === 'undefined') {
+      sel = 'UNDEFINED';
+      console.error('JSX Error: Capitalized HTML element without corresponding factory function.  Components with names where the first letter is capital MUST be defined or included at the parent component\'s file scope.');
+    }
+    if (fun(sel)) {
+      if (sel.name === 'Fragment') {
+        return sel(data || {}, children)
+      }
+      data ||= {};
+      if (!sel.isSygnalComponent) {
+        const name = sel.componentName || sel.label || sel.name || 'FUNCTION_COMPONENT';
+        const view = sel;
+        const { model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = sel;
+        const options = { name, view, model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
+        data.sygnalOptions = options;
+        sel = name;
+      } else {
+        const factory = sel;
+        sel = sel.componentName || sel.label || sel.name || 'sygnal-factory';
+        data.sygnalFactory = factory;
+      }
+    }
+    const text = sanitizeText(children);
+    return considerSvg({
+      sel,
+      data: data ? sanitizeData(data, modules) : {},
+      children: typeof text !== 'undefined' ? createTextElement(text) : sanitizeChildren(children),
+      text,
+      elm: undefined,
+      key: data ? data.key : undefined
+    })
+  }
+};
+
+const createElement = createElementWithModules(defaultModules);
+
+function vnode(sel, data, children, text, elm) {
+    const key = data === undefined ? undefined : data.key;
+    return { sel, data, children, text, elm, key };
+}
+
+/* eslint-disable @typescript-eslint/no-namespace, import/export */
+function Fragment(data, ...children) {
+    const flatChildren = flattenAndFilter(children, []);
+    if (flatChildren.length === 1 &&
+        !flatChildren[0].sel &&
+        flatChildren[0].text) {
+        // only child is a simple text node, pass as text for a simpler vtree
+        return vnode(undefined, undefined, undefined, flatChildren[0].text, undefined);
+    }
+    else {
+        return vnode(undefined, data !== null && data !== void 0 ? data : {}, flatChildren, undefined, undefined);
+    }
+}
+function flattenAndFilter(children, flattened) {
+    for (const child of children) {
+        // filter out falsey children, except 0 since zero can be a valid value e.g inside a chart
+        if (child !== undefined &&
+            child !== null &&
+            child !== false &&
+            child !== "") {
+            if (Array.isArray(child)) {
+                flattenAndFilter(child, flattened);
+            }
+            else if (typeof child === "string" ||
+                typeof child === "number" ||
+                typeof child === "boolean") {
+                flattened.push(vnode(undefined, undefined, undefined, String(child), undefined));
+            }
+            else {
+                flattened.push(child);
+            }
+        }
+    }
+    return flattened;
+}
+
+export { Fragment, createElement as jsxDEV };