Add work on data context in components

packages/builder/rollup.config.js

@@ -15,102 +15,7 @@ import json from "@rollup/plugin-json"
 import path from "path"
 
 const production = !process.env.ROLLUP_WATCH
-
-const lodash_fp_exports = [
-  "flow",
-  "pipe",
-  "union",
-  "reduce",
-  "isUndefined",
-  "cloneDeep",
-  "split",
-  "some",
-  "map",
-  "filter",
-  "isEmpty",
-  "countBy",
-  "includes",
-  "last",
-  "find",
-  "constant",
-  "take",
-  "first",
-  "intersection",
-  "mapValues",
-  "isNull",
-  "has",
-  "isInteger",
-  "isNumber",
-  "isString",
-  "isBoolean",
-  "isDate",
-  "isArray",
-  "isObject",
-  "clone",
-  "values",
-  "keyBy",
-  "isNaN",
-  "keys",
-  "orderBy",
-  "concat",
-  "reverse",
-  "difference",
-  "merge",
-  "flatten",
-  "each",
-  "pull",
-  "join",
-  "defaultCase",
-  "uniqBy",
-  "every",
-  "uniqWith",
-  "isFunction",
-  "groupBy",
-  "differenceBy",
-  "intersectionBy",
-  "isEqual",
-  "max",
-  "sortBy",
-  "assign",
-  "uniq",
-  "trimChars",
-  "trimCharsStart",
-  "isObjectLike",
-  "flattenDeep",
-  "indexOf",
-  "isPlainObject",
-  "toNumber",
-  "takeRight",
-  "toPairs",
-  "remove",
-  "findIndex",
-  "compose",
-  "get",
-  "tap",
-]
-
-const lodash_exports = [
-  "flow",
-  "join",
-  "replace",
-  "trim",
-  "dropRight",
-  "takeRight",
-  "head",
-  "reduce",
-  "tail",
-  "startsWith",
-  "findIndex",
-  "merge",
-  "assign",
-  "each",
-  "find",
-  "orderBy",
-  "union",
-]
-
 const outputpath = "../server/builder"
-
 const coreExternal = [
   "lodash",
   "lodash/fp",
@@ -224,13 +129,7 @@ export default {
         )
       },
     }),
