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

Add work on data context in components

This commit is contained in:
Andrew Kingston 2020-11-18 11:24:01 +00:00
parent aef49616a7
commit 2f0e4694e0
14 changed files with 73 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
packages/builder/rollup.config.js
View File

@ -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"],

1
packages/client/package.json
View File

@ -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",

22
packages/client/rollup.config.js
View File

@ -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,
}),

4
packages/component-sdk/package.json
View File

@ -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"
}
}

17
packages/component-sdk/src/components/DataProvider.svelte Normal file
View File

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

1
packages/component-sdk/src/components/index.js Normal file
View File

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

4
packages/component-sdk/src/context/contextTypes.js
View File

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

18
packages/component-sdk/src/context/dataProvider.js
View File

@ -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 setRow = async row => {
let table
if (row && row.tableId) {
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 },
}
}

1
packages/component-sdk/src/index.js
View File

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

14
packages/standard-components/rollup.config.js
View File

@ -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({

6
packages/standard-components/src/Form.svelte
View File

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

28
packages/standard-components/src/List.svelte
View File

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

31
packages/standard-components/src/NewRow.svelte
View File

@ -1,32 +1,9 @@
<script>
import { onMount } from "svelte"
import { fetchTableDefinition } from "@budibase/component-sdk"
import { DataProvider } 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>

24
packages/standard-components/src/RowDetail.svelte
View File

@ -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)
</script>
<slot />
{#if row}
<DataProvider {row}>
<slot />
</DataProvider>
{/if}