sygnal 2.6.3 → 2.6.5

package/README.md

@@ -123,6 +123,22 @@ Alternatively, you can use any other bundler of your choice (Webpack, Babel, Rol
 }
 ```
 
+NOTE: Some minifiers will cause JSX fragments to fail by renaming the Fragment pragma function. This can be fixed by preventing renaming of 'Fragment'. For Vite this is done by installing terser, and adding the following to your vite.config.js file:
+
+```javascript
+{
+  ...,
+  build: {
+    minify: 'terser',
+    terserOptions: {
+      mangle: {
+        reserved: ['Fragment'],
+      },
+    }
+  },
+}
+```
+
 
 ## Initialization
 

package/dist/index.cjs.js

@@ -1,18 +1,11 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var isolate = require('@cycle/isolate');
 var state = require('@cycle/state');
 var xs$1 = require('xstream');
 var run$1 = require('@cycle/run');
 var dom = require('@cycle/dom');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var isolate__default = /*#__PURE__*/_interopDefaultLegacy(isolate);
-var xs__default = /*#__PURE__*/_interopDefaultLegacy(xs$1);
-
 function collection(component, stateLense, opts={}) {
   const {
     combineList     = ['DOM'],
@@ -70,7 +63,7 @@ function collection(component, stateLense, opts={}) {
  * @return {Object} collection of component sinks
  */
  function makeIsolatedCollection (collectionOpts, isolateOpts, sources) {
-  return isolate__default["default"](state.makeCollection(collectionOpts), isolateOpts)(sources)
+  return isolate(state.makeCollection(collectionOpts), isolateOpts)(sources)
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -79,9 +72,7 @@ var dropRepeats$1 = {};
 
 var xstream = {};
 
-var ponyfill$1 = {exports: {}};
-
-var ponyfill = {};
+var ponyfill$1 = {};
 
 (function (exports) {
 
@@ -115,11 +106,9 @@ var ponyfill = {};
 		}
 
 		return result;
-	}} (ponyfill));
+	}} (ponyfill$1));
 
-(function (module) {
-	module.exports = ponyfill;
-} (ponyfill$1));
+var ponyfill = ponyfill$1;
 
 var toStr$2 = Object.prototype.toString;
 
@@ -919,7 +908,7 @@ var __extends = (commonjsGlobal && commonjsGlobal.__extends) || (function () {
 })();
 Object.defineProperty(xstream, "__esModule", { value: true });
 xstream.NO_IL = xstream.NO = xstream.MemoryStream = xstream.Stream = void 0;
-var ponyfill_1 = ponyfill$1.exports;
+var ponyfill_1 = ponyfill;
 var globalthis_1 = globalthis;
 var $$observable = ponyfill_1.default(globalthis_1.getPolyfill());
 var NO$1 = {};
@@ -2823,7 +2812,7 @@ function _switchable (factories, sources, name$, switched=['DOM'], stateSourceNa
     .map(([name, factory]) => {
       if (sources[stateSourceName]) {
         const state$ = sources[stateSourceName].stream;
-        const switched = xs__default["default"].combine(name$, state$)
+        const switched = xs$1.combine(name$, state$)
                            .filter(([newComponentName, _]) => newComponentName == name)
                            .map(([_, state]) => state)
                            .remember();
@@ -2840,7 +2829,7 @@ function _switchable (factories, sources, name$, switched=['DOM'], stateSourceNa
         obj[sinkName] = name$
           .map( newComponentName => {
             const sink = sinks.find(([componentName, _]) => componentName === newComponentName);
-            return (sink && sink[1][sinkName]) || xs__default["default"].never()
+            return (sink && sink[1][sinkName]) || xs$1.never()
           })
           .flatten()
           .remember()
@@ -2848,7 +2837,7 @@ function _switchable (factories, sources, name$, switched=['DOM'], stateSourceNa
       } else {
         const definedSinks = sinks.filter(([_,sink]) => sink[sinkName] !== undefined)
                                   .map(([_,sink]) => sink[sinkName]);
-        obj[sinkName] = xs__default["default"].merge(...definedSinks);
+        obj[sinkName] = xs$1.merge(...definedSinks);
       }
       return obj
     }, {});
@@ -3162,6 +3151,7 @@ const HYDRATE_ACTION          = 'HYDRATE';
 
 
 let IS_ROOT_COMPONENT = true;
+let COMPONENT_COUNT   = 0;
 
 
 const ABORT = '~#~#~ABORT~#~#~';
@@ -3185,16 +3175,19 @@ function component (opts) {
   }
 
   const currySources = typeof sources === 'undefined';
+  let returnFunction;
 
   if (typeof fixedIsolateOpts == 'object') {
     const wrapped = (sources) => {
       const fixedOpts = { ...opts, sources };
       return (new Component(fixedOpts)).sinks
     };
-    return currySources ? isolate__default["default"](wrapped, fixedIsolateOpts) : isolate__default["default"](wrapped, fixedIsolateOpts)(sources)
+    returnFunction = currySources ? isolate(wrapped, fixedIsolateOpts) : isolate(wrapped, fixedIsolateOpts)(sources);
   } else {
-    return currySources ? (sources) => (new Component({ ...opts, sources })).sinks : (new Component(opts)).sinks
+    returnFunction = currySources ? (sources) => (new Component({ ...opts, sources })).sinks : (new Component(opts)).sinks;
   }
+
+  return returnFunction
 }
 
 
@@ -3272,7 +3265,7 @@ class Component {
     //       refactor to avoid using a global variable
     if (IS_ROOT_COMPONENT && typeof this.intent === 'undefined' && typeof this.model === 'undefined') {
       this.initialState = initialState || true;
-      this.intent = _ => ({__NOOP_ACTION__:xs__default["default"].never()});
+      this.intent = _ => ({__NOOP_ACTION__:xs$1.never()});
       this.model = {
         __NOOP_ACTION__: state => state
       };
@@ -3292,6 +3285,12 @@ class Component {
     this.initSubComponentsRendered$();
     this.initVdom$();
     this.initSinks();
+
+    this.sinks.__index = COMPONENT_COUNT++;
+
+    if (ENVIRONMENT.DEBUG === true) {
+      console.log(`[${ this.name }] Instantiated (#${ this.sinks.__index })`);
+    }
   }
 
   initIntent$() {
@@ -3313,7 +3312,7 @@ class Component {
     const requestSource  = (this.sources && this.sources[this.requestSourceName]) || null;
 
     if (!this.intent$) {
-      this.action$ = xs__default["default"].never();
+      this.action$ = xs$1.never();
       return
     }
 
@@ -3323,11 +3322,11 @@ class Component {
     } else {
       const mapped = Object.entries(this.intent$)
                            .map(([type, data$]) => data$.map(data => ({type, data})));
-      runner = xs__default["default"].merge(xs__default["default"].never(), ...mapped);
+      runner = xs$1.merge(xs$1.never(), ...mapped);
     }
 
-    const action$  = ((runner instanceof xs$1.Stream) ? runner : (runner.apply && runner(this.sources) || xs__default["default"].never()));
-    const wrapped$ = _default$3(xs__default["default"].of({ type: BOOTSTRAP_ACTION }), action$)
+    const action$  = ((runner instanceof xs$1.Stream) ? runner : (runner.apply && runner(this.sources) || xs$1.never()));
+    const wrapped$ = _default$3(xs$1.of({ type: BOOTSTRAP_ACTION }), action$)
       .compose(_default$4(10));
 
     let initialApiData;
@@ -3335,12 +3334,12 @@ class Component {
       initialApiData = requestSource.select('initial')
         .flatten();
     } else {
-      initialApiData = xs__default["default"].never();
+      initialApiData = xs$1.never();
     }
 
     const hydrate$ = initialApiData.map(data => ({ type: HYDRATE_ACTION, data }));
 
-    this.action$   = xs__default["default"].merge(wrapped$, hydrate$)
+    this.action$   = xs$1.merge(wrapped$, hydrate$)
       .compose(this.log(({ type }) => `Action triggered: <${ type }>`));
   }
 
@@ -3397,7 +3396,7 @@ class Component {
               if (actionType === 'function') {
                 const enhancedState = this.addCalculated(this.currentState);
                 const result = action(enhancedState, req);
-                return xs__default["default"].of({ ...obj, data: result })
+                return xs$1.of({ ...obj, data: result })
               } else {
                 this.action$.shamefullySendNext(obj);
 
@@ -3407,7 +3406,7 @@ class Component {
                   const selected$ = source[REQUEST_SELECTOR_METHOD](_reqId);
                   return [ ...acc, selected$ ]
                 }, []);
-                return xs__default["default"].merge(...responses)
+                return xs$1.merge(...responses)
               }
             } catch(err) {
               console.error(err);
@@ -3415,11 +3414,11 @@ class Component {
           }).flatten();
         return [ ...acc, route$ ]
       }, []);
