sygnal 2.9.2 → 2.9.4

package/dist/index.cjs.js

@@ -3158,7 +3158,7 @@ const ABORT = '~#~#~ABORT~#~#~';
 function component (opts) {
   const { name, sources, isolateOpts, stateSourceName='STATE' } = opts;
 
-  if (sources && typeof sources !== 'object') {
+  if (sources && !isObj(sources)) {
     throw new Error('Sources must be a Cycle.js sources object:', name)
   }
 
@@ -3176,7 +3176,7 @@ function component (opts) {
   const currySources = typeof sources === 'undefined';
   let returnFunction;
 
-  if (typeof fixedIsolateOpts == 'object') {
+  if (isObj(fixedIsolateOpts)) {
     const wrapped = (sources) => {
       const fixedOpts = { ...opts, sources };
       return (new Component(fixedOpts)).sinks
@@ -3240,7 +3240,7 @@ class Component {
   // sinks
 
   constructor({ name='NO NAME', sources, intent, request, model, context, response, view, children={}, components={}, initialState, calculated, storeCalculatedInState=true, DOMSourceName='DOM', stateSourceName='STATE', requestSourceName='HTTP', debug=false }) {
-    if (!sources || typeof sources != 'object') throw new Error('Missing or invalid sources')
+    if (!sources || !isObj(sources)) throw new Error('Missing or invalid sources')
 
     this.name       = name;
     this.sources    = sources;
@@ -3320,7 +3320,7 @@ class Component {
 
     this.intent$ = this.intent(this.sources);
 
-    if (!(this.intent$ instanceof xs$1.Stream) && (typeof this.intent$ != 'object')) {
+    if (!(this.intent$ instanceof xs$1.Stream) && (!isObj(this.intent$))) {
       throw new Error('Intent must return either an action$ stream or map of event streams')
     }
   }
@@ -3364,7 +3364,7 @@ class Component {
   initResponse$() {
     if (typeof this.request == 'undefined') {
       return
-    } else if (typeof this.request != 'object') {
+    } else if (!isObj(this.request)) {
       throw new Error('The request parameter must be an object')
     }
 
@@ -3469,29 +3469,16 @@ class Component {
       this.context$ = xs$1.of({});
       return
     }
-    const repeatChecker = (a, b) => {
-      if (a === b) return true
-      if (typeof a !== 'object' || typeof b !== 'object') {
-        return a === b
-      }
-      const entriesA = Object.entries(a);
-      const entriesB = Object.entries(b);
-      if (entriesA.length === 0 && entriesB.length === 0) return true
-      if (entriesA.length !== entriesB.length) return false
-      return entriesA.every(([name, value]) => {
-        return b[name] === value
-      })
-    };
 
-    const state$ = this.sources[this.stateSourceName]?.stream.startWith({}).compose(_default$5(repeatChecker)) || xs$1.never();
-    const parentContext$ = this.sources.__parentContext$.startWith({}).compose(_default$5(repeatChecker)) || xs$1.of({});
-    if (this.context && typeof this.context !== 'object') {
+    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({});
+    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 }`);
     }
     this.context$ = xs$1.combine(state$, parentContext$)
       .map(([_, parent]) => {
-        const _parent = typeof parent === 'object' ? parent : {};
-        const context = typeof this.context === 'object' ? this.context : {};
+        const _parent = isObj(parent) ? parent : {};
+        const context = isObj(this.context) ? this.context : {};
         const state = this.currentState;
         const values = Object.entries(context).reduce((acc, current) => {
           const [name, value] = current;
@@ -3514,7 +3501,7 @@ class Component {
         this.currentContext = newContext;
         return newContext
       })
-      .compose(_default$5(repeatChecker))
+      .compose(_default$5(objIsEqual))
       .startWith({});
     this.context$.subscribe({ next: _ => _ });
   }
@@ -3548,7 +3535,7 @@ class Component {
         sinks = { [this.stateSourceName]: sinks };
       }
 
-      if (typeof sinks !== 'object') {
+      if (!isObj(sinks)) {
         throw new Error(`Entry for each action must be an object: ${ this.name } ${ action }`)
       }
 
@@ -3614,7 +3601,7 @@ class Component {
     };
 
     const out = this.response(selectable);
-    if (typeof out != 'object') {
+    if (!isObj(out)) {
       throw new Error('The response function must return an object')
     }
 
@@ -3726,7 +3713,7 @@ class Component {
           const next = (type, data, delay=10) => {
             if (typeof delay !== 'number') throw new Error(`[${ this.name } ] Invalid delay value provided to next() function in model action '${ name }'. Must be a number in ms.`)
             const _reqId = action._reqId || (action.req && action.req.id);
-            const _data  = _reqId ? (typeof data == 'object' ? { ...data, _reqId, _action: name } : { data, _reqId, _action: name }) : data;
+            const _data  = _reqId ? (isObj(data) ? { ...data, _reqId, _action: name } : { data, _reqId, _action: name }) : data;
             // put the "next" action request at the end of the event loop so the "current" action completes first
             setTimeout(() => {
               // push the "next" action request into the action$ stream
@@ -3751,7 +3738,7 @@ class Component {
             const type = typeof reduced;
             const _reqId = action._reqId || (action.req && action.req.id);
             if (['string', 'number', 'boolean', 'function'].includes(type)) return reduced
-            if (type == 'object') return { ...reduced, _reqId, _action: name }
+            if (isObj(reduced)) return { ...reduced, _reqId, _action: name }
             if (type == 'undefined') {
               console.warn(`'undefined' value sent to ${ name }`);
               return reduced
@@ -3775,11 +3762,11 @@ class Component {
     let lastResult;
 
     return function(state) {
-      if (!this.calculated || typeof state !== 'object' || state instanceof Array) return state
+      if (!this.calculated || !isObj(state) || Array.isArray(state)) return state
       if (state === lastState) {
         return lastResult
       }
-      if (typeof this.calculated !== 'object') throw new Error(`'calculated' parameter must be an object mapping calculated state field named to functions`)
+      if (!isObj(this.calculated)) throw new Error(`'calculated' parameter must be an object mapping calculated state field named to functions`)
       const entries = Object.entries(this.calculated);
       if (entries.length === 0) {
         lastState = state;
@@ -3806,7 +3793,7 @@ class Component {
   }
 
   cleanupCalculated(incomingState) {
-    if (!incomingState || typeof incomingState !== 'object' || incomingState instanceof Array) return incomingState
+    if (!incomingState || !isObj(incomingState) || Array.isArray(incomingState)) return incomingState
     const state = this.storeCalculatedInState ? this.addCalculated(incomingState) : incomingState;
     const { __props, __children, __context, ...sanitized } = state;
     const copy  = { ...sanitized };
@@ -3967,20 +3954,42 @@ class Component {
     const data      = el.data;
     const props     = data.props || {};
     el.children || [];
+    let filter      = typeof props.filter === 'function' ? props.filter : _ => true;
 
     const combined$ = xs$1.combine(this.sources[this.stateSourceName].stream.startWith(this.currentState), props$, children$)
       .map(([state, __props, __children]) => {
-        return typeof state === 'object' ? { ...this.addCalculated(state), __props, __children, __context: this.currentContext } : { value: state, __props, __children, __context: this.currentContext }
+        if (__props.filter && typeof __props.filter === 'function') {
+          filter = __props.filter;
+        }
+        return isObj(state) ? { ...this.addCalculated(state), __props, __children, __context: this.currentContext } : { value: state, __props, __children, __context: this.currentContext }
       });
 
-    const stateSource = new state.StateSource(combined$);
-    const stateField  = props.from;
+    const stateSource  = new state.StateSource(combined$);
+    const stateField   = props.from;
+    const collectionOf = props.of;
+    const idField      = props.idfield || 'id';
+
     let lense;
+    let factory;
 
-    const factory = typeof props.of === 'function' ? props.of : this.components[props.of];
+    if (typeof collectionOf === 'function') {
+      if (collectionOf.isSygnalComponent) {
+        factory = collectionOf;
+      } else {
+        const name = (typeof collectionOf.name === 'string') ? collectionOf.name : 'FUNCTION_COMPONENT';
+        const view = collectionOf;
+        const { model, intent, context, children, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = collectionOf;
+        const options = { name, view, model, intent, context, children, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
+        factory = component(options);
+      }
+    } else if (this.components[collectionOf]) {
+      factory = this.components[collectionOf];
+    } else {
+      throw new Error(`[${this.name}] Invalid 'of' propery in collection: ${ collectionOf }`)
+    }
 
     const sanitizeItems = item => {
-      if (typeof item === 'object') {
+      if (isObj(item)) {
         const { __props, __children, __context, ...sanitized } = item;
         return sanitized
       } else {
@@ -3992,8 +4001,8 @@ class Component {
       get: state => {
         const { __props, __children } = state;
         if (!Array.isArray(state[stateField])) return []
-        return state[stateField].map(item => {
-          return typeof item === 'object' ? { ...item, __props, __children, __context: this.currentContext } : { value: item, __props, __children, __context: this.currentContext }
+        return state[stateField].filter(filter).map((item, index) => {
+          return (isObj(item)) ? { ...item, [idField]: item[idField] || index, __props, __children, __context: this.currentContext } : { value: item, [idField]: index, __props, __children, __context: this.currentContext }
         })
       },
       set: (oldState, newState) => {
@@ -4001,6 +4010,15 @@ class Component {
           console.warn(`Collection sub-component of ${ this.name } attempted to update state on a calculated field '${ stateField }': Update ignored`);
           return oldState
         }
+        const updated = [];
+        for (const oldItem of oldState[stateField].map((item, index) => ({ __primitive: true, value: item, [idField]: index }))) {
+          if (!filter(oldItem)) {
+            updated.push(oldItem.__primitive ? oldItem.value : oldItem);
+          } else {
+            const newItem = newState.find(newItem => newItem.id === oldItem.id);
+            if (typeof newItem !== 'undefined') updated.push(oldItem.__primitive ? newItem.value : newItem);
+          }
+        }
         return { ...oldState, [stateField]: newState.map(sanitizeItems) }
       }
     };
@@ -4016,7 +4034,7 @@ class Component {
         }
       };
     } else if (typeof stateField === 'string') {
-      if (typeof this.currentState === 'object') {
+      if (isObj(this.currentState)) {
         if(!(this.currentState && stateField in this.currentState) && !(this.calculated && stateField in this.calculated)) {
           console.error(`Collection component in ${ this.name } is attempting to use non-existent state property '${ stateField }': To fix this error, specify a valid array property on the state.  Attempting to use parent component state.`);
           lense = undefined;
@@ -4034,7 +4052,7 @@ class Component {
           lense = fieldLense;
         }
       }
-    } else if (typeof stateField === 'object') {
+    } else if (isObj(stateField)) {
       if (typeof stateField.get !== 'function') {
         console.error(`Collection component in ${ this.name } has an invalid 'from' field: Expecting 'undefined', a string indicating an array property in the state, or an object with 'get' and 'set' functions for retrieving and setting child state from the current state. Attempting to use parent component state.`);
         lense = undefined;
@@ -4058,7 +4076,7 @@ class Component {
 
     const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$, __parentContext$: this.context$ };
     const sink$   = collection(factory, lense, { container: null })(sources);
-    if (typeof sink$ !== 'object') {
+    if (!isObj(sink$)) {
       throw new Error('Invalid sinks returned from component factory of collection element')
     }
     return sink$
@@ -4071,7 +4089,7 @@ class Component {
 
     const combined$ = xs$1.combine(this.sources[this.stateSourceName].stream.startWith(this.currentState), props$, children$)
       .map(([state, __props, __children]) => {
-        return typeof state === 'object' ? { ...this.addCalculated(state), __props, __children, __context: this.currentContext } : { value: state, __props, __children, __context: this.currentContext }
+        return isObj(state) ? { ...this.addCalculated(state), __props, __children, __context: this.currentContext } : { value: state, __props, __children, __context: this.currentContext }
       });
 
     const stateSource  = new state.StateSource(combined$);
@@ -4081,14 +4099,14 @@ class Component {
     const fieldLense = {
       get: state => {
         const { __props, __children } = state;
-        return (typeof state[stateField] === 'object' && !(state[stateField] instanceof Array)) ? { ...state[stateField], __props, __children, __context: this.currentContext } : { value: state[stateField], __props, __children, __context: this.currentContext }
+        return (isObj(state[stateField])) ? { ...state[stateField], __props, __children, __context: this.currentContext } : { value: state[stateField], __props, __children, __context: this.currentContext }
       },
       set: (oldState, newState) => {
         if (this.calculated && stateField in this.calculated) {
           console.warn(`Switchable sub-component of ${ this.name } attempted to update state on a calculated field '${ stateField }': Update ignored`);
           return oldState
         }
-        if (typeof newState !== 'object' || newState instanceof Array) return { ...oldState, [stateField]: newState }
+        if (!isObj(newState) || Array.isArray(newState)) return { ...oldState, [stateField]: newState }
         const { __props, __children, __context, ...sanitized } = newState;
         return { ...oldState, [stateField]: sanitized }
       }
@@ -4097,7 +4115,7 @@ class Component {
     const baseLense = {
       get: state => state,
       set: (oldState, newState) => {
-        if (typeof newState !== 'object' || newState instanceof Array) return newState
+        if (!isObj(newState) || Array.isArray(newState)) return newState
         const { __props, __children, __context, ...sanitized } = newState;
         return sanitized
       }
@@ -4107,7 +4125,7 @@ class Component {
       lense = baseLense;
     } else if (typeof stateField === 'string') {
       lense = fieldLense;
-    } else if (typeof stateField === 'object') {
+    } else if (isObj(stateField)) {
       if (typeof stateField.get !== 'function') {
         console.error(`Switchable component in ${ this.name } has an invalid 'state' field: Expecting 'undefined', a string indicating an array property in the state, or an object with 'get' and 'set' functions for retrieving and setting sub-component state from the current state. Attempting to use parent component state.`);
         lense = baseLense;
@@ -4120,11 +4138,22 @@ class Component {
     }
 
     const switchableComponents = props.of;
+    const keys = Object.keys(switchableComponents);
+    keys.forEach(key => {
+      const current = switchableComponents[key];
+      if (!current.isSygnalComponent) {
+        const name = (typeof current.name === 'string') ? current.name : 'FUNCTION_COMPONENT';
+        const view = current;
+        const { model, intent, context, children, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = current;
+        const options = { name, view, model, intent, context, children, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
+        switchableComponents[key] = component(options);
+      }
+    });
     const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$, __parentContext$: this.context$ };
 
     const sink$ = isolate(switchable(switchableComponents, props$.map(props => props.current)), { [this.stateSourceName]: lense })(sources);
 
-    if (typeof sink$ !== 'object') {
+    if (!isObj(sink$)) {
       throw new Error('Invalid sinks returned from component factory of switchable element')
     }
 
@@ -4139,13 +4168,13 @@ class Component {
 
     const combined$ = xs$1.combine(this.sources[this.stateSourceName].stream.startWith(this.currentState), props$, children$)
       .map(([state, __props, __children]) => {
-        return typeof state === 'object' ? { ...this.addCalculated(state), __props, __children, __context: this.currentContext } : { value: state, __props, __children, __context: this.currentContext }
+        return isObj(state) ? { ...this.addCalculated(state), __props, __children, __context: this.currentContext } : { value: state, __props, __children, __context: this.currentContext }
       });
 
     const stateSource = new state.StateSource(combined$);
     const stateField  = props.state;
 
-    if (typeof props.sygnalFactory !== 'function' && typeof props.sygnalOptions === 'object') {
+    if (typeof props.sygnalFactory !== 'function' && isObj(props.sygnalOptions)) {
       props.sygnalFactory = component(props.sygnalOptions);
     }
 
@@ -4160,7 +4189,7 @@ class Component {
     const fieldLense = {
       get: state => {
         const { __props, __children } = state;
-        return typeof state[stateField] === 'object' ? { ...state[stateField], __props, __children, __context: this.currentContext } : { value: state[stateField], __props, __children, __context: this.currentContext }
+        return isObj(state[stateField]) ? { ...state[stateField], __props, __children, __context: this.currentContext } : { value: state[stateField], __props, __children, __context: this.currentContext }
       },
       set: (oldState, newState) => {
         if (this.calculated && stateField in this.calculated) {
@@ -4174,7 +4203,7 @@ class Component {
     const baseLense = {
       get: state => state,
       set: (oldState, newState) => {
-        if (typeof newState !== 'object' || newState instanceof Array) return newState
+        if (!isObj(newState) || Array.isArray(newState)) return newState
         const { __props, __children, __context, ...sanitized } = newState;
         return sanitized
       }
@@ -4184,7 +4213,7 @@ class Component {
       lense = baseLense;
     } else if (typeof stateField === 'string') {
       lense = fieldLense;
-    } else if (typeof stateField === 'object') {
+    } else if (isObj(stateField)) {
       if (typeof stateField.get !== 'function') {
         console.error(`Sub-component in ${ this.name } has an invalid 'state' field: Expecting 'undefined', a string indicating an array property in the state, or an object with 'get' and 'set' functions for retrieving and setting sub-component state from the current state. Attempting to use parent component state.`);
         lense = baseLense;
@@ -4199,7 +4228,7 @@ class Component {
     const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$, __parentContext$: this.context$ };
     const sink$   = isolate(factory, { [this.stateSourceName]: lense })(sources);
 
-    if (typeof sink$ !== 'object') {
+    if (!isObj(sink$)) {
       const name = componentName === 'sygnal-factory' ? 'custom element' : componentName;
       throw new Error('Invalid sinks returned from component factory:', name)
     }
@@ -4297,7 +4326,7 @@ function getComponents(currentElement, componentNames, depth=0, index=0, parentI
   const sel          = currentElement.sel;
   const isCollection = sel && sel.toLowerCase() === 'collection';
   const isSwitchable = sel && sel.toLowerCase() === 'switchable';
-  const isComponent  = sel && (['collection', 'switchable', 'sygnal-factory', ...componentNames].includes(sel)) || typeof currentElement.data?.props?.sygnalFactory === 'function' || typeof currentElement.data?.props?.sygnalOptions === 'object';
+  const isComponent  = sel && (['collection', 'switchable', 'sygnal-factory', ...componentNames].includes(sel)) || typeof currentElement.data?.props?.sygnalFactory === 'function' || isObj(currentElement.data?.props?.sygnalOptions);
   const props        = (currentElement.data && currentElement.data.props) || {};
   (currentElement.data && currentElement.data.attrs) || {};
   const children     = currentElement.children || [];
@@ -4308,15 +4337,15 @@ function getComponents(currentElement, componentNames, depth=0, index=0, parentI
   if (isComponent) {
     id  = getComponentIdFromElement(currentElement, depth, index, parentId);
     if (isCollection) {
-      if (!props.of)                            throw new Error(`Collection element missing required 'component' property`)
+      if (!props.of)   throw new Error(`Collection element missing required 'component' property`)
       if (typeof props.of !== 'string' && typeof props.of !== 'function')         throw new Error(`Invalid 'component' property of collection element: found ${ typeof props.of } requires string or component factory function`)
       if (typeof props.of !== 'function' && !componentNames.includes(props.of))   throw new Error(`Specified component for collection not found: ${ props.of }`)
       if (typeof props.from !== 'undefined' && !(typeof props.from === 'string' || Array.isArray(props.from) || typeof props.from.get === 'function')) console.warn(`No valid array found for collection ${ typeof props.of === 'string' ? props.of : 'function component' }: no collection components will be created`, props.from);
       currentElement.data.isCollection = true;
       currentElement.data.props ||= {};
     } else if (isSwitchable) {
-      if (!props.of)                    throw new Error(`Switchable element missing required 'of' property`)
-      if (typeof props.of !== 'object') throw new Error(`Invalid 'of' property of switchable element: found ${ typeof props.of } requires object mapping names to component factories`)
+      if (!props.of)        throw new Error(`Switchable element missing required 'of' property`)
+      if (!isObj(props.of)) throw new Error(`Invalid 'of' property of switchable element: found ${ typeof props.of } requires object mapping names to component factories`)
       const switchableComponents = Object.values(props.of);
       if (!switchableComponents.every(comp => typeof comp === 'function')) throw new Error(`One or more components provided to switchable element is not a valid component factory`)
       if (!props.current || (typeof props.current !== 'string' && typeof props.current !== 'function')) throw new Error(`Missing or invalid 'current' property for switchable element: found '${ typeof props.current }' requires string or function`)
@@ -4345,7 +4374,7 @@ function injectComponents(currentElement, components, componentNames, depth=0, i
 
 
   const sel          = currentElement.sel || 'NO SELECTOR';
-  const isComponent  = ['collection', 'switchable', 'sygnal-factory', ...componentNames].includes(sel) || typeof currentElement.data?.props?.sygnalFactory === 'function' || typeof currentElement.data?.props?.sygnalOptions === 'object';
+  const isComponent  = ['collection', 'switchable', 'sygnal-factory', ...componentNames].includes(sel) || typeof currentElement.data?.props?.sygnalFactory === 'function' || isObj(currentElement.data?.props?.sygnalOptions);
   const isCollection = currentElement?.data?.isCollection;
   const isSwitchable = currentElement?.data?.isSwitchable;
   (currentElement.data && currentElement.data.props) || {};
@@ -4443,11 +4472,15 @@ function objIsEqual(objA, objB, maxDepth = 5, depth = 0) {
 }
 
 function sanitizeObject(obj) {
-  if (typeof obj !== 'object' || obj === null) return obj
+  if (!isObj(obj)) return obj
   const {state, of, from, _reqId, _action, __props, __children, __context, ...sanitized} = obj;
   return sanitized
 }
 
+function isObj(obj) {
+  return typeof obj === 'object' && obj !== null && !Array.isArray(obj)
+}
+
 function driverFromAsync(promiseReturningFunction, opts = {}) {
   const {
     selector: selectorProperty = 'category',