dev setup complete

packages/builder/src/builderStore/store/index.js

@@ -105,16 +105,11 @@ const setPackage = (store, initial) => async (pkg) => {
   initial.libraries = await fetchComponentLibModules(pkg.application)
   // TODO: Rename to componentDefinitions
   initial.components = await fetchComponentLibDefinitions(pkg.clientId, pkg.application._id); 
-  initial.loadLibraryUrls = pageName => {
-    const libs = libUrlsForPreview(pkg, pageName)
-    return libs
-  }
   initial.appname = pkg.application.name
   initial.appId = pkg.application._id
   initial.pages = pkg.pages
   initial.hasAppPackage = true
   initial.screens = values(pkg.screens)
-  // initial.templates = pkg.components.templates
   initial.builtins = [getBuiltin("##builtin/screenslot")]
   initial.appInstances = pkg.application.instances
   initial.appId = pkg.application._id

packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte

@@ -42,7 +42,8 @@
   $: screensExist = $store.currentPreviewItem._screens && $store.currentPreviewItem._screens.length > 0 
 
   $: frontendDefinition = {
-    libraries: $store.libraries,
+    appId: $store.appId,
+    libraries: Object.keys($store.libraries),
     page: $store.currentPreviewItem,
     screens: screensExist ? $store.currentPreviewItem._screens : [{
       name: "Screen Placeholder",

packages/builder/src/components/userInterface/ComponentSelector.svelte

@@ -1,138 +0,0 @@
-<script>
-  import { isRootComponent } from "./pagesParsing/searchComponents"
-  import { splitName } from "./pagesParsing/splitRootComponentName.js"
-  import { store } from "../builderStore"
-  import { find, sortBy } from "lodash/fp"
-
-  export let onComponentChosen
-  export let onGeneratorChosen
-  export let allowGenerators
-
-  let screens = []
-  let componentLibraries = []
-
-  const addRootComponent = (c, all, isGenerator) => {
-    const { libName } = splitName(c.name)
-    let group = find(r => r.libName === libName)(all)
-
-    if (!group) {
-      group = {
-        libName,
-        components: [],
-        generators: [],
-      }
-
-      all.push(group)
-    }
-
-    if (isGenerator) {
-      group.generators.push(c)
-    } else {
-      group.components.push(c)
-    }
-  }
-
-  $: {
-    const newComponentLibraries = []
-    const newscreens = []
-
-    for (let comp of sortBy(["name"])($store.components)) {
-      if (isRootComponent(comp)) {
-        addRootComponent(comp, newComponentLibraries, false)
-      } else {
-        newscreens.push(comp)
-      }
-    }
-
-    for (let generator of $store.generators) {
-      addRootComponent(generator, newComponentLibraries, true)
-    }
-
-    screens = sortBy(["name"])(newscreens)
-    componentLibraries = newComponentLibraries
-  }
-</script>
-
-{#each componentLibraries as lib}
-  <div class="library-header">{lib.libName}</div>
-
-  <div class="library-container">
-
-    {#if allowGenerators}
-      <div class="inner-header">Generators</div>
-
-      {#each lib.generators as generator}
-        <div class="component" on:click={() => onGeneratorChosen(generator)}>
-          <div class="name">{splitName(generator.name).componentName}</div>
-          <div class="description">{generator.description}</div>
-        </div>
-      {/each}
-    {/if}
-
-    <div class="inner-header">Components</div>
-
-    {#each lib.components as component}
-      <div class="component" on:click={() => onComponentChosen(component)}>
-        <div class="name">{splitName(component.name).componentName}</div>
-        <div class="description">{component.description}</div>
-      </div>
-    {/each}
-
-  </div>
-{/each}
-
-<div class="library-header">My Components</div>
-
-<div class="library-container">
-
-  {#each screens as component}
-    <div class="component" on:click={() => onComponentChosen(component)}>
-      <div class="name">{component.name}</div>
-      <div class="description">{component.description}</div>
-    </div>
-  {/each}
-
-</div>
-
-<style>
-  .library-header {
-    font-size: 1.1em;
-    border-color: var(--primary25);
-    border-width: 1px 0px;
-    border-style: solid;
-    background-color: var(--primary10);
-    padding: 5px 0;
-  }
-
-  .library-container {
-    padding: 0 0 10px 10px;
-  }
-
-  .inner-header {
-    font-size: 0.9em;
-    font-weight: bold;
-    margin-top: 7px;
-    margin-bottom: 3px;
-  }
-
-  .component {
-    padding: 2px 0px;
-    cursor: pointer;
-  }
-
-  .component:hover {
-    background-color: var(--lightslate);
-  }
-
-  .component > .name {
-    color: var(--secondary100);
-    display: inline-block;
-  }
-
-  .component > .description {
-    font-size: 0.8em;
-    color: var(--secondary75);
-    display: inline-block;
-    margin-left: 10px;
-  }
-</style>

packages/client/package.json

@@ -34,8 +34,6 @@
     ]
   },
   "dependencies": {
-    "@budibase/materialdesign-components": "^0.0.32",
-    "@budibase/standard-components": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "bcryptjs": "^2.4.3",
     "deep-equal": "^2.0.1",

packages/client/src/index.js

@@ -1,15 +1,14 @@
 import { createApp } from "./createApp"
 import { trimSlash } from "./common/trimSlash"
 import { builtins, builtinLibName } from "./render/builtinComponents"
-import * as standardComponents from "../../standard-components/dist";
-import * as materialDesignComponents from "../../materialdesign-components/dist";
+// import * as standardComponents from "../../standard-components/dist";
+// import * as materialDesignComponents from "../../materialdesign-components/dist";
 
 /**
  * create a web application from static budibase definition files.
  * @param  {object} opts - configuration options for budibase client libary
  */
 export const loadBudibase = async opts => {
-  let componentLibraries = opts && opts.componentLibraries
   const _window = (opts && opts.window) || window
   const _localStorage = (opts && opts.localStorage) || localStorage
 
@@ -30,24 +29,20 @@ export const loadBudibase = async opts => {
   let { appRootPath } = frontendDefinition;
   appRootPath = appRootPath === "" ? "" : "/" + trimSlash(appRootPath)
 
-  // if (!componentLibraries) componentLibraries = {};
 
-  componentLibraries = {
-    "@budibase/standard-components": standardComponents,
-    "@budibase/materialdesign-components": materialDesignComponents
+  const componentLibraryModules = {};
+  const libraries = frontendDefinition.libraries || [
+    "@budibase/standard-components",
+    "@budibase/materialdesign-components",
+  ];
+  for (let library of libraries) {
+    // fetch the JavaScript for the component libraries from the server 
+    componentLibraryModules[library] = await import(
+      `/${frontendDefinition.appId}/componentlibrary?library=${encodeURI(library)}`
+    );
   };
 
-  // if (!componentLibraries) {
-  //   componentLibraries = {}
-
-  //   for (let lib of frontendDefinition.componentLibraries) {
-  //     componentLibraries[lib.libName] = await import(
-  //       `${frontendDefinition.appRootPath}/${trimSlash(lib.importPath)}`
-  //     )
-  //   }
-  // }
-
-  componentLibraries[builtinLibName] = builtins(_window)
+  componentLibraryModules[builtinLibName] = builtins(_window)
 
   const {
     initialisePage,
@@ -56,7 +51,7 @@ export const loadBudibase = async opts => {
     routeTo,
     rootNode,
   } = createApp(
-    componentLibraries,
+    componentLibraryModules,
     frontendDefinition,
     user,
     uiFunctions || {},

packages/server/api/controllers/static.js

@@ -2,18 +2,13 @@ const send = require("koa-send");
 const { resolve, join } = require("path")
 const { homedir } = require("os");
 
-const isProduction = process.env.NODE_ENV === "production";
-
 exports.serveBuilder = async function(ctx) {
-  const builderPath = resolve(process.cwd(), "builder")
-  await send(ctx, ctx.file, { root: builderPath })
+  let builderPath = resolve(process.cwd(), "builder")
+
+  await send(ctx, ctx.file, { root: ctx.devPath || builderPath })
 }
 
 exports.serveApp = async function(ctx) {
-
-  // ONLY RELEVANT FOR THE CLIENT LIB
-  // const devPath = join("/tmp", ".budibase", ctx.params.appId);
-
   // TODO: update homedir stuff to wherever budi is run
   // default to homedir
   const appPath = resolve(
@@ -24,26 +19,25 @@ exports.serveApp = async function(ctx) {
     ctx.isAuthenticated ? "main" : "unauthenticated"
   );
 
-  await send(ctx, ctx.file, { root: appPath })
+  await send(ctx, ctx.file, { root: ctx.devPath || appPath })
 }
 
 exports.serveComponentLibrary = async function(ctx) {
-
-  let componentLibraryPath = join(
-    "/tmp", 
-    ".budibase",
+  // TODO: update homedir stuff to wherever budi is run
+  // default to homedir
+  let componentLibraryPath = resolve(
+    homedir(), 
+    ".budibase", 
+    ctx.params.appId, 
+    "node_modules", 
     decodeURI(ctx.query.library),
     "dist"
   );
 
-  if (isProduction) {
-    // TODO: update homedir stuff to wherever budi is run
-    // default to homedir
-    componentLibraryPath = resolve(
-      homedir(), 
-      ".budibase", 
-      ctx.params.appId, 
-      "node_modules", 
+  if (ctx.isDev) {
+    componentLibraryPath = join(
+      "/tmp", 
+      ".budibase",
       decodeURI(ctx.query.library),
       "dist"
     );

packages/server/api/index.js

@@ -40,6 +40,7 @@ module.exports = app => {
         latestPackagesFolder: resolve(homedir(), ".budibase"),
         secret: "foo"
       }
+      ctx.isDev = process.env.NODE_ENV !== "production";
       await next();
     });
   

packages/server/api/routes/static.js

@@ -6,6 +6,12 @@ const router = Router();
 router
   .param("file", async (file, ctx, next) => {
     ctx.file = file && file.includes(".") ? file : "index.html";
+
+    // Serving the latest client library in dev
+    if (ctx.isDev && ctx.file.startsWith("budibase-client")) {
+      ctx.devPath = "/tmp/.budibase";
+    }
+
     await next();
   })
   .get("/_builder/:file*", controller.serveBuilder)

packages/server/package.json

@@ -10,7 +10,7 @@
     "build": "",
     "initialise": "node ../cli/bin/budi init ./myapps -b local -q",
     "budi": "node ../cli/bin/budi",
-    "dev:builder": "node index --enable-source-maps"
+    "dev:builder": "nodemon index"
   },
   "keywords": [
     "budibase"

packages/standard-components/components.json

@@ -263,17 +263,15 @@
 		}
 	},
 	"datatable": {
-		"description": "Other thingwy",
+		"description": "an HTML table that fetches data from a model or view and displays it.",
 		"props": {
 			"_viewName": "string",
 			"_instanceId": "string",
 			"model": {
-				"store": true,
 				"type": "options",
 				"default": "",
 				"options": [
-					"something",
-					"something"
+					"all_6dc86335-83b7-462c-90ca-1fe7feb08942"
 				]
 			}
 		}