sygnal 3.0.1 → 4.0.0

package/README.md

@@ -623,12 +623,13 @@ RootComponent.model = {
 
 Another very common task in web pages and browser applications is to work with form inputs.  Unfortunately, the logic and stream plumbing required to do this routine task can be challenging to developers new to observables (and is frustrating even for most veterans).  Sygnal's processForm() helper function takes any HTML form element, and automatically extracts the values from all input fields contained within it.  By default processForm() listens to both 'input' and 'submit' events, but can be configured to listen to any combination of standard or custom events on the form itself or its inputs.
 
-The Observable from `processForm` always returns objects with the current value of every field in the form, so the following will print something like:
+The Observable from `processForm` always returns objects with the current value of every field in the form along with the name of the JS event that initiated it, so the following will print something like:
 
 ```javascript
 {
-  'first-name': 'First',
-  'last-name': 'Last'
+  'first-name': 'Bob',
+  'last-name': 'Smith',
+  eventType: 'submit'
 }
 ```
 
@@ -683,7 +684,7 @@ npm run build
 The results will be in the 'dist' folder, and you can serve it locally by running:
 
 ```bash
-npm preview
+npm run preview
 ```
 
 Alternatively, you can use any other bundler of your choice (Webpack, Babel, Rollup, etc.).  To use JSX in your components while using alternative bundlers, you will need to configure your bundler to use Sygnal's JSX pragma. This is slightly different for each bundler, but looks generally like:

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 });
@@ -3154,7 +3168,7 @@ const CHILD_SOURCE_NAME = 'CHILD';
 let COMPONENT_COUNT   = 0;
 
 
