bug when saving components

packages/builder/src/userInterface/CurrentItemPreview.svelte

@@ -13,11 +13,13 @@ import { afterUpdate } from 'svelte';
 let component;
 let stylesheetLinks = "";
 let componentHtml = "";
+let props;
 
 store.subscribe(s => {
     const {componentName, libName} = splitName(
         s.currentComponentInfo.rootComponent.name);
 
+    props = s.currentComponentInfo.fullProps;
     component = s.libraries[libName][componentName];
     stylesheetLinks = pipe(s.pages.stylesheets, [
         map(s => `<link rel="stylesheet" href="${s}"/>`),
@@ -28,7 +30,9 @@ store.subscribe(s => {
 
 
 afterUpdate(() => {
+    setTimeout(() => {
         componentHtml = document.getElementById("comonent-container-mock").innerHTML
+    }, 1);
 });
 
 
@@ -51,7 +55,7 @@ afterUpdate(() => {
 </div>
 
 <div id="comonent-container-mock">
-    <svelte:component this={component} {...$store.currentComponentInfo.fullProps}/>
+    <svelte:component this={component} {...props}/>
 </div>
 
 <style>

packages/builder/src/userInterface/EditComponent.svelte

@@ -162,6 +162,7 @@ const componentInstancePropsChanged = (instanceProps) => {
             <Textbox label="Name" 
                     infoText="use forward slash to store in subfolders"
                     bind:text={name}
+                    disabled={!$store.currentComponentIsNew}
                     hasError={!!nameInvalid}/>
             <div class="info-text"></div>
             <Textbox label="Description"

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

@@ -8,7 +8,8 @@ import {
     filter,
     reduce,
     cloneDeep,
-    includes
+    includes,
+    last
 } from "lodash/fp";
 import { types, expandPropsDefinition } from "./types";
 import { assign } from "lodash";
@@ -74,9 +75,13 @@ export const getComponentInfo = (allComponents, comp, stack=[], subComponentProp
     if(isRootComponent(component)) {
         subComponentProps = subComponentProps||{};
         const p = createProps(cname, component.props, subComponentProps);
+        const rootProps = createProps(cname, component.props);
         const inheritedProps = [];
+        const targetComponent = stack.length > 0
+                                ? last(stack)
+                                : component;
         if(stack.length > 0) {
-            const targetComponent = stack[0];
+            
             for(let prop in subComponentProps) {
                 const hasProp = pipe(targetComponent.props, [
                                         keys,
@@ -88,24 +93,27 @@ export const getComponentInfo = (allComponents, comp, stack=[], subComponentProp
         }
         const unsetProps = pipe(p.props, [
             keys,
-            filter(k => !includes(k)(keys(subComponentProps)))
+            filter(k => !includes(k)(keys(subComponentProps)) && k !== "_component")
         ]);
 
+        const fullProps = cloneDeep(p.props);
+        fullProps._component = targetComponent.name;
+
         return ({
             propsDefinition:expandPropsDefinition(component.props), 
             inheritedProps,
-            rootDefaultProps: p.props,
+            rootDefaultProps: rootProps.props,
             unsetProps,
-            fullProps: p.props,
+            fullProps: fullProps,
             errors: p.errors,
-            component: stack.length > 0 ? stack[0] : component,
+            component: targetComponent,
             rootComponent: component
         });
     }
     return getComponentInfo(
         allComponents, 
         component.inherits, 
-        [...stack, component],
+        [component, ...stack],
         {...component.props, ...subComponentProps});
 }
 

packages/builder/tests/getComponentInfo.spec.js

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