Merge pull request #109 from pngwn/98-builtin-slot

98 builtin slot

packages/builder/src/builderStore/store.js

@@ -30,6 +30,7 @@ import {
   getNewScreen,
   createProps,
   makePropsSafe,
+  getBuiltin,
 } from "../userInterface/pagesParsing/createProps"
 import { expandComponentDefinition } from "../userInterface/pagesParsing/types"
 import {
@@ -158,6 +159,7 @@ const initialise = (store, initial) => async () => {
   }
 
   initial.libraries = await loadLibs(appname, pkg)
+
   initial.generatorLibraries = await loadGeneratorLibs(appname, pkg)
   initial.loadLibraryUrls = () => loadLibUrls(appname, pkg)
   initial.appname = appname
@@ -170,6 +172,7 @@ const initialise = (store, initial) => async () => {
   initial.components = values(pkg.components.components).map(
     expandComponentDefinition
   )
+  initial.builtins = [getBuiltin("##builtin/screenslot")]
   initial.actions = values(pkg.appDefinition.actions)
   initial.triggers = pkg.appDefinition.triggers
 
@@ -181,7 +184,6 @@ const initialise = (store, initial) => async () => {
   }
 
   store.set(initial)
-
   return initial
 }
 
@@ -743,12 +745,15 @@ const setCurrentPage = store => pageName => {
   })
 }
 
+
 const getContainerComponent = components =>
   components.find(c => c.name === "@budibase/standard-components/container")
 
 const addChildComponent = store => componentName => {
   store.update(s => {
-    const component = s.components.find(c => c.name === componentName)
+    const component = componentName.startsWith("##")
+      ? getBuiltin(componentName)
+      : s.components.find(c => c.name === componentName)
     const newComponent = createProps(component)
 
     s.currentComponentInfo._children = s.currentComponentInfo._children.concat(
@@ -756,14 +761,15 @@ const addChildComponent = store => componentName => {
     )
 
     _savePage(s)
-
     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>
-      <button
-        class:selected={current_view === 'code'}
-        on:click={() => codeEditor && codeEditor.show()}>
-        {#if component._code && component._code.trim().length > 0}
-          <div class="button-indicator">
-            <CircleIndicator />
-          </div>
-        {/if}
-        <TerminalIcon />
-      </button>
-    </li>
-    <li>
-      <button
-        class:selected={current_view === 'events'}
-        on:click={() => (current_view = 'events')}>
-        <EventsIcon />
-      </button>
-    </li>
+    {#if !component._component.startsWith('##')}
+      <li>
+        <button
+          class:selected={current_view === 'code'}
+          on:click={() => codeEditor && codeEditor.show()}>
+          {#if component._code && component._code.trim().length > 0}
+            <div class="button-indicator">
+              <CircleIndicator />
+            </div>
+          {/if}
+          <TerminalIcon />
+        </button>
+      </li>
+      <li>
+        <button
+          class:selected={current_view === 'events'}
+          on:click={() => (current_view = 'events')}>
+          <EventsIcon />
+        </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/ComponentsList.svelte

@@ -66,7 +66,7 @@
         </li>
       </ul>
 
-      {#each lib.components.filter(_ => true) as component}
+      {#each $store.builtins.concat(lib.components.filter(_ => true)) as component}
         <div
           class="component"
           on:click={() => onComponentChosen(component.name)}>

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_2",
+              _code: "",
+              text: "content",
+              font: "",
+              color: "",
+              textAlign: "inline",
+              verticalAlign: "inline",
+              formattingTag: "none"
+            }]
+          }
+        ]
+      }
+    }],
     appRootPath: "",
   }
 
@@ -51,11 +81,26 @@
       srcdoc={`<html>
   <head>
     ${stylesheetLinks}
+
     <style>
       ${styles || ''}
       body, html {
         height: 100%!important;
       }
+      .lay-__screenslot__text {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 20px 0;
+          border: dashed 2px #ccc;
+          font-family: sans-serif;
+          font-size: 1.2rem;
+          color: #999;
+          text-transform: uppercase;
+          font-weight: bold;
+        }
     <\/style>
     <\script>
         window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${JSON.stringify(frontendDefinition)};

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

@@ -3,6 +3,15 @@ import { types } from "./types"
 import { assign } from "lodash"
 import { uuid } from "../../builderStore/uuid"
 
+export const getBuiltin = name => {
+  const { props } = createProps({ name })
+
+  return {
+    name,
+    props,
+  }
+}
+
 export const getNewScreen = (components, rootComponentName, name) => {
   const rootComponent = components.find(c => c.name === rootComponentName)
   return {

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)
@@ -38,7 +39,7 @@ export const screenRouter = (screens, onScreenSelected) => {
 
     if (current !== -1) {
       onScreenSelected(screens[current], store, _url)
-    } else if (fallback) {
+    } else {
       onScreenSelected(screens[fallback], store, _url)
     }