Merge pull request #99 from shogunpurple/state-bindings

State bindings

packages/builder/src/builderStore/buildStateOrigins.js

@@ -0,0 +1,27 @@
+  /**
+   * 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. 
+   */
+  export 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;
+  };

packages/builder/src/builderStore/store.js

@@ -461,23 +461,18 @@ const saveScreen = store => screen => {
   })
 }
 
-const _saveScreen = (store, s, screen) => {
+const _saveScreen = async (store, s, screen) => {
-  const screens = pipe(s.pages[s.currentPageName]._screens, [
+  const currentPageScreens = s.pages[s.currentPageName]._screens
-    filter(c => c.name !== screen.name),
-    concat([screen]),
-  ])
-  // console.log('saveScreen', screens, screen)
-  s.pages[s.currentPageName]._screens = screens
-  s.screens = s.pages[s.currentPageName]._screens
-  // s.currentPreviewItem = screen
-  // s.currentComponentInfo = screen.props
 
-  api
+  await api
-    .post(
+    .post(`/_builder/api/${s.appname}/pages/${s.currentPageName}/screen`, screen)
-      `/_builder/api/${s.appname}/pages/${s.currentPageName}/screen`,
+    .then(async savedScreen => {
-      screen
+      const updatedScreen = await savedScreen.json();
-    )
+      const screens = [...currentPageScreens.filter(storeScreen => storeScreen.name !== updatedScreen.name), updatedScreen];
-    .then(() => _savePage(s))
+      s.pages[s.currentPageName]._screens = screens
+      s.screens = screens
+      _savePage(s);
+    });
 
   return s
 }
@@ -580,7 +575,7 @@ const renameScreen = store => (oldname, newname) => {
     const saveAllChanged = async () => {
       for (let screenName of changedScreens) {
         const changedScreen = getExactComponent(screens, screenName)
-        await api.post(`/_builder/api/${s.appname}/screen`, changedScreen)
+        const updatedScreen = await api.post(`/_builder/api/${s.appname}/screen`, changedScreen)
       }
     }
 

packages/builder/src/userInterface/ComponentsHierarchy.svelte

@@ -38,8 +38,6 @@
     component.component &&
     $store.currentPreviewItem &&
     component.component.name === $store.currentPreviewItem.name
-
-  $: console.log(_screens)
 </script>
 
 <div class="root">

packages/builder/src/userInterface/CurrentItemPreview.svelte

@@ -92,4 +92,4 @@
     top: 0;
     width: 100%;
   }
-</style>
+</style>

packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte

@@ -25,7 +25,7 @@
 
   export const EVENT_TYPE = "event"
 
-  export let componentInfo
+  export let component
   export let onPropChanged = () => {}
   export let components
 
@@ -33,15 +33,16 @@
   let events = []
   let selectedEvent = null
 
+
   $: {
-    events = Object.keys(componentInfo)
+    events = Object.keys(component)
       .filter(key => findType(key) === EVENT_TYPE)
-      .map(key => ({ name: key, handlers: componentInfo[key] }))
+      .map(key => ({ name: key, handlers: component[key] }))
   }
 
   function findType(propName) {
-    if (!componentInfo._component) return
+    if (!component._component) return
-    return components.find(({ name }) => name === componentInfo._component)
+    return components.find(({ name }) => name === component._component)
       .props[propName]
   }
 

packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte

@@ -1,27 +1,28 @@
 <script>
-  import IconButton from "../../common/IconButton.svelte"
+  import IconButton from "../../common/IconButton.svelte";
-  import PlusButton from "../../common/PlusButton.svelte"
+  import PlusButton from "../../common/PlusButton.svelte";
-  import Select from "../../common/Select.svelte"
+  import Select from "../../common/Select.svelte";
-  import StateBindingControl from "../StateBindingControl.svelte"
+  import Input from "../../common/Input.svelte";
-  import { find, map, keys, reduce, keyBy } from "lodash/fp"
+  import StateBindingControl from "../StateBindingControl.svelte";
-  import { pipe, userWithFullAccess } from "../../common/core"
+  import { find, map, keys, reduce, keyBy } from "lodash/fp";
+  import { pipe, userWithFullAccess } from "../../common/core";
   import {
     EVENT_TYPE_MEMBER_NAME,
     allHandlers,
-  } from "../../common/eventHandlers"
+  } from "../../common/eventHandlers";
-  import { store } from "../../builderStore"
+  import { store } from "../../builderStore";
 
