sygnal 2.7.0 → 2.8.0

package/dist/index.cjs.js

@@ -3186,6 +3186,9 @@ function component (opts) {
     returnFunction = currySources ? (sources) => (new Component({ ...opts, sources })).sinks : (new Component(opts)).sinks;
   }
 
+  returnFunction.componentName = name;
+  returnFunction.isSygnalComponent = true;
+
   return returnFunction
 }
 
@@ -3200,6 +3203,7 @@ class Component {
   // intent
   // request
   // model
+  // context
   // response
   // view
   // children
@@ -3217,14 +3221,17 @@ class Component {
   // intent$
   // action$
   // model$
+  // context$
   // response$
   // sendResponse$
   // children$
   // vdom$
+  // currentState
+  // currentContext
   // subComponentSink$
   // unmountRequest$
   // unmount()
-  // stateCache
+  // _debug
 
   // [ INSTANTIATED STREAM OPERATOR ]
   // log
@@ -3232,7 +3239,7 @@ class Component {
   // [ OUTPUT ]
   // sinks
 
-  constructor({ name='NO NAME', sources, intent, request, model, response, view, children={}, components={}, initialState, calculated, storeCalculatedInState=true, DOMSourceName='DOM', stateSourceName='STATE', requestSourceName='HTTP', debug=false }) {
+  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')
 
     this.name       = name;
@@ -3240,6 +3247,7 @@ class Component {
     this.intent     = intent;
     this.request    = request;
     this.model      = model;
+    this.context    = context;
     this.response   = response;
     this.view       = view;
     this.children   = children;
@@ -3259,7 +3267,7 @@ class Component {
 
     if (state$) {
       this.currentState = initialState || {};
-      this.sources[this.stateSourceName] = new state.StateSource(state$.map(val => {
+      this.sources[stateSourceName] = new state.StateSource(state$.map(val => {
         this.currentState = val;
         return val
       }));
@@ -3282,6 +3290,7 @@ class Component {
     this.initAction$();
     this.initResponse$();
     this.initState();
+    this.initContext();
     this.initModel$();
     this.initSendResponse$();
     this.initChildren$();
@@ -3455,6 +3464,61 @@ class Component {
     }
   }
 
+  initContext() {
+    if (!this.context && !this.sources.__parentContext$) {
+      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') {
+      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 state = this.currentState;
+        const values = Object.entries(context).reduce((acc, current) => {
+          const [name, value] = current;
+          let _value;
+          const valueType = typeof value;
+          if (valueType === 'string') {
+            _value = state[value];
+          } else if (valueType === 'boolean') {
+            _value = state[name];
+          } else if (valueType === 'function') {
+            _value = value(state);
+          } else {
+            console.error(`[${ this.name }] Invalid context entry '${ name }': must be the name of a state property or a function returning a value to use`);
+            return acc
+          }
+          acc[name] = _value;
+          return acc
+        }, {});
+        const newContext = { ..._parent, ...values };
+        this.currentContext = newContext;
+        return newContext
+      })
+      .compose(_default$5(repeatChecker))
+      .startWith({});
+    this.context$.subscribe({ next: _ => _ });
+  }
+
   initModel$() {
     if (typeof this.model == 'undefined') {
       this.model$ = this.sourceNames.reduce((a,s) => {
@@ -3504,7 +3568,7 @@ class Component {
               return `State reducer added: <${ action }>`
             } else {
               const extra = data && (data.type || data.command || data.name || data.key || (Array.isArray(data) && 'Array') || data);
-              return `Data sent to [${ sink }]: <${ action }> ${ extra }`
+              return `Data sent to [${ sink }]: <${ action }> ${ JSON.stringify(extra) }`
             }
           }));
 
@@ -3730,7 +3794,7 @@ class Component {
         return acc
       }, {});
 
-      const newState = { ...state, ...calculated };
+      const newState = { ...state, ...calculated, __context: this.currentContext };
 
       lastState = state;
       lastResult = newState;
@@ -3742,7 +3806,7 @@ class Component {
   cleanupCalculated(incomingState) {
     if (!incomingState || typeof incomingState !== 'object' || incomingState instanceof Array) return incomingState
     const state = this.storeCalculatedInState ? this.addCalculated(incomingState) : incomingState;
-    const { __props, __children, ...sanitized } = state;
+    const { __props, __children, __context, ...sanitized } = state;
     const copy  = { ...sanitized };
     if (!this.calculated) return copy
     const keys = Object.keys(this.calculated);
@@ -3764,10 +3828,10 @@ class Component {
     const stateStream   = (enhancedState && enhancedState.stream) || xs$1.never();
 
     const objRepeatChecker = (a, b) => {
-      const { state, sygnalFactory, __props, __children, ...sanitized } = a;
+      const { state, sygnalFactory, __props, __children, __context, ...sanitized } = a;
       const keys = Object.keys(sanitized);
       if (keys.length === 0) {
-        const { state, sygnalFactory, __props, __children, ...sanitizedB } = b;
+        const { state, sygnalFactory, __props, __children, __context, ...sanitizedB } = b;
         return Object.keys(sanitizedB).length === 0
       }
       return keys.every(key => a[key] === b[key])
@@ -3792,6 +3856,10 @@ class Component {
       renderParams.__children = this.sources.children$.compose(_default$5(arrRepeatChecker));
     }
 
+    if (this.context$) {
+      renderParams.__context = this.context$.compose(_default$5(objRepeatChecker));
+    }
+
     const names   = [];
     const streams = [];
 
@@ -3803,18 +3871,18 @@ class Component {
     const combined = xs$1.combine(...streams)
       // map the streams from an array back to an object with the render parameter names as the keys
       .map(arr => {
-        return names.reduce((acc, name, index) => {
+        const params = names.reduce((acc, name, index) => {
           acc[name] = arr[index];
           if (name === 'state') acc[this.stateSourceName] = arr[index];
           return acc
-        }, {})
+        }, {});
+        return params
       });
 
     return combined
   }
 
   instantiateSubComponents(vDom$) {
-    let count = 0;
     return vDom$.fold((previousComponents, vDom) => {
       const componentNames  = Object.keys(this.components);
       const foundComponents = getComponents(vDom, componentNames);
@@ -3845,7 +3913,6 @@ class Component {
 
 
         if (previousComponents[id]) {
-          if (this.debug) console.log(this.name, 'sameful', count++);
           const entry = previousComponents[id];
           acc[id] = entry;
           entry.props$.shamefullySendNext(props);
@@ -3854,8 +3921,6 @@ class Component {
           return acc
         }
 
-        if (this.debug) console.log(this.name, 'non-shameful', count++);
-
         const props$    = xs$1.create().startWith(props);
         const children$ = xs$1.create().startWith(children);
 
@@ -3914,19 +3979,18 @@ 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 } : { value: state, __props, __children }
+        return typeof state === 'object' ? { ...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;
-    props.filter;
     let lense;
 
     const factory = typeof props.of === 'function' ? props.of : this.components[props.of];
 
     const sanitizeItems = item => {
       if (typeof item === 'object') {
-        const { __props, __children, ...sanitized } = item;
+        const { __props, __children, __context, ...sanitized } = item;
         return sanitized
       } else {
         return item
@@ -3938,7 +4002,7 @@ class Component {
         const { __props, __children } = state;
         if (!Array.isArray(state[stateField])) return []
         return state[stateField].map(item => {
-          return typeof item === 'object' ? { ...item, __props, __children } : { value: item, __props, __children }
+          return typeof item === 'object' ? { ...item, __props, __children, __context: this.currentContext } : { value: item, __props, __children, __context: this.currentContext }
         })
       },
       set: (oldState, newState) => {
@@ -3962,7 +4026,7 @@ class Component {
       };
     } else if (typeof stateField === 'string') {
       if (typeof this.currentState === 'object') {
-        if(!(stateField in this.currentState) && !(stateField in this.calculated)) {
+        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;
         } else if (!Array.isArray(this.currentState[stateField])) {
@@ -4001,7 +4065,7 @@ class Component {
       lense = undefined;
     }
 
-    const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$ };
+    const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$, __parentContext$: this.context$ };
     const sink$   = collection(factory, lense, { container: null })(sources);
     if (typeof sink$ !== 'object') {
       throw new Error('Invalid sinks returned from component factory of collection element')
@@ -4016,7 +4080,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 } : { value: state, __props, __children }
+        return typeof state === 'object' ? { ...this.addCalculated(state), __props, __children, __context: this.currentContext } : { value: state, __props, __children, __context: this.currentContext }
       });
 
     const stateSource  = new state.StateSource(combined$);
@@ -4026,7 +4090,7 @@ class Component {
     const fieldLense = {
       get: state => {
         const { __props, __children } = state;
-        return (typeof state[stateField] === 'object' && !(state[stateField] instanceof Array)) ? { ...state[stateField], __props, __children } : { value: state[stateField], __props, __children }
+        return (typeof state[stateField] === 'object' && !(state[stateField] instanceof Array)) ? { ...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) {
@@ -4034,7 +4098,7 @@ class Component {
           return oldState
         }
         if (typeof newState !== 'object' || newState instanceof Array) return { ...oldState, [stateField]: newState }
-        const { __props, __children, ...sanitized } = newState;
+        const { __props, __children, __context, ...sanitized } = newState;
         return { ...oldState, [stateField]: sanitized }
       }
     };
@@ -4043,7 +4107,7 @@ class Component {
       get: state => state,
       set: (oldState, newState) => {
         if (typeof newState !== 'object' || newState instanceof Array) return newState
-        const { __props, __children, ...sanitized } = newState;
+        const { __props, __children, __context, ...sanitized } = newState;
         return sanitized
       }
     };
@@ -4065,7 +4129,7 @@ class Component {
     }
 
     const switchableComponents = props.of;
-    const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$ };
+    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);
 
@@ -4084,7 +4148,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 } : { value: state, __props, __children }
+        return typeof state === 'object' ? { ...this.addCalculated(state), __props, __children, __context: this.currentContext } : { value: state, __props, __children, __context: this.currentContext }
       });
 
     const stateSource = new state.StateSource(combined$);
@@ -4101,7 +4165,7 @@ class Component {
     const fieldLense = {
       get: state => {
         const { __props, __children } = state;
-        return typeof state[stateField] === 'object' ? { ...state[stateField], __props, __children } : { value: state[stateField], __props, __children }
+        return typeof state[stateField] === 'object' ? { ...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) {
@@ -4116,7 +4180,7 @@ class Component {
       get: state => state,
       set: (oldState, newState) => {
         if (typeof newState !== 'object' || newState instanceof Array) return newState
-        const { __props, __children, ...sanitized } = newState;
+        const { __props, __children, __context, ...sanitized } = newState;
         return sanitized
       }
     };
@@ -4137,7 +4201,7 @@ class Component {
       lense = baseLense;
     }
 
-    const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$ };
+    const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$, __parentContext$: this.context$ };
     const sink$   = isolate(factory, { [this.stateSourceName]: lense })(sources);
 
     if (typeof sink$ !== 'object') {
@@ -4232,7 +4296,7 @@ function getComponents(currentElement, componentNames, depth=0, index=0) {
   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(currentElement.sel)) || typeof currentElement.data?.props?.sygnalFactory === 'function';
+  const isComponent  = sel && (['collection', 'switchable', 'sygnal-factory', ...componentNames].includes(sel)) || typeof currentElement.data?.props?.sygnalFactory === 'function';
   const props        = (currentElement.data && currentElement.data.props) || {};
   (currentElement.data && currentElement.data.attrs) || {};
   const children     = currentElement.children || [];
@@ -4316,9 +4380,9 @@ function getComponentIdFromElement(el, depth, index) {
     base = `${date}-${rand}`;
     selMap.set(sel, base);
   }
-  const uid = `${base}-${depth}-${index}`;
-  const props   = (el.data && el.data.props) || {};
-  const id      = (props.id && JSON.stringify(props.id)) || uid;
+  const uid    = `${base}-${depth}-${index}`;
+  const props  = (el.data && el.data.props) || {};
+  const id     = (props.id && JSON.stringify(props.id)) || uid;
   const fullId = `${ name }::${ id }`;
   return fullId
 }