MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

state binding v1

This commit is contained in:
Martin McKeaveney 2020-02-10 16:58:20 +00:00
parent da7339035f
commit ee9df6c29a
11 changed files with 393 additions and 816 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc
View File

@ -1,6 +1,6 @@
{ {
"tabWidth": 2, "tabWidth": 2,
"semi": false, "semi": true,
"singleQuote": false, "singleQuote": false,
"trailingComma": "es5", "trailingComma": "es5",
"plugins": ["prettier-plugin-svelte"], "plugins": ["prettier-plugin-svelte"],

150
packages/builder/src/userInterface/CurrentItemPreview.svelte
View File

@ -1,95 +1,85 @@
<script> <script>
import { store } from "../builderStore" import { store } from "../builderStore";
import { map, join } from "lodash/fp" import { map, join } from "lodash/fp";
import { pipe } from "../common/core" import { pipe } from "../common/core";
import { buildPropsHierarchy } from "./pagesParsing/buildPropsHierarchy";
let iframe let iframe;
function transform_component(comp) { $: iframe && console.log(iframe.contentDocument.head.insertAdjacentHTML('beforeend', '<style></style>'))
const props = comp.props || comp $: hasComponent = !!$store.currentFrontEndItem;
if (props && props._children && props._children.length) { $: styles = hasComponent ? $store.currentFrontEndItem._css : '';
props._children = props._children.map(transform_component)
}
return props $: stylesheetLinks = pipe($store.pages.stylesheets, [
} map(s => `<link rel="stylesheet" href="${s}"/>`),
join("\n")
$: iframe && ]);
console.log(
iframe.contentDocument.head.insertAdjacentHTML(
"beforeend",
`<\style></style>`
)
)
$: hasComponent = !!$store.currentPreviewItem
$: styles = hasComponent ? $store.currentPreviewItem._css : ""
$: stylesheetLinks = pipe(
$store.pages.stylesheets,
[map(s => `<link rel="stylesheet" href="${s}"/>`), join("\n")]
)
$: frontendDefinition = {
componentLibraries: $store.loadLibraryUrls(),
page: $store.currentPreviewItem,
screens: [],
appRootPath: "",
}
$: backendDefinition = {
hierarchy: $store.hierarchy,
}
$: appDefinition = {
componentLibraries: $store.loadLibraryUrls(),
props: buildPropsHierarchy(
$store.components,
$store.screens,
$store.currentFrontEndItem),
hierarchy: $store.hierarchy,
appRootPath: ""
};
</script> </script>
<div class="component-container">
{#if hasComponent && $store.currentPreviewItem}
<iframe
style="height: 100%; width: 100%"
title="componentPreview"
bind:this={iframe}
srcdoc={`<html>
<head>
${stylesheetLinks}
<style>
${styles || ''}
body, html {
height: 100%!important;
}
<\/style>
<\script>
window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${JSON.stringify(frontendDefinition)};
window["##BUDIBASE_BACKEND_DEFINITION##"] = ${JSON.stringify(backendDefinition)};
window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${$store.currentScreenFunctions};
<div class="component-container">
{#if hasComponent}
<iframe style="height: 100%; width: 100%"
title="componentPreview"
bind:this={iframe}
srcdoc={
`<html>
<head>
${stylesheetLinks}
<script>
window["##BUDIBASE_APPDEFINITION##"] = ${JSON.stringify(appDefinition)};
window["##BUDIBASE_UIFUNCTIONS"] = ${$store.currentScreenFunctions};
import('/_builder/budibase-client.esm.mjs') import('/_builder/budibase-client.esm.mjs')
.then(module => { .then(module => {
module.loadBudibase({ window, localStorage }); module.loadBudibase({ window, localStorage });
}) })
<\/script> </script>
</head> <style>
<body>
</body> body {
</html>`} /> box-sizing: border-box;
{/if} padding: 20px;
}
${styles}
</style>
</head>
<body>
</body>
</html>`}>
</iframe>
{/if}
</div> </div>
<style>
.component-container {
grid-row-start: middle;
grid-column-start: middle;
position: relative;
overflow: hidden;
padding-top: 56.25%;
margin: auto;
}
.component-container iframe { <style>
border: 0; .component-container {
height: 100%; grid-row-start: middle;
left: 0; grid-column-start: middle;
position: absolute; position: relative;
top: 0; overflow: hidden;
width: 100%; padding-top: 56.25%;
} margin: auto;
</style> }
.component-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
</style>

11
packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
View File

@ -71,9 +71,9 @@
handlerChanged(handlerType.name, defaultParams) handlerChanged(handlerType.name, defaultParams)
} }
const onParameterChanged = index => value => { const onParameterChanged = index => e => {
const newParams = [...parameters] const newParams = [...parameters]
newParams[index].value = value newParams[index].value = e.target.value
handlerChanged(handlerType, newParams) handlerChanged(handlerType, newParams)
} }
</script> </script>
@ -93,9 +93,10 @@
{#each parameters as param, idx} {#each parameters as param, idx}
<div class="handler-option"> <div class="handler-option">
<span>{param.name}</span> <span>{param.name}</span>
<StateBindingControl <input
onChanged={onParameterChanged(idx)} on:change={onParameterChanged(idx)}
value={param.value} /> value={param.value}
>
</div> </div>
{/each} {/each}
{/if} {/if}

188
packages/builder/src/userInterface/PropertyCascader.svelte Normal file
View File

@ -0,0 +1,188 @@
<script>
import { ArrowDownIcon } from "../common/Icons/";
import { store } from "../builderStore";
import { isBinding, getBinding, setBinding } from "../common/binding";
export let value = "";
export let onChanged = () => {};
export let type = "";
let isOpen = false;
let stateBindings = [];
let isBound = false;
let bindingPath = "";
let bindingFallbackValue = "";
let bindingSource = "store";
let isExpanded = false;
let forceIsBound = false;
let canOnlyBind = false;
$: {
canOnlyBind = type === "state";
if (!forceIsBound && canOnlyBind) forceIsBound = true;
isBound = forceIsBound || isBinding(value);
if (isBound) {
const binding = getBinding(value);
bindingPath = binding.path;
bindingFallbackValue = binding.fallback;
bindingSource = binding.source || "store";
} else {
bindingPath = "";
bindingFallbackValue = "";
bindingSource = "store";
}
}
const clearBinding = () => {
forceIsBound = false;
onChanged("");
};
const bind = (path, fallback, source) => {
if (!path) {
clearBinding("");
return;
}
const binding = setBinding({ path, fallback, source });
onChanged(binding);
};
const setBindingPath = value => {
forceIsBound = canOnlyBind;
bind(value, bindingFallbackValue, bindingSource);
};
const setBindingFallback = value => bind(bindingPath, value, bindingSource);
const setBindingSource = value =>
bind(bindingPath, bindingFallbackValue, value);
$: {
console.log({
bindingFallbackValue,
bindingPath,
value
});
const currentScreen = $store.screens.find(
({ name }) => name === $store.currentFrontEndItem.name
);
stateBindings = currentScreen ? currentScreen.stateOrigins : [];
}
</script>
<div class="cascader">
<div class="input-box">
<input
class="uk-input uk-form-small"
value={bindingFallbackValue}
on:change={e => {
setBindingFallback(e.target.value)
}}/>
<button on:click={() => (isOpen = !isOpen)}>
<span
class="icon"
style={`
transform: rotate(${isOpen ? 0 : 90}deg);
color: ${bindingPath ? 'rgba(0, 85, 255, 0.8)' : 'inherit'}
`}>
<ArrowDownIcon size={36} />
</span>
</button>
</div>
{#if isOpen}
<ul class="options">
{#each Object.keys(stateBindings) as stateBinding}
<li
style={`font-weight: ${stateBinding === bindingPath ? 'bold' : 'initial'}`}
on:click={() => {
setBindingPath(stateBinding === bindingPath ? null : stateBinding);
}}>
{stateBinding}
</li>
{/each}
</ul>
{/if}
</div>
<style>
button {
cursor: pointer;
outline: none;
border: none;
border-radius: 5px;
background: rgba(249, 249, 249, 1);
width: 30px;
height: 30px;
padding-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.6rem;
font-weight: 700;
color: rgba(22, 48, 87, 1);
}
.cascader {
position: relative;
width: 100%;
}
.input-box {
display: flex;
align-items: center;
}
.options {
width: 172px;
margin: 0;
position: absolute;
top: 35px;
padding: 10px;
z-index: 1;
background: rgba(249, 249, 249, 1);
min-height: 50px;
border-radius: 2px;
}
li {
list-style-type: none;
transition: 0.2s all;
}
li:hover {
cursor: pointer;
font-weight: 600;
}
input {
margin-right: 5px;
border: 1px solid #dbdbdb;
border-radius: 2px;
opacity: 0.5;
height: 40px;
/* display: block;
font-size: 14px;
font-family: sans-serif;
font-weight: 500;
color: #163057;
line-height: 1.3;
padding: 1em 2.6em 0.9em 1.4em;
/* width: 100%; */
/* max-width: 100%;
box-sizing: border-box;
margin: 0;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: #fff;
border: 1px solid #ccc;
height: 50px; */
}
</style>

146
packages/builder/src/userInterface/StateBindingControl.svelte
View File

@ -1,139 +1,49 @@
<script> <script>
import IconButton from "../common/IconButton.svelte" import IconButton from "../common/IconButton.svelte"
import Input from "../common/Input.svelte" import Input from "../common/Input.svelte"
import PropertyCascader from "./PropertyCascader.svelte"
import { isBinding, getBinding, setBinding } from "../common/binding" import { isBinding, getBinding, setBinding } from "../common/binding"
export let value = "" export let value = ""
export let onChanged = () => {} export let onChanged = () => {}
export let type = "" export let type = ""
export let options = [] export let options = []
let isBound = false
let bindingPath = ""
let bindingFallbackValue = ""
let bindingSource = "store"
let isExpanded = false
let forceIsBound = false
let canOnlyBind = false
$: {
canOnlyBind = type === "state"
if (!forceIsBound && canOnlyBind) forceIsBound = true
isBound = forceIsBound || isBinding(value)
if (isBound) {
const binding = getBinding(value)
bindingPath = binding.path
bindingFallbackValue = binding.fallback
bindingSource = binding.source || "store"
} else {
bindingPath = ""
bindingFallbackValue = ""
bindingSource = "store"
}
}
const clearBinding = () => {
forceIsBound = false
onChanged("")
}
const bind = (path, fallback, source) => {
if (!path) {
clearBinding("")
return
}
const binding = setBinding({ path, fallback, source })
onChanged(binding)
}
const setBindingPath = ev => {
forceIsBound = canOnlyBind
bind(ev.target.value, bindingFallbackValue, bindingSource)
}
const setBindingFallback = ev => {
bind(bindingPath, ev.target.value, bindingSource)
}
const setBindingSource = ev => {
bind(bindingPath, bindingFallbackValue, ev.target.value)
}
</script> </script>
{#if isBound} <div class="unbound-container">
<div> {#if type === 'bool'}
<div class="bound-header"> <div>
<div>{isExpanded ? '' : bindingPath}</div>
<IconButton <IconButton
icon={isExpanded ? 'chevron-up' : 'chevron-down'} icon={value == true ? 'check-square' : 'square'}
size="12" size="19"
on:click={() => (isExpanded = !isExpanded)} /> on:click={() => onChanged(!value)} />
{#if !canOnlyBind}
<IconButton icon="trash" size="12" on:click={clearBinding} />
{/if}
</div> </div>
{#if isExpanded} {:else if type === 'options'}
<div> <select
<div class="binding-prop-label">Binding Path</div> class="uk-select uk-form-small"
<input {value}
class="uk-input uk-form-small" on:change={ev => onChanged(ev.target.value)}>
value={bindingPath} {#each options as option}
on:change={setBindingPath} /> <option value={option}>{option}</option>
<div class="binding-prop-label">Fallback Value</div> {/each}
<input </select>
class="uk-input uk-form-small" {:else}
value={bindingFallbackValue} <PropertyCascader
on:change={setBindingFallback} /> {onChanged}
<div class="binding-prop-label">Binding Source</div> {type}
<select on:change={ev => onChanged(ev.target.value)}
class="uk-select uk-form-small" />
value={bindingSource} {/if}
on:change={setBindingSource}> </div>
<option>store</option>
<option>context</option>
</select>
</div>
{/if}
</div>
{:else}
<div class="unbound-container">
{#if type === 'bool'}
<div>
<IconButton
icon={value == true ? 'check-square' : 'square'}
size="19"
on:click={() => onChanged(!value)} />
</div>
{:else if type === 'options'}
<select
class="uk-select uk-form-small"
{value}
on:change={ev => onChanged(ev.target.value)}>
{#each options as option}
<option value={option}>{option}</option>
{/each}
</select>
{:else}
<Input on:change={ev => onChanged(ev.target.value)} bind:value />
{/if}
</div>
{/if}
<style> <style>
.unbound-container { .unbound-container {
display: flex; display: flex;
} }
.bound-header { /* .bound-header {
display: flex; display: flex;
} } */
.bound-header > div:nth-child(1) { .bound-header > div:nth-child(1) {
flex: 1 0 auto; flex: 1 0 auto;
@ -142,7 +52,7 @@
padding-left: 5px; padding-left: 5px;
} }
.binding-prop-label { /* .binding-prop-label {
color: var(--secondary50); color: var(--secondary50);
} }
@ -156,5 +66,5 @@
border: 1px solid #dbdbdb; border: 1px solid #dbdbdb;
border-radius: 2px; border-radius: 2px;
outline: none; outline: none;
} } */
</style> </style>

1
packages/client/src/state/stateBinding.js
View File

@ -146,6 +146,7 @@ export const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
} }
newProps[boundHandler.propName] = async context => { newProps[boundHandler.propName] = async context => {
console.log(closuredHandlers);
for (let runHandler of closuredHandlers) { for (let runHandler of closuredHandlers) {
await runHandler(context) await runHandler(context)
} }

637
packages/core/yarn.lock
View File

File diff suppressed because it is too large Load Diff

2
packages/server/package.json
View File

@ -8,7 +8,7 @@
"build": "cd appPackages/_master && yarn && cd ../testApp && yarn && cd ../testApp2 && yarn", "build": "cd appPackages/_master && yarn && cd ../testApp && yarn && cd ../testApp2 && yarn",
"initialise": "node ./initialise/initialiseBudibase init -d ./myapps -c contributors -u admin -p admin", "initialise": "node ./initialise/initialiseBudibase init -d ./myapps -c contributors -u admin -p admin",
"budi": "node ../cli/bin/budi", "budi": "node ../cli/bin/budi",
"dev:builder": "nodemon index" "dev:builder": "node index"
}, },
"keywords": [ "keywords": [
"budibase" "budibase"

69
packages/server/utilities/builder/index.js
View File

@ -139,4 +139,73 @@ const getComponents = async (appPath, pages, lib) => {
return { components, generators } return { components, generators }
} }
/**
* buildStateOrigins
*
* Builds an object that details all the bound state in the application, and what updates it.
*
* @param screenDefinition - the screen definition metadata.
* @returns {Object} an object with the client state values and how they are managed.
*/
const buildStateOrigins = screenDefinition => {
const origins = {};
function traverse(propValue) {
for (let key in propValue) {
if (!Array.isArray(propValue[key])) continue;
if (key === "_children") propValue[key].forEach(traverse);
for (let element of propValue[key]) {
if (element["##eventHandlerType"] === "Set State") origins[element.parameters.path] = element;
}
}
}
traverse(screenDefinition.props);
return origins;
};
const fetchscreens = async (appPath, relativePath = "") => {
const currentDir = join(appPath, "components", relativePath)
const contents = await readdir(currentDir)
const components = []
for (let item of contents) {
const itemRelativePath = join(relativePath, item)
const itemFullPath = join(currentDir, item)
const stats = await stat(itemFullPath)
if (stats.isFile()) {
if (!item.endsWith(".json")) continue
const component = await readJSON(itemFullPath)
component.name = itemRelativePath
.substring(0, itemRelativePath.length - 5)
.replace(/\\/g, "/")
component.props = component.props || {}
component.stateOrigins = buildStateOrigins(component);
components.push(component)
} else {
const childComponents = await fetchscreens(
appPath,
join(relativePath, item)
)
for (let c of childComponents) {
components.push(c)
}
}
}
return components
}
module.exports.getComponents = getComponents module.exports.getComponents = getComponents

1
packages/standard-components/components.json
View File

@ -63,6 +63,7 @@
"name": "Input", "name": "Input",
"description": "An HTML input", "description": "An HTML input",
"props" : { "props" : {
"onChange": "event",
"value": "string", "value": "string",
"type": { "type": {
"type":"options", "type":"options",

2
packages/standard-components/dist/generators.js vendored
View File

File diff suppressed because one or more lines are too long