-  export let handler
+  export let handler;
-  export let onCreate
+  export let onCreate;
-  export let onChanged
+  export let onChanged;
-  export let onRemoved
+  export let onRemoved;
 
-  export let index
+  export let index;
-  export let newHandler
+  export let newHandler;
 
-  let eventOptions
+  let eventOptions;
-  let handlerType
+  let handlerType;
-  let parameters = []
+  let parameters = [];
 
   $: eventOptions = allHandlers(
     { hierarchy: $store.hierarchy },
@@ -29,53 +30,53 @@
       hierarchy: $store.hierarchy,
       actions: keyBy("name")($store.actions),
     })
-  )
+  );
 
   $: {
     if (handler) {
-      handlerType = handler[EVENT_TYPE_MEMBER_NAME]
+      handlerType = handler[EVENT_TYPE_MEMBER_NAME];
       parameters = Object.entries(handler.parameters).map(([name, value]) => ({
         name,
         value,
-      }))
+      }));
     } else {
       // Empty Handler
-      handlerType = ""
+      handlerType = "";
-      parameters = []
+      parameters = [];
     }
   }
 
   const handlerChanged = (type, params) => {
-    const handlerParams = {}
+    const handlerParams = {};
     for (let param of params) {
-      handlerParams[param.name] = param.value
+      handlerParams[param.name] = param.value;
     }
 
     const updatedHandler = {
       [EVENT_TYPE_MEMBER_NAME]: type,
       parameters: handlerParams,
-    }
+    };
 
-    onChanged(updatedHandler, index)
+    onChanged(updatedHandler, index);
-  }
+  };
 
   const handlerTypeChanged = e => {
     const handlerType = eventOptions.find(
       handler => handler.name === e.target.value
-    )
+    );
     const defaultParams = handlerType.parameters.map(param => ({
       name: param,
       value: "",
-    }))
+    }));
 
-    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>
 
 <div class="type-selector-container {newHandler && 'new-handler'}">
