Add generic block structure with support for writing blocks like normal svelte components rather than a JSON builder

packages/client/manifest.json

@@ -2576,7 +2576,6 @@
     ]
   },
   "tablewithsearch": {
-    "block": true,
     "name": "Table with search",
     "icon": "Table",
     "styles": ["size"],

packages/client/src/components/Component.svelte

@@ -40,6 +40,7 @@
   // Get contexts
   const context = getContext("context")
   const insideScreenslot = !!getContext("screenslot")
+  const insideBlock = !!getContext("block")
 
   // Create component context
   const componentStore = writable({})
@@ -53,7 +54,8 @@
   $: name = instance._instanceName
   $: interactive =
     $builderStore.inBuilder &&
-    ($builderStore.previewType === "layout" || insideScreenslot)
+    ($builderStore.previewType === "layout" || insideScreenslot) &&
+    !insideBlock
   $: empty = interactive && !children.length && definition?.hasChildren
   $: emptyState = empty && definition?.showEmptyState !== false
   $: rawProps = getRawProps(instance)
@@ -197,6 +199,8 @@
           {/each}
         {:else if emptyState}
           <Placeholder />
+        {:else if insideBlock}
+          <slot />
         {/if}
       </svelte:component>
     </div>

packages/client/src/components/app/DataProvider.svelte

@@ -234,7 +234,7 @@
         <ProgressCircle />
       </div>
     {:else}
-      {#if !$component.children}
+      {#if $component.emptyState}
         <Placeholder />
       {:else}
         <slot />

packages/client/src/components/app/blocks/Block.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { getContext, setContext } from "svelte"
+
+  const component = getContext("component")
+  const { styleable } = getContext("sdk")
+
+  setContext("block", {
+    id: $component.id,
+  })
+</script>
+
+<div use:styleable={$component.styles}>
+  <slot />
+</div>

packages/client/src/components/app/blocks/BlockComponent.svelte

@@ -0,0 +1,33 @@
+<script>
+  import { getContext } from "svelte"
+  import { generate } from "shortid"
+  import Component from "components/Component.svelte"
+
+  export let type
+  export let props
+  export let styles
+  export let id
+
+  const block = getContext("block")
+  const rand = generate()
+
+  $: id = block.id + rand
+  $: instance = createInstance(type, props, id)
+
+  const createInstance = (type, props, id) => {
+    return {
+      _component: `@budibase/standard-components/${type}`,
+      _id: id,
+      _styles: {
+        normal: {
+          ...styles,
+        },
+      },
+      ...props,
+    }
+  }
+</script>
+
+<Component {instance}>
+  <slot />
+</Component>

packages/client/src/components/app/blocks/TableWithSearch.svelte

@@ -1,99 +1,89 @@
 <script>
-  import { getContext } from "svelte"
+  import Block from "./Block.svelte"
-  import { BlockBuilder } from "./block-builder"
+  import BlockComponent from "./BlockComponent.svelte"
-  import Component from "components/Component.svelte"
 
-  // Common props
-  export let searchColumns
   export let dataSource
-
+  export let searchColumns
-  // Data provider props
   export let filter
   export let sortColumn
   export let sortOrder
   export let paginate
-
-  // Table props
   export let tableColumns
   export let showAutoColumns
   export let rowCount
   export let quiet
   export let size
 
-  const { styleable } = getContext("sdk")
+  let formId
-  const component = getContext("component")
+  let dataProviderId
-
-  let instance
-  $: {
-    const builder = new BlockBuilder($component)
-
-    const form = builder.createComponent("form", {
-      dataSource,
-    })
-
-    let newFilter = [...(filter || [])]
-
-    // Add search bar if required
-    if (searchColumns?.length) {
-      const searchContainer = builder
-        .createComponent("container", {
-          direction: "row",
-          hAlign: "right",
-          vAlign: "middle",
-          gap: "M",
-          wrap: true,
-        })
-        .setStyles({
-          "margin-bottom": "20px",
-        })
 
-      searchColumns?.forEach(column => {
+  $: enrichedFilter = enrichFilter(filter, searchColumns, formId)
-        const field = builder.createComponent("stringfield", {
-          field: column,
-          placeholder: column,
-          label: column,
-        })
 
-        searchContainer.addChild(field)
+  const enrichFilter = (filter, searchColumns, formId) => {
-
+    let enrichedFilter = [...(filter || [])]
-        newFilter.push({
+    searchColumns?.forEach(column => {
-          field: column,
+      enrichedFilter.push({
-          operator: "equal",
+        field: column,
-          type: "string",
+        operator: "equal",
-          valueType: "Binding",
+        type: "string",
-          value: `{{ [${form.id}].[${column}] }}`,
+        valueType: "Binding",
-        })
+        value: `{{ [${formId}].[${column}] }}`,
       })
-
-      form.addChild(searchContainer)
-    }
-
-    const dataProvider = builder.createComponent("dataprovider", {
-      dataSource,
-      filter: newFilter,
-      sortColumn,
-      sortOrder,
-      paginate,
-      limit: rowCount,
-    })
-
-    const table = builder.createComponent("table", {
-      dataProvider: `{{ literal [${dataProvider.id}] }}`,
-      columns: tableColumns,
-      showAutoColumns,
-      rowCount,
-      quiet,
-      size,
     })
-
+    return enrichedFilter
-    dataProvider.addChild(table)
-
-    form.addChild(dataProvider)
-    instance = form.build()
-    console.log("new instance")
   }
 </script>
 
-<div use:styleable={$component.styles}>
+<Block>
-  <Component {instance} />
+  <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
-</div>
+    {#if searchColumns?.length}
+      <div class="search">
+        {#each searchColumns as column}
+          <BlockComponent
+            type="stringfield"
+            props={{
+              field: column,
+              placeholder: column,
+              label: column,
+            }}
+          />
+        {/each}
+      </div>
+    {/if}
+    <BlockComponent
+      type="dataprovider"
+      bind:id={dataProviderId}
+      props={{
+        dataSource,
+        filter: enrichedFilter,
+        sortColumn,
+        sortOrder,
+        paginate,
+        limit: rowCount,
+      }}
+    >
+      <BlockComponent
+        type="table"
+        props={{
+          dataProvider: `{{ literal [${dataProviderId}] }}`,
+          columns: tableColumns,
+          showAutoColumns,
+          rowCount,
+          quiet,
+          size,
+        }}
+      />
+    </BlockComponent>
+  </BlockComponent>
+</Block>
+
+<style>
+  .search {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    margin-bottom: 20px;
+    gap: 10px;
+  }
+</style>

packages/client/src/utils/styleable.js

@@ -64,9 +64,7 @@ export const styleable = (node, styles = {}) => {
     // Handler to select a component in the builder when clicking it in the
     // builder preview
     selectComponent = event => {
-      if (newStyles.interactive) {
+      builderStore.actions.selectComponent(componentId)
-        builderStore.actions.selectComponent(componentId)
-      }
       event.preventDefault()
       event.stopPropagation()
       return false
@@ -77,7 +75,7 @@ export const styleable = (node, styles = {}) => {
     node.addEventListener("mouseout", applyNormalStyles)
 
     // Add builder preview click listener
-    if (get(builderStore).inBuilder) {
+    if (newStyles.interactive) {
       node.addEventListener("click", selectComponent, false)
     }
 
@@ -89,11 +87,7 @@ export const styleable = (node, styles = {}) => {
   const removeListeners = () => {
     node.removeEventListener("mouseover", applyHoverStyles)
     node.removeEventListener("mouseout", applyNormalStyles)
-
+    node.removeEventListener("click", selectComponent)
-    // Remove builder preview click listener
-    if (get(builderStore).inBuilder) {
-      node.removeEventListener("click", selectComponent)
-    }
   }
 
   // Apply initial styles