screenslots working again

6 years ago · 427cdafeda
6 changed files with 93 additions and 67 deletions
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@ -9,7 +9,6 @@ import {
 import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents"
 import { rename } from "components/userInterface/pagesParsing/renameScreen"
 import {
-  // getNewScreen,
  createProps,
  makePropsSafe,
  getBuiltin,
@ -353,8 +352,10 @@ const addChildComponent = store => (componentToAdd, presetName) => {
  store.update(state => {
    function findSlot(component_array) {
      for (let i = 0; i < component_array.length; i += 1) {
-        if (component_array[i]._component === "##builtin/screenslot")
+        if (component_array[i]._component === "##builtin/screenslot") {
          return true
+        }
+
        if (component_array[i]._children) findSlot(component_array[i])
      }

--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@ -1,8 +1,10 @@
 <script>
  import { store, backendUiStore } from "builderStore"
  import { map, join } from "lodash/fp"
+  import iframeTemplate from "./iframeTemplate";
  import { pipe } from "components/common/core"

+
  let iframe

  function transform_component(comp) {
@ -77,48 +79,13 @@
      style="height: 100%; width: 100%"
      title="componentPreview"
      bind:this={iframe}
-      srcdoc={`<html>
-  <head>
-    ${stylesheetLinks}
-
-    <style>
-      ${styles || ''}
-
-      .pos-${selectedComponentId} {
-        border: 2px solid #0055ff; 
-      }
-
-      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)};
-        window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${$store.currentPageFunctions};
-
-        import('/_builder/budibase-client.esm.mjs')
-        .then(module => {
-            module.loadBudibase({ window, localStorage });
-        })
-    <\/script>
-  </head>
-  <body>
-  </body>
-</html>`} />
+      srcdoc={iframeTemplate({
+        styles,
+        stylesheetLinks,
+        selectedComponentId,
+        frontendDefinition: JSON.stringify(frontendDefinition),
+        currentPageFunctions: $store.currentPageFunctions
+      })} />
  {/if}
 </div>

--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@ -0,0 +1,48 @@
+export default ({
+  styles,
+  stylesheetLinks,
+  selectedComponentId,
+  frontendDefinition,
+  currentPageFunctions
+}) => `<html>
+  <head>
+    ${stylesheetLinks}
+
+    <style>
+      ${styles || ''}
+
+      .pos-${selectedComponentId} {
+        border: 2px solid #0055ff; 
+      }
+
+      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##"] = ${frontendDefinition};
+        window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${currentPageFunctions};
+
+        import('/_builder/budibase-client.esm.mjs')
+        .then(module => {
+            module.loadBudibase({ window, localStorage });
+        })
+    <\/script>
+  </head>
+  <body>
+  </body>
+</html>`
--- a/packages/builder/src/components/userInterface/pagesParsing/createProps.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/createProps.js
@ -3,27 +3,16 @@ import { TYPE_MAP } from "./types"
 import { assign } from "lodash"
 import { uuid } from "builderStore/uuid"

-export const getBuiltin = name => {
-  const { props } = createProps({ name })
+export const getBuiltin = _component => {
+  const { props } = createProps({ _component })

  return {
-    name,
+    _component,
+    name: "Screenslot",
    props,
  }
 }

-// export const getNewScreen = (components, rootComponentName, name) => {
-//   const rootComponent = components[rootComponentName]
-//   return {
-//     name: name || "",
-//     description: "",
-//     url: "",
-//     _css: "",
-//     uiFunctions: "",
-//     props: createProps(rootComponent).props,
-//   }
-// }
-
 /**
 * @param {object} componentDefinition - component definition from a component library
 * @param {object} derivedFromProps - extra props derived from a components given props.
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@ -4,6 +4,14 @@ export default {
      name: 'Basic',
      isCategory: true,
      children: [
+        {
+          _component: "##builtin/screenslot",
+          name: 'Screenslot',
+          description: 'This component is a placeholder for the rendering of a screen within a page.',
+          icon: 'ri-crop-2-line',
+          commonProps: {},
+          children: []
+        },
        {
          _component: "@budibase/standard-components/container",
          name: 'Container',
@ -116,6 +124,7 @@ export default {
          children: []
        },
        {
+          _component: "@budibase/standard-components/login",
          name: 'Login',
          description: 'A component that automatically generates a login screen for your app.',
          icon: 'ri-login-box-fill',
@ -144,6 +153,7 @@ export default {
          children: []
        },
        {
+          _component: "@budibase/materialdesign-components/Form",
          name: 'Form',
          description: 'A component that generates a form from your data.',
          icon: 'ri-file-edit-fill',
--- a/packages/server/api/controllers/static.js
+++ b/packages/server/api/controllers/static.js
@ -2,22 +2,32 @@ const send = require("koa-send");
 const { resolve } = require("path")
 const { homedir } = require("os");

-// either serve the builder or serve the actual app index.html
-const builderPath = resolve(process.cwd(), "builder")
-
 exports.serveBuilder = async function(ctx) {
-  console.log(ctx.file);
+  const builderPath = resolve(process.cwd(), "builder")
  await send(ctx, ctx.file, { root: builderPath })
 }

 exports.serveApp = async function(ctx) {
-  // resolve unauthenticated page if so
-  await send(ctx, "/index.html", { root: ctx.publicPath })
+  // TODO: update homedir stuff to wherever budi is run
+  // default to homedir
+  const appPath = resolve(
+    homedir(), 
+    ".budibase", 
+    ctx.params.appId,
+    "public",
+    ctx.isAuthenticated ? "main" : "unauthenticated"
+  );
+
+  // TODO: Hook up to JWT auth in real app
+  // TODO: serve CSS and other assets
+  // resolve unauthenticated page if user not authenticated
  // resolve main page if user authenticated
+  await send(ctx, "/index.html", { root: appPath })
 }

 exports.serveComponentLibrary = async function(ctx) {
-  // TODO: update to run wherever budi is run
+  // TODO: update homedir stuff to wherever budi is run
+  // default to homedir
  const componentLibraryPath = resolve(
    homedir(), 
    ".budibase", 
@ -31,7 +41,8 @@ exports.serveComponentLibrary = async function(ctx) {
 }

 exports.serveComponentDefinitions = async function(ctx) {
-  // TODO: update to run wherever budi is run
+  // TODO: update homedir stuff to wherever budi is run
+  // default to homedir
  const componentLibraryPath = resolve(
    homedir(), 
    ".budibase",