Add screenslot to current preview.

packages/builder/src/builderStore/store.js

@@ -182,6 +182,7 @@ const initialise = (store, initial) => async () => {
   }
 
   store.set(initial)
+  console.log(initial)
   return initial
 }
 
@@ -743,6 +744,7 @@ const setCurrentPage = store => pageName => {
   })
 }
 
+
 const getContainerComponent = components =>
   components.find(c => c.name === "@budibase/standard-components/container")
 
@@ -758,14 +760,16 @@ const addChildComponent = store => componentName => {
     )
 
     _savePage(s)
-
+      //console.log(JSON.stringify(s.screens[0].props._children))
     return s
   })
 }
 
 const selectComponent = store => component => {
   store.update(s => {
-    const componentDef = s.components.find(c => c.name === component._component)
+    const componentDef = component._component.startsWith("##")
+      ? component
+      : s.components.find(c => c.name === component._component)
     s.currentComponentInfo = makePropsSafe(componentDef, component)
     return s
   })

packages/builder/src/userInterface/ComponentPanel.svelte

@@ -42,28 +42,29 @@
         <LayoutIcon />
       </button>
     </li>
-    <li>
+    {#if !component._component.startsWith('##')}
-      <button
+      <li>
-        class:selected={current_view === 'code'}
+        <button
-        on:click={() => codeEditor && codeEditor.show()}>
+          class:selected={current_view === 'code'}
-        {#if component._code && component._code.trim().length > 0}
+          on:click={() => codeEditor && codeEditor.show()}>
-          <div class="button-indicator">
+          {#if component._code && component._code.trim().length > 0}
-            <CircleIndicator />
+            <div class="button-indicator">
-          </div>
+              <CircleIndicator />
-        {/if}
+            </div>
-        <TerminalIcon />
+          {/if}
-      </button>
+          <TerminalIcon />
-    </li>
+        </button>
-    <li>
+      </li>
-      <button
+      <li>
-        class:selected={current_view === 'events'}
+        <button
-        on:click={() => (current_view = 'events')}>
+          class:selected={current_view === 'events'}
-        <EventsIcon />
+          on:click={() => (current_view = 'events')}>
-      </button>
+          <EventsIcon />
-    </li>
+        </button>
+      </li>
+    {/if}
   </ul>
   {$store.currentFrontEndType}
-
   <div class="component-props-container">
 
     {#if current_view === 'props'}
@@ -81,8 +82,6 @@
 
   </div>
 
-  
-
 </div>
 
 <style>

packages/builder/src/userInterface/CurrentItemPreview.svelte

@@ -32,7 +32,37 @@
   $: frontendDefinition = {
     componentLibraries: $store.loadLibraryUrls(),
     page: $store.currentPreviewItem,
-    screens: [],
+    screens: [{
+      name: "Screen Placeholder",
+      route: "*",
+      props: {
+        _component: "@budibase/standard-components/container",
+        type: "div",
+        _children: [
+          {
+            _component: "@budibase/standard-components/container",
+            _styles: { "position": {},"layout": {} },
+            _id: "__screenslot__text",
+            _code: "",
+            className: "",
+            onLoad: [],
+            type: "div",
+            _children: [{
+              _component:"@budibase/standard-components/text",
+              _styles: { "position": {}, "layout": {} },
+              _id: "__screenslot__text",
+              _code: "",
+              text: "content",
+              font: "",
+              color: "",
+              textAlign: "inline",
+              verticalAlign: "inline",
+              formattingTag: "none"
+            }]
+          }
+        ]
+      }
+    }],
     appRootPath: "",
   }
 
@@ -92,4 +122,4 @@
     top: 0;
     width: 100%;
   }
-</style>
+</style>

packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte

@@ -32,7 +32,7 @@
   let modalOpen = false
   let events = []
   let selectedEvent = null
-
+  $: console.log(component)
 
   $: {
     events = Object.keys(component)
@@ -42,8 +42,9 @@
 
   function findType(propName) {
     if (!component._component) return
-    return components.find(({ name }) => name === component._component)
+    return components.find(({ name }) => name === component._component).props[
-      .props[propName]
+      propName
+    ]
   }
 
   const openModal = event => {

packages/client/src/render/screenRouter.js

@@ -9,6 +9,7 @@ export const screenRouter = (screens, onScreenSelected) => {
   let current
 
   function route(url) {
+
     const _url = url.state || url
     current = routes.findIndex(
       p => p !== "*" && new RegExp("^" + p + "$").test(_url)
@@ -42,7 +43,11 @@ export const screenRouter = (screens, onScreenSelected) => {
       onScreenSelected(screens[fallback], store, _url)
     }
 
-    !url.state && history.pushState(_url, null, _url)
+    try {
+      !url.state && history.pushState(_url, null, _url)
+    } catch (_) {
+      // ignoring an exception here as the builder runs an iframe, which does not like this
+    }
   }
 
   function click(e) {

packages/standard-components/src/button.svelte

@@ -34,7 +34,8 @@
     return all
   }
 
-  $: if(_bb.props._children.length > 0) theButton && _bb.attachChildren(theButton)
+  $: if (_bb.props._children.length > 0)
+    theButton && _bb.attachChildren(theButton)
 
   $: {
     cssVariables = {
@@ -73,7 +74,7 @@
   disabled={disabled || false}
   on:click={clickHandler}
   style={buttonStyles}>
-  {#if _bb.props_children.length === 0}{contentText}{/if}
+  {#if _bb.props._children.length === 0}{contentText}{/if}
 </button>
 
 <style>