sygnal 2.7.1 → 2.8.1

package/dist/index.cjs.js

@@ -3203,6 +3203,7 @@ class Component {
   // intent
   // request
   // model
+  // context
   // response
   // view
   // children
@@ -3220,10 +3221,13 @@ class Component {
   // intent$
   // action$
   // model$
+  // context$
   // response$
   // sendResponse$
   // children$
   // vdom$
+  // currentState
+  // currentContext
   // subComponentSink$
   // unmountRequest$
   // unmount()
@@ -3235,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;
@@ -3243,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;
@@ -3262,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
       }));
@@ -3285,6 +3290,7 @@ class Component {
     this.initAction$();
     this.initResponse$();
     this.initState();
+    this.initContext();
     this.initModel$();
     this.initSendResponse$();
     this.initChildren$();
@@ -3458,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) => {
@@ -3507,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) }`
             }
           }));
 
@@ -3733,7 +3794,7 @@ class Component {
         return acc
       }, {});
 
-      const newState = { ...state, ...calculated };
+      const newState = { ...state, ...calculated, __context: this.currentContext };
 
       lastState = state;
       lastResult = newState;
@@ -3745,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);
@@ -3767,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])
@@ -3795,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 = [];
 
@@ -3806,11 +3871,12 @@ 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
@@ -3913,7 +3979,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$);
@@ -3924,7 +3990,7 @@ class Component {
 
     const sanitizeItems = item => {
       if (typeof item === 'object') {
-        const { __props, __children, ...sanitized } = item;
+        const { __props, __children, __context, ...sanitized } = item;
         return sanitized
       } else {
         return item
@@ -3936,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) => {
@@ -3960,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])) {
@@ -3999,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')
@@ -4014,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$);
@@ -4024,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) {
@@ -4032,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 }
       }
     };
@@ -4041,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
       }
     };
@@ -4063,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);
 
@@ -4082,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$);
@@ -4099,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) {
@@ -4114,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
       }
     };
@@ -4135,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') {
@@ -4221,7 +4287,7 @@ class Component {
 
 
 
-function getComponents(currentElement, componentNames, depth=0, index=0) {
+function getComponents(currentElement, componentNames, depth=0, index=0, parentId) {
   if (!currentElement) return {}
 
   if (currentElement.data?.componentsProcessed) return {}
@@ -4236,9 +4302,10 @@ function getComponents(currentElement, componentNames, depth=0, index=0) {
   const children     = currentElement.children || [];
 
   let found    = {};
-
+  
+  let id = parentId;
   if (isComponent) {
-    const id  = getComponentIdFromElement(currentElement, depth, index);
+    id  = getComponentIdFromElement(currentElement, depth, index, parentId);
     if (isCollection) {
       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`)
@@ -4261,7 +4328,7 @@ function getComponents(currentElement, componentNames, depth=0, index=0) {
   }
 
   if (children.length > 0) {
-    children.map((child, i) => getComponents(child, componentNames, depth + 1, index + i))
+    children.map((child, i) => getComponents(child, componentNames, depth + 1, index + i, id))
             .forEach((child) => {
               Object.entries(child).forEach(([id, el]) => found[id] = el);
             });
@@ -4270,7 +4337,7 @@ function getComponents(currentElement, componentNames, depth=0, index=0) {
   return found
 }
 
-function injectComponents(currentElement, components, componentNames, depth=0, index=0) {
+function injectComponents(currentElement, components, componentNames, depth=0, index=0, parentId) {
   if (!currentElement) return
   if (currentElement.data?.componentsInjected) return currentElement
   if (depth === 0 && currentElement.data) currentElement.data.componentsInjected = true;
@@ -4283,8 +4350,9 @@ function injectComponents(currentElement, components, componentNames, depth=0, i
   (currentElement.data && currentElement.data.props) || {};
   const children     = currentElement.children || [];
 
+  let id = parentId;
   if (isComponent) {
-    const id  = getComponentIdFromElement(currentElement, depth, index);
+    id  = getComponentIdFromElement(currentElement, depth, index, parentId);
     const component = components[id];
     if (isCollection) {
       currentElement.sel = 'div';
@@ -4296,28 +4364,21 @@ function injectComponents(currentElement, components, componentNames, depth=0, i
       return component
     }
   } else if (children.length > 0) {
-    currentElement.children = children.map((child, i) => injectComponents(child, components, componentNames, depth + 1, index + i)).flat();
+    currentElement.children = children.map((child, i) => injectComponents(child, components, componentNames, depth + 1, index + i, id)).flat();
     return currentElement
   } else {
     return currentElement
   }
 }
 
-const selMap = new Map();
-function getComponentIdFromElement(el, depth, index) {
-  const sel  = el.sel;
-  const name = typeof sel === 'string' ? sel : 'functionComponent';
-  let base = selMap.get(sel);
-  if (!base) {
-    const date = Date.now();
-    const rand = Math.floor(Math.random() * 10000);
-    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 fullId = `${ name }::${ id }`;
+function getComponentIdFromElement(el, depth, index, parentId) {
+  const sel    = el.sel;
+  const name   = typeof sel === 'string' ? sel : 'functionComponent';
+  const uid    = `${depth}:${index}`;
+  const props  = el.data?.props || {};
+  const id     = (props.id && JSON.stringify(props.id).replaceAll('"', '')) || uid;
+  const parentString = parentId ? `${ parentId }|` : '';
+  const fullId = `${ parentString }${ name }::${ id }`;
   return fullId
 }