sygnal 2.8.0 → 2.8.2

package/dist/index.cjs.js

@@ -3283,8 +3283,10 @@ class Component {
       };
     }
 
+    const componentNumber = COMPONENT_COUNT++;
+
     this.addCalculated = this.createMemoizedAddCalculated();
-    this.log = makeLog(name);
+    this.log = makeLog(`${componentNumber} | ${name}`);
 
     this.initIntent$();
     this.initAction$();
@@ -3299,11 +3301,9 @@ class Component {
     this.initVdom$();
     this.initSinks();
 
-    this.sinks.__index = COMPONENT_COUNT++;
+    this.sinks.__index = componentNumber;
 
-    if (debug) {
-      console.log(`[${ this.name }] Instantiated (#${ this.sinks.__index })`);
-    }
+    this.log(`Instantiated`, true);
   }
 
   get debug() {
@@ -3358,7 +3358,7 @@ class Component {
     const hydrate$ = initialApiData.map(data => ({ type: HYDRATE_ACTION, data }));
 
     this.action$   = xs$1.merge(wrapped$, hydrate$)
-      .compose(this.log(({ type }) => `Action triggered: <${ type }>`));
+      .compose(this.log(({ type }) => `<${ type }> Action triggered`));
   }
 
   initResponse$() {
@@ -3408,7 +3408,7 @@ class Component {
               console.log(`${ timestamp } ${ ip } ${ req.method } ${ req.url }`);
 
               if (this.debug) {
-                this.action$.setDebugListener({next: ({ type }) => console.log(`[${ this.name }] Action from ${ this.requestSourceName } request: <${ type }>`)});
+                this.action$.setDebugListener({next: ({ type }) => this.log(`[${ this.name }] Action from ${ this.requestSourceName } request: <${ type }>`, true)});
               }
 
               if (actionType === 'function') {
@@ -3565,10 +3565,10 @@ class Component {
         const wrapped$ = on$
           .compose(this.log(data => {
             if (isStateSink) {
-              return `State reducer added: <${ action }>`
+              return `<${ action }> State reducer added`
             } else {
               const extra = data && (data.type || data.command || data.name || data.key || (Array.isArray(data) && 'Array') || data);
-              return `Data sent to [${ sink }]: <${ action }> ${ JSON.stringify(extra) }`
+              return `<${ action }> Data sent to [${ sink }]: ${ JSON.stringify(extra).replaceAll('"', '') }`
             }
           }));
 
@@ -3691,6 +3691,7 @@ class Component {
 
     this.vdom$ = renderParameters$
       .map(this.view)
+      .compose(this.log('View rendered'))
       .map(vDom => vDom || { sel: 'div', data: {}, children: [] })
       .compose(this.instantiateSubComponents.bind(this))
       .filter(val => val !== undefined)
@@ -3731,6 +3732,7 @@ class Component {
               // push the "next" action request into the action$ stream
               rootAction$.shamefullySendNext({ type, data: _data });
             }, delay);
+            this.log(`<${ name }> Triggered a next() action: <${ type }> ${ delay }ms delay`, true);
           };
 
           let data = action.data;
@@ -3827,37 +3829,19 @@ class Component {
     const enhancedState = state && state.isolateSource(state, { get: state => this.addCalculated(state) });
     const stateStream   = (enhancedState && enhancedState.stream) || xs$1.never();
 
-    const objRepeatChecker = (a, b) => {
-      const { state, sygnalFactory, __props, __children, __context, ...sanitized } = a;
-      const keys = Object.keys(sanitized);
-      if (keys.length === 0) {
-        const { state, sygnalFactory, __props, __children, __context, ...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));
+    renderParams.state  = stateStream.compose(_default$5(objIsEqual));
 
     if (this.sources.props$) {
-      renderParams.__props = this.sources.props$.compose(_default$5(objRepeatChecker));
+      renderParams.__props = this.sources.props$.compose(_default$5(objIsEqual));
     }
 
     if (this.sources.children$) {
-      renderParams.__children = this.sources.children$.compose(_default$5(arrRepeatChecker));
+      renderParams.__children = this.sources.children$.compose(_default$5(objIsEqual));
     }
 
     if (this.context$) {
-      renderParams.__context = this.context$.compose(_default$5(objRepeatChecker));
+      renderParams.__context = this.context$.compose(_default$5(objIsEqual));
     }
 
     const names   = [];
@@ -3869,11 +3853,15 @@ class Component {
     });
 
     const combined = xs$1.combine(...streams)
+      .compose(_default$2(1))
       // map the streams from an array back to an object with the render parameter names as the keys
       .map(arr => {
         const params = names.reduce((acc, name, index) => {
           acc[name] = arr[index];
           if (name === 'state') acc[this.stateSourceName] = arr[index];
+          if (name === '__props') acc.props = arr[index];
+          if (name === '__children') acc.children = arr[index];
+          if (name === '__context') acc.context = arr[index];
           return acc
         }, {});
         return params
@@ -3895,6 +3883,7 @@ class Component {
       }
 
       const sinkArrsByType = {};
+      let newInstanceCount = 0;
 
       const newComponents =  entries.reduce((acc, [id, el]) => {
         const data     = el.data;
@@ -3934,6 +3923,8 @@ class Component {
           instantiator = this.instantiateCustomComponent.bind(this);
         }
 
+        newInstanceCount++;
+
         const sink$ = instantiator(el, props$, children$);
 
         sink$[this.DOMSourceName] = sink$[this.DOMSourceName] ? this.makeCoordinatedSubComponentDomSink(sink$[this.DOMSourceName]) : xs$1.never();
@@ -3953,18 +3944,18 @@ class Component {
 
       this.newSubComponentSinks(mergedSinksByType);
 
+      if (newInstanceCount > 0) this.log(`New sub components instantiated: ${ newInstanceCount }`, true);
+
       return newComponents
     }, {})
   }
 
   makeCoordinatedSubComponentDomSink(domSink$) {
     const remembered$   = domSink$.remember();
-    const repeatChecker = (a, b) => JSON.stringify(a) === JSON.stringify(b);
 
     const coordinated = this.sources[this.stateSourceName].stream
-      .compose(_default$5(repeatChecker))
+      .compose(_default$5(objIsEqual))
       .map(state => remembered$)
-      .compose(_default$2(10))
       .flatten()
       .debug(_ => this.triggerSubComponentsRendered())
       .remember();
@@ -4214,7 +4205,7 @@ class Component {
 
   renderVdom(componentInstances$) {
     return xs$1.combine(this.subComponentsRendered$, componentInstances$)
-      .compose(_default$2(5))
+      .compose(_default$2(1))
       .map(([_, components]) => {
         const componentNames = Object.keys(this.components);
 
@@ -4235,7 +4226,7 @@ class Component {
         if (vdom$.length === 0) return xs$1.of(root)
 
         return xs$1.combine(...vdom$)
-          .compose(_default$2(10))
+          .compose(_default$2(1))
           .map(vdoms => {
             const withIds = vdoms.reduce((acc, vdom, index) => {
               acc[ids[index]] = vdom;
@@ -4249,7 +4240,6 @@ class Component {
       .flatten()
       .filter(val => !!val)
       .remember()
-      .compose(this.log('View Rendered'))
   }
 
 }
@@ -4273,21 +4263,28 @@ class Component {
  * ONLY outputs if the global `DEBUG` variable is set to `true`
  */
  function makeLog (context) {
-  return function (msg) {
+  return function (msg, immediate=false) {
     const fixedMsg = (typeof msg === 'function') ? msg : _ => msg;
-    return stream => {
-      return stream.debug(msg => {
-        if (this.debug) {
-          console.log(`[${context}] ${fixedMsg(msg)}`);
-        }
-      })
+    if (immediate) {
+      if (this.debug) {
+        console.log(`[${context}] ${fixedMsg(msg)}`);
+      }
+      return
+    } else {
+      return stream => {
+        return stream.debug(msg => {
+          if (this.debug) {
+            console.log(`[${context}] ${fixedMsg(msg)}`);
+          }
+        })
+      }
     }
   }
 }
 
 
 
-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 {}
@@ -4302,9 +4299,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`)
@@ -4327,7 +4325,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);
             });
@@ -4336,7 +4334,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;
@@ -4349,8 +4347,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';
@@ -4362,28 +4361,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
 }
 
@@ -4393,6 +4385,65 @@ function deepCopyVdom(obj) {
   return { ...obj, children: Array.isArray(obj.children) ? obj.children.map(deepCopyVdom) : undefined, data: obj.data && { ...obj.data, componentsInjected: false } }
 }
 
+function objIsEqual(objA, objB, maxDepth = 5, depth = 0) {
+  const obj1 = sanitizeObject(objA);
+  const obj2 = sanitizeObject(objB);
+  // Base case: if the current depth exceeds maxDepth, return true
+  if (depth > maxDepth) {
+      return false;
+  }
+
+  // If both are the same object or are both exactly null or undefined
+  if (obj1 === obj2) {
+      return true;
+  }
+
+  // If either is not an object (null, undefined, or primitive), directly compare
+  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
+      return false;
+  }
+
+  // Special handling for arrays
+  if (Array.isArray(obj1) && Array.isArray(obj2)) {
+    if (obj1.length !== obj2.length) {
+        return false;
+    }
+    for (let i = 0; i < obj1.length; i++) {
+        if (!isEqual(obj1[i], obj2[i], maxDepth, depth + 1)) {
+            return false;
+        }
+    }
+    return true;
+  }
+
+  // Get keys of both objects
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  // Check if the number of properties is different
+  if (keys1.length !== keys2.length) {
+      return false;
+  }
+
+  // Recursively check each property
+  for (const key of keys1) {
+      if (!keys2.includes(key)) {
+          return false;
+      }
+      if (!objIsEqual(obj1[key], obj2[key], maxDepth, depth + 1)) {
+          return false;
+      }
+  }
+
+  return true;
+}
+
+function sanitizeObject(obj) {
+  if (typeof obj !== 'object' || obj === null) return obj
+  const {state, of, from, _reqId, _action, __props, __children, __context, ...sanitized} = obj;
+  return sanitized
+}
+
 function driverFromAsync(promiseReturningFunction, opts = {}) {
   const {
     selector: selectorProperty = 'category',