component inheritance working

packages/builder/src/userInterface/ComponentsHierarchy.svelte

@@ -9,7 +9,8 @@ import {
     isEqual,
     trimCharsStart,
     trimChars,
-    join
+    join,
+    includes
 } from "lodash/fp";
 
 import { pipe } from "../common/core";
@@ -19,6 +20,12 @@ import { store } from "../builderStore";
 export let components = []
 export let thisLevel = "";
 
+let pathPartsThisLevel;
+let componentsThisLevel;
+let subfolders;
+
+let expandedFolders = [];
+
 const joinPath = join("/");
 
 const normalizedName = name => pipe(name, [
@@ -53,43 +60,31 @@ const subFolder = (c) => {
 
     return ({
         name: folderName,
-        isExpanded: false,
+        isExpanded: includes(folderName)(expandedFolders),
         path: thisLevel + "/" + folderName
     });
 }
 
-let pathPartsThisLevel = !thisLevel 
-                        ? 1
-                        : normalizedName(thisLevel).split("/").length + 1;
-
-let componentsThisLevel = 
-    pipe(components, [
-        filter(isOnThisLevel),
-        map(c => ({component:c, title:lastPartOfName(c)})),
-        sortBy("title")
-    ]);
-
-let subfolders = 
-    pipe(components, [
-        filter(notOnThisLevel),
-        sortBy("name"),
-        map(subFolder),
-        uniqWith((f1,f2) => f1.path === f2.path)
-    ]);
-
 const subComponents = (subfolder) => pipe(components, [
         filter(c => isInSubfolder(subfolder, c))
     ]);
 
 const expandFolder = folder => {
     const expandedFolder = {...folder};
-    expandedFolder.isExpanded = !expandedFolder.isExpanded;
+    if(expandedFolder.isExpanded) {
+        expandedFolder.isExpanded = false;
+        expandedFolders = filter(f => f.name !== folder.name)(expandedFolders);
+    } else {
+        expandedFolder.isExpanded = true;
+        expandedFolders.push(folder.name);
+    }
     const newFolders = [...subfolders];
     newFolders.splice(
         newFolders.indexOf(folder),
         1,
         expandedFolder);
     subfolders = newFolders;
+     
 }
 
 const isComponentSelected = (current,c) =>
@@ -99,6 +94,29 @@ const isComponentSelected = (current,c) =>
 const isFolderSelected = (current, folder) => 
     isInSubfolder(current, folder)
 
+
+
+$: {
+    pathPartsThisLevel = !thisLevel 
+                            ? 1
+                            : normalizedName(thisLevel).split("/").length + 1;
+
+    componentsThisLevel = 
+        pipe(components, [
+            filter(isOnThisLevel),
+            map(c => ({component:c, title:lastPartOfName(c)})),
+            sortBy("title")
+        ]);
+
+    subfolders = 
+        pipe(components, [
+            filter(notOnThisLevel),
+            sortBy("name"),
+            map(subFolder),
+            uniqWith((f1,f2) => f1.path === f2.path)
+        ]);
+}
+
 </script>
 
 <div class="root" style={`padding-left: calc(10px * ${pathPartsThisLevel})`}>

packages/builder/src/userInterface/NewComponent.svelte

@@ -48,7 +48,6 @@ const createComponent = () => {
 
     if(!validate()) return;
 
-    component.props._component = name;
     component.name = name;
     component.description = description;
     component.tags = pipe(tagsString, [
@@ -71,7 +70,7 @@ const onPropsValidate = result => {
 }
 
 const onPropsChanged = props => {
-    assign(component.props, [props]);
+    assign(component.props, props);
 }
 
 const validate = () => {

packages/builder/src/userInterface/PropsView.svelte

@@ -59,7 +59,7 @@ let setProp = (name) => (ev, targetValue="value") => {
     newProps[name] = ev.target[targetValue];
     
 
-    const finalProps = {_component:props._component};
+    const finalProps = {};
 
     for(let p of componentInfo.unsetProps) {
         if(!isEqual(newProps[p])(componentInfo.rootDefaultProps[p])) {

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

@@ -55,7 +55,7 @@ export const getNewComponentInfo = (allComponents, inherits) => {
         name:"", 
         description:"", 
         inherits, 
-        props:{_component:inherits}, 
+        props:{}, 
         tags:parentcomponent.tags
     };
     return getComponentInfo(
@@ -74,9 +74,7 @@ export const getComponentInfo = (allComponents, cname, stack=[], subComponentPro
         const inheritedProps = [];
         if(stack.length > 0) {
             const targetComponent = stack[0];
-            p.props._component = targetComponent.name;
             for(let prop in subComponentProps) {
-                if(prop === "_component") continue;
                 const hasProp = pipe(targetComponent.props, [
                                         keys,
                                         includes(prop)]);
@@ -87,7 +85,7 @@ export const getComponentInfo = (allComponents, cname, stack=[], subComponentPro
         }
         const unsetProps = pipe(p.props, [
             keys,
-            filter(k => k !== "_component" && !includes(k)(keys(subComponentProps)))
+            filter(k => !includes(k)(keys(subComponentProps)))
         ]);
 
         return ({

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

@@ -54,7 +54,7 @@ export const getAncestorProps = (allComponents, name, found=[]) => {
     return getAncestorProps(
         allComponents, 
         thisComponent.inherits,
-        [{_component:thisComponent.inherits, ...thisComponent.props}, 
+        [{...thisComponent.props}, 
         ...found]);
 
 }

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

@@ -9,7 +9,8 @@ import {
     flatten,
     flattenDeep,
     each,
-    indexOf 
+    indexOf,
+    isUndefined
 } from "lodash/fp";
 import { common } from "../../../../core/src";
 
@@ -103,7 +104,7 @@ export const validateProps = (propsDefinition, props, stack=[], isFinal=true) =>
 
     const errors = [];
 
-    if(!props._component) {
+    if(isFinal && !props._component) {
         makeError(errors, "_component", stack)("Component is not set");
         return errors;
         // this would break everything else anyway
@@ -120,6 +121,10 @@ export const validateProps = (propsDefinition, props, stack=[], isFinal=true) =>
         const error = makeError(errors, propDefName, stack);            
 
         const propValue = props[propDefName];
+
+        // component declarations dont need to define al props.
+        if(!isFinal && isUndefined(propValue)) continue;
+
         if(isFinal && propDef.required && propValue) {
             error(`Property ${propDefName} is required`);
             continue;

packages/builder/tests/createDefaultProps.spec.js

@@ -162,7 +162,6 @@ describe("createDefaultProps", () => {
         };
 
         const derivedFrom = {
-            _component:"root",
             fieldName: "surname"
         };
 

packages/builder/tests/getComponentInfo.spec.js

@@ -18,7 +18,6 @@ describe("getComponentInfo", () => {
 
         expect(result.errors).toEqual([]);
         expect(result.fullProps).toEqual({
-            _component: "budibase-components/TextBox",
             size: "",
             isPassword: false,
             placeholder: "",
@@ -43,7 +42,6 @@ describe("getComponentInfo", () => {
             {size:"small"});
 
         expect(result).toEqual({
-            _component: "budibase-components/TextBox",
             size: "small",
             isPassword: false,
             placeholder: "",
@@ -59,7 +57,6 @@ describe("getComponentInfo", () => {
 
         expect(result.errors).toEqual([]);
         expect(result.fullProps).toEqual({
-            _component: "common/SmallTextbox",
             size: "small",
             isPassword: false,
             placeholder: "",
@@ -74,7 +71,6 @@ describe("getComponentInfo", () => {
 
         expect(result.errors).toEqual([]);
         expect(result.fullProps).toEqual({
-            _component: "common/PasswordBox",
             size: "small",
             isPassword: true,
             placeholder: "",

packages/builder/tests/searchComponentsProps.spec.js

@@ -92,8 +92,8 @@ describe("getAncestorProps", () => {
 
         expect(result).toEqual([
             components[0].props,
-            {_component: "budibase-components/TextBox", ...components[2].props},
+            {...components[2].props},
-            {_component: "common/SmallTextbox", ...components[3].props}
+            {...components[3].props}
         ]);
 
     });