diff --git a/packages/builder/package.json b/packages/builder/package.json
index 858afb1069..7459d7094a 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -33,6 +33,7 @@
]
},
"dependencies": {
+ "@budibase/client": "*",
"@nx-js/compiler-util": "^2.0.0",
"date-fns": "^1.29.0",
"feather-icons": "^4.21.0",
@@ -43,7 +44,7 @@
"shortid": "^2.2.8",
"string_decoder": "^1.2.0",
"uikit": "^3.1.7"
- },
+},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-transform-runtime": "^7.5.5",
diff --git a/packages/builder/rollup.config.js b/packages/builder/rollup.config.js
index 64a690d546..b1351aa0ef 100644
--- a/packages/builder/rollup.config.js
+++ b/packages/builder/rollup.config.js
@@ -59,7 +59,8 @@ export default {
copy({
targets: [
{ src: 'src/index.html', dest: outputpath },
- { src: 'src/favicon.png', dest: outputpath }
+ { src: 'src/favicon.png', dest: outputpath },
+ { src: 'node_modules/@budibase/client/dist/budibase-client.esm.mjs', dest: outputpath }
]
}),
diff --git a/packages/builder/src/builderStore/loadComponentLibraries.js b/packages/builder/src/builderStore/loadComponentLibraries.js
index 42f7cdad84..9e69711d8e 100644
--- a/packages/builder/src/builderStore/loadComponentLibraries.js
+++ b/packages/builder/src/builderStore/loadComponentLibraries.js
@@ -11,6 +11,17 @@ export const loadLibs = async (appName, appPackage) => {
return allLibraries;
}
+export const loadLibUrls = (appName, appPackage) => {
+
+ const allLibraries = [];
+ for(let lib of appPackage.pages.componentLibraries) {
+ const libUrl = makeLibraryUrl(appName, lib);
+ allLibraries.push({libName:lib, importPath:libUrl});
+ }
+
+ return allLibraries;
+}
+
export const loadLib = async (appName, lib, allLibs) => {
allLibs[lib] = await import(makeLibraryUrl(appName, lib));
return allLibs;
diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js
index faec68231f..704771c8f1 100644
--- a/packages/builder/src/builderStore/store.js
+++ b/packages/builder/src/builderStore/store.js
@@ -1,26 +1,14 @@
import {
hierarchy as hierarchyFunctions,
- common
} from "../../../core/src";
import {
- filter,
- cloneDeep,
- sortBy,
- map,
- last,
- keys,
- concat,
- find,
- isEmpty,
- groupBy,
- reduce
+ filter, cloneDeep, sortBy,
+ map, last, keys, concat,
+ find, isEmpty, reduce
} from "lodash/fp";
import {
- pipe,
- getNode,
- validate,
- constructHierarchy,
- templateApi
+ pipe, getNode, validate,
+ constructHierarchy, templateApi
} from "../common/core";
import {writable} from "svelte/store";
import { defaultPagesObject } from "../userInterface/pagesParsing/defaultPagesObject"
@@ -28,10 +16,9 @@ import { buildPropsHierarchy } from "../userInterface/pagesParsing/buildPropsHie
import api from "./api";
import { isRootComponent } from "../userInterface/pagesParsing/searchComponents";
import {
- getComponentInfo,
- getNewComponentInfo
+ getComponentInfo, getNewComponentInfo
} from "../userInterface/pagesParsing/createProps";
-import { loadLibs } from "./loadComponentLibraries";
+import { loadLibs, loadLibUrls } from "./loadComponentLibraries";
let appname = "";
@@ -117,6 +104,7 @@ const initialise = (store, initial) => async () => {
.then(r => r.json());
initial.libraries = await loadLibs(appname, pkg);
+ initial.loadLibraryUrls = () => loadLibUrls(appname, pkg);
initial.appname = appname;
initial.pages = pkg.pages;
initial.hasAppPackage = true;
diff --git a/packages/builder/src/common/eventHandlers.js b/packages/builder/src/common/eventHandlers.js
new file mode 100644
index 0000000000..e396b7376f
--- /dev/null
+++ b/packages/builder/src/common/eventHandlers.js
@@ -0,0 +1 @@
+export const EVENT_TYPE_MEMBER_NAME = "##eventHandlerType";
\ No newline at end of file
diff --git a/packages/builder/src/userInterface/ComponentInstanceEditor.svelte b/packages/builder/src/userInterface/ComponentInstanceEditor.svelte
index 2e04829fcb..7a14cb85d5 100644
--- a/packages/builder/src/userInterface/ComponentInstanceEditor.svelte
+++ b/packages/builder/src/userInterface/ComponentInstanceEditor.svelte
@@ -10,7 +10,7 @@ import {
} from "lodash/fp";
import { fade, slide } from 'svelte/transition';
-export let propertyName = "";
+export let title = "";
export let onGoBack = () => {};
export let instanceProps = {};
export let onPropsChanged = () => {};
@@ -18,6 +18,9 @@ export let onPropsChanged = () => {};
let editingSubComponentName;
let editingSubComponentProps;
+let editingSubComponentArrayIndex;
+let editingSubComponentArrayPropName;
+let editingSubComponentTitle;
let allComponents;
store.subscribe(s => {
@@ -33,18 +36,28 @@ const onSubComponentGoBack = () => {
}
const onEditComponentProp = (propName, arrayIndex, arrayPropName) => {
- editingSubComponentName = isUndefined(arrayIndex)
+ editingSubComponentName = propName;
+ editingSubComponentTitle = isUndefined(arrayIndex)
? propName
: `${propName}[${arrayIndex}].${arrayPropName}`;
editingSubComponentProps = isUndefined(arrayIndex)
? instanceProps[propName]
: instanceProps[propName][arrayIndex][arrayPropName];
+ editingSubComponentArrayIndex = arrayIndex;
+ editingSubComponentArrayPropName = arrayPropName;
};
const onSubComponentPropsChanged = (subProps) => {
const newProps = cloneDeep(instanceProps);
- newProps[editingSubComponentName] = subProps;
+ if(isUndefined(editingSubComponentArrayIndex)) {
+ newProps[editingSubComponentName] = subProps;
+ } else {
+ newProps[editingSubComponentName]
+ [editingSubComponentArrayIndex]
+ [editingSubComponentArrayPropName] = subProps;
+ }
+
instanceProps = newProps;
onPropsChanged(newProps);
}
@@ -62,7 +75,7 @@ const propsChanged = newProps => {
- {propertyName}
+ {title}
{#if editingSubComponentName}
@@ -71,7 +84,7 @@ const propsChanged = newProps => {
+ title={editingSubComponentTitle} />
{:else}
{
const {componentName, libName} = splitName(
s.currentComponentInfo.rootComponent.name);
rootComponentName = componentName;
- props = s.currentComponentInfo.fullProps;
component = s.libraries[libName][componentName];
stylesheetLinks = pipe(s.pages.stylesheets, [
map(s => ``),
join("\n")
]);
- componentLibraryUrl = makeLibraryUrl(s.appname, libName);
+ appDefinition = {
+ componentLibraries: s.loadLibraryUrls(),
+ props: buildPropsHierarchy(s.allComponents, s.currentFrontEndItem)
+ };
libraries = s.libraries;
allComponents = s.allComponents;
});
-/*
-afterUpdate(() => {
- if(iframe) iframeLoaded();
-});
-*/
-const iframeLoaded = () => {
- setTimeout(() => {
- iframe.style.height = (iframe.contentWindow.document.body.scrollHeight + 1).toString() + "px";
- iframe.style.width = (iframe.contentWindow.document.body.scrollWidth + 1).toString() + "px";
- }, 100);
-}