-      const mapped$ = xs__default["default"].merge(...mapped);
+      const mapped$ = xs$1.merge(...mapped);
       return [ ...acc, mapped$ ]
     }, []);
 
-    this.response$ = xs__default["default"].merge(...wrapped)
+    this.response$ = xs$1.merge(...wrapped)
       .compose(this.log(res => {
         if (res._action) return `[${ this.requestSourceName }] response data received for Action: <${ res._action }>`
         return `[${ this.requestSourceName }] response data received from FUNCTION`
@@ -3450,14 +3449,14 @@ class Component {
   initModel$() {
     if (typeof this.model == 'undefined') {
       this.model$ = this.sourceNames.reduce((a,s) => {
-        a[s] = xs__default["default"].never();
+        a[s] = xs$1.never();
         return a
       }, {});
       return
     }
 
     const initial  = { type: INITIALIZE_ACTION, data: this.initialState };
-    const shimmed$ = this.initialState ? _default$3(xs__default["default"].of(initial), this.action$).compose(_default$4(0)) : this.action$;
+    const shimmed$ = this.initialState ? _default$3(xs$1.of(initial), this.action$).compose(_default$4(0)) : this.action$;
     const onState  = this.makeOnAction(shimmed$, true, this.action$);
     const onNormal = this.makeOnAction(this.action$, false, this.action$);
 
@@ -3506,7 +3505,7 @@ class Component {
 
     const model$ = Object.entries(reducers).reduce((acc, entry) => {
       const [sink, streams] = entry;
-      acc[sink] = xs__default["default"].merge(xs__default["default"].never(), ...streams);
+      acc[sink] = xs$1.merge(xs$1.never(), ...streams);
       return acc
     }, {});
 
@@ -3525,7 +3524,7 @@ class Component {
           next: this.log(({ _reqId, _action }) => `Unhandled response for request: ${ _action } ${ _reqId }`)
         });
       }
-      this.sendResponse$ = xs__default["default"].never();
+      this.sendResponse$ = xs$1.never();
       return
     }
 
@@ -3553,7 +3552,7 @@ class Component {
       return [ ...acc, mapped$ ]
     }, []);
 
-    this.sendResponse$ = xs__default["default"].merge(...out$)
+    this.sendResponse$ = xs$1.merge(...out$)
       .compose(this.log(({ _reqId, _action }) => `[${ this.requestSourceName }] response sent for: <${ _action }>`));
   }
 
@@ -3581,7 +3580,7 @@ class Component {
   }
 
   initSubComponentSink$() {
-    const subComponentSink$ = xs__default["default"].create({
+    const subComponentSink$ = xs$1.create({
       start: listener => {
         this.newSubComponentSinks = listener.next.bind(listener);
       },
@@ -3594,7 +3593,7 @@ class Component {
   }
 
   initSubComponentsRendered$() {
-    const stream = xs__default["default"].create({
+    const stream = xs$1.create({
       start: (listener) => {
         this.subComponentsRendered = listener.next.bind(listener);
       },
@@ -3607,7 +3606,7 @@ class Component {
 
   initVdom$() {
     if (typeof this.view != 'function') {
-      this.vdom$ = xs__default["default"].of(null);
+      this.vdom$ = xs$1.of(null);
       return
     }
 
@@ -3625,17 +3624,17 @@ class Component {
   initSinks() {
     this.sinks = this.sourceNames.reduce((acc, name) => {
       if (name == this.DOMSourceName) return acc
-      const subComponentSink$ = this.subComponentSink$ ? this.subComponentSink$.map(sinks => sinks[name]).filter(sink => !!sink).flatten() : xs__default["default"].never();
+      const subComponentSink$ = this.subComponentSink$ ? this.subComponentSink$.map(sinks => sinks[name]).filter(sink => !!sink).flatten() : xs$1.never();
       if (name === this.stateSourceName) {
-        acc[name] = xs__default["default"].merge((this.model$[name] || xs__default["default"].never()), subComponentSink$, this.sources[this.stateSourceName].stream.filter(_ => false), ...this.children$[name]);
+        acc[name] = xs$1.merge((this.model$[name] || xs$1.never()), subComponentSink$, this.sources[this.stateSourceName].stream.filter(_ => false), ...this.children$[name]);
       } else {
-        acc[name] = xs__default["default"].merge((this.model$[name] || xs__default["default"].never()), subComponentSink$, ...this.children$[name]);
+        acc[name] = xs$1.merge((this.model$[name] || xs$1.never()), subComponentSink$, ...this.children$[name]);
       }
       return acc
     }, {});
 
     this.sinks[this.DOMSourceName]     = this.vdom$;
-    this.sinks[this.requestSourceName] = xs__default["default"].merge(this.sendResponse$ ,this.sinks[this.requestSourceName]);
+    this.sinks[this.requestSourceName] = xs$1.merge(this.sendResponse$ ,this.sinks[this.requestSourceName]);
   }
 
   makeOnAction(action$, isStateSink=true, rootAction$) {
@@ -3729,7 +3728,7 @@ class Component {
     const renderParams = { ...this.children$[this.DOMSourceName] };
 
     const enhancedState = state && state.isolateSource(state, { get: state => this.addCalculated(state) });
-    const stateStream   = (enhancedState && enhancedState.stream) || xs__default["default"].never();
+    const stateStream   = (enhancedState && enhancedState.stream) || xs$1.never();
 
     renderParams.state                 = stateStream;
     renderParams[this.stateSourceName] = stateStream;
@@ -3750,7 +3749,7 @@ class Component {
       streams.push(stream);
     });
 
-    const combined = xs__default["default"].combine(...streams)
+    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) => {
@@ -3768,6 +3767,8 @@ class Component {
       const foundComponents = getComponents(vDom, componentNames);
       const entries         = Object.entries(foundComponents);
 
+      if (this.name === 'APP') console.log(`[${ this.name }] FOUND`, foundComponents);
+
       const rootEntry = { '::ROOT::': vDom };
 
       if (entries.length === 0) {
@@ -3792,8 +3793,8 @@ class Component {
           return acc
         }
 
-        const props$    = xs__default["default"].create().startWith(props);
-        const children$ = xs__default["default"].create().startWith(children);
+        const props$    = xs$1.create().startWith(props);
+        const children$ = xs$1.create().startWith(children);
 
         let instantiator;
 
@@ -3807,7 +3808,7 @@ class Component {
 
         const sink$ = instantiator(el, props$, children$);
 
-        sink$[this.DOMSourceName] = sink$[this.DOMSourceName] ? this.makeCoordinatedSubComponentDomSink(sink$[this.DOMSourceName]) : xs__default["default"].never();
+        sink$[this.DOMSourceName] = sink$[this.DOMSourceName] ? this.makeCoordinatedSubComponentDomSink(sink$[this.DOMSourceName]) : xs$1.never();
 
         acc[id] = { sink$, props$, children$ };
 
@@ -3821,7 +3822,7 @@ class Component {
 
       const mergedSinksByType = Object.entries(sinkArrsByType).reduce((acc, [name, streamArr]) => {
         if (streamArr.length === 0) return acc
-        acc[name] = streamArr.length === 1 ? streamArr[0] : xs__default["default"].merge(...streamArr);
+        acc[name] = streamArr.length === 1 ? streamArr[0] : xs$1.merge(...streamArr);
         return acc
       }, {});
 
@@ -3851,7 +3852,7 @@ class Component {
     const props     = data.props || {};
     el.children || [];
 
-    const combined$ = xs__default["default"].combine(this.sources[this.stateSourceName].stream.startWith(this.currentState), props$, children$)
+    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 }
       });
@@ -3952,7 +3953,7 @@ class Component {
     const props     = data.props  || {};
     el.children || [];
 
-    const combined$ = xs__default["default"].combine(this.sources[this.stateSourceName].stream.startWith(this.currentState), props$, children$)
+    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 }
       });
@@ -4005,7 +4006,7 @@ class Component {
     const switchableComponents = props.of;
     const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$ };
 
-    const sink$ = isolate__default["default"](switchable(switchableComponents, props$.map(props => props.current)), { [this.stateSourceName]: lense })(sources);
+    const sink$ = isolate(switchable(switchableComponents, props$.map(props => props.current)), { [this.stateSourceName]: lense })(sources);
 
     if (typeof sink$ !== 'object') {
       throw new Error('Invalid sinks returned from component factory of switchable element')
@@ -4020,7 +4021,7 @@ class Component {
     const props     = data.props  || {};
     el.children || [];
 
-    const combined$ = xs__default["default"].combine(this.sources[this.stateSourceName].stream.startWith(this.currentState), props$, children$)
+    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 }
       });
@@ -4076,7 +4077,7 @@ class Component {
     }
 
     const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$ };
-    const sink$   = isolate__default["default"](factory, { [this.stateSourceName]: lense })(sources);
+    const sink$   = isolate(factory, { [this.stateSourceName]: lense })(sources);
 
     if (typeof sink$ !== 'object') {
       const name = componentName === 'sygnal-factory' ? 'custom element' : componentName;
@@ -4087,7 +4088,7 @@ class Component {
   }
 
   renderVdom(componentInstances$) {
-    return xs__default["default"].combine(this.subComponentsRendered$, componentInstances$)
+    return xs$1.combine(this.subComponentsRendered$, componentInstances$)
       .compose(_default$2(5))
       .map(([_, components]) => {
         const componentNames = Object.keys(this.components);
@@ -4096,7 +4097,7 @@ class Component {
         const entries = Object.entries(components).filter(([id]) => id !== '::ROOT::');
 
         if (entries.length === 0) {
-          return xs__default["default"].of(root)
+          return xs$1.of(root)
         }
 
         const ids = [];
@@ -4106,9 +4107,9 @@ class Component {
             return val.sink$[this.DOMSourceName].startWith(undefined)
           });
 
-        if (vdom$.length === 0) return xs__default["default"].of(root)
+        if (vdom$.length === 0) return xs$1.of(root)
 
-        return xs__default["default"].combine(...vdom$)
+        return xs$1.combine(...vdom$)
           .compose(_default$2(10))
           .map(vdoms => {
             const withIds = vdoms.reduce((acc, vdom, index) => {
@@ -4179,6 +4180,7 @@ function getComponents(currentElement, componentNames, depth=0, index=0) {
 
   if (isComponent) {
     const id  = getComponentIdFromElement(currentElement, depth, index);
+    if (found[id]) console.log('DUPLICATE', id);
     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`)
@@ -4188,7 +4190,7 @@ function getComponents(currentElement, componentNames, depth=0, index=0) {
       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 'components' property of switchable element: found ${ typeof props.of } requires object mapping names to component factories`)
+      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`)
       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`)
@@ -4200,16 +4202,19 @@ function getComponents(currentElement, componentNames, depth=0, index=0) {
   }
 
   if (children.length > 0) {
-    children.map((child, i) => getComponents(child, componentNames, depth + 1, i))
-            .forEach((child) => {
-              Object.entries(child).forEach(([id, el]) => found[id] = el);
+    children.map((child, i) => getComponents(child, componentNames, depth + 1, index + i))
+            .forEach((child, i) => {
+              Object.entries(child).forEach(([id, el]) => {
+                if (found[id]) console.log('DUPLICATE', id, depth, i);
+                return found[id] = el
+              });
             });
   }
 
   return found
 }
 
-function injectComponents(currentElement, components, componentNames, depth=0, index) {
+function injectComponents(currentElement, components, componentNames, depth=0, index=0) {
   if (!currentElement) return
   if (currentElement.data?.componentsInjected) return currentElement
   if (depth === 0 && currentElement.data) currentElement.data.componentsInjected = true;
@@ -4235,7 +4240,7 @@ 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, i)).flat();
+    currentElement.children = children.map((child, i) => injectComponents(child, components, componentNames, depth + 1, index + i)).flat();
     return currentElement
   } else {
     return currentElement
@@ -4272,7 +4277,7 @@ function processForm(form, options={}) {
 
   const eventStream$ = events.map(event => form.events(event));
 
-  const merged$ = xs__default["default"].merge(...eventStream$);
+  const merged$ = xs$1.merge(...eventStream$);
 
   return merged$.map((e) => {
     if (preventDefault) e.preventDefault();
@@ -4333,7 +4338,7 @@ function eventBusDriver(out$) {
       const all = !type;
       const _type = (Array.isArray(type)) ? type : [type];
       let cb;
-      const in$ = xs__default["default"].create({
+      const in$ = xs$1.create({
         start: (listener) => {
           cb = ({detail: event}) => {
             const data = (event && event.data) || null;
@@ -4738,10 +4743,7 @@ sampleCombine = function sampleCombine() {
 };
 var _default = sampleCombine$1.default = sampleCombine;
 
-Object.defineProperty(exports, 'xs', {
-  enumerable: true,
-  get: function () { return xs__default["default"]; }
-});
+exports.xs = xs$1;
 exports.ABORT = ABORT;
 exports.classes = classes;
 exports.collection = collection;
@@ -4755,7 +4757,7 @@ exports.sampleCombine = _default;
 exports.switchable = switchable;
 exports.throttle = _default$1;
 Object.keys(dom).forEach(function (k) {
-  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,
     get: function () { return dom[k]; }
   });

package/dist/index.esm.js

@@ -72,9 +72,7 @@ var dropRepeats$1 = {};
 
 var xstream = {};
 
-var ponyfill$1 = {exports: {}};
-
-var ponyfill = {};
+var ponyfill$1 = {};
 
 (function (exports) {
 
@@ -108,11 +106,9 @@ var ponyfill = {};
 		}
 
 		return result;
-	}} (ponyfill));
+	}} (ponyfill$1));
 
-(function (module) {
-	module.exports = ponyfill;
-} (ponyfill$1));
+var ponyfill = ponyfill$1;
 
 var toStr$2 = Object.prototype.toString;
 
@@ -912,7 +908,7 @@ var __extends = (commonjsGlobal && commonjsGlobal.__extends) || (function () {
 })();
 Object.defineProperty(xstream, "__esModule", { value: true });
 xstream.NO_IL = xstream.NO = xstream.MemoryStream = xstream.Stream = void 0;
-var ponyfill_1 = ponyfill$1.exports;
+var ponyfill_1 = ponyfill;
 var globalthis_1 = globalthis;
 var $$observable = ponyfill_1.default(globalthis_1.getPolyfill());
 var NO$1 = {};
@@ -3155,6 +3151,7 @@ const HYDRATE_ACTION          = 'HYDRATE';
 
 
 let IS_ROOT_COMPONENT = true;
+let COMPONENT_COUNT   = 0;
 
 
 const ABORT = '~#~#~ABORT~#~#~';
@@ -3178,16 +3175,19 @@ function component (opts) {
   }
 
   const currySources = typeof sources === 'undefined';
+  let returnFunction;
 
   if (typeof fixedIsolateOpts == 'object') {
     const wrapped = (sources) => {
       const fixedOpts = { ...opts, sources };
       return (new Component(fixedOpts)).sinks
     };
-    return currySources ? isolate(wrapped, fixedIsolateOpts) : isolate(wrapped, fixedIsolateOpts)(sources)
+    returnFunction = currySources ? isolate(wrapped, fixedIsolateOpts) : isolate(wrapped, fixedIsolateOpts)(sources);
   } else {
-    return currySources ? (sources) => (new Component({ ...opts, sources })).sinks : (new Component(opts)).sinks
+    returnFunction = currySources ? (sources) => (new Component({ ...opts, sources })).sinks : (new Component(opts)).sinks;
   }
+
+  return returnFunction
 }
 
 
@@ -3285,6 +3285,12 @@ class Component {
     this.initSubComponentsRendered$();
     this.initVdom$();
     this.initSinks();
+
+    this.sinks.__index = COMPONENT_COUNT++;
+
+    if (ENVIRONMENT.DEBUG === true) {
+      console.log(`[${ this.name }] Instantiated (#${ this.sinks.__index })`);
+    }
   }
 
   initIntent$() {
@@ -3761,6 +3767,8 @@ class Component {
       const foundComponents = getComponents(vDom, componentNames);
       const entries         = Object.entries(foundComponents);
 
+      if (this.name === 'APP') console.log(`[${ this.name }] FOUND`, foundComponents);
+
       const rootEntry = { '::ROOT::': vDom };
 
       if (entries.length === 0) {
@@ -4172,6 +4180,7 @@ function getComponents(currentElement, componentNames, depth=0, index=0) {
 
   if (isComponent) {
     const id  = getComponentIdFromElement(currentElement, depth, index);
+    if (found[id]) console.log('DUPLICATE', id);
     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`)
@@ -4181,7 +4190,7 @@ function getComponents(currentElement, componentNames, depth=0, index=0) {
       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 'components' property of switchable element: found ${ typeof props.of } requires object mapping names to component factories`)
+      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`)
       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`)
@@ -4193,16 +4202,19 @@ function getComponents(currentElement, componentNames, depth=0, index=0) {
   }
 
   if (children.length > 0) {
-    children.map((child, i) => getComponents(child, componentNames, depth + 1, i))
-            .forEach((child) => {
-              Object.entries(child).forEach(([id, el]) => found[id] = el);
+    children.map((child, i) => getComponents(child, componentNames, depth + 1, index + i))
+            .forEach((child, i) => {
+              Object.entries(child).forEach(([id, el]) => {
+                if (found[id]) console.log('DUPLICATE', id, depth, i);
+                return found[id] = el
+              });
             });
   }
 
   return found
 }
 
-function injectComponents(currentElement, components, componentNames, depth=0, index) {
+function injectComponents(currentElement, components, componentNames, depth=0, index=0) {
   if (!currentElement) return
   if (currentElement.data?.componentsInjected) return currentElement
   if (depth === 0 && currentElement.data) currentElement.data.componentsInjected = true;
@@ -4228,7 +4240,7 @@ 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, i)).flat();
+    currentElement.children = children.map((child, i) => injectComponents(child, components, componentNames, depth + 1, index + i)).flat();
     return currentElement
   } else {
     return currentElement