From 2f0e4694e0377398a21f8f81e67162dc2ec52e22 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 18 Nov 2020 11:24:01 +0000 Subject: [PATCH] Add work on data context in components --- packages/builder/rollup.config.js | 103 +----------------- packages/client/package.json | 1 - packages/client/rollup.config.js | 22 ++-- packages/component-sdk/package.json | 4 +- .../src/components/DataProvider.svelte | 17 +++ .../component-sdk/src/components/index.js | 1 + .../component-sdk/src/context/contextTypes.js | 4 + .../component-sdk/src/context/dataProvider.js | 20 ++-- packages/component-sdk/src/index.js | 1 + packages/standard-components/rollup.config.js | 14 --- packages/standard-components/src/Form.svelte | 6 +- packages/standard-components/src/List.svelte | 28 +++-- .../standard-components/src/NewRow.svelte | 31 +----- .../standard-components/src/RowDetail.svelte | 24 ++-- 14 files changed, 73 insertions(+), 203 deletions(-) create mode 100644 packages/component-sdk/src/components/DataProvider.svelte create mode 100644 packages/component-sdk/src/components/index.js diff --git a/packages/builder/rollup.config.js b/packages/builder/rollup.config.js index 93c36026e4..1551b0d296 100644 --- a/packages/builder/rollup.config.js +++ b/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({ - namedExports: { - "lodash/fp": lodash_fp_exports, - lodash: lodash_exports, - shortid: ["generate"], - }, - }), + commonjs(), url({ limit: 0, include: ["**/*.woff2", "**/*.png"], diff --git a/packages/client/package.json b/packages/client/package.json index 74c729e60e..f34002fc96 100644 --- a/packages/client/package.json +++ b/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", diff --git a/packages/client/rollup.config.js b/packages/client/rollup.config.js index 413372416b..c444d0265d 100644 --- a/packages/client/rollup.config.js +++ b/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, }), diff --git a/packages/component-sdk/package.json b/packages/component-sdk/package.json index 9681576e11..0ac176894e 100644 --- a/packages/component-sdk/package.json +++ b/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" } } diff --git a/packages/component-sdk/src/components/DataProvider.svelte b/packages/component-sdk/src/components/DataProvider.svelte new file mode 100644 index 0000000000..7b713f6309 --- /dev/null +++ b/packages/component-sdk/src/components/DataProvider.svelte @@ -0,0 +1,17 @@ + + + diff --git a/packages/component-sdk/src/components/index.js b/packages/component-sdk/src/components/index.js new file mode 100644 index 0000000000..0b809a7481 --- /dev/null +++ b/packages/component-sdk/src/components/index.js @@ -0,0 +1 @@ +export { default as DataProvider } from "./DataProvider.svelte" diff --git a/packages/component-sdk/src/context/contextTypes.js b/packages/component-sdk/src/context/contextTypes.js index 3092147d30..84a9d62828 100644 --- a/packages/component-sdk/src/context/contextTypes.js +++ b/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) diff --git a/packages/component-sdk/src/context/dataProvider.js b/packages/component-sdk/src/context/dataProvider.js index 10d1b88cfb..37466ba94e 100644 --- a/packages/component-sdk/src/context/dataProvider.js +++ b/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 => { - store.update(state => { - state.rows = rows - return state - }) - } - const setTable = table => { + const setRow = async row => { + let table + if (row && row.tableId) { + table = await fetchTableDefinition(row.tableId) + } store.update(state => { + state.row = row state.table = table return state }) } return { subscribe: store.subscribe, - actions: { setRows, setTable }, + actions: { setRow }, } } diff --git a/packages/component-sdk/src/index.js b/packages/component-sdk/src/index.js index 81228a5503..a9bd679ed2 100644 --- a/packages/component-sdk/src/index.js +++ b/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" diff --git a/packages/standard-components/rollup.config.js b/packages/standard-components/rollup.config.js index 7e49654b66..f665884ad8 100644 --- a/packages/standard-components/rollup.config.js +++ b/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({ diff --git a/packages/standard-components/src/Form.svelte b/packages/standard-components/src/Form.svelte index e8b9fd9314..c94bdfe39d 100644 --- a/packages/standard-components/src/Form.svelte +++ b/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) : [] diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte index 096f82e05e..9b474e9945 100644 --- a/packages/standard-components/src/List.svelte +++ b/packages/standard-components/src/List.svelte @@ -1,30 +1,28 @@ -
+
+ {#each rows as row} + + + + {/each} +
diff --git a/packages/standard-components/src/NewRow.svelte b/packages/standard-components/src/NewRow.svelte index e9133a8272..98d0c017ce 100644 --- a/packages/standard-components/src/NewRow.svelte +++ b/packages/standard-components/src/NewRow.svelte @@ -1,32 +1,9 @@ -
+ + + diff --git a/packages/standard-components/src/RowDetail.svelte b/packages/standard-components/src/RowDetail.svelte index a84c152780..2e0eea6712 100644 --- a/packages/standard-components/src/RowDetail.svelte +++ b/packages/standard-components/src/RowDetail.svelte @@ -6,17 +6,15 @@ fetchRow, screenStore, routeStore, - createDataProviderContext, - ContextTypes, + DataProvider, } from "@budibase/component-sdk" export let table let headers = [] + let row - // Expose data provider context for this row - const dataProviderContext = createDataProviderContext() - setContext(ContextTypes.DataProvider, dataProviderContext) + setContext("foo", "bar") 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) - +{#if row} + + + +{/if}