-const ABORT = '~#~#~ABORT~#~#~';
+const ABORT$1 = '~#~#~ABORT~#~#~';
 
 function component (opts) {
   const { name, sources, isolateOpts, stateSourceName='STATE' } = opts;
@@ -3239,13 +3253,14 @@ class Component {
   // [ OUTPUT ]
   // sinks
 
-  constructor({ name='NO NAME', sources, intent, model, context, response, view, peers={}, components={}, initialState, calculated, storeCalculatedInState=true, DOMSourceName='DOM', stateSourceName='STATE', requestSourceName='HTTP', debug=false }) {
+  constructor({ name='NO NAME', sources, intent, model, hmrActions, context, response, view, peers={}, components={}, initialState, calculated, storeCalculatedInState=true, DOMSourceName='DOM', stateSourceName='STATE', requestSourceName='HTTP', debug=false }) {
     if (!sources || !isObj(sources)) throw new Error('Missing or invalid sources')
 
     this.name       = name;
     this.sources    = sources;
     this.intent     = intent;
     this.model      = model;
+    this.hmrActions = hmrActions;
     this.context    = context;
     this.response   = response;
     this.view       = view;
@@ -3275,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
       });
     }
@@ -3306,6 +3322,7 @@ class Component {
 
     this.initChildSources$();
     this.initIntent$();
+    this.initHmrActions();
     this.initAction$();
     this.initState();
     this.initContext();
@@ -3340,6 +3357,23 @@ class Component {
     }
   }
 
+  initHmrActions() {
+    if (typeof this.hmrActions === 'undefined') {
+      this.hmrAction$ = xs$1.of().filter(_ => false);
+      return
+    }
+    if (typeof this.hmrActions === 'string') {
+      this.hmrActions = [this.hmrActions];
+    }
+    if (!Array.isArray(this.hmrActions)) {
+      throw new Error(`[${ this.name }] hmrActions must be the name of an action or an array of names of actions to run when a component is hot-reloaded`)
+    }
+    if (this.hmrActions.some(action => typeof action !== 'string')) {
+      throw new Error(`[${ this.name }] hmrActions must be the name of an action or an array of names of actions to run when a component is hot-reloaded`)
+    }
+    this.hmrAction$ = xs$1.fromArray(this.hmrActions.map(action => ({ type: action })));
+  }
+
   initAction$() {
     const requestSource  = (this.sources && this.sources[this.requestSourceName]) || null;
 
@@ -3359,11 +3393,12 @@ class Component {
 
     const action$    = ((runner instanceof xs$1.Stream) ? runner : (runner.apply && runner(this.sources) || xs$1.never()));
     const bootstrap$ = xs$1.of({ type: BOOTSTRAP_ACTION }).compose(_default$4(10));
-    const wrapped$   = this.model[BOOTSTRAP_ACTION] ? _default$3(bootstrap$, action$) : _default$3(xs$1.of({}).compose(_default$4(1)), action$);
+    const hmrAction$ = window?.__SYGNAL_HMR_UPDATING === true ? this.hmrAction$ : xs$1.of().filter(_ => false);
+    const wrapped$   = (this.model[BOOTSTRAP_ACTION] && window?.__SYGNAL_HMR_UPDATING !== true) ? _default$3(bootstrap$, action$) : _default$3(xs$1.of().compose(_default$4(1)).filter(_ => false), hmrAction$, action$);
 
 
     let initialApiData;
-    if (requestSource && typeof requestSource.select == 'function') {
+    if (window?.__SYGNAL_HMR_UPDATING !== true && requestSource && typeof requestSource.select == 'function') {
       initialApiData = requestSource.select('initial')
         .flatten();
     } else {
@@ -3377,12 +3412,12 @@ class Component {
   }
 
   initState() {
-    if (this.model != undefined) {
+    if (this.model !== undefined) {
       if (this.model[INITIALIZE_ACTION] === undefined) {
         this.model[INITIALIZE_ACTION] = {
           [this.stateSourceName]: (_, data) => ({ ...this.addCalculated(data) })
         };
-      } else {
+      } else if (isObj(this.model[INITIALIZE_ACTION])) {
         Object.keys(this.model[INITIALIZE_ACTION]).forEach(name => {
           if (name !== this.stateSourceName) {
             console.warn(`${ INITIALIZE_ACTION } can only be used with the ${ this.stateSourceName } source... disregarding ${ name }`);
@@ -3400,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 }`);
     }
@@ -3448,7 +3483,7 @@ class Component {
     if (this.isSubComponent && this.initialState) {
       console.warn(`[${ this.name }] Initial state provided to sub-component. This will overwrite any state provided by the parent component.`);
     }
-    const shimmed$ = this.initialState ? _default$3(xs$1.of(initial), this.action$).compose(_default$4(0)) : this.action$;
+    const shimmed$ = (this.initialState && window?.__SYGNAL_HMR_UPDATING !== true) ? _default$3(xs$1.of(initial), this.action$).compose(_default$4(0)) : this.action$;
     const onState  = () => this.makeOnAction(shimmed$, true, this.action$);
     const onNormal = () => this.makeOnAction(this.action$, false, this.action$);
 
@@ -3590,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))
@@ -3633,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);
-              if (newState == ABORT) return _state
+              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') {
@@ -3655,7 +3696,7 @@ class Component {
             }
             throw new Error(`Invalid reducer type for ${ name } ${ type }`)
           }
-        }).filter(result => result != ABORT);
+        }).filter(result => result != ABORT$1);
       } else if (reducer === undefined || reducer === true) {
         returnStream$ = filtered$.map(({data}) => data);
       } else {
@@ -3914,8 +3955,8 @@ class Component {
       } else {
         const name = collectionOf.componentName || collectionOf.label || collectionOf.name || 'FUNCTION_COMPONENT';
         const view = collectionOf;
-        const { model, intent, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = collectionOf;
-        const options = { name, view, model, intent, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
+        const { model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = collectionOf;
+        const options = { name, view, model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
         factory = component(options);
       }
     } else if (this.components[collectionOf]) {
@@ -4066,8 +4107,8 @@ class Component {
       if (!current.isSygnalComponent) {
         const name = current.componentName || current.label || current.name || 'FUNCTION_COMPONENT';
         const view = current;
-        const { model, intent, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = current;
-        const options = { name, view, model, intent, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
+        const { model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = current;
+        const options = { name, view, model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
         switchableComponents[key] = component(options);
       }
     });
@@ -4682,34 +4723,66 @@ function logDriver(out$) {
 }
 
 function run(app, drivers={}, options={}) {
-  const { mountPoint='#root', fragments=true } = options;
+  const { mountPoint='#root', fragments=true, useDefaultDrivers=true } = options;
   if (!app.isSygnalComponent) {
     const name = app.name || app.componentName || app.label || "FUNCTIONAL_COMPONENT";
     const view = app;
-    const { model, intent, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = app;
-    const options = { name, view, model, intent, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
+    const { model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = app;
+    const options = { name, view, model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
 
     app = component(options);
   }
 
   const wrapped = state.withState(app, 'STATE');
 
-  const baseDrivers = {
+  const baseDrivers = useDefaultDrivers ? {
     EVENTS: eventBusDriver,
     DOM:    dom.makeDOMDriver(mountPoint, { snabbdomOptions: { experimental: { fragments } } }),
     LOG:    logDriver
-  };
+  } : {};
 
   const combinedDrivers = { ...baseDrivers, ...drivers };
 
-  return run$1.run(wrapped, combinedDrivers)
+  const { sources, sinks, run: _run } = run$1.setup(wrapped, combinedDrivers);
+  const dispose = _run();
+
+  const exposed = { sources, sinks, dispose };
+
+  const hmr = (newComponent) => {
+    exposed.sinks.STATE.shamefullySendNext((state) => {
+      window.__SYGNAL_HMR_UPDATING = true;
+      exposed.dispose();
+      const App = newComponent.default;
+      App.initialState = state;
+      const updated = run(App, drivers);
+      exposed.sources = updated.sources;
+      exposed.sinks = updated.sinks;
+      exposed.dispose = updated.dispose;
+      updated.sinks.STATE.shamefullySendNext(() => {
+        return { ...state }
+      });
+      updated.sources.STATE.stream.setDebugListener({
+        next: () => {
+          exposed.sources.STATE.stream.setDebugListener(null);
+          setTimeout(() => {
+            window.__SYGNAL_HMR_UPDATING = false;
+          }, 100);
+        }
+      });
+      return ABORT
+    });
+  };
+
+  exposed.hmr = hmr;
+
+  return exposed
 }
 
 /**
  * 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
@@ -5071,7 +5144,9 @@ sampleCombine = function sampleCombine() {
 var _default = sampleCombine$1.default = sampleCombine;
 
 exports.xs = xs$1;
-exports.ABORT = ABORT;
+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,222 @@
+/// <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]>;
+}
+
+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, ACTIONS>, 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<ARRAY=any[]> = (array: ARRAY) => ARRAY
+
+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, PROPS, CONTEXT> & {
+  label?: string;
+  DOMSourceName?: string;
+  stateSourceName?: string;
+  requestSourceName?: string;
+  model?: ComponentModel<STATE, PROPS, FixDrivers<DRIVERS>, ACTIONS>;
+  intent?: ComponentIntent<STATE, FixDrivers<DRIVERS>, ACTIONS>;
+  initialState?: STATE;
+  calculated?: Calculated<STATE, CALCULATED>;
+  storeCalculatedInState?: boolean;
+  context?: Context<STATE, CONTEXT>;
+  peers?: { [name: string]: Component };
+  components?: { [name: string]: Component };
+  debug?: boolean;
+};
+
+/**
+ * Sygnal Root 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 RootComponent<STATE=any, DRIVERS={}, ACTIONS=any, 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 };