@@ -93,9 +94,7 @@
       {#each parameters as param, idx}
         <div class="handler-option">
           <span>{param.name}</span>
-          <StateBindingControl
+          <Input on:change={onParameterChanged(idx)} value={param.value} />
-            onChanged={onParameterChanged(idx)}
-            value={param.value} />
         </div>
       {/each}
     {/if}

packages/builder/src/userInterface/PropertyCascader.svelte

@@ -0,0 +1,142 @@
+<script>
+  import { ArrowDownIcon } from "../common/Icons/";
+  import { store } from "../builderStore";
+  import { buildStateOrigins } from "../builderStore/buildStateOrigins";
+  import { isBinding, getBinding, setBinding } from "../common/binding";
+
+  export let onChanged = () => {};
+  export let value = "";
+
+  let isOpen = false;
+  let stateBindings = [];
+
+  let bindingPath = "";
+  let bindingFallbackValue = "";
+  let bindingSource = "store";
+  let bindingValue = "";
+
+  const bind = (path, fallback, source) => {
+    if (!path) {
+      onChanged(fallback);
+      return;
+    }
+    const binding = setBinding({ path, fallback, source });
+    onChanged(binding);
+  };
+
+  const setBindingPath = value =>
+    bind(value, bindingFallbackValue, bindingSource);
+
+  const setBindingFallback = value => bind(bindingPath, value, bindingSource);
+
+  const setBindingSource = value =>
+    bind(bindingPath, bindingFallbackValue, value);
+
+  $: {
+    const binding = getBinding(value);
+    if (bindingPath !== binding.path) isOpen = false;
+    bindingPath = binding.path;
+    bindingValue = typeof value === "object" ? "" : value;
+    bindingFallbackValue = binding.fallback || bindingValue;
+
+    const currentScreen = $store.screens.find(
+      ({ name }) => name === $store.currentPreviewItem.name
+    );
+    stateBindings = currentScreen ? Object.keys(buildStateOrigins(currentScreen)) : [];
+  }
+</script>
+
+<div class="cascader">
+  <div class="input-box">
+    <input
+      class:bold={!bindingFallbackValue && bindingPath}
+      class="uk-input uk-form-small"
+      value={bindingFallbackValue || bindingPath}
+      on:change={e => {
+        setBindingFallback(e.target.value);
+        onChanged(e.target.value);
+      }} />
+    <button on:click={() => (isOpen = !isOpen)}>
+      <div
+        class="icon"
+        class:highlighted={bindingPath}
+        style={`transform: rotate(${isOpen ? 0 : 90}deg);`}>
+        <ArrowDownIcon size={36} />
+      </div>
+    </button>
+  </div>
+  {#if isOpen}
+    <ul class="options">
+      {#each stateBindings as stateBinding}
+        <li
+          class:bold={stateBinding === bindingPath}
+          on:click={() => {
+            setBindingPath(stateBinding === bindingPath ? null : stateBinding);
+          }}>
+          {stateBinding}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .bold {
+    font-weight: bold;
+  }
+
+  .highlighted {
+    color: rgba(0, 85, 255, 0.8);
+  }
+
+  button {
+    cursor: pointer;
+    outline: none;
+    border: none;
+    border-radius: 5px;
+    background: rgba(249, 249, 249, 1);
+
+    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;
+  }
+
+  li:hover {
+    cursor: pointer;
+    font-weight: bold;
+  }
+
+  input {
+    margin-right: 5px;
+    border: 1px solid #dbdbdb;
+    border-radius: 2px;
+    opacity: 0.5;
+    height: 40px;
+  }
+</style>

packages/builder/src/userInterface/StateBindingControl.svelte

@@ -1,160 +1,46 @@
 <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 class="unbound-container">
-  <div>
+  {#if type === 'bool'}
-    <div class="bound-header">
+    <div>
-      <div>{isExpanded ? '' : bindingPath}</div>
       <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>
-    {#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 {onChanged} {value} />
-          on:change={setBindingFallback} />
+  {/if}
-        <div class="binding-prop-label">Binding Source</div>
+</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}
 
 <style>
   .unbound-container {
     display: flex;
   }
 
-  .bound-header {
-    display: flex;
-  }
-
   .bound-header > div:nth-child(1) {
     flex: 1 0 auto;
     width: 30px;
     color: var(--secondary50);
     padding-left: 5px;
   }
-
-  .binding-prop-label {
-    color: var(--secondary50);
-  }
-
-  input {
-    font-size: 12px;
-    font-weight: 700;
-    color: #163057;
-    opacity: 0.7;
-    padding: 5px 10px;
-    box-sizing: border-box;
-    border: 1px solid #dbdbdb;
-    border-radius: 2px;
-    outline: none;
-  }
 </style>

packages/builder/tests/buildStateOrigins.spec.js

@@ -0,0 +1,29 @@
+import { buildStateOrigins } from "../src/builderStore/buildStateOrigins";
+
+it("builds the correct stateOrigins object from a screen definition with handlers", () => {
+  expect(buildStateOrigins({
+    "name": "screen1",
+    "description": "",
+    "props": {
+    "_component": "@budibase/standard-components/div",
+      "className": "",
+      "onClick": [
+        {
+          "##eventHandlerType": "Set State",
+          "parameters": {
+            "path": "testKey",
+            "value": "value"
+          }
+        }
+      ]
+    }
+  })).toEqual({
+    "testKey": {
+      "##eventHandlerType": "Set State",
+      "parameters": {
+        "path": "testKey",
+        "value": "value"
+      }
+    }
+  });
+});

packages/server/appPackages/testApp/public/main/clientFrontendDefinition.js

@@ -0,0 +1,2 @@
+window['##BUDIBASE_FRONTEND_DEINITION##'] = {"componentLibraries":[{"importPath":"/lib/customComponents/index.js","libName":"./customComponents"},{"importPath":"/lib/moreCustomComponents/index.js","libName":"./moreCustomComponents"}],"appRootPath":"","page":{"title":"Test App","favicon":"./_shared/favicon.png","stylesheets":["my-styles.css"],"componentLibraries":["./customComponents","./moreCustomComponents"],"props":{"_component":"@budibase/standard-components/div"}},"screens":[{"name":"screen1","description":"","props":{"_component":"@budibase/standard-components/div","className":""},"_css":"/css/d121e1ecc6cf44f433213222e9ff5d40.css"},{"name":"screen2","description":"","props":{"_component":"@budibase/standard-components/div","className":""},"_css":"/css/7b7c05b78e05c06eb8d69475caadfea3.css"}]};
+window['##BUDIBASE_FRONTEND_FUNCTIONS##'] = {'1234':() => 'test return'}

packages/server/middleware/routers.js

@@ -207,7 +207,7 @@ module.exports = (config, app) => {
       ctx.response.status = StatusCodes.OK
     })
     .post("/_builder/api/:appname/pages/:pagename/screen", async ctx => {
-      await saveScreen(
+      ctx.body = await saveScreen(
         config,
         ctx.params.appname,
         ctx.params.pagename,

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"

packages/server/tests/builder.spec.js

@@ -9,6 +9,7 @@ const screen1 = require("../appPackages/testApp/pages/main/screens/screen1.json"
 const screen2 = require("../appPackages/testApp/pages/main/screens/screen2.json")
 const { readJSON, pathExists, unlink, readFile } = require("fs-extra")
 const { getHashedCssPaths } = require("../utilities/builder/convertCssToFiles")
+const listScreens = require("../utilities/builder/listScreens");
 
 const app = require("./testApp")()
 testComponents.textbox.name = `./customComponents/textbox`
@@ -216,4 +217,4 @@ it("/savePage should prepare all necessary client files", async () => {
   )
   expect(savedScreen2Css).toEqual(screen2Css)
   expect(indexHtmlMain.includes(screen2CssPaths.url)).toBe(true)
-})
+})

packages/server/utilities/builder/index.js

@@ -63,6 +63,7 @@ module.exports.saveScreen = async (config, appname, pagename, screen) => {
     flag: "w",
     spaces: 2,
   })
+  return screen;
 }
 
 module.exports.renameScreen = async (

packages/server/utilities/builder/listScreens.js

@@ -45,4 +45,4 @@ const fetchscreens = async (appPath, pagename, relativePath = "") => {
   }
 
   return screens
-}
+}

packages/server/yarn.lock

@@ -131,6 +131,29 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@budibase/client@^0.0.16":
+  version "0.0.16"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.16.tgz#4eef9373816448e99cafd2714f417c6610af5e69"
+  integrity sha512-fx4ptePj7+IehM37xdNPHdu5jEUgAFmDx23jI0yb4sI6Z5U4gxH10FZYyoJ/A9KdzmShsIfgrmudV5ffvoehdg==
+  dependencies:
+    "@nx-js/compiler-util" "^2.0.0"
+    lodash "^4.17.15"
+    lunr "^2.3.5"
+    shortid "^2.2.8"
+    svelte "^3.9.2"
+
+"@budibase/core@^0.0.16":
+  version "0.0.16"
+  resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.16.tgz#efff16876f906b2aa59803c3312ec7593664b623"
+  integrity sha512-DvzfurHHp9KkSjkvbGbKsVczR5ne38bMLRA2hHEJxAmC0Tshld06cEq7HMy2BmPb6kaC1URYHlFs/gPhW2cSFQ==
+  dependencies:
+    "@nx-js/compiler-util" "^2.0.0"
+    date-fns "^1.29.0"
+    lodash "^4.17.13"
+    lunr "^2.3.5"
+    safe-buffer "^5.1.2"
+    shortid "^2.2.8"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
@@ -299,6 +322,11 @@
     path-to-regexp "^1.1.1"
     urijs "^1.19.0"
 
+"@nx-js/compiler-util@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
+  integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ==
+
 "@types/babel__core@^7.1.0":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f"
@@ -1045,6 +1073,11 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+date-fns@^1.29.0:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
+  integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
+
 debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -2752,7 +2785,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.11, lodash@^4.17.13:
+lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -2777,6 +2810,11 @@ lru-cache@^4.0.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+lunr@^2.3.5:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.8.tgz#a8b89c31f30b5a044b97d2d28e2da191b6ba2072"
+  integrity sha512-oxMeX/Y35PNFuZoHp+jUj5OSEmLCaIH4KTFJh7a93cHBoFmpw2IoPs22VIz7vyO2YUnx2Tn9dzIwO2P/4quIRg==
+
 make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -2938,6 +2976,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
+nanoid@^2.1.0:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
+  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -3773,6 +3816,13 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+shortid@^2.2.8:
+  version "2.2.15"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
+  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
+  dependencies:
+    nanoid "^2.1.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -4050,6 +4100,11 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
+svelte@^3.9.2:
+  version "3.18.2"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.18.2.tgz#f136b9e169049f8bb6a364bd8b8f3b619ed957d9"
+  integrity sha512-jRk7jdYULb9V4Z+0BKlfofombmdIIQph4leojrOSHzvZBRmCredz7fZsJBiUDLO6h83XYekuLbwfy5zx1i95GQ==
+
 symbol-tree@^3.2.2:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"