build app... probably not orking yet..

packages/builder/src/builderStore/store.js

@@ -24,6 +24,7 @@ import {
 } from "../common/core";
 import {writable} from "svelte/store";
 import { defaultPagesObject } from "../userInterface/pagesParsing/defaultPagesObject"
+import { buildPropsHierarchy } from "../userInterface/pagesParsing/buildPropsHierarchy"
 import api from "./api";
 import { isRootComponent } from "../userInterface/pagesParsing/searchComponents";
 import { 
@@ -579,8 +580,10 @@ const savePackage = (store, s) => {
         hierarchy:s.hierarchy,
         triggers:s.triggers,
         actions: groupBy("name")(s.actions),
-        mainUi: s.mainUi,
-        unauthenticatedUi: s.unauthenticatedUi
+        props: {
+            main: buildPropsHierarchy(s.allComponents, s.pages.main.appBody),
+            unauthenticated:  buildPropsHierarchy(s.allComponents, s.pages.unauthenticated.appBody)
+        }
     };
 
     const data = {

packages/client/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "budibase-builder",
+  "name": "budibase-client",
   "version": "0.0.1",
-  "license": "AGPL-3.0",
+  "license": "MPL-2.0",
   "scripts": {
     "build": "rollup -c",
     "test": "jest"

packages/client/src/index.js

@@ -1,3 +1,5 @@
 import { initialise } from "./initialise";
 
-initialise();
+const appDefinition = window["##BUDIBASE_APPDEFINITION##"];
+
+initialise(appDefinition);

packages/client/src/initialise.js

@@ -1,11 +1,8 @@
 import { writable } from "svelte/store";
 import { initialiseComponent } from "./initialiseComponent";
 
-export const initialise = async (document, appDefinition, pageDefinition) => {
-    for(let stylesheet of pageDefinition.stylesheets) {
-        addStylesheet(document, stylesheet);
-    }
-
+export const initialise = async (document, appDefinition) => {
+    
     const componentLibraries = {};
 
     for(let lib of appDefinition.componentLibraries) {
@@ -16,20 +13,9 @@ export const initialise = async (document, appDefinition, pageDefinition) => {
     const store = writable({});
 
     initialiseComponent(allComponents, componentLibraries, store)(
-        appDefinition.rootProps,
+        appDefinition.props,
         document.body);
 }
-const componentLibraryUrl = (lib, rootUrlPath) =>
-    `${rootPath}/api/componentlibrary?lib=${encodeURI(lib)}`
-
-const addStylesheet = (document, url) => {
+const componentLibraryUrl = (lib, appRootPath) =>
+    `${appRootPath}/componentlibrary?lib=${encodeURI(lib)}`
 
-    const head = document.head;
-    const link = document.createElement("link");
-  
-    link.type = "text/css";
-    link.rel = "stylesheet";
-    link.href = url;
-  
-    head.appendChild(link);
-  }

packages/client/src/initialiseComponent.js

@@ -9,8 +9,9 @@ import { $ } from "./core/common";
 
 export const initialiseComponent = (allComponents, componentLibraries, store) => (props, htmlElement) => {
 
-    const rootComponent = getRootComponent(
-        props._component, allComponents);
+    const component = getComponent(
+        props._component, 
+        allComponents);
 
     const _app = {
         initialiseComponent: initialiseComponent(allComponents, componentLibraries, store), 
@@ -18,7 +19,7 @@ export const initialiseComponent = (allComponents, componentLibraries, store) =>
     };
 
     const {componentName, libName} = splitName(
-       rootComponent.name);
+       component.name);
 
     new (componentLibraries[libName][componentName])({
         target: htmlElement,
@@ -27,13 +28,8 @@ export const initialiseComponent = (allComponents, componentLibraries, store) =>
 
 }
 
-const getRootComponent = (componentName, allComponents) => {
-    const component = find(c => c.name === componentName)(allComponents);
-
-    if(isRootComponent(component)) return component;
-
-    return getRootComponent(component.inherits, allComponents);
-}
+const getComponent = (componentName, allComponents) => 
+    find(c => c.name === componentName)(allComponents);
 
 const isRootComponent = c => isUndefined(c.inherits);
 

packages/server/appPackages/testApp2/components/Joes Button.json

@@ -0,0 +1,11 @@
+{
+  "name": "Joes Button",
+  "description": "",
+  "inherits": "./standard-components/button",
+  "props": {
+    "className": "btn btn-danger"
+  },
+  "tags": [
+    "button"
+  ]
+}

packages/server/appPackages/testApp2/components/another noubtbtk.json

@@ -0,0 +1,11 @@
+{
+  "name": "another noubtbtk",
+  "description": "",
+  "inherits": "./standard-components/button",
+  "props": {
+    "contentText": "Mike"
+  },
+  "tags": [
+    "button"
+  ]
+}

packages/server/appPackages/testApp2/components/listofstuff.json

@@ -0,0 +1,41 @@
+{
+  "name": "listofstuff",
+  "description": "",
+  "inherits": "./standard-components/stackpanel",
+  "props": {
+    "children": [
+      {
+        "_component": "listofstuff:children",
+        "control": {
+          "_component": "Primary Button",
+          "contentText": "Button",
+          "contentComponent": {
+            "_component": ""
+          },
+          "className": "btn btn-primary",
+          "disabled": false
+        }
+      },
+      {
+        "_component": "listofstuff:children",
+        "control": {
+          "_component": "Joes Button",
+          "contentText": "Button",
+          "contentComponent": {
+            "_component": ""
+          },
+          "className": "btn btn-danger",
+          "disabled": false
+        }
+      }
+    ],
+    "_component": "listofstuff",
+    "direction": "vertical"
+  },
+  "tags": [
+    "div",
+    "container",
+    "layout",
+    "panel"
+  ]
+}

packages/server/appPackages/testApp2/components/login2.json

@@ -0,0 +1,14 @@
+{
+  "name": "login2",
+  "description": "",
+  "inherits": "./standard-components/login",
+  "props": {
+    "usernameLabel": "User"
+  },
+  "tags": [
+    "login",
+    "credentials",
+    "password",
+    "logon"
+  ]
+}

packages/server/appPackages/testApp2/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "testapp2",
+  "version": "1.0.0",
+  "description": "",
+  "main": "plugins.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "budibase-client": "file:../../../client/dist",
+    "budibase-standard-components": "file:../../../standard-components/dist"
+  }
+}

packages/server/appPackages/testApp2/pages.json

@@ -1,20 +1,12 @@
 {
   "main": {
-    "index": {
-      "title": "yyyaaa"
-    },
-    "appBody": "Random Button"
+    "index": {},
+    "appBody": ""
   },
   "unauthenticated": {
-    "index": {
-      "title": "Test App 1 - Login"
-    },
-    "appBody": "login_screen"
+    "index": {},
+    "appBody": ""
   },
-  "componentLibraries": [
-    "./standard-components"
-  ],
-  "stylesheets": [
-    "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-  ]
+  "componentLibraries": [],
+  "stylesheets": []
 }

packages/server/appPackages/testApp2/standard-components/src/Button.svelte

@@ -1,53 +0,0 @@
-<script>
-export let className = "default";
-export let disabled = false;
-export let contentText;
-export let contentComponent;
-
-export let _app;
-let contentComponentContainer;
-
-$:{
-	if(_app && contentComponentContainer)
-		_app.initialiseComponent(contentComponent, contentComponentContainer);
-}
-
-</script>
-
-
-<button class={className} {disabled} on:click>
-    {#if contentComponent && contentComponent._component}
-	<div bind:this={contentComponentContainer}>
-	</div>
-    {:else if contentText}
-    {contentText}
-    {:else}
-    <slot />
-    {/if}
-</button>
-
-
-<style>
-
-.default {
-	font-family: inherit;
-	font-size: inherit;
-	padding: 0.4em;
-	margin: 0 0 0.5em 0;
-	box-sizing: border-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
-}
-
-.default:active {
-	background-color: #ddd;
-}
-
-.default:focus {
-	border-color: #666;
-}
-
-</style>

packages/server/appPackages/testApp2/yarn.lock

@@ -0,0 +1,9 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"budibase-client@file:../../../client/dist":
+  version "0.0.1"
+
+"budibase-standard-components@file:../../../standard-components/dist":
+  version "1.0.0"

packages/server/tests/builder.spec.js

@@ -10,6 +10,8 @@ const derivedComponent2 = require("../appPackages/testApp/components/subfolder/o
 const { readJSON, pathExists, unlink } = require("fs-extra");
 
 const app = require("./testApp")();
+testComponents.textbox.name = `./customComponents/textbox`;
+testMoreComponents.textbox.name = `./moreCustomComponents/textbox`;
 
 beforeAll(async () => {
 

packages/server/utilities/builder/buildApp.js

@@ -10,40 +10,50 @@ const {
 const { join } = require("path");
 const sqrl = require('squirrelly');
 
-module.exports = async (config, appname, pageName, pages, appdefinition) => {
+module.exports = async (config, appname, pages, appdefinition) => {
 
     const appPath = appPackageFolder(config, appname);    
 
     await buildClientAppDefinition(
         config, appname,
         appdefinition, componentLibraries, 
-        appPath, appRootPath)
+        appPath, pages, "main");
+
+    await buildClientAppDefinition(
+        config, appname,
+        appdefinition, componentLibraries, 
+        appPath, pages, "unauthenticated")
 
     await buildIndexHtml(
         config, appname, appPath, 
-        pageName, pages);
-    
-    await copyClientLib(appPath);
+        pages, "main");
+
+    await buildIndexHtml(
+        config, appname, appPath, 
+        pages, "unauthenticated");
+
+    await copyClientLib(appPath, "main");
+    await copyClientLib(appPath, "unauthenticated");
 
 }
 
-const publicPath = async  appPath => join(appPath, "public");
+const publicPath = async (appPath, pageName) => join(appPath, "public", pageName);
 const rootPath = (config, appname) => config.useAppRootPath ? `/${appname}` : "";
 
-const copyClientLib = async appPath => {
+const copyClientLib = async (appPath, pageName) => {
     var sourcepath = require.resolve("budibase-client",{
-        basedir: appPath
+        paths: [appPath]
     });
-    var destPath = join(publicPath(appPath), "budibase-client.js");
+    var destPath = join(publicPath(appPath, pageName), "budibase-client.js");
 
     await copyFile(sourcepath, destPath, constants.COPYFILE_FICLONE);
 
 }
 
-const buildIndexHtml = async (config, appname, appPath, pageName, pages) => {
+const buildIndexHtml = async (config, appname, appPath, pages, pageName) => {
 
     
-    const appPublicPath = publicPath(appPath);
+    const appPublicPath = publicPath(appPath, pageName);
     const appRootPath = rootPath(config, appname);
 
     const stylesheetUrl = s => 
@@ -51,11 +61,10 @@ const buildIndexHtml = async (config, appname, appPath, pageName, pages) => {
         ? s
         : `/${rootPath(config, appname)}/${s}`;
 
-
     const templateObj = {
-        title = pages[pageName].index.title || "Budibase App",
-        favicon = `${appRootPath}/${pages[pageName].index.favicon || "/assets/favicon.png"}`,
-        stylesheets = pages.stylesheets.map(stylesheetUrl),
+        title: pages[pageName].index.title || "Budibase App",
+        favicon: `${appRootPath}/${pages[pageName].index.favicon || "/assets/favicon.png"}`,
+        stylesheets: pages.stylesheets.map(stylesheetUrl),
         appRootPath
     }
 
@@ -71,12 +80,15 @@ const buildIndexHtml = async (config, appname, appPath, pageName, pages) => {
 }
 
 
-const buildClientAppDefinition = async (config, appname, appdefinition, pages, appPath) => {
+const buildClientAppDefinition = async (config, appname, appdefinition, appPath, pages, pageName) => {
 
-    const componentLibraries = [];
-    const appPublicPath = publicPath(appPath);
+    
+    const appPublicPath = publicPath(appPath, pageName);
     const appRootPath = rootPath(config, appname);
 
+    
+    const componentLibraries = [];
+
     for(let lib of pages.componentLibraries) {
         const info = await componentLibraryInfo(appPath, lib);
         const source = join(info.libDir, info.components._lib);
@@ -101,11 +113,14 @@ const buildClientAppDefinition = async (config, appname, appdefinition, pages, a
 
     const filename = join(appPublicPath, "clientAppDefinition.js");
 
+    const clientAppDefObj = {
+        hierarchy: appdefinition.hierarchy,
+        componentLibraries: pages.componentLibraries,
+        appRootPath: appRootPath,
+        props: appdefinition.props[pageName]
+    }
+    
     await writeFile(filename, 
-`window['##BUDIBASE_APPDEFINITION##'] = {
-    hierarchy: ${JSON.stringify(appdefinition.hierarchy)},
-    componentLibraries: ${JSON.stringify(componentLibraries)},
-    appRootPath: '${appRootPath}'
-}`);
+            `window['##BUDIBASE_APPDEFINITION##'] = ${JSON.stringify(clientAppDefObj)}`);
 
 }

packages/server/utilities/builder/componentLibraryInfo.js

@@ -1,11 +1,20 @@
 const { 
-    readJSON, exists 
+    readJSON, exists
 } = require("fs-extra");
-const { resolve } = require("path");
+const { 
+    resolve, join , dirname 
+} = require("path");
 
-const getLibDir = (appPath, libname) => require.resolve(libname, {
-    basedir: appPath
-});
+const getLibDir = (appPath, libname) => {
+    try {
+        const componentsFile = require.resolve(
+            join(libname, "components.json"),
+            { paths: [appPath]});
+        return dirname(componentsFile);
+    } catch(e) {
+        console.log(e);
+    }
+}
 
 const getComponentsFilepath = libPath => 
     resolve(libPath, "components.json");

packages/server/utilities/builder/index.js

@@ -26,6 +26,9 @@ const {
 const {merge} = require("lodash");
 
 const { componentLibraryInfo } = require("./componentLibraryInfo");
+const savePackage = require("./savePackage");
+
+module.exports.savePackage = savePackage;
 
 module.exports.getPackageForBuilder = async (config, appname) => {
     const appPath = appPackageFolder(config, appname);
@@ -47,23 +50,7 @@ module.exports.getPackageForBuilder = async (config, appname) => {
 
 }
 
-module.exports.savePackage = async (config, appname, pkg) => {
-    const appPath = appPackageFolder(config, appname);
-    await writeJSON(
-        `${appPath}/appDefinition.json`, 
-        pkg.appDefinition,
-        {spaces:2});
 
-    await writeJSON(
-        `${appPath}/access_levels.json`,
-        pkg.accessLevels,
-        {spaces:2});
-
-    await writeJSON(
-        `${appPath}/pages.json`,
-        pkg.pages,
-        {spaces:2});
-}
 
 module.exports.getApps = async (config) => 
     await readdir(appsFolder(config));
@@ -173,7 +160,6 @@ const fetchDerivedComponents = async (appPath, relativePath = "") => {
                                 .replace(/\\/g, "/");
 
             component.props = component.props || {};
-            component.props._component = component.name;
 
             components.push(component);
         } else {

packages/server/utilities/builder/savePackage.js

@@ -0,0 +1,25 @@
+const { appPackageFolder } = require("../createAppPackage");
+const { writeJSON } = require("fs-extra");
+const buildApp = require("./buildApp");
+
+module.exports = async (config, appname, pkg) => {
+    const appPath = appPackageFolder(config, appname);
+    await writeJSON(
+        `${appPath}/appDefinition.json`, 
+        pkg.appDefinition,
+        {spaces:2});
+
+    await writeJSON(
+        `${appPath}/access_levels.json`,
+        pkg.accessLevels,
+        {spaces:2});
+
+    await writeJSON(
+        `${appPath}/pages.json`,
+        pkg.pages,
+        {spaces:2});
+
+    await buildApp(
+        config, appname, 
+        pkg.pages, pkg.appDefinition);
+}

packages/server/appPackages/testApp2/standard-components/.gitignore → packages/standard-components/.gitignore

@@ -2,5 +2,4 @@
 node_modules
 yarn.lock
 package-lock.json
-index.js
-index.mjs
+dist/index.js

packages/standard-components/dist/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "budibase-standard-components",
+  "svelte": "src/index.svelte",
+  "main": "index.js",
+  "devDependencies": {},
+  "keywords": [
+    "budibase"
+  ],
+  "files": [
+    "dist"
+  ],
+  "version": "1.0.0",
+  "license": "MPL-2.0"
+}

packages/standard-components/src/index.js

@@ -0,0 +1,6 @@
+export {default as button} from  "./Button.svelte";
+export {default as login} from  "./Login.svelte";
+export {default as form} from  "./Form.svelte";
+export {default as formControl} from  "./FormControl.svelte";
+export {default as textbox} from  "./Textbox.svelte";
+export {default as stackpanel} from  "./StackPanel.svelte";