Update block ejection with latest codebase

packages/builder/src/builderStore/store/frontend.js

@@ -895,13 +895,21 @@ export const getFrontendStore = () => {
           component[name] = value
         })
       },
-      ejectBlock: async (id, definition) => {
-        // const asset = get(currentAsset)
-        // let parent = findComponentParent(asset.props, id)
-        // const childIndex = parent._children.findIndex(x => x._id === id)
-        // parent._children[childIndex] = definition
-        // await store.actions.preview.saveSelected()
-        // await store.actions.components.select(definition)
+      ejectBlock: async (componentId, ejectedDefinition) => {
+        await store.actions.screens.patch(screen => {
+          const parent = findComponentParent(screen.props, componentId)
+
+          // Sanity check parent is found
+          if (!parent?._children?.length) {
+            return false
+          }
+
+          // Replace block with ejected definition
+          const childIndex = parent._children.findIndex(
+            child => child._id === componentId
+          )
+          parent._children[childIndex] = ejectedDefinition
+        })
       },
     },
     links: {

packages/client/src/components/Block.svelte

@@ -6,6 +6,7 @@
   const component = getContext("component")
 
   let structureLookupMap = {}
+
   const registerBlockComponent = (id, order, parentId, instance) => {
     // Ensure child array exists
     if (!structureLookupMap[parentId]) {
@@ -13,7 +14,7 @@
     }
     // Remove existing instance of this component in case props changed
     structureLookupMap[parentId] = structureLookupMap[parentId].filter(
-      x => x.instance._id !== id
+      blockComponent => blockComponent.instance._id !== id
     )
     // Add new instance of this component
     structureLookupMap[parentId].push({ order, instance })

packages/client/src/components/BlockComponent.svelte

@@ -1,6 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import { generate } from "shortid"
+  import { builderStore } from "../stores/builder.js"
   import Component from "components/Component.svelte"
 
   export let type
@@ -23,7 +24,7 @@
   $: instance = {
     _component: `@budibase/standard-components/${type}`,
     _id: id,
-    _instanceName: type,
+    _instanceName: type[0].toUpperCase() + type.slice(1),
     _styles: {
       normal: {
         ...styles,
@@ -31,7 +32,14 @@
     },
     ...props,
   }
-  $: block.registerComponent(id, order, $component?.id, instance)
+
+  // Register this block component if we're inside the builder so it can be
+  // ejected later
+  $: {
+    if ($builderStore.inBuilder) {
+      block.registerComponent(id, order, $component?.id, instance)
+    }
+  }
 </script>
 
 <Component {instance} isBlock>