Implement updating of individual component props

packages/builder/src/builderStore/store.js

@@ -10,14 +10,14 @@ import {
     pipe, getNode, validate,
     constructHierarchy, templateApi
 } from "../common/core";
-import {writable} from "svelte/store";
+import { writable } from "svelte/store";
 import { defaultPagesObject } from "../userInterface/pagesParsing/defaultPagesObject"
 import { buildPropsHierarchy } from "../userInterface/pagesParsing/buildPropsHierarchy"
 import api from "./api";
 import { isRootComponent, getExactComponent } from "../userInterface/pagesParsing/searchComponents";
 import { rename } from "../userInterface/pagesParsing/renameScreen";
 import {
-    getNewComponentInfo, getScreenInfo
+    getNewComponentInfo, getScreenInfo, getComponentInfo
 } from "../userInterface/pagesParsing/createProps";
 import {
     loadLibs, loadLibUrls, loadGeneratorLibs
@@ -28,30 +28,30 @@ let appname = "";
 export const getStore = () => {
 
     const initial = {
-        apps:[],
+        apps: [],
-        appname:"",
+        appname: "",
         hierarchy: {},
         actions: [],
         triggers: [],
-        pages:defaultPagesObject(),
+        pages: defaultPagesObject(),
-        mainUi:{},
+        mainUi: {},
-        unauthenticatedUi:{},
+        unauthenticatedUi: {},
-        components:[],
+        components: [],
-        currentFrontEndItem:null,
+        currentFrontEndItem: null,
-        currentComponentInfo:null,
+        currentComponentInfo: null,
-        currentFrontEndType:"none",
+        currentFrontEndType: "none",
         currentPageName: "",
-        currentComponentProps:null,
+        currentComponentProps: null,
         currentNodeIsNew: false,
         errors: [],
         activeNav: "database",
-        isBackend:true,
+        isBackend: true,
         hasAppPackage: false,
-        accessLevels: {version:0, levels:[]},
+        accessLevels: { version: 0, levels: [] },
         currentNode: null,
-        libraries:null,
+        libraries: null,
-        showSettings:false,
+        showSettings: false,
-        useAnalytics:true,
+        useAnalytics: true,
     };
 
     const store = writable(initial);
@@ -82,7 +82,7 @@ export const getStore = () => {
     store.setCurrentScreen = setCurrentScreen(store);
     store.setCurrentPage = setCurrentPage(store);
     store.createScreen = createScreen(store);
-    store.removeComponentLibrary =removeComponentLibrary(store);
+    store.removeComponentLibrary = removeComponentLibrary(store);
     store.addStylesheet = addStylesheet(store);
     store.removeStylesheet = removeStylesheet(store);
     store.savePage = savePage(store);
@@ -91,6 +91,9 @@ export const getStore = () => {
     store.showSettings = showSettings(store);
     store.useAnalytics = useAnalytics(store);
     store.createGeneratedComponents = createGeneratedComponents(store);
+    store.addChildComponent = addChildComponent(store);
+    store.selectComponent = selectComponent(store);
+    store.saveComponent = saveComponent(store);
     return store;
 }
 
@@ -102,7 +105,7 @@ const initialise = (store, initial) => async () => {
         ? last(window.location.hash.substr(1).split("/"))
         : "";
 
-    if(!appname) {
+    if (!appname) {
         initial.apps = await api.get(`/_builder/api/apps`).then(r => r.json());
         initial.hasAppPackage = false;
         store.set(initial);
@@ -126,10 +129,10 @@ const initialise = (store, initial) => async () => {
     initial.actions = values(pkg.appDefinition.actions);
     initial.triggers = pkg.appDefinition.triggers;
 
-    if(!!initial.hierarchy && !isEmpty(initial.hierarchy)) {
+    if (!!initial.hierarchy && !isEmpty(initial.hierarchy)) {
         initial.hierarchy = constructHierarchy(initial.hierarchy);
         const shadowHierarchy = createShadowHierarchy(initial.hierarchy);
-        if(initial.currentNode !== null)
+        if (initial.currentNode !== null)
             initial.currentNode = getNode(
                 shadowHierarchy, initial.currentNode.nodeId
             );
@@ -224,7 +227,7 @@ const saveCurrentNode = (store) => () => {
 
         const errors = validate.node(s.currentNode);
         s.errors = errors;
-        if(errors.length > 0) {
+        if (errors.length > 0) {
             return s;
         }
 
@@ -235,7 +238,7 @@ const saveCurrentNode = (store) => () => {
             s.hierarchy, s.currentNode.nodeId);
 
         let index = parentNode.children.length;
-        if(!!existingNode) {
+        if (!!existingNode) {
             // remove existing
             index = existingNode.parent().children.indexOf(existingNode);
             existingNode.parent().children = pipe(existingNode.parent().children, [
@@ -251,7 +254,7 @@ const saveCurrentNode = (store) => () => {
         );
 
         const newIndexOfchild = child => {
-            if(child === cloned) return index;
+            if (child === cloned) return index;
             const currentIndex = parentNode.children.indexOf(child);
             return currentIndex >= index ? currentIndex + 1 : currentIndex;
         }
@@ -260,7 +263,7 @@ const saveCurrentNode = (store) => () => {
             sortBy(newIndexOfchild)
         ]);
 
-        if(!existingNode && s.currentNode.type === "record") {
+        if (!existingNode && s.currentNode.type === "record") {
             const defaultIndex = templateApi(s.hierarchy)
                 .getNewIndexTemplate(cloned.parent());
             defaultIndex.name = `all_${cloned.collectionName}`;
@@ -295,7 +298,7 @@ const deleteCurrentNode = store => () => {
             ? find(n => n != s.currentNode)
                 (s.hierarchy.children)
             : nodeToDelete.parent();
-        if(hierarchyFunctions.isRecord(nodeToDelete)) {
+        if (hierarchyFunctions.isRecord(nodeToDelete)) {
             nodeToDelete.parent().children = filter(c => c.nodeId !== nodeToDelete.nodeId)
                 (nodeToDelete.parent().children);
         } else {
@@ -329,14 +332,14 @@ const deleteField = databaseStore => field => {
 }
 
 
-const saveAction = store => (newAction, isNew, oldAction=null) => {
+const saveAction = store => (newAction, isNew, oldAction = null) => {
     store.update(s => {
 
         const existingAction = isNew
             ? null
             : find(a => a.name === oldAction.name)(s.actions);
 
-        if(existingAction) {
+        if (existingAction) {
             s.actions = pipe(s.actions, [
                 map(a => a === existingAction ? newAction : a)
             ]);
@@ -356,14 +359,14 @@ const deleteAction  = store => action => {
     });
 }
 
-const saveTrigger = store => (newTrigger, isNew, oldTrigger=null) => {
+const saveTrigger = store => (newTrigger, isNew, oldTrigger = null) => {
     store.update(s => {
 
         const existingTrigger = isNew
             ? null
             : find(a => a.name === oldTrigger.name)(s.triggers);
 
-        if(existingTrigger) {
+        if (existingTrigger) {
             s.triggers = pipe(s.triggers, [
                 map(a => a === existingTrigger ? newTrigger : a)
             ]);
@@ -385,7 +388,7 @@ const deleteTrigger  = store => trigger => {
 const incrementAccessLevelsVersion = (s) =>
     s.accessLevels.version = (s.accessLevels.version || 0) + 1;
 
-const saveLevel = store => (newLevel, isNew, oldLevel=null) => {
+const saveLevel = store => (newLevel, isNew, oldLevel = null) => {
     store.update(s => {
 
         const levels = s.accessLevels.levels;
@@ -394,7 +397,7 @@ const saveLevel = store => (newLevel, isNew, oldLevel=null) => {
             ? null
             : find(a => a.name === oldLevel.name)(levels);
 
-        if(existingLevel) {
+        if (existingLevel) {
             s.accessLevels.levels = pipe(levels, [
                 map(a => a === existingLevel ? newLevel : a)
             ]);
@@ -470,7 +473,7 @@ const createGeneratedComponents = store => components => {
         s.screens = [...s.screens, ...components];
 
         const doCreate = async () => {
-            for(let c of components) {
+            for (let c of components) {
                 await api.post(`/_builder/api/${s.appname}/screen`, c);
             }
 
@@ -496,7 +499,7 @@ const deleteScreen = store => name => {
 
         s.components = components;
         s.screens = screens;
-        if(s.currentFrontEndItem.name === name) {
+        if (s.currentFrontEndItem.name === name) {
             s.currentFrontEndItem = null;
             s.currentFrontEndType = "";
         }
@@ -514,18 +517,18 @@ const renameScreen = store => (oldname, newname) => {
             screens, pages, error, changedScreens
         } = rename(s.pages, s.screens, oldname, newname);
 
-        if(error) {
+        if (error) {
             // should really do something with this
             return s;
         }
 
         s.screens = screens;
         s.pages = pages;
-        if(s.currentFrontEndItem.name === oldname)
+        if (s.currentFrontEndItem.name === oldname)
             s.currentFrontEndItem.name = newname;
 
         const saveAllChanged = async () => {
-            for(let screenName of changedScreens) {
+            for (let screenName of changedScreens) {
                 const changedScreen
                     = getExactComponent(screens, screenName);
                 await api.post(`/_builder/api/${s.appname}/screen`, changedScreen);
@@ -546,7 +549,7 @@ const renameScreen = store => (oldname, newname) => {
 
 const savePage = store => async page => {
     store.update(s => {
-        if(s.currentFrontEndType !== "page" || !s.currentPageName) {
+        if (s.currentFrontEndType !== "page" || !s.currentPageName) {
             return s;
         }
 
@@ -559,7 +562,7 @@ const savePage = store => async page => {
 const addComponentLibrary = store => async lib => {
 
     const response =
-        await api.get(`/_builder/api/${appname}/componentlibrary?lib=${encodeURI(lib)}`,undefined, false);
+        await api.get(`/_builder/api/${appname}/componentlibrary?lib=${encodeURI(lib)}`, undefined, false);
 
     const success = response.status === 200;
 
@@ -574,10 +577,10 @@ const addComponentLibrary = store => async lib => {
         : [];
 
     store.update(s => {
-        if(success) {
+        if (success) {
 
             const componentsArray = [];
-            for(let c in components) {
+            for (let c in components) {
                 componentsArray.push(components[c]);
             }
 
@@ -632,7 +635,7 @@ const refreshComponents = store => async () => {
 
     const components = pipe(componentsAndGenerators.components, [
         keys,
-        map(k => ({...componentsAndGenerators[k], name:k}))
+        map(k => ({ ...componentsAndGenerators[k], name: k }))
     ]);
 
     store.update(s => {
@@ -648,8 +651,8 @@ const refreshComponents = store => async () => {
 const savePackage = (store, s) => {
 
     const appDefinition = {
-        hierarchy:s.hierarchy,
+        hierarchy: s.hierarchy,
-        triggers:s.triggers,
+        triggers: s.triggers,
         actions: keyBy("name")(s.actions),
         props: {
             main: buildPropsHierarchy(
@@ -665,8 +668,8 @@ const savePackage = (store, s) => {
 
     const data = {
         appDefinition,
-        accessLevels:s.accessLevels,
+        accessLevels: s.accessLevels,
-        pages:s.pages,
+        pages: s.pages,
     }
 
     return api.post(`/_builder/api/${s.appname}/appPackage`, data);
@@ -689,3 +692,44 @@ const setCurrentPage = store => pageName => {
         return s;
     })
 }
+
+const addChildComponent = store => component => {
+
+    store.update(s => {
+        const newComponent = getNewComponentInfo(
+            s.components, component);
+
+        const children = s.currentFrontEndItem.props._children;
+
+        const component_definition = {
+            ...newComponent.fullProps,
+            _component: component,
+            name: component,
+            description: '',
+            location: (s.currentFrontEndItem.location ? s.currentFrontEndItem.location : [])
+                .concat(children && children.length || 0)
+        }
+
+        s.currentFrontEndItem.props._children =
+            children ?
+                children.concat(component_definition) :
+                [component_definition];
+
+        return s;
+    })
+}
+
+const selectComponent = store => component => {
+    store.update(s => {
+        s.currentComponentInfo = getComponentInfo(s.components, component);
+        return s;
+    })
+}
+
+const saveComponent = store => component => {
+    store.update(s => {
+        s.currentComponentInfo = getComponentInfo(s.components, component);
+        console.log(s.currentFrontEndItem, s.screens)
+        return _saveScreen(store, s, s.currentFrontEndItem);
+    })
+}

packages/builder/src/common/Icons/Image.svelte

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path fill="currentColor" d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20 15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
+</svg>

packages/builder/src/common/Icons/Input.svelte

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path fill="currentColor" d="M5 5v14h14V5H5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm5.869 12l-.82 2H6.833L11 7h2l4.167 10H14.95l-.82-2H9.87zm.82-2h2.622L12 9.8 10.689 13z"/>
+</svg>

packages/builder/src/common/Icons/index.js

@@ -1,3 +1,5 @@
 export { default as LayoutIcon } from './Layout.svelte';
 export { default as PaintIcon } from './Paint.svelte';
 export { default as TerminalIcon } from './Terminal.svelte';
+export { default as InputIcon } from './Input.svelte';
+export { default as ImageIcon } from './Image.svelte';

packages/builder/src/userInterface/ComponentHierarchyChildren.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { last } from "lodash/fp";
+  import { pipe } from "../common/core";
+
+  export let components = [];
+  export let onSelect = () => {};
+
+  const capitalise = s => s.substring(0,1).toUpperCase() + s.substring(1);
+  const get_name = s => last(s.split('/'));
+  const get_capitalised_name = name => pipe(name, [get_name,capitalise]);
+</script>
+
+{#each components as component}
+  <ul>
+    <li on:click|stopPropagation={() => onSelect(component)}>
+      {get_capitalised_name(component.name)}
+
+      {#if component._children}
+        <svelte:self components={component._children}/>
+      {/if}
+    </li>
+
+  </ul>
+{/each}

packages/builder/src/userInterface/ComponentPanel.svelte

@@ -43,7 +43,7 @@ $: shortName = last(name.split("/"));
 
 store.subscribe(s => {
     if(ignoreStore) return;
-    component = s.currentFrontEndItem;
+    component = s.currentComponentInfo.component;
     if(!component) return;
     originalName = component.name;
     name = component.name;
@@ -68,7 +68,7 @@ const save = () => {
         map(s => s.trim())
     ]);
 
-    store.saveScreen(component);
+    store.saveComponent(component);
 
     ignoreStore = false;
     // now do the rename
@@ -92,14 +92,15 @@ const onPropsValidate = result => {
 
 const updateComponent = doChange => {
     const newComponent = cloneDeep(component);
-    doChange(newComponent);
+
-    component = newComponent;
+    component = doChange(newComponent);
+    console.log(component, $store.screens[0].props._children[1])
     componentInfo = getScreenInfo(components, newComponent);
 }
 
 const onPropsChanged = newProps => {
     updateComponent(newComponent =>
-        assign(newComponent.props, newProps));
+        assign(newComponent, newProps))
     save();
 
 }

packages/builder/src/userInterface/ComponentsHierarchy.svelte

@@ -1,4 +1,5 @@
 <script>
+import ComponentHierarchyChildren from './ComponentHierarchyChildren.svelte';
 
 import {
     last,
@@ -22,6 +23,7 @@ export let thisLevel = "";
 
 let pathPartsThisLevel;
 let componentsThisLevel;
+let _components;
 let subfolders;
 
 let expandedFolders = [];
@@ -52,7 +54,7 @@ const isOnNextLevel = (c) =>
     normalizedName(c.name).split("/").length === pathPartsThisLevel + 1
 
 const lastPartOfName = (c) =>
-    last(c.name.split("/"))
+    last(c.name ? c.name.split("/") : c._component.split("/"))
 
 const subFolder = (c) => {
     const cname = normalizedName(c.name);
@@ -102,27 +104,27 @@ $: {
                             ? 1
                             : normalizedName(thisLevel).split("/").length + 1;
 
-    componentsThisLevel =
+    _components =
         pipe(components, [
-            filter(isOnThisLevel),
+            // filter(isOnThisLevel),
-            map(c => ({component:c, title:lastPartOfName(c)})),
+            map(c => ({component: c, title:lastPartOfName(c)})),
             sortBy("title")
         ]);
 
-    subfolders =
+    // subfolders =
-        pipe(components, [
+    //     pipe(components, [
-            filter(notOnThisLevel),
+    //         filter(notOnThisLevel),
-            sortBy("name"),
+    //         sortBy("name"),
-            map(subFolder),
+    //         map(subFolder),
-            uniqWith((f1,f2) => f1.path === f2.path)
+    //         uniqWith((f1,f2) => f1.path === f2.path)
-        ]);
+    //     ]);
 }
 
 </script>
 
 <div class="root">
 
-    {#each subfolders as folder}
+    <!-- {#each subfolders as folder}
     <div class="hierarchy-item folder"
          on:click|stopPropagation={() => expandFolder(folder)}>
         <span>{@html getIcon(folder.isExpanded ? "chevron-down" : "chevron-right", "16")}</span>
@@ -132,14 +134,18 @@ $: {
                      thisLevel={folder.path} />
         {/if}
     </div>
-    {/each}
+    {/each} -->
 
-    {#each componentsThisLevel as component}
+    {#each _components as component}
-    <div class="hierarchy-item component" class:selected={isComponentSelected($store.currentFrontEndType, $store.currentFrontEndItem, component.component)}
+    <div class="hierarchy-item component"
+         class:selected={isComponentSelected($store.currentFrontEndType, $store.currentFrontEndItem, component.component)}
          on:click|stopPropagation={() => store.setCurrentScreen(component.component.name)}>
-        <!-- <span>{@html getIcon("circle", "7")}</span> -->
+
         <span class="title">{component.title}</span>
     </div>
+        {#if component.component.props && component.component.props._children}
+            <ComponentHierarchyChildren components={component.component.props._children} onSelect={store.selectComponent}/>
+        {/if}
     {/each}
 
 </div>

packages/builder/src/userInterface/ComponentsList.svelte

@@ -8,6 +8,7 @@ import {
     groupBy, keys, find, sortBy
 } from "lodash/fp";
 import { pipe } from "../common/core";
+import { ImageIcon, InputIcon, LayoutIcon } from '../common/Icons/';
 
 let componentLibraries=[];
 
@@ -29,9 +30,7 @@ const addRootComponent = (c, all) => {
 
 };
 
-const onComponentChosen = (component) => {
+const onComponentChosen = store.addChildComponent;
-
-};
 
 store.subscribe(s => {
 
@@ -46,6 +45,8 @@ store.subscribe(s => {
     componentLibraries = newComponentLibraries;
 });
 
+let current_view = 'text';
+
 </script>
 
 <div class="root">
@@ -55,22 +56,34 @@ store.subscribe(s => {
     </div>
 
     <div class="library-container">
+        <ul>
+            <li>
+            <button class:selected={current_view === 'text'} on:click={() => current_view = 'text'}>
+                <InputIcon />
+            </button>
+            </li>
+            <li>
+                <button class:selected={current_view === 'layout'} on:click={() => current_view = 'layout'}>
+                    <LayoutIcon />
+                </button>
+            </li>
+            <li>
+                <button class:selected={current_view === 'media'} on:click={() => current_view = 'media'}>
+                    <ImageIcon />
+                </button>
+            </li>
+        </ul>
 
-
+        {#each lib.components.filter(_ => true) as component}
-        <div class="inner-header">
-            Components
-        </div>
-
-        {#each lib.components as component}
 
         <div class="component"
-            on:click={() => onComponentChosen(component)}>
+            on:click={() =>  onComponentChosen(component.name)}>
             <div class="name">
                 {splitName(component.name).componentName}
             </div>
-            <div class="description">
+            <!-- <div class="description">
                 {component.description}
-            </div>
+            </div> -->
         </div>
 
         {/each}
@@ -113,8 +126,16 @@ store.subscribe(s => {
 }
 
 .component {
-    padding: 2px 0px;
+    padding: 0 15px;
     cursor: pointer;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    margin: 10px 0;
+    height: 40px;
+    box-sizing: border-box;
+    color: #163057;
+    display: flex;
+    align-items: center;
 }
 
 .component:hover {
@@ -122,8 +143,11 @@ store.subscribe(s => {
 }
 
 .component > .name {
-    color: var(--secondary100);
+    color: #163057;
     display: inline-block;
+    font-size: 12px;
+    font-weight: bold;
+    opacity: 0.6;
 }
 
 .component > .description {
@@ -133,6 +157,34 @@ store.subscribe(s => {
     margin-left: 10px;
 }
 
+ul {
+    list-style: none;
+    display: flex;
+    padding: 0;
+}
 
+li {
+    margin-right: 20px;
+    background: none;
+    border-radius: 5px;
+    width: 48px;
+    height: 48px;
+}
+
+li button {
+    width: 100%;
+    height: 100%;
+    background: none;
+    border: none;
+    border-radius: 5px;
+    padding: 12px;
+    outline: none;
+    cursor: pointer;
+}
+
+.selected {
+    color: var(--button-text);
+    background: var(--background-button)!important;
+}
 
 </style>

packages/builder/src/userInterface/NewComponent.svelte

@@ -29,7 +29,6 @@ let name="";
 let saveAttempted=false;
 
 store.subscribe(s => {
-    console.log(s)
     layoutComponents = pipe(s.components, [
         filter(c => c.container),
         map(c => ({name:c.name, ...splitName(c.name)}))

packages/builder/src/userInterface/PropsView.svelte

@@ -25,7 +25,6 @@ let props = {};
 let propsDefinitions = [];
 let isInstance = false;
 
-
 $: {
     if(componentInfo)
     {
@@ -46,7 +45,7 @@ $: {
 let setProp = (name, value) => {
     const newProps = cloneDeep(props);
 
-    let finalProps = isInstance ? newProps : cloneDeep(componentInfo.component.props);
+    let finalProps = isInstance ? newProps : cloneDeep(componentInfo.component.props ? componentInfo.component.props : componentInfo.component);
 
     if(!isInstance) {
         const nowSet = [];
@@ -98,9 +97,6 @@ const fieldHasError = (propName) =>
 
     </form>
 
-
-
-
 </div>
 
 

packages/builder/src/userInterface/pagesParsing/createProps.js

@@ -1,6 +1,6 @@
 import {
     isString, isUndefined, find, keys, uniq,
-    some, filter, reduce, cloneDeep, includes,last
+    some, filter, reduce, cloneDeep, includes, last
 } from "lodash/fp";
 import { types, expandComponentDefinition } from "./types";
 import { assign } from "lodash";
@@ -11,7 +11,7 @@ import { ensureShardNameIsInShardMap } from "../../../../core/src/indexing/shard
 export const getInstanceProps = (componentInfo, props) => {
     const finalProps = cloneDeep(componentInfo.fullProps);
 
-    for(let p in props) {
+    for (let p in props) {
         finalProps[p] = props[p];
     }
 
@@ -21,8 +21,8 @@ export const getInstanceProps = (componentInfo, props) => {
 export const getNewComponentInfo = (components, rootComponent, name) => {
     const component = {
         name: name || "",
-        description:"",  
+        description: "",
-        props:{
+        props: {
             _component: rootComponent
         }
     };
@@ -44,11 +44,11 @@ export const getComponentInfo = (components, comp) => {
         : comp;
     let component;
     let subComponent;
-    if(isRootComponent(targetComponent)) {
+    if (isRootComponent(targetComponent)) {
         component = targetComponent;
     } else {
         subComponent = targetComponent;
-        component = find(c => c.name === subComponent.props._component)(
+        component = find(c => c.name === (subComponent.props ? subComponent.props._component : subComponent._component))(
             components);
     }
 
@@ -65,7 +65,7 @@ export const getComponentInfo = (components, comp) => {
     fullProps._component = targetComponent.name;
 
     return ({
-        propsDefinition:expandComponentDefinition(component), 
+        propsDefinition: expandComponentDefinition(component),
         rootDefaultProps: rootProps.props,
         unsetProps,
         fullProps: fullProps,
@@ -78,7 +78,7 @@ export const getComponentInfo = (components, comp) => {
 export const createProps = (componentDefinition, derivedFromProps) => {
 
     const error = (propName, error) =>
-        errors.push({propName, error});
+        errors.push({ propName, error });
 
     const props = {
         _component: componentDefinition.name
@@ -86,23 +86,23 @@ export const createProps = (componentDefinition, derivedFromProps) => {
 
     const errors = [];
 
-    if(!componentDefinition.name)
+    if (!componentDefinition.name)
         error("_component", "Component name not supplied");
 
     const propsDef = componentDefinition.props;
-    for(let propDef in propsDef) {
+    for (let propDef in propsDef) {
         const parsedPropDef = parsePropDef(propsDef[propDef]);
-        if(parsedPropDef.error)
+        if (parsedPropDef.error)
             error(propDef, parsedPropDef.error);
         else
             props[propDef] = parsedPropDef;
     }
 
-    if(derivedFromProps) {
+    if (derivedFromProps) {
         assign(props, derivedFromProps);
     }
 
-    if(componentDefinition.children !== false
+    if (componentDefinition.children !== false
         && isUndefined(props._children)) {
         props._children = [];
     }
@@ -114,26 +114,26 @@ export const createProps = (componentDefinition, derivedFromProps) => {
 
 
 const parsePropDef = propDef => {
-    const error = message => ({error:message, propDef});
+    const error = message => ({ error: message, propDef });
 
-    if(isString(propDef)) {
+    if (isString(propDef)) {
-        if(!types[propDef])
+        if (!types[propDef])
             return error(`Do not recognise type ${propDef}`);
 
         return types[propDef].default();
     }
 
-    if(!propDef.type)
+    if (!propDef.type)
         return error("Property Definition must declare a type");
 
     const type = types[propDef.type];
-    if(!type)
+    if (!type)
         return error(`Do not recognise type ${propDef.type}`);
 
-    if(isUndefined(propDef.default))
+    if (isUndefined(propDef.default))
         return type.default(propDef);
 
-    if(!type.isOfType(propDef.default))
+    if (!type.isOfType(propDef.default))
         return error(`${propDef.default} is not of type ${type}`);
 
     return propDef.default;

packages/builder/src/userInterface/pagesParsing/validateProps.js

@@ -19,11 +19,12 @@ const makeError = (errors, propName, stack) => (message) =>
     errors.push({
         stack,
         propName,
-        error:message});
+        error: message
+    });
 
-export const recursivelyValidate = (rootProps, getComponent, stack=[]) => {
+export const recursivelyValidate = (rootProps, getComponent, stack = []) => {
 
-    if(!rootProps._component) {
+    if (!rootProps._component) {
         const errs = [];
         makeError(errs, "_component", stack)("Component is not set");
         return errs;
@@ -63,11 +64,11 @@ const expandPropDef = propDef =>
 
 
 
-export const validateProps = (componentDefinition, props, stack=[], isFinal=true) => {
+export const validateProps = (componentDefinition, props, stack = [], isFinal = true) => {
 
     const errors = [];
 
-    if(isFinal && !props._component) {
+    if (isFinal && !props._component) {
         makeError(errors, "_component", stack)("Component is not set");
         return errors;
         // this would break everything else anyway
@@ -75,11 +76,11 @@ export const validateProps = (componentDefinition, props, stack=[], isFinal=true
 
     const propsDefinition = componentDefinition.props;
 
-    for(let propDefName in props) {
+    for (let propDefName in props) {
 
-        if(propDefName === "_component") continue;
+        const ignore = ['_component', "_children", '_layout', 'name', 'description', 'location'];
-        if(propDefName === "_children") continue;
+
-        if(propDefName === "_layout") continue;
+        if (ignore.includes(propDefName)) continue;
 
         const propDef = expandPropDef(propsDefinition[propDefName]);
 
@@ -90,26 +91,26 @@ export const validateProps = (componentDefinition, props, stack=[], isFinal=true
         const propValue = props[propDefName];
 
         // component declarations dont need to define al props.
-        if(!isFinal && isUndefined(propValue)) continue;
+        if (!isFinal && isUndefined(propValue)) continue;
 
-        if(isFinal && propDef.required && propValue) {
+        if (isFinal && propDef.required && propValue) {
             error(`Property ${propDefName} is required`);
             continue;
         }
 
-        if(isBinding(propValue)) {
+        if (isBinding(propValue)) {
-            if(propDef.type === "event") {
+            if (propDef.type === "event") {
                 error(`Cannot apply binding to type ${propDef.type}`);
                 continue;
             }
         }
-        else if(!type.isOfType(propValue)) {
+        else if (!type.isOfType(propValue)) {
             error(`Property ${propDefName} is not of type ${propDef.type}. Actual value ${propValue}`)
             continue;
         }
 
 
-        if(propDef.type === "options" 
+        if (propDef.type === "options"
             && propValue
             && !isBinding(propValue)
             && !includes(propValue)(propDef.options)) {
@@ -129,8 +130,8 @@ export const validateComponentDefinition = (componentDefinition) => {
     pipe(propDefinitions, [
         keys,
         map(k => ({
-            propDef:propDefinitions[k],
+            propDef: propDefinitions[k],
-            propName:k
+            propName: k
         })),
         filter(d => d.propDef.type === "options"
             && (!d.propDef.options || d.propDef.options.length === 0)),
@@ -140,4 +141,3 @@ export const validateComponentDefinition = (componentDefinition) => {
     return errors;
 
 }
-

packages/standard-components/src/Div.svelte

@@ -8,7 +8,7 @@ export let _bb;
 let rootDiv;
 $:{
 	if(_bb && rootDiv && _children && _children.length)
-		_bb.hydrateChildren(_children, theButton);
+		_bb.hydrateChildren(_children, rootDiv);
 }
 
 
@@ -16,4 +16,3 @@ $:{
 
 <div class="{className}" bind:this={rootDiv}>
 </div>
-