state binding v1

2020-02-10 16:58:20 +00:00 · 2020-02-10 16:58:20 +00:00 · 936bce711e
parent 34b957f331
commit 936bce711e
11 changed files with 393 additions and 816 deletions
--- a/.prettierrc
+++ b/.prettierrc
@ -1,6 +1,6 @@
 {
  "tabWidth": 2,
-  "semi": false,
+  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5",
  "plugins": ["prettier-plugin-svelte"],
--- a/packages/builder/src/userInterface/CurrentItemPreview.svelte
+++ b/packages/builder/src/userInterface/CurrentItemPreview.svelte
@ -1,95 +1,85 @@
 <script>
-  import { store } from "../builderStore"
-  import { map, join } from "lodash/fp"
-  import { pipe } from "../common/core"
+    import { store } from "../builderStore";
+    import { map, join } from "lodash/fp";
+    import { pipe } from "../common/core";
+    import { buildPropsHierarchy } from "./pagesParsing/buildPropsHierarchy";

-  let iframe
+    let iframe;

-  function transform_component(comp) {
-    const props = comp.props || comp
-    if (props && props._children && props._children.length) {
-      props._children = props._children.map(transform_component)
-    }
+    $: iframe && console.log(iframe.contentDocument.head.insertAdjacentHTML('beforeend', '<style></style>'))
+    $: hasComponent = !!$store.currentFrontEndItem;
+    $: styles = hasComponent ? $store.currentFrontEndItem._css : '';

-    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>

+
 <div class="component-container">
-  {#if hasComponent && $store.currentPreviewItem}
-    <iframe
-      style="height: 100%; width: 100%"
-      title="componentPreview"
-      bind:this={iframe}
-      srcdoc={`<html>
-  <head>
+    {#if hasComponent}
+    <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};
+    <script>
+        window["##BUDIBASE_APPDEFINITION##"] = ${JSON.stringify(appDefinition)};
+        window["##BUDIBASE_UIFUNCTIONS"] = ${$store.currentScreenFunctions};
        
        import('/_builder/budibase-client.esm.mjs')
        .then(module => {
            module.loadBudibase({ window, localStorage });
        })
-    <\/script>
-  </head>
-  <body>
-  </body>
-</html>`} />
-  {/if}
+    </script>
+    <style>
+
+        body {
+            box-sizing: border-box;
+            padding: 20px;
+        }
+    ${styles}
+    </style>
+</head>
+<body>
+</body>
+</html>`}>
+    </iframe>
+    {/if}
 </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 {
-    border: 0;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
+<style>
+    .component-container {
+        grid-row-start: middle;
+        grid-column-start: middle;
+        position: relative;
+        overflow: hidden;
+        padding-top: 56.25%;
+        margin: auto;
+    }
+
+    .component-container iframe {
+        border: 0;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
 </style>
--- a/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
@ -71,9 +71,9 @@
    handlerChanged(handlerType.name, defaultParams)
  }

-  const onParameterChanged = index => value => {
+  const onParameterChanged = index => e => {
    const newParams = [...parameters]
-    newParams[index].value = value
+    newParams[index].value = e.target.value
    handlerChanged(handlerType, newParams)
  }
 </script>
@ -93,9 +93,10 @@
      {#each parameters as param, idx}
        <div class="handler-option">
          <span>{param.name}</span>
-          <StateBindingControl
-            onChanged={onParameterChanged(idx)}
-            value={param.value} />
+          <input 
+            on:change={onParameterChanged(idx)}
+            value={param.value}
+          >
        </div>
      {/each}
    {/if}
--- a/packages/builder/src/userInterface/PropertyCascader.svelte
+++ b/packages/builder/src/userInterface/PropertyCascader.svelte
@ -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>
--- a/packages/builder/src/userInterface/StateBindingControl.svelte
+++ b/packages/builder/src/userInterface/StateBindingControl.svelte
@ -1,139 +1,49 @@
 <script>
  import IconButton from "../common/IconButton.svelte"
  import Input from "../common/Input.svelte"
+  import PropertyCascader from "./PropertyCascader.svelte"
  import { isBinding, getBinding, setBinding } from "../common/binding"

  export let value = ""
  export let onChanged = () => {}
  export let type = ""
  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>

-{#if isBound}
-  <div>
-    <div class="bound-header">
-      <div>{isExpanded ? '' : bindingPath}</div>
+<div class="unbound-container">
+  {#if type === 'bool'}
+    <div>
      <IconButton
-        icon={isExpanded ? 'chevron-up' : 'chevron-down'}
-        size="12"
-        on:click={() => (isExpanded = !isExpanded)} />
-      {#if !canOnlyBind}
-        <IconButton icon="trash" size="12" on:click={clearBinding} />
-      {/if}
+        icon={value == true ? 'check-square' : 'square'}
+        size="19"
+        on:click={() => onChanged(!value)} />
    </div>
-    {#if isExpanded}
-      <div>
-        <div class="binding-prop-label">Binding Path</div>
-        <input
-          class="uk-input uk-form-small"
-          value={bindingPath}
-          on:change={setBindingPath} />
-        <div class="binding-prop-label">Fallback Value</div>
-        <input
-          class="uk-input uk-form-small"
-          value={bindingFallbackValue}
-          on:change={setBindingFallback} />
-        <div class="binding-prop-label">Binding Source</div>
-        <select
-          class="uk-select uk-form-small"
-          value={bindingSource}
-          on:change={setBindingSource}>
-
-          <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}
+  {: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}
+    <PropertyCascader 
+      {onChanged}
+      {type}
+      on:change={ev => onChanged(ev.target.value)} 
+    />
+  {/if}
+</div>

 <style>
  .unbound-container {
    display: flex;
  }

-  .bound-header {
+  /* .bound-header {
    display: flex;
-  }
+  } */

  .bound-header > div:nth-child(1) {
    flex: 1 0 auto;
@ -142,7 +52,7 @@
    padding-left: 5px;
  }

-  .binding-prop-label {
+  /* .binding-prop-label {
    color: var(--secondary50);
  }

@ -156,5 +66,5 @@
    border: 1px solid #dbdbdb;
    border-radius: 2px;
    outline: none;
-  }
+  } */
 </style>
--- a/packages/client/src/state/stateBinding.js
+++ b/packages/client/src/state/stateBinding.js
@ -146,6 +146,7 @@ export const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
          }

          newProps[boundHandler.propName] = async context => {
+            console.log(closuredHandlers);
            for (let runHandler of closuredHandlers) {
              await runHandler(context)
            }
--- a/packages/core/yarn.lock
+++ b/packages/core/yarn.lock
--- a/packages/server/package.json
+++ b/packages/server/package.json
@ -8,7 +8,7 @@
    "build": "cd appPackages/_master && yarn && cd ../testApp && yarn && cd ../testApp2 && yarn",
    "initialise": "node ./initialise/initialiseBudibase init -d ./myapps -c contributors -u admin -p admin",
    "budi": "node ../cli/bin/budi",
-    "dev:builder": "nodemon index"
+    "dev:builder": "node index"
  },
  "keywords": [
    "budibase"
--- a/packages/server/utilities/builder/index.js
+++ b/packages/server/utilities/builder/index.js
@ -139,4 +139,73 @@ const getComponents = async (appPath, pages, lib) => {
  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
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@ -63,6 +63,7 @@
 		"name": "Input",
 		"description": "An HTML input",
 		"props" : {
+			"onChange": "event",
 			"value": "string",
 			"type": {
 				"type":"options", 
--- a/packages/standard-components/dist/generators.js
+++ b/packages/standard-components/dist/generators.js