Merge branch 'control-flow'

packages/client/src/createApp.js

@@ -50,74 +50,32 @@ export const createApp = (componentLibraries, appDefinition, user, uiFunctions)
         if(isFunction(event)) event(context);
     }
 
-    const initialiseChildrenParams = (parentContext, hydrate) =>  ({
-        bb, coreApi, store, 
+    const initialiseChildrenParams = (hydrate, parentContext, childIndex) =>  ({
+        bb, coreApi, store, parentContext,
         componentLibraries, appDefinition, 
-        parentContext, hydrate, uiFunctions
+        hydrate, uiFunctions, childIndex
     });
 
-    const bb = (context, props) => ({
-        hydrateChildren: _initialiseChildren(initialiseChildrenParams(context, true)), 
-        appendChildren: _initialiseChildren(initialiseChildrenParams(context, false)), 
-        insertChildren: (props, htmlElement, anchor, context) => 
-            _initialiseChildren(initialiseChildrenParams(context, false))
-                                (props, htmlElement, context, anchor), 
-        store,
-        relativeUrl,
-        api,
+    const bb = (componentProps, componentContext, childIndex) => ({
+        hydrateChildren: _initialiseChildren(initialiseChildrenParams(true, componentContext, childIndex)), 
+        appendChildren: _initialiseChildren(initialiseChildrenParams(false, componentContext, childIndex)), 
+        insertChildren: (props, htmlElement, anchor) => 
+            _initialiseChildren(initialiseChildrenParams(false, componentContext, childIndex))
+                                (props, htmlElement, anchor), 
+        context: componentContext,
+        props: componentProps,
         call:safeCallEvent,
-        isBound,
         setStateFromBinding: (binding, value) => setStateFromBinding(store, binding, value),
         setState: (path, value) => setState(store, path, value),
         getStateOrValue: (prop, currentContext) => 
             getStateOrValue(globalState, prop, currentContext),
-        context,
-        props        
+        store,
+        relativeUrl,
+        api,
+        isBound,
+        parent
     });
 
     return bb();
 
 }
-
-const buildBindings = (boundProps, boundArrays, contextBoundProps) => {
-    const bindings = {};
-    if(boundProps && boundProps.length > 0) {
-        for(let p of boundProps) {
-            bindings[p.propName] = {
-                path: p.path,
-                fallback: p.fallback,
-                source: p.source
-            }
-        }
-    }
-
-    if(contextBoundProps && contextBoundProps.length > 0) {
-        for(let p of contextBoundProps) {
-            bindings[p.propName] = {
-                path: p.path,
-                fallback: p.fallback,
-                source: p.source
-            }
-        }
-    }
-
-    if(boundArrays && boundArrays.length > 0) {
-        for(let a of boundArrays) {
-            const arrayOfBindings = [];
-
-            for(let b of a.arrayOfBindings) {
-                arrayOfBindings.push(
-                    buildBindings(
-                        b.boundProps, 
-                        b.boundArrays, 
-                        b.contextBoundProps)
-                );
-            }
-
-            bindings[a.propName] = arrayOfBindings;
-        }
-    }
-
-    return bindings;
-}
-

packages/client/src/index.js

@@ -35,16 +35,16 @@ export const loadBudibase = async ({
         props = appDefinition.props;
     }
 
-    const _app = createApp(
+    const app = createApp(
         componentLibraries, 
         appDefinition,  
         user, 
         uiFunctions || {});
-    _app.hydrateChildren(
+    app.hydrateChildren(
         [props],
         window.document.body);
 
-    return _app;
+    return app;
 };
 
 if(window) {

packages/client/src/render/initialiseChildren.js

@@ -9,10 +9,10 @@ import { $ } from "../core/common";
 import { renderComponent } from "./renderComponent";
 
 export const _initialiseChildren = (initialiseOpts) => 
-                            (childrenProps, htmlElement, context, anchor=null) => {
+                            (childrenProps, htmlElement, anchor=null) => {
 
     const { uiFunctions, bb, coreApi, 
-        store, componentLibraries, 
+        store, componentLibraries, childIndex,
         appDefinition, parentContext, hydrate } = initialiseOpts;
         
     const childComponents = [];
@@ -23,6 +23,7 @@ export const _initialiseChildren = (initialiseOpts) =>
         }
     }
     
+    let childIndex = 0;
     for(let childProps of childrenProps) {       
         
         const {componentName, libName} = splitName(childProps._component);
@@ -30,25 +31,25 @@ export const _initialiseChildren = (initialiseOpts) =>
         if(!componentName || !libName) return;
         
         const {initialProps, bind} = setupBinding(
-                store, childProps, coreApi, 
-                context || parentContext, appDefinition.appRootPath);
-
-        /// here needs to go inside renderComponent ???
-        const componentProps = {
-            ...initialProps, 
-            _bb:bb(context || parentContext, childProps)
-        };
+                store, childProps, coreApi,  
+                appDefinition.appRootPath);
 
+       
         const componentConstructor = componentLibraries[libName][componentName];
 
-        const {component} = renderComponent({
+        const {component, context, lastChildIndex} = renderComponent({
             componentConstructor,uiFunctions, 
-            htmlElement, anchor, 
-            parentContext, componentProps});
-
+            htmlElement, anchor, childIndex,  
+            parentContext, initialProps, bb});
 
-        bind(component);
-        childComponents.push(component);
+        childIndex = lastChildIndex;
+        
+        const unsubscribe = bind(component);
+        childComponents.push({
+            component, 
+            context,
+            unsubscribe
+        });
     }
 
     return childComponents;

packages/client/src/render/renderComponent.js

@@ -2,9 +2,9 @@
 export const renderComponent = ({
     componentConstructor, uiFunctions,
     htmlElement, anchor, parentContext,
-    componentProps}) => {
+    initialProps, bb, childIndex}) => {
 
-    const func = componentProps._id 
+    const func = initialProps._id 
                  ? uiFunctions[componentProps._id]
                  : undefined;
                  
@@ -19,12 +19,16 @@ export const renderComponent = ({
             componentContext = parentContext;
         }
 
+        initialProps._bb = bb(initialProps, componentContext);
+
         component = new componentConstructor({
             target: htmlElement,
-            props: componentProps,
+            props: initialProps,
             hydrate:false,
             anchor
         });
+
+        childIndex += 1;
     }
 
     if(func) {
@@ -35,6 +39,7 @@ export const renderComponent = ({
 
     return ({
         context: componentContext,
+        lastChildIndex: childIndex,
         component
     });
 }