sygnal 2.6.8 → 2.7.0

package/dist/index.cjs.js

@@ -3150,7 +3150,6 @@ const INITIALIZE_ACTION       = 'INITIALIZE';
 const HYDRATE_ACTION          = 'HYDRATE';
 
 
-let IS_ROOT_COMPONENT = true;
 let COMPONENT_COUNT   = 0;
 
 
@@ -3211,6 +3210,7 @@ class Component {
   // DOMSourceName
   // stateSourceName
   // requestSourceName
+  // debug
 
   // [ PRIVATE / CALCULATED VALUES ]
   // sourceNames
@@ -3224,6 +3224,7 @@ class Component {
   // subComponentSink$
   // unmountRequest$
   // unmount()
+  // stateCache
 
   // [ INSTANTIATED STREAM OPERATOR ]
   // log
@@ -3231,7 +3232,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' }) {
+  constructor({ name='NO NAME', sources, intent, request, model, 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;
@@ -3250,6 +3251,7 @@ class Component {
     this.stateSourceName   = stateSourceName;
     this.requestSourceName = requestSourceName;
     this.sourceNames       = Object.keys(sources);
+    this._debug             = debug;
 
     this.isSubComponent = this.sourceNames.includes('props$');
 
@@ -3263,17 +3265,17 @@ class Component {
       }));
     }
 
-    // TODO: this is a hack to allow the root component to be created without an intent or model
-    //       refactor to avoid using a global variable
-    if (IS_ROOT_COMPONENT && typeof this.intent === 'undefined' && typeof this.model === 'undefined') {
+    // Ensure that the root component has an intent and model
+    // This is necessary to ensure that the component tree's state sink is subscribed to
+    if (!this.isSubComponent && typeof this.intent === 'undefined' && typeof this.model === 'undefined') {
       this.initialState = initialState || true;
       this.intent = _ => ({__NOOP_ACTION__:xs$1.never()});
       this.model = {
         __NOOP_ACTION__: state => state
       };
     }
-    IS_ROOT_COMPONENT = false;
 
+    this.addCalculated = this.createMemoizedAddCalculated();
     this.log = makeLog(name);
 
     this.initIntent$();
@@ -3290,11 +3292,15 @@ class Component {
 
     this.sinks.__index = COMPONENT_COUNT++;
 
-    if (ENVIRONMENT.DEBUG === true) {
+    if (debug) {
       console.log(`[${ this.name }] Instantiated (#${ this.sinks.__index })`);
     }
   }
 
+  get debug() {
+    return this._debug || (ENVIRONMENT.DEBUG === 'true' || ENVIRONMENT.DEBUG === true)
+  }
+
   initIntent$() {
     if (!this.intent) {
       return
@@ -3392,7 +3398,7 @@ class Component {
 
               console.log(`${ timestamp } ${ ip } ${ req.method } ${ req.url }`);
 
-              if (ENVIRONMENT.DEBUG) {
+              if (this.debug) {
                 this.action$.setDebugListener({next: ({ type }) => console.log(`[${ this.name }] Action from ${ this.requestSourceName } request: <${ type }>`)});
               }
 
@@ -3698,20 +3704,39 @@ class Component {
     }
   }
 
-  addCalculated(state) {
-    if (!this.calculated || typeof state !== 'object' || state instanceof Array) return state
-    if (typeof this.calculated !== 'object') throw new Error(`'calculated' parameter must be an object mapping calculated state field named to functions`)
-    const entries = Object.entries(this.calculated);
-    const calculated = entries.reduce((acc, [field, fn]) => {
-      if (typeof fn !== 'function') throw new Error(`Missing or invalid calculator function for calculated field '${ field }`)
-      try {
-        acc[field] = fn(state);
-      } catch(e) {
-        console.warn(`Calculated field '${ field }' threw an error during calculation: ${ e.message }`);
+  createMemoizedAddCalculated() {
+    let lastState;
+    let lastResult;
+
+    return function(state) {
+      if (!this.calculated || typeof state !== 'object' || state instanceof Array) return state
+      if (state === lastState) {
+        return lastResult
       }
-      return acc
-    }, {});
-    return { ...state, ...calculated }
+      if (typeof this.calculated !== 'object') 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;
+        lastResult = state;
+        return state
+      }
+      const calculated = entries.reduce((acc, [field, fn]) => {
+        if (typeof fn !== 'function') throw new Error(`Missing or invalid calculator function for calculated field '${ field }`)
+        try {
+          acc[field] = fn(state);
+        } catch(e) {
+          console.warn(`Calculated field '${ field }' threw an error during calculation: ${ e.message }`);
+        }
+        return acc
+      }, {});
+
+      const newState = { ...state, ...calculated };
+
+      lastState = state;
+      lastResult = newState;
+
+      return newState
+    }
   }
 
   cleanupCalculated(incomingState) {
@@ -3738,15 +3763,33 @@ class Component {
     const enhancedState = state && state.isolateSource(state, { get: state => this.addCalculated(state) });
     const stateStream   = (enhancedState && enhancedState.stream) || xs$1.never();
 
-    renderParams.state                 = stateStream;
-    renderParams[this.stateSourceName] = stateStream;
+    const objRepeatChecker = (a, b) => {
+      const { state, sygnalFactory, __props, __children, ...sanitized } = a;
+      const keys = Object.keys(sanitized);
+      if (keys.length === 0) {
+        const { state, sygnalFactory, __props, __children, ...sanitizedB } = b;
+        return Object.keys(sanitizedB).length === 0
+      }
+      return keys.every(key => a[key] === b[key])
+    };
+    
+    const arrRepeatChecker = (a, b) => {
+      if (a === b) return true
+      if (a.length !== b.length) return false
+      for (let i=0; i < a.length; i++) {
+        if (a[i] !== b[i]) return false
+      }
+      return true
+    };
+    
+    renderParams.state  = stateStream.compose(_default$5(objRepeatChecker));
 
     if (this.sources.props$) {
-      renderParams.__props = this.sources.props$;
+      renderParams.__props = this.sources.props$.compose(_default$5(objRepeatChecker));
     }
 
     if (this.sources.children$) {
-      renderParams.__children = this.sources.children$;
+      renderParams.__children = this.sources.children$.compose(_default$5(arrRepeatChecker));
     }
 
     const names   = [];
@@ -3762,6 +3805,7 @@ class Component {
       .map(arr => {
         return names.reduce((acc, name, index) => {
           acc[name] = arr[index];
+          if (name === 'state') acc[this.stateSourceName] = arr[index];
           return acc
         }, {})
       });
@@ -3770,6 +3814,7 @@ class Component {
   }
 
   instantiateSubComponents(vDom$) {
+    let count = 0;
     return vDom$.fold((previousComponents, vDom) => {
       const componentNames  = Object.keys(this.components);
       const foundComponents = getComponents(vDom, componentNames);
@@ -3800,6 +3845,7 @@ 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);
@@ -3808,6 +3854,8 @@ 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);
 
@@ -3871,6 +3919,7 @@ class Component {
 
     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];
@@ -4164,7 +4213,7 @@ class Component {
     const fixedMsg = (typeof msg === 'function') ? msg : _ => msg;
     return stream => {
       return stream.debug(msg => {
-        if (ENVIRONMENT.DEBUG == 'true' || ENVIRONMENT.DEBUG === true) {
+        if (this.debug) {
           console.log(`[${context}] ${fixedMsg(msg)}`);
         }
       })
@@ -4280,6 +4329,125 @@ function deepCopyVdom(obj) {
   return { ...obj, children: Array.isArray(obj.children) ? obj.children.map(deepCopyVdom) : undefined, data: obj.data && { ...obj.data, componentsInjected: false } }
 }
 
+function driverFromAsync(promiseReturningFunction, opts = {}) {
+  const {
+    selector: selectorProperty = 'category',
+    args:     functionArgs     = 'value',
+    return:   returnProperty   = 'value',
+    pre:      preFunction      = (val) => val,
+    post:     postFunction     = (val) => val
+  } = opts;
+
+  const functionName = promiseReturningFunction.name || '[anonymous function]';
+  const functionArgsType = typeof functionArgs;
+  if (functionArgsType !== 'string' && functionArgsType !== 'function' && !(Array.isArray(functionArgs) && functionArgs.every((arg) => typeof arg === 'string'))) {
+    throw new Error(`The 'args' option for driverFromAsync(${ functionName }) must be a string, array of strings, or a function.  Received ${functionArgsType}`)
+  }
+
+  if (typeof selectorProperty !== 'string') {
+    throw new Error(`The 'selector' option for driverFromAsync(${ functionName }) must be a string.  Received ${typeof selectorProperty}`)
+  }
+
+  return (fromApp$) => {
+    let sendFn = null;
+
+    const toApp$ = xs$1.create({
+      start: (listener) => {
+        sendFn = listener.next.bind(listener);
+      },
+      stop: () => {}
+    });
+
+    fromApp$.addListener({
+      next: (incoming) => {
+        const preProcessed = preFunction(incoming);
+        let argArr = [];
+        if (typeof preProcessed === 'object' && preProcessed !== null) {
+          if (typeof functionArgs === 'function') {
+            const extractedArgs = functionArgs(preProcessed);
+            argArr = Array.isArray(extractedArgs) ? extractedArgs : [extractedArgs];
+          }
+          if (typeof functionArgs === 'string') {
+            argArr = [preProcessed[functionArgs]];
+          }
+          if (Array.isArray(functionArgs)) {
+            argArr = functionArgs.map((arg) => preProcessed[arg]);
+          }
+        }
+        const errMsg = `Error in driver created using driverFromAsync(${ functionName })`;
+        promiseReturningFunction(...argArr)
+          .then((innerVal) => {
+            const constructReply = (rawVal) => {
+              let outgoing;
+              if (returnProperty === undefined) {
+                outgoing = rawVal;
+                if (typeof outgoing === 'object' && outgoing !== null) {
+                  outgoing[selectorProperty] = incoming[selectorProperty];
+                } else {
+                  console.warn(`The 'return' option for driverFromAsync(${ functionName }) was not set, but the promise returned an non-object.  The result will be returned as-is, but the '${selectorProperty}' property will not be set, so will not be filtered by the 'select' method of the driver.`);
+                }
+              } else if (typeof returnProperty === 'string') {
+                outgoing = {
+                  [returnProperty]: rawVal,
+                  [selectorProperty]: incoming[selectorProperty]
+                };
+              } else {
+                throw new Error(`The 'return' option for driverFromAsync(${ functionName }) must be a string.  Received ${typeof returnProperty}`)
+              }
+              return outgoing
+            };
+
+
+            // handle nested promises and promises returned by postFunction
+            if (typeof innerVal.then === 'function') {
+              innerVal
+                .then((innerOutgoing) => {
+                  const processedOutgoing = postFunction(innerOutgoing, incoming);
+                  if (typeof processedOutgoing.then === 'function') {
+                    processedOutgoing
+                      .then((innerProcessedOutgoing) => {
+                        sendFn(constructReply(innerProcessedOutgoing));
+                      })
+                      .catch((err) => console.error(`${ errMsg }: ${ err }`));
+                  } else {
+                    sendFn(constructReply(rocessedOutgoing));
+                  }
+                })
+                .catch((err) => console.error(`${ errMsg }: ${ err }`));
+            } else {
+              const processedOutgoing = postFunction(innerVal, incoming);
+              if (typeof processedOutgoing.then === 'function') {
+                processedOutgoing
+                  .then((innerProcessedOutgoing) => {
+                    sendFn(constructReply(innerProcessedOutgoing));
+                  })
+                  .catch((err) => console.error(`${ errMsg }: ${ err }`));
+              } else {
+                sendFn(constructReply(processedOutgoing));
+              }
+            }
+          })
+          .catch((err) => console.error(`${ errMsg }: ${ err }`));
+      },
+      error: (err) => {
+        console.error(`Error recieved from sink stream in driver created using driverFromAsync(${ functionName }): ${ err }`);
+      },
+      complete: () => {
+        console.warn(`Unexpected completion of sink stream to driver created using driverFromAsync(${ functionName })`);
+      }
+    });
+
+    return {
+      select: (selector) => {
+        if (selector === undefined) return toApp$
+        if (typeof selector === 'function') return toApp$.filter(selector)
+        return toApp$.filter((val) => val?.[selectorProperty] === selector)
+      }
+    }
+
+  }
+}
+
 function processForm(form, options={}) {
   let { events = ['input', 'submit'], preventDefault = true } = options;
   if (typeof events === 'string') events = [events];
@@ -4759,6 +4927,7 @@ exports.collection = collection;
 exports.component = component;
 exports.debounce = _default$2;
 exports.delay = _default$4;
+exports.driverFromAsync = driverFromAsync;
 exports.dropRepeats = _default$5;
 exports.processForm = processForm;
 exports.run = run;