Add builtin slot to list

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 {
@@ -156,6 +157,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
@@ -168,6 +170,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
 
@@ -179,7 +182,6 @@ const initialise = (store, initial) => async () => {
   }
 
   store.set(initial)
-
   return initial
 }
 
@@ -746,7 +748,9 @@ const getContainerComponent = components =>
 
 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(

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/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 {