-    commonjs({
+    commonjs(),
-      namedExports: {
-        "lodash/fp": lodash_fp_exports,
-        lodash: lodash_exports,
-        shortid: ["generate"],
-      },
-    }),
     url({
       limit: 0,
       include: ["**/*.woff2", "**/*.png"],

packages/client/package.json

@@ -16,7 +16,6 @@
   },
   "devDependencies": {
     "@budibase/standard-components": "^0.3.8",
-    "@rollup/plugin-alias": "^3.1.1",
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "fs-extra": "^8.1.0",

packages/client/rollup.config.js

@@ -1,34 +1,26 @@
-import alias from "@rollup/plugin-alias"
 import commonjs from "@rollup/plugin-commonjs"
 import resolve from "@rollup/plugin-node-resolve"
 import builtins from "rollup-plugin-node-builtins"
 import svelte from "rollup-plugin-svelte"
-import path from "path"
 
 const production = !process.env.ROLLUP_WATCH
-const projectRootDir = path.resolve(__dirname)
 
 export default {
   input: "src/index.js",
   output: [
     {
-      file: "dist/budibase-client.js",
+      sourcemap: true,
+      format: "iife",
+      name: "app",
+      file: `./dist/budibase-client.js`,
+    },
+    {
+      file: "dist/budibase-client.esm.mjs",
       format: "esm",
       sourcemap: "inline",
     },
   ],
   plugins: [
-    alias({
-      entries: [
-        {
-          find: "@budibase/component-sdk",
-          replacement: path.resolve(
-            projectRootDir,
-            "../component-sdk/dist/budibase-component-sdk"
-          ),
-        },
-      ],
-    }),
     svelte({
       dev: !production,
     }),

packages/component-sdk/package.json

@@ -18,10 +18,10 @@
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-svelte": "^6.1.1"
+    "rollup-plugin-svelte": "^6.1.1",
+    "svelte": "^3.29.0"
   },
   "dependencies": {
-    "svelte": "^3.29.0",
     "svelte-spa-router": "^3.0.5"
   }
 }

packages/component-sdk/src/components/DataProvider.svelte

@@ -0,0 +1,17 @@
+<script>
+  import { setContext, onMount } from "svelte"
+  import { ContextTypes, createDataProviderStore } from "../context"
+
+  export let row
+
+  setContext("foo", "bar2")
+
+  const dataProviderStore = createDataProviderStore()
+  setContext(ContextTypes.DataProvider, dataProviderStore)
+
+  onMount(async () => {
+    await dataProviderStore.actions.setRow(row)
+  })
+</script>
+
+<slot />

packages/component-sdk/src/components/index.js

@@ -0,0 +1 @@
+export { default as DataProvider } from "./DataProvider.svelte"

packages/component-sdk/src/context/contextTypes.js

@@ -1 +1,5 @@
+import { getContext } from "svelte"
+
 export const DataProvider = "bb-data-provider"
+
+export const asd = () => getContext(DataProvider)

packages/component-sdk/src/context/dataProvider.js

@@ -1,24 +1,24 @@
 import { writable } from "svelte/store"
+import { fetchTableDefinition } from "../api"
 
-export const createDataProviderContext = () => {
+export const createDataProviderStore = () => {
   const store = writable({
-    rows: [],
+    row: {},
     table: null,
   })
-  const setRows = rows => {
+  const setRow = async row => {
-    store.update(state => {
+    let table
-      state.rows = rows
+    if (row && row.tableId) {
-      return state
+      table = await fetchTableDefinition(row.tableId)
-    })
+    }
-  }
-  const setTable = table => {
     store.update(state => {
+      state.row = row
       state.table = table
       return state
     })
   }
   return {
     subscribe: store.subscribe,
-    actions: { setRows, setTable },
+    actions: { setRow },
   }
 }

packages/component-sdk/src/index.js

@@ -2,4 +2,5 @@ export * from "./api"
 export * from "./store"
 export * from "./context"
 export * from "./utils"
+export * from "./components"
 export { link as linkable } from "svelte-spa-router"

packages/standard-components/rollup.config.js

@@ -1,14 +1,11 @@
-import alias from "@rollup/plugin-alias"
 import commonjs from "@rollup/plugin-commonjs"
 import resolve from "@rollup/plugin-node-resolve"
 import replace from "@rollup/plugin-replace"
 import svelte from "rollup-plugin-svelte"
 import postcss from "rollup-plugin-postcss"
 import { terser } from "rollup-plugin-terser"
-import path from "path"
 
 const production = !process.env.ROLLUP_WATCH
-const projectRootDir = path.resolve(__dirname)
 
 export default {
   input: "src/index.js",
@@ -21,17 +18,6 @@ export default {
     },
   ],
   plugins: [
-    alias({
-      entries: [
-        {
-          find: "@budibase/component-sdk",
-          replacement: path.resolve(
-            projectRootDir,
-            "../component-sdk/dist/budibase-component-sdk"
-          ),
-        },
-      ],
-    }),
     production && terser(),
     postcss(),
     svelte({

packages/standard-components/src/Form.svelte

@@ -15,8 +15,12 @@
   let rowId
   let errors = {}
 
+  console.log("RENDER FORM")
+  console.log(getContext("foo"))
+
   const dataProviderStore = getContext(ContextTypes.DataProvider)
-  $: row = $dataProviderStore.rows[0]
+
+  $: row = $dataProviderStore.row
   $: schema = $dataProviderStore.table && $dataProviderStore.table.schema
   $: fields = schema ? Object.keys(schema) : []
 </script>

packages/standard-components/src/List.svelte

@@ -1,30 +1,28 @@
 <script>
-  import { onMount, setContext } from "svelte"
+  import { onMount } from "svelte"
   import {
     fetchDatasource,
-    createDataProviderContext,
+    styleable,
-    fetchTableDefinition,
+    DataProvider,
-    ContextTypes,
   } from "@budibase/component-sdk"
   import { isEmpty } from "lodash/fp"
 
   export let datasource = []
+  export let styles
 
-  let target
+  let rows = []
-
-  const dataProviderContext = createDataProviderContext()
-  setContext(ContextTypes.DataProvider, dataProviderContext)
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
-      const rows = await fetchDatasource(datasource)
+      rows = await fetchDatasource(datasource)
-      dataProviderContext.actions.setRows(rows)
-      if (datasource.tableId) {
-        const tableDefinition = await fetchTableDefinition(datasource.tableId)
-        dataProviderContext.actions.setTable(tableDefinition)
-      }
     }
   })
 </script>
 
-<section bind:this={target} />
+<div use:styleable={styles}>
+  {#each rows as row}
+    <DataProvider {row}>
+      <slot />
+    </DataProvider>
+  {/each}
+</div>

packages/standard-components/src/NewRow.svelte

@@ -1,32 +1,9 @@
 <script>
-  import { onMount } from "svelte"
+  import { DataProvider } from "@budibase/component-sdk"
-  import { fetchTableDefinition } from "@budibase/component-sdk"
 
-  export let _bb
   export let table
-
-  let row = {}
-
-  $: {
-    row.tableId = table
-  }
-
-  let target
-
-  onMount(async () => {
-    if (table && typeof table === "string") {
-      const tableObj = await fetchTableDefinition(table)
-      row.tableId = table
-      row._table = tableObj
-      _bb.attachChildren(target, {
-        context: row,
-      })
-    } else {
-      _bb.attachChildren(target, {
-        context: {},
-      })
-    }
-  })
 </script>
 
-<section bind:this={target} />
+<DataProvider row={{ tableId: table }}>
+  <slot />
+</DataProvider>

packages/standard-components/src/RowDetail.svelte

@@ -6,17 +6,15 @@
     fetchRow,
     screenStore,
     routeStore,
-    createDataProviderContext,
+    DataProvider,
-    ContextTypes,
   } from "@budibase/component-sdk"
 
   export let table
 
   let headers = []
+  let row
 
-  // Expose data provider context for this row
+  setContext("foo", "bar")
-  const dataProviderContext = createDataProviderContext()
-  setContext(ContextTypes.DataProvider, dataProviderContext)
 
   async function fetchFirstRow() {
     const rows = await fetchTableData(table)
@@ -30,9 +28,6 @@
 
     const pathParts = window.location.pathname.split("/")
     const routeParamId = $routeStore.routeParams.id
-    console.log(routeParamId)
-    let row
-    let tableDefinition
 
     // if srcdoc, then we assume this is the builder preview
     if ((pathParts.length === 0 || pathParts[0] === "srcdoc") && table) {
@@ -42,16 +37,13 @@
     } else {
       throw new Error("Row ID was not supplied to RowDetail")
     }
-
-    if (row) {
-      tableDefinition = await fetchTableDefinition(row.tableId)
-    }
-
-    dataProviderContext.actions.setRows([row])
-    dataProviderContext.actions.setTable(tableDefinition)
   }
 
   onMount(fetchData)
 </script>
 
-<slot />
+{#if row}
+  <DataProvider {row}>
+    <slot />
+  </DataProvider>
+{/if}