CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-23 08:30:31 +12:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of github.com:Budibase/budibase into feature/security-update

Browse source
This commit is contained in:
Andrew Kingston 2020-12-08 13:16:53 +00:00
parent 57029e737b c16764d0c5
commit 9054a8014a
95 changed files with 1944 additions and 1439 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

208
packages/builder/cypress/support/commands.js
View file

@ -1,115 +1,115 @@
/ ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
Cypress.Commands.add("createApp", name => {
cy.contains("Create New Web App").click()
Cypress.Commands.add("createApp", name => {
cy.contains("Create New Web App").click()
cy.get("body")
.then($body => {
if ($body.find("input[name=apiKey]").length) {
// input was found, do something else here
cy.get("input[name=apiKey]")
.type(name)
.should("have.value", name)
cy.contains("Next").click()
}
})
.then(() => {
cy.get("input[name=applicationName]")
.type(name)
.should("have.value", name)
cy.get("body")
.then($body => {
if ($body.find("input[name=apiKey]").length) {
// input was found, do something else here
cy.get("input[name=apiKey]")
.type(name)
.should("have.value", name)
cy.contains("Next").click()
}
})
.then(() => {
cy.get("input[name=applicationName]")
.type(name)
.should("have.value", name)
cy.contains("Next").click()
cy.contains("Next").click()
cy.get("input[name=email]")
.click()
.type("test@test.com")
cy.get("input[name=password]")
.click()
.type("test")
cy.contains("Submit").click()
cy.get("[data-cy=new-table]", {
timeout: 20000,
}).should("be.visible")
})
})
cy.get("input[name=email]")
.click()
.type("test@test.com")
cy.get("input[name=password]")
.click()
.type("test")
cy.contains("Submit").click()
cy.get("[data-cy=new-table]", {
timeout: 20000,
}).should("be.visible")
})
})
Cypress.Commands.add("createTestTableWithData", () => {
cy.createTable("dog")
cy.addColumn("dog", "name", "Text")
cy.addColumn("dog", "age", "Number")
})
Cypress.Commands.add("createTestTableWithData", () => {
cy.createTable("dog")
cy.addColumn("dog", "name", "Text")
cy.addColumn("dog", "age", "Number")
})
Cypress.Commands.add("createTable", tableName => {
// Enter table name
cy.get("[data-cy=new-table]").click()
cy.get(".modal").within(() => {
cy.get("input")
.first()
.type(tableName)
cy.get(".buttons")
.contains("Create")
.click()
})
cy.contains(tableName).should("be.visible")
})
Cypress.Commands.add("createTable", tableName => {
// Enter table name
cy.get("[data-cy=new-table]").click()
cy.get(".modal").within(() => {
cy.get("input")
.first()
.type(tableName)
cy.get(".buttons")
.contains("Create")
.click()
})
cy.contains(tableName).should("be.visible")
})
Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
// Select Table
cy.contains(".nav-item", tableName).click()
cy.contains("Create New Column").click()
Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
// Select Table
cy.contains(".nav-item", tableName).click()
cy.contains("Create New Column").click()
// Configure column
cy.get(".actions").within(() => {
cy.get("input")
.first()
.type(columnName)
// Unset table display column
cy.contains("display column").click()
cy.get("select").select(type)
cy.contains("Save").click()
})
})
// Configure column
cy.get(".actions").within(() => {
cy.get("input")
.first()
.type(columnName)
// Unset table display column
cy.contains("display column").click()
cy.get("select").select(type)
cy.contains("Save").click()
})
})
Cypress.Commands.add("addRow", values => {
cy.contains("Create New Row").click()
Cypress.Commands.add("addRow", values => {
cy.contains("Create New Row").click()
cy.get(".modal").within(() => {
for (let i = 0; i < values.length; i++) {
cy.get("input")
.eq(i)
.type(values[i])
}
cy.get(".modal").within(() => {
for (let i = 0; i < values.length; i++) {
cy.get("input")
.eq(i)
.type(values[i])
}
// Save
cy.get(".buttons")
.contains("Create")
.click()
})
})
// Save
cy.get(".buttons")
.contains("Create")
.click()
})
})
Cypress.Commands.add("createUser", (email, password, role) => {
// Create User
@ -120,17 +120,17 @@ Cypress.Commands.add("createUser", (email, password, role) => {
cy.get(".modal").within(() => {
cy.get("input")
.first()
.type(password)
.type(email)
cy.get("input")
.eq(1)
.type(email)
.type(password)
cy.get("select")
.first()
.select(role)
// Save
cy.get(".buttons")
.contains("Create Row")
.contains("Create User")
.click()
})
})

3
packages/builder/package.json
View file

@ -63,7 +63,7 @@
}
},
"dependencies": {
"@budibase/bbui": "^1.51.0",
"@budibase/bbui": "^1.52.2",
"@budibase/client": "^0.3.8",
"@budibase/colorpicker": "^1.0.1",
"@budibase/svelte-ag-grid": "^0.0.16",
@ -107,6 +107,7 @@
"rollup-plugin-alias": "^1.5.2",
"rollup-plugin-copy": "^3.0.0",
"rollup-plugin-css-only": "^2.1.0",
"rollup-plugin-html": "^0.2.1",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-node-globals": "^1.4.0",

6
packages/builder/rollup.config.js
View file

@ -11,6 +11,7 @@ import copy from "rollup-plugin-copy"
import css from "rollup-plugin-css-only"
import replace from "rollup-plugin-replace"
import json from "@rollup/plugin-json"
import html from "rollup-plugin-html"
import path from "path"
@ -75,10 +76,6 @@ export default {
{ src: "src/index.html", dest: outputpath },
{ src: "src/favicon.png", dest: outputpath },
{ src: "assets", dest: outputpath },
{
src: "node_modules/@budibase/client/dist/budibase-client.esm.mjs",
dest: outputpath,
},
{
src: "node_modules/@budibase/bbui/dist/bbui.css",
dest: outputpath,
@ -147,5 +144,6 @@ export default {
// instead of npm run dev), minify
production && terser(),
json(),
html(),
],
}

14
packages/builder/src/builderStore/getNewComponentName.js
View file

@ -2,6 +2,8 @@ import { walkProps } from "./storeUtils"
import { get_capitalised_name } from "../helpers"
import { get } from "svelte/store"
import { allScreens } from "builderStore"
import { FrontendTypes } from "../constants"
import { currentAsset } from "."
export default function(component, state) {
const capitalised = get_capitalised_name(
@ -19,14 +21,16 @@ export default function(component, state) {
})
}
// check page first
findMatches(state.pages[state.currentPageName].props)
// check layouts first
for (let layout of state.layouts) {
findMatches(layout.props)
}
// if viewing screen, check current screen for duplicate
if (state.currentFrontEndType === "screen") {
findMatches(state.currentPreviewItem.props)
if (state.currentFrontEndType === FrontendTypes.SCREEN) {
findMatches(get(currentAsset).props)
} else {
// viewing master page - need to find against all screens
// viewing a layout - need to find against all screens
for (let screen of get(allScreens)) {
findMatches(screen.props)
}

81
packages/builder/src/builderStore/index.js
View file

@ -4,37 +4,74 @@ import { getAutomationStore } from "./store/automation/"
import { getThemeStore } from "./store/theme"
import { derived } from "svelte/store"
import analytics from "analytics"
import { LAYOUT_NAMES } from "../constants"
import { makePropsSafe } from "components/userInterface/assetParsing/createProps"
export const store = getFrontendStore()
export const backendUiStore = getBackendUiStore()
export const automationStore = getAutomationStore()
export const themeStore = getThemeStore()
export const currentAsset = derived(store, $store => {
const layout = $store.layouts
? $store.layouts.find(layout => layout._id === $store.currentAssetId)
: null
if (layout) return layout
const screen = $store.screens
? $store.screens.find(screen => screen._id === $store.currentAssetId)
: null
if (screen) return screen
return null
})
export const selectedComponent = derived(
[store, currentAsset],
([$store, $currentAsset]) => {
if (!$currentAsset || !$store.selectedComponentId) return null
function traverse(node, callback) {
if (node._id === $store.selectedComponentId) return callback(node)
if (node._children) {
node._children.forEach(child => traverse(child, callback))
}
if (node.props) {
traverse(node.props, callback)
}
}
let component
traverse($currentAsset, found => {
const componentIdentifier = found._component ?? found.props._component
const componentDef = componentIdentifier.startsWith("##")
? found
: $store.components[componentIdentifier]
component = makePropsSafe(componentDef, found)
})
return component
}
)
export const currentAssetName = derived(store, () => {
return currentAsset.name
})
// leave this as before for consistency
export const allScreens = derived(store, $store => {
let screens = []
if ($store.pages == null) {
return screens
}
for (let page of Object.values($store.pages)) {
screens = screens.concat(page._screens)
}
return screens
return $store.screens
})
export const currentScreens = derived(store, $store => {
const currentScreens = $store.pages[$store.currentPageName]?._screens
if (currentScreens == null) {
return []
}
return Array.isArray(currentScreens)
? currentScreens
: Object.values(currentScreens)
})
export const selectedPage = derived(store, $store => {
if (!$store.pages) return null
return $store.pages[$store.currentPageName || "main"]
export const mainLayout = derived(store, $store => {
return $store.layouts?.find(
layout => layout.props?._id === LAYOUT_NAMES.MASTER.PRIVATE
)
})
export const initialise = async () => {

405
packages/builder/src/builderStore/store/frontend.js
View file

@ -4,34 +4,36 @@ import {
createProps,
getBuiltin,
makePropsSafe,
} from "components/userInterface/pagesParsing/createProps"
import { allScreens, backendUiStore, selectedPage } from "builderStore"
import { generate_screen_css } from "../generate_css"
} from "components/userInterface/assetParsing/createProps"
import {
allScreens,
backendUiStore,
currentAsset,
mainLayout,
selectedComponent,
} from "builderStore"
import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
import api from "../api"
import { DEFAULT_PAGES_OBJECT } from "../../constants"
import { FrontendTypes } from "../../constants"
import getNewComponentName from "../getNewComponentName"
import analytics from "analytics"
import {
findChildComponentType,
generateNewIdsForComponent,
getComponentDefinition,
getParent,
findParent,
} from "../storeUtils"
const INITIAL_FRONTEND_STATE = {
apps: [],
name: "",
description: "",
pages: DEFAULT_PAGES_OBJECT,
mainUi: {},
unauthenticatedUi: {},
layouts: [],
screens: [],
components: [],
currentPreviewItem: null,
currentComponentInfo: null,
currentFrontEndType: "none",
currentPageName: "",
currentComponentProps: null,
currentAssetId: "",
selectedComponentId: "",
errors: [],
hasAppPackage: false,
libraries: null,
@ -43,52 +45,13 @@ export const getFrontendStore = () => {
const store = writable({ ...INITIAL_FRONTEND_STATE })
store.actions = {
// TODO: REFACTOR
initialise: async pkg => {
const { layouts, screens, application } = pkg
store.update(state => {
state.appId = pkg.application._id
state.appId = application._id
return state
})
const screens = await api.get("/api/screens").then(r => r.json())
const mainScreens = screens.filter(screen =>
screen._id.includes(pkg.pages.main._id)
),
unauthScreens = screens.filter(screen =>
screen._id.includes(pkg.pages.unauthenticated._id)
)
pkg.pages = {
main: {
...pkg.pages.main,
_screens: mainScreens,
},
unauthenticated: {
...pkg.pages.unauthenticated,
_screens: unauthScreens,
},
}
// if the app has just been created
// we need to build the CSS and save
if (pkg.justCreated) {
for (let pageName of ["main", "unauthenticated"]) {
const page = pkg.pages[pageName]
store.actions.screens.regenerateCss(page)
for (let screen of page._screens) {
store.actions.screens.regenerateCss(screen)
}
await api.post(`/api/pages/${page._id}`, {
page: {
componentLibraries: pkg.application.componentLibraries,
...page,
},
screens: page._screens,
})
}
}
pkg.justCreated = false
const components = await fetchComponentLibDefinitions(pkg.application._id)
@ -99,7 +62,8 @@ export const getFrontendStore = () => {
name: pkg.application.name,
description: pkg.application.description,
appId: pkg.application._id,
pages: pkg.pages,
layouts,
screens,
hasAppPackage: true,
builtins: [getBuiltin("##builtin/screenslot")],
appInstance: pkg.application.instance,
@ -107,20 +71,6 @@ export const getFrontendStore = () => {
await backendUiStore.actions.database.select(pkg.application.instance)
},
selectPageOrScreen: type => {
store.update(state => {
state.currentFrontEndType = type
const page = get(selectedPage)
const pageOrScreen = type === "page" ? page : page._screens[0]
state.currentComponentInfo = pageOrScreen ? pageOrScreen.props : null
state.currentPreviewItem = pageOrScreen
state.currentView = "detail"
return state
})
},
routing: {
fetch: async () => {
const response = await api.get("/api/routing")
@ -133,167 +83,166 @@ export const getFrontendStore = () => {
},
},
screens: {
select: screenId => {
select: async screenId => {
let promise
store.update(state => {
const screen = get(allScreens).find(screen => screen._id === screenId)
state.currentPreviewItem = screen
state.currentFrontEndType = "screen"
state.currentFrontEndType = FrontendTypes.SCREEN
state.currentAssetId = screenId
state.currentView = "detail"
store.actions.screens.regenerateCssForCurrentScreen()
const safeProps = makePropsSafe(
state.components[screen.props._component],
screen.props
)
screen.props = safeProps
state.currentComponentInfo = safeProps
promise = store.actions.screens.regenerateCss(screen)
state.selectedComponentId = screen.props._id
return state
})
await promise
},
create: async screen => {
let savePromise
screen = await store.actions.screens.save(screen)
store.update(state => {
state.currentPreviewItem = screen
state.currentComponentInfo = screen.props
state.currentFrontEndType = "screen"
if (state.currentPreviewItem) {
store.actions.screens.regenerateCss(state.currentPreviewItem)
}
savePromise = store.actions.screens.save(screen)
state.currentAssetId = screen._id
state.selectedComponentId = screen.props._id
state.currentFrontEndType = FrontendTypes.SCREEN
return state
})
await savePromise
return screen
},
save: async screen => {
const page = get(selectedPage)
const currentPageScreens = page._screens
const creatingNewScreen = screen._id === undefined
const response = await api.post(`/api/screens`, screen)
screen = await response.json()
let savePromise
const response = await api.post(`/api/screens/${page._id}`, screen)
const json = await response.json()
screen._rev = json.rev
screen._id = json.id
const foundScreen = page._screens.findIndex(el => el._id === screen._id)
if (foundScreen !== -1) {
page._screens.splice(foundScreen, 1)
}
page._screens.push(screen)
// TODO: should carry out all server updates to screen in a single call
store.update(state => {
page._screens = currentPageScreens
const foundScreen = state.screens.findIndex(
el => el._id === screen._id
)
if (foundScreen !== -1) {
state.screens.splice(foundScreen, 1)
}
state.screens.push(screen)
if (creatingNewScreen) {
state.currentPreviewItem = screen
const safeProps = makePropsSafe(
state.components[screen.props._component],
screen.props
)
state.currentComponentInfo = safeProps
state.selectedComponentId = safeProps._id
screen.props = safeProps
}
savePromise = store.actions.pages.save()
return state
})
if (savePromise) await savePromise
return screen
},
regenerateCss: screen => {
screen._css = generate_screen_css([screen.props])
regenerateCss: async asset => {
const response = await api.post("/api/css/generate", asset)
asset._css = (await response.json())?.css
},
regenerateCssForCurrentScreen: () => {
const { currentPreviewItem } = get(store)
if (currentPreviewItem) {
store.actions.screens.regenerateCss(currentPreviewItem)
regenerateCssForCurrentScreen: async () => {
const asset = get(currentAsset)
if (asset) {
await store.actions.screens.regenerateCss(asset)
}
},
delete: async screens => {
let deletePromise
const screensToDelete = Array.isArray(screens) ? screens : [screens]
const screenDeletePromises = []
store.update(state => {
const currentPage = get(selectedPage)
for (let screenToDelete of screensToDelete) {
// Remove screen from current page as well
// TODO: Should be done server side
currentPage._screens = currentPage._screens.filter(
scr => scr._id !== screenToDelete._id
state.screens = state.screens.filter(
screen => screen._id !== screenToDelete._id
)
deletePromise = api.delete(
`/api/screens/${screenToDelete._id}/${screenToDelete._rev}`
screenDeletePromises.push(
api.delete(
`/api/screens/${screenToDelete._id}/${screenToDelete._rev}`
)
)
}
return state
})
await deletePromise
await Promise.all(screenDeletePromises)
},
},
preview: {
saveSelected: async () => {
const state = get(store)
if (state.currentFrontEndType !== "page") {
await store.actions.screens.save(state.currentPreviewItem)
const selectedAsset = get(currentAsset)
if (state.currentFrontEndType !== FrontendTypes.LAYOUT) {
await store.actions.screens.save(selectedAsset)
} else {
await store.actions.layouts.save(selectedAsset)
}
await store.actions.pages.save()
},
},
pages: {
select: pageName => {
layouts: {
select: async layoutId => {
store.update(state => {
const currentPage = state.pages[pageName]
const layout = store.actions.layouts.find(layoutId)
state.currentFrontEndType = "page"
state.currentFrontEndType = FrontendTypes.LAYOUT
state.currentView = "detail"
state.currentPageName = pageName
// This is the root of many problems.
// Uncaught (in promise) TypeError: Cannot read property '_component' of undefined
// it appears that the currentPage sometimes has _props instead of props
// why
const safeProps = makePropsSafe(
state.components[currentPage.props._component],
currentPage.props
)
state.currentComponentInfo = safeProps
currentPage.props = safeProps
state.currentPreviewItem = state.pages[pageName]
store.actions.screens.regenerateCssForCurrentScreen()
for (let screen of get(allScreens)) {
screen._css = generate_screen_css([screen.props])
}
state.currentAssetId = layout._id
state.selectedComponentId = layout.props._id
return state
})
},
save: async page => {
const storeContents = get(store)
const pageName = storeContents.currentPageName || "main"
const pageToSave = page || storeContents.pages[pageName]
let cssPromises = []
cssPromises.push(store.actions.screens.regenerateCssForCurrentScreen())
// TODO: revisit. This sends down a very weird payload
const response = await api.post(`/api/pages/${pageToSave._id}`, {
page: {
componentLibraries: storeContents.pages.componentLibraries,
...pageToSave,
},
screens: pageToSave._screens,
})
for (let screen of get(allScreens)) {
cssPromises.push(store.actions.screens.regenerateCss(screen))
}
await Promise.all(cssPromises)
},
save: async layout => {
const layoutToSave = cloneDeep(layout)
delete layoutToSave._css
const response = await api.post(`/api/layouts`, layoutToSave)
const json = await response.json()
if (!json.ok) throw new Error("Error updating page")
store.update(state => {
const layoutIdx = state.layouts.findIndex(
stateLayout => stateLayout._id === json._id
)
if (layoutIdx >= 0) {
// update existing layout
state.layouts.splice(layoutIdx, 1, json)
} else {
// save new layout
state.layouts.push(json)
}
state.currentAssetId = json._id
state.selectedComponentId = json.props._id
return state
})
},
find: layoutId => {
if (!layoutId) {
return get(mainLayout)
}
const storeContents = get(store)
return storeContents.layouts.find(layout => layout._id === layoutId)
},
delete: async layoutToDelete => {
const response = await api.delete(
`/api/layouts/${layoutToDelete._id}/${layoutToDelete._rev}`
)
if (response.status !== 200) {
const json = await response.json()
throw new Error(json.message)
}
store.update(state => {
state.pages[pageName]._rev = json.rev
state.layouts = state.layouts.filter(
layout => layout._id !== layoutToDelete._id
)
return state
})
},
@ -301,17 +250,19 @@ export const getFrontendStore = () => {
components: {
select: component => {
store.update(state => {
const componentDef = component._component.startsWith("##")
? component
: state.components[component._component]
state.currentComponentInfo = makePropsSafe(componentDef, component)
state.selectedComponentId = component._id
state.currentView = "component"
return state
})
},
create: (componentToAdd, presetProps) => {
const selectedAsset = get(currentAsset)
store.update(state => {
function findSlot(component_array) {
if (!component_array) {
return false
}
for (let component of component_array) {
if (component._component === "##builtin/screenslot") {
return true
@ -324,7 +275,7 @@ export const getFrontendStore = () => {
if (
componentToAdd.startsWith("##") &&
findSlot(state.pages[state.currentPageName].props._children)
findSlot(selectedAsset?.props._children)
) {
return state
}
@ -340,29 +291,34 @@ export const getFrontendStore = () => {
_instanceName: instanceName,
})
const currentComponent =
state.components[state.currentComponentInfo._component]
const selected = get(selectedComponent)
const targetParent = currentComponent.children
? state.currentComponentInfo
: getParent(
state.currentPreviewItem.props,
state.currentComponentInfo
)
const currentComponentDefinition =
state.components[selected._component]
// Don't continue if there's no parent
if (!targetParent) {
return state
const allowsChildren = currentComponentDefinition.children
// Determine where to put the new component.
let targetParent
if (allowsChildren) {
// Child of the selected component
targetParent = selected
} else {
// Sibling of selected component
targetParent = findParent(selectedAsset.props, selected)
}
targetParent._children = targetParent._children.concat(
newComponent.props
)
// Don't continue if there's no parent
if (!targetParent) return state
// Push the new component
targetParent._children.push(newComponent.props)
store.actions.preview.saveSelected()
state.currentView = "component"
state.currentComponentInfo = newComponent.props
state.selectedComponentId = newComponent.props._id
analytics.captureEvent("Added Component", {
name: newComponent.props._component,
})
@ -370,14 +326,12 @@ export const getFrontendStore = () => {
})
},
copy: (component, cut = false) => {
const selectedAsset = get(currentAsset)
store.update(state => {
state.componentToPaste = cloneDeep(component)
state.componentToPaste.isCut = cut
if (cut) {
const parent = getParent(
state.currentPreviewItem.props,
component._id
)
const parent = findParent(selectedAsset.props, component._id)
parent._children = parent._children.filter(
child => child._id !== component._id
)
@ -387,7 +341,9 @@ export const getFrontendStore = () => {
return state
})
},
paste: (targetComponent, mode) => {
paste: async (targetComponent, mode) => {
const selectedAsset = get(currentAsset)
let promises = []
store.update(state => {
if (!state.componentToPaste) return state
@ -406,54 +362,56 @@ export const getFrontendStore = () => {
return state
}
const parent = getParent(
state.currentPreviewItem.props,
targetComponent
)
const parent = findParent(selectedAsset.props, targetComponent)
const targetIndex = parent._children.indexOf(targetComponent)
const index = mode === "above" ? targetIndex : targetIndex + 1
parent._children.splice(index, 0, cloneDeep(componentToPaste))
store.actions.screens.regenerateCssForCurrentScreen()
store.actions.preview.saveSelected()
promises.push(store.actions.screens.regenerateCssForCurrentScreen())
promises.push(store.actions.preview.saveSelected())
store.actions.components.select(componentToPaste)
return state
})
await Promise.all(promises)
},
updateStyle: (type, name, value) => {
store.update(state => {
if (!state.currentComponentInfo._styles) {
state.currentComponentInfo._styles = {}
}
state.currentComponentInfo._styles[type][name] = value
updateStyle: async (type, name, value) => {
let promises = []
const selected = get(selectedComponent)
store.actions.screens.regenerateCssForCurrentScreen()
store.update(state => {
if (!selected._styles) {
selected._styles = {}
}
selected._styles[type][name] = value
promises.push(store.actions.screens.regenerateCssForCurrentScreen())
// save without messing with the store
store.actions.preview.saveSelected()
promises.push(store.actions.preview.saveSelected())
return state
})
await Promise.all(promises)
},
updateProp: (name, value) => {
store.update(state => {
let current_component = state.currentComponentInfo
let current_component = get(selectedComponent)
current_component[name] = value
state.currentComponentInfo = current_component
state.selectedComponentId = current_component._id
store.actions.preview.saveSelected()
return state
})
},
findRoute: component => {
// Gets all the components to needed to construct a path.
const tempStore = get(store)
const selectedAsset = get(currentAsset)
let pathComponents = []
let parent = component
let root = false
while (!root) {
parent = getParent(tempStore.currentPreviewItem.props, parent)
parent = findParent(selectedAsset.props, parent)
if (!parent) {
root = true
} else {
@ -461,7 +419,7 @@ export const getFrontendStore = () => {
}
}
// Remove root entry since it's the screen or page layout.
// Remove root entry since it's the screen or layout.
// Reverse array since we need the correct order of the IDs
const reversedComponents = pathComponents.reverse().slice(1)
@ -476,11 +434,12 @@ export const getFrontendStore = () => {
},
links: {
save: async (url, title) => {
let savePromise
let promises = []
const layout = get(mainLayout)
store.update(state => {
// Try to extract a nav component from the master screen
// Try to extract a nav component from the master layout
const nav = findChildComponentType(
state.pages.main,
layout,
"@budibase/standard-components/navigation"
)
if (nav) {
@ -513,18 +472,18 @@ export const getFrontendStore = () => {
}).props
}
// Save page and regenerate all CSS because otherwise weird things happen
// Save layout and regenerate all CSS because otherwise weird things happen
nav._children = [...nav._children, newLink]
state.currentPageName = "main"
store.actions.screens.regenerateCss(state.pages.main)
for (let screen of state.pages.main._screens) {
store.actions.screens.regenerateCss(screen)
state.currentAssetId = layout._id
promises.push(store.actions.screens.regenerateCss(layout))
for (let screen of get(allScreens)) {
promises.push(store.actions.screens.regenerateCss(screen))
}
savePromise = store.actions.pages.save()
promises.push(store.actions.layouts.save(layout))
}
return state
})
await savePromise
await Promise.all(promises)
},
},
},

1
packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
View file

@ -14,7 +14,6 @@ export class Component extends BaseStructure {
active: {},
selected: {},
},
_code: "",
type: "",
_instanceName: "",
_children: [],

3
packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
View file

@ -4,6 +4,7 @@ export class Screen extends BaseStructure {
constructor() {
super(true)
this._json = {
layoutId: "layout_private_master",
props: {
_id: "",
_component: "",
@ -18,7 +19,7 @@ export class Screen extends BaseStructure {
},
routing: {
route: "",
roleId: "",
roleId: "BASIC",
},
name: "screen-id",
}

18
packages/builder/src/builderStore/storeUtils.js
View file

@ -1,15 +1,21 @@
import { getBuiltin } from "components/userInterface/pagesParsing/createProps"
import { getBuiltin } from "components/userInterface/assetParsing/createProps"
import { uuid } from "./uuid"
import getNewComponentName from "./getNewComponentName"
export const getParent = (rootProps, child) => {
/**
* Find the parent component of the passed in child.
* @param {Object} rootProps - props to search for the parent in
* @param {String|Object} child - id of the child or the child itself to find the parent of
*/
export const findParent = (rootProps, child) => {
let parent
walkProps(rootProps, (p, breakWalk) => {
walkProps(rootProps, (props, breakWalk) => {
if (
p._children &&
(p._children.includes(child) || p._children.some(c => c._id === child))
props._children &&
(props._children.includes(child) ||
props._children.some(c => c._id === child))
) {
parent = p
parent = props
breakWalk()
}
})

3
packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
View file

@ -51,14 +51,13 @@
const screens = screenTemplates($store, [table])
.filter(template => defaultScreens.includes(template.id))
.map(template => template.create())
store.actions.pages.select("main")
for (let screen of screens) {
// Record the table that created this screen so we can link it later
screen.autoTableId = table._id
await store.actions.screens.create(screen)
}
// Create autolink to newly created list page
// Create autolink to newly created list screen
const listScreen = screens.find(screen =>
screen.props._instanceName.endsWith("List")
)

3
packages/builder/src/components/start/CreateAppModal.svelte
View file

@ -153,9 +153,8 @@
const pkg = await applicationPkg.json()
if (applicationPkg.ok) {
backendUiStore.actions.reset()
pkg.justCreated = true
await store.actions.initialise(pkg)
automationStore.actions.fetch()
await automationStore.actions.fetch()
} else {
throw new Error(pkg)
}

40
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View file

@ -1,10 +1,13 @@
<script>
import { onMount } from "svelte"
import { store } from "builderStore"
import { store, currentAsset } from "builderStore"
import iframeTemplate from "./iframeTemplate"
import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
import { FrontendTypes } from "../../../constants"
let iframe
let layout
let screen
// Create screen slot placeholder for use when a page is selected rather
// than a screen
@ -16,12 +19,21 @@
.json()
// Extract data to pass to the iframe
$: page = $store.pages[$store.currentPageName]
$: screen =
$store.currentFrontEndType === "page"
? screenPlaceholder
: $store.currentPreviewItem
$: selectedComponentId = $store.currentComponentInfo?._id ?? ""
$: {
if ($store.currentFrontEndType === FrontendTypes.LAYOUT) {
layout = $currentAsset
screen = screenPlaceholder
} else {
screen = $currentAsset
layout = $store.layouts.find(layout => layout._id === screen?.layoutId)
}
}
$: selectedComponentId = $store.selectedComponentId ?? ""
$: previewData = {
layout,
screen,
selectedComponentId,
}
// Saving pages and screens to the DB causes them to have _revs.
// These revisions change every time a save happens and causes
@ -29,7 +41,7 @@
// definition hasn't changed.
// By deleting all _rev properties we can avoid this and increase
// performance.
$: json = JSON.stringify({ page, screen, selectedComponentId })
$: json = JSON.stringify(previewData)
$: strippedJson = json.replaceAll(/"_rev":\s*"[^"]+"/g, `"_rev":""`)
// Update the iframe with the builder info to render the correct preview
@ -57,13 +69,11 @@
</script>
<div class="component-container">
{#if $store.currentPreviewItem}
<iframe
style="height: 100%; width: 100%"
title="componentPreview"
bind:this={iframe}
srcdoc={iframeTemplate} />
{/if}
<iframe
style="height: 100%; width: 100%"
title="componentPreview"
bind:this={iframe}
srcdoc={iframeTemplate} />
</div>
<style>

52
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html Normal file
View file

@ -0,0 +1,52 @@
<html>
<head>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<style>
body, html {
height: 100% !important;
font-family: Inter, sans-serif !important;
margin: 0 !important;
}
*, *:before, *:after {
box-sizing: border-box;
}
</style>
<script src='/assets/budibase-client.js'></script>
<script>
function receiveMessage(event) {
if (!event.data) {
return
}
// Extract data from message
const { selectedComponentId, layout, screen } = JSON.parse(event.data)
// Set some flags so the app knows we're in the builder
window["##BUDIBASE_IN_BUILDER##"] = true
window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
// Initialise app
if (window.loadBudibase) {
loadBudibase()
}
}
// Ignore clicks
["click", "mousedown"].forEach(type => {
document.addEventListener(type, function(e) {
e.preventDefault()
e.stopPropagation()
return false
}, true)
})
window.addEventListener("message", receiveMessage)
window.dispatchEvent(new Event("bb-ready"))
</script>
</head>
<body>
</body>
</html>

56
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View file

@ -1,55 +1 @@
export default `<html>
<head>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">
<style>
body, html {
height: 100% !important;
font-family: Inter !important;
margin: 0px !important;
}
*, *:before, *:after {
box-sizing: border-box;
}
</style>
<script src='/assets/budibase-client.js'></script>
<script>
function receiveMessage(event) {
if (!event.data) {
return
}
// Extract data from message
const { selectedComponentId, page, screen } = JSON.parse(event.data)
// Set some flags so the app knows we're in the builder
window["##BUDIBASE_IN_BUILDER##"] = true
window["##BUDIBASE_PREVIEW_PAGE##"] = page
window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
// Initialise app
if (window.loadBudibase) {
loadBudibase()
}
}
let selectedComponentStyle
// Ignore clicks
["click", "mousedown"].forEach(type => {
document.addEventListener(type, function(e) {
e.preventDefault()
e.stopPropagation()
return false
}, true)
})
window.addEventListener("message", receiveMessage)
window.dispatchEvent(new Event("bb-ready"))
</script>
</head>
<body>
</body>
</html>`
export { default } from "./iframeTemplate.html"

22
packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
View file

@ -1,10 +1,11 @@
<script>
import { goto } from "@sveltech/routify"
import { store } from "builderStore"
import { get } from "svelte/store"
import { store, currentAsset } from "builderStore"
import { getComponentDefinition } from "builderStore/storeUtils"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { last } from "lodash/fp"
import { getParent } from "builderStore/storeUtils"
import { findParent } from "builderStore/storeUtils"
import { DropdownMenu } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
@ -28,12 +29,13 @@
const selectComponent = component => {
store.actions.components.select(component)
const path = store.actions.components.findRoute(component)
$goto(`./:page/:screen/${path}`)
$goto(`./${$store.currentFrontEndType}/${path}`)
}
const moveUpComponent = () => {
store.update(state => {
const parent = getParent(state.currentPreviewItem.props, component)
const asset = get(currentAsset)
const parent = findParent(asset.props, component)
if (parent) {
const currentIndex = parent._children.indexOf(component)
@ -43,7 +45,7 @@
newChildren.splice(currentIndex - 1, 0, component)
parent._children = newChildren
}
state.currentComponentInfo = component
state.selectedComponentId = component._id
store.actions.preview.saveSelected()
return state
@ -52,7 +54,8 @@
const moveDownComponent = () => {
store.update(state => {
const parent = getParent(state.currentPreviewItem.props, component)
const asset = get(currentAsset)
const parent = findParent(asset.props, component)
if (parent) {
const currentIndex = parent._children.indexOf(component)
@ -62,7 +65,7 @@
newChildren.splice(currentIndex + 1, 0, component)
parent._children = newChildren
}
state.currentComponentInfo = component
state.selectedComponentId = component._id
store.actions.preview.saveSelected()
return state
@ -76,10 +79,11 @@
const deleteComponent = () => {
store.update(state => {
const parent = getParent(state.currentPreviewItem.props, component)
const asset = get(currentAsset)
const parent = findParent(asset.props, component)
if (parent) {
parent._children = parent._children.filter(c => c !== component)
parent._children = parent._children.filter(child => child !== component)
selectComponent(parent)
}

7
packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
View file

@ -1,6 +1,6 @@
<script>
import { goto } from "@sveltech/routify"
import { store } from "builderStore"
import { store, currentAsset } from "builderStore"
import { getComponentDefinition } from "builderStore/storeUtils"
import { DropEffect, DropPosition } from "./dragDropStore"
import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
@ -10,7 +10,6 @@
export let currentComponent
export let onSelect = () => {}
export let level = 0
export let dragDropStore
const isScreenslot = name => name === "##builtin/screenslot"
@ -23,7 +22,7 @@
const path = store.actions.components.findRoute(component)
// Go to correct URL
$goto(`./:page/:screen/${path}`)
$goto(`./${$store.currentAssetId}/${path}`)
}
const dragstart = component => e => {
@ -73,7 +72,7 @@
text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
withArrow
indentLevel={level + 3}
selected={currentComponent === component}>
selected={$store.selectedComponentId === component._id}>
<ComponentDropdownMenu {component} />
</NavItem>

77
packages/builder/src/components/userInterface/ComponentNavigationTree/LayoutDropdownMenu.svelte Normal file
View file

@ -0,0 +1,77 @@
<script>
import { goto } from "@sveltech/routify"
import { store } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownMenu, Modal, ModalContent, Input } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
import { cloneDeep } from "lodash/fp"
export let layout
let confirmDeleteDialog
let editLayoutNameModal
let dropdown
let anchor
let name = layout.name
const deleteLayout = async () => {
try {
await store.actions.layouts.delete(layout)
notifier.success(`Layout ${layout.name} deleted successfully.`)
} catch (err) {
notifier.danger(`Error deleting layout: ${err.message}`)
}
}
const saveLayout = async () => {
try {
const layoutToSave = cloneDeep(layout)
layoutToSave.name = name
await store.actions.layouts.save(layoutToSave)
notifier.success(`Layout saved successfully.`)
} catch (err) {
notifier.danger(`Error saving layout: ${err.message}`)
}
}
</script>
<div bind:this={anchor} on:click|stopPropagation>
<div class="icon" on:click={() => dropdown.show()}>
<i class="ri-more-line" />
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
<DropdownContainer>
<DropdownItem
icon="ri-pencil-line"
title="Edit"
on:click={() => editLayoutNameModal.show()} />
<DropdownItem
icon="ri-delete-bin-line"
title="Delete"
on:click={() => confirmDeleteDialog.show()} />
</DropdownContainer>
</DropdownMenu>
</div>
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Deletion"
body={'Are you sure you wish to delete this layout?'}
okText="Delete Layout"
onOk={deleteLayout} />
<Modal bind:this={editLayoutNameModal}>
<ModalContent
title="Edit Layout Name"
confirmText="Save"
onConfirm={saveLayout}
disabled={!name}>
<Input thin type="text" label="Name" bind:value={name} />
</ModalContent>
</Modal>
<style>
.icon i {
font-size: 16px;
}
</style>

29
packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
View file

@ -1,25 +1,32 @@
<script>
import { writable } from "svelte/store"
import { goto } from "@sveltech/routify"
import { store } from "builderStore"
import { store, selectedComponent, currentAsset } from "builderStore"
import instantiateStore from "./dragDropStore"
import ComponentsTree from "./ComponentTree.svelte"
import ComponentTree from "./ComponentTree.svelte"
import NavItem from "components/common/NavItem.svelte"
import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
const ROUTE_NAME_MAP = {
"/": {
BASIC: "Home",
PUBLIC: "Login",
},
}
const dragDropStore = instantiateStore()
export let route
export let path
export let indent
$: selectedScreen = $store.currentPreviewItem
$: selectedScreen = $currentAsset
const changeScreen = screenId => {
// select the route
store.actions.screens.select(screenId)
$goto(`./:page/${screenId}`)
$goto(`./${screenId}`)
}
</script>
@ -30,21 +37,21 @@
withArrow={route.subpaths} />
{#each Object.entries(route.subpaths) as [url, subpath]}
{#each Object.values(subpath.screens) as screenId}
{#each Object.entries(subpath.screens) as [role, screenId]}
<NavItem
icon="ri-artboard-2-line"
indentLevel={indent || 1}
selected={$store.currentPreviewItem._id === screenId}
opened={$store.currentPreviewItem._id === screenId}
text={url === '/' ? 'Home' : url}
selected={$store.currentAssetId === screenId}
opened={$store.currentAssetId === screenId}
text={ROUTE_NAME_MAP[url]?.[role] || url}
withArrow={route.subpaths}
on:click={() => changeScreen(screenId)}>
<ScreenDropdownMenu screen={screenId} />
<ScreenDropdownMenu {screenId} />
</NavItem>
{#if selectedScreen?._id === screenId}
<ComponentsTree
<ComponentTree
components={selectedScreen.props._children}
currentComponent={$store.currentComponentInfo}
currentComponent={$selectedComponent}
{dragDropStore} />
{/if}
{/each}

18
packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
View file

@ -3,28 +3,20 @@
import { store, allScreens } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownMenu } from "@budibase/bbui"
import { DropdownMenu, Modal, ModalContent } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
export let screen
export let screenId
let confirmDeleteDialog
let dropdown
let anchor
$: screen = $allScreens.find(screen => screen._id === screenId)
const deleteScreen = () => {
const screenToDelete = $allScreens.find(scr => scr._id === screen)
store.actions.screens.delete(screenToDelete)
store.actions.screens.delete(screen)
store.actions.routing.fetch()
// update the page if required
store.update(state => {
if (state.currentPreviewItem._id === screen) {
store.actions.pages.select($store.currentPageName)
notifier.success(`Screen ${screenToDelete.name} deleted successfully.`)
$goto(`./:page/page-layout`)
}
return state
})
}
</script>

2
packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js
View file

@ -48,7 +48,7 @@ export default function() {
if (mousePosition > 0.4 && mousePosition < 0.8) {
state.dropPosition = DropPosition.INSIDE
}
return
return state
}
// bottom half

2
packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
View file

@ -5,7 +5,7 @@
</script>
<div class="root">
{#each Object.keys($store.routes) as path}
{#each Object.keys($store.routes || {}) as path}
<PathTree {path} route={$store.routes[path]} />
{/each}
</div>

39
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View file

@ -1,5 +1,7 @@
<script>
import { store } from "builderStore"
import { get } from "svelte/store"
import { store, selectedComponent, currentAsset } from "builderStore"
import { FrontendTypes } from "constants"
import panelStructure from "./temporaryPanelStructure.js"
import CategoryTab from "./CategoryTab.svelte"
import DesignView from "./DesignView.svelte"
@ -14,12 +16,12 @@
$: componentInstance =
$store.currentView !== "component"
? { ...$store.currentPreviewItem, ...$store.currentComponentInfo }
: $store.currentComponentInfo
? { ...$currentAsset, ...$selectedComponent }
: $selectedComponent
$: componentDefinition = $store.components[componentInstance._component]
$: componentPropDefinition =
flattenedPanel.find(
//use for getting controls for each component property
// use for getting controls for each component property
c => c._component === componentInstance._component
) || {}
@ -31,7 +33,7 @@
$: isComponentOrScreen =
$store.currentView === "component" ||
$store.currentFrontEndType === "screen"
$store.currentFrontEndType === FrontendTypes.SCREEN
$: isNotScreenslot = componentInstance._component !== "##builtin/screenslot"
$: displayName =
@ -58,16 +60,20 @@
return components
}
function setPageOrScreenProp(name, value) {
function setAssetProps(name, value) {
const selectedAsset = get(currentAsset)
store.update(state => {
if (name === "_instanceName" && state.currentFrontEndType === "screen") {
state.currentPreviewItem.props[name] = value
if (
name === "_instanceName" &&
state.currentFrontEndType === FrontendTypes.SCREEN
) {
selectedAsset.props._instanceName = value
} else {
state.currentPreviewItem[name] = value
selectedAsset[name] = value
}
store.actions.preview.saveSelected()
return state
})
store.actions.preview.saveSelected()
}
function getProps(obj, keys) {
@ -94,21 +100,12 @@
{panelDefinition}
displayNameField={displayName}
onChange={store.actions.components.updateProp}
onScreenPropChange={setPageOrScreenProp}
screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
onScreenPropChange={setAssetProps}
assetInstance={$store.currentView !== 'component' && $currentAsset} />
{/if}
</div>
<style>
.title > div:nth-child(1) {
grid-column-start: name;
color: var(--ink);
}
.title > div:nth-child(2) {
grid-column-start: actions;
}
.component-props-container {
flex: 1 1 auto;
min-height: 0;

10
packages/builder/src/components/userInterface/ComponentSelectionList.svelte
View file

@ -1,6 +1,6 @@
<script>
import { goto } from "@sveltech/routify"
import { store } from "builderStore"
import { goto, url } from "@sveltech/routify"
import { store, currentAssetName, selectedComponent } from "builderStore"
import components from "./temporaryPanelStructure.js"
import { DropdownMenu } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
@ -26,8 +26,8 @@
const onComponentChosen = component => {
store.actions.components.create(component._component, component.presetProps)
const path = store.actions.components.findRoute($store.currentComponentInfo)
$goto(`./:page/:screen/${path}`)
const path = store.actions.components.findRoute($selectedComponent)
$goto(`./${$store.currentAssetId}/${path}`)
close()
}
</script>
@ -52,7 +52,7 @@
align="left">
<DropdownContainer>
{#each categories[selectedIndex].children as item}
{#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
{#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
<DropdownItem
icon={item.icon}
title={item.name}

3
packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
View file

@ -1,5 +1,6 @@
<script>
import { store, allScreens } from "builderStore"
import { FrontendTypes } from "constants"
import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
import ComponentSelectionList from "./ComponentSelectionList.svelte"
@ -18,7 +19,7 @@
</script>
<div class="root">
{#if $store.currentFrontEndType === 'page' || $allScreens.length}
{#if $store.currentFrontEndType === FrontendTypes.LAYOUT || $allScreens.length}
<div class="switcher">
<button
class:selected={selected === COMPONENT_SELECTION_TAB}

6
packages/builder/src/components/userInterface/EventsEditor/actions/CreateRow.svelte
View file

@ -1,15 +1,15 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
import SaveFields from "./SaveFields.svelte"
export let parameters
$: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})

6
packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte
View file

@ -1,6 +1,6 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
export let parameters
@ -8,9 +8,9 @@
let idFields
$: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})

6
packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
View file

@ -1,7 +1,7 @@
<script>
// accepts an array of field names, and outputs an object of { FieldName: value }
import { DataList, Label, TextButton, Spacer, Select } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
import { CloseCircleIcon, AddIcon } from "components/common/Icons"
import {
@ -32,9 +32,9 @@
}))
$: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})

6
packages/builder/src/components/userInterface/EventsEditor/actions/SaveRow.svelte
View file

@ -1,6 +1,6 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
import SaveFields from "./SaveFields.svelte"
import {
@ -16,9 +16,9 @@
let schemaFields
$: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})

6
packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRow.svelte
View file

@ -1,6 +1,6 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
import SaveFields from "./SaveFields.svelte"
import {
@ -11,9 +11,9 @@
export let parameters
$: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})

81
packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
View file

@ -1,16 +1,33 @@
<script>
import { onMount } from "svelte"
import { store, currentScreens } from "builderStore"
import api from "builderStore/api"
import { goto, params, url } from "@sveltech/routify"
import { store, currentAsset, selectedComponent } from "builderStore"
import { FrontendTypes } from "constants"
import ComponentNavigationTree from "components/userInterface/ComponentNavigationTree/index.svelte"
import PageLayout from "components/userInterface/PageLayout.svelte"
import PagesList from "components/userInterface/PagesList.svelte"
import Layout from "components/userInterface/Layout.svelte"
import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
import { Modal } from "@budibase/bbui"
import NewLayoutModal from "components/userInterface/NewLayoutModal.svelte"
import { Modal, Switcher } from "@budibase/bbui"
const tabs = [
{
title: "Screens",
key: "screen",
},
{
title: "Layouts",
key: "layout",
},
]
let modal
let routes = {}
let tab = $params.assetType
function navigate({ detail }) {
if (!detail) return
$goto(`../${detail.heading.key}`)
}
onMount(() => {
store.actions.routing.fetch()
@ -18,32 +35,48 @@
</script>
<div class="title">
<h1>Screens</h1>
<i on:click={modal.show} data-cy="new-screen" class="ri-add-circle-fill" />
<Switcher headings={tabs} bind:value={tab} on:change={navigate}>
{#if tab === FrontendTypes.SCREEN}
<i
on:click={modal.show}
data-cy="new-screen"
class="ri-add-circle-fill" />
{#if $currentAsset}
<div class="nav-items-container">
<ComponentNavigationTree />
</div>
{/if}
<Modal bind:this={modal}>
<NewScreenModal />
</Modal>
{:else if tab === FrontendTypes.LAYOUT}
<i
on:click={modal.show}
data-cy="new-layout"
class="ri-add-circle-fill" />
{#each $store.layouts as layout (layout._id)}
<Layout {layout} />
{/each}
<Modal bind:this={modal}>
<NewLayoutModal />
</Modal>
{/if}
</Switcher>
</div>
<PagesList />
<div class="nav-items-container">
<PageLayout layout={$store.pages[$store.currentPageName]} />
<ComponentNavigationTree />
</div>
<Modal bind:this={modal}>
<NewScreenModal />
</Modal>
<style>
.title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.title h1 {
font-size: var(--font-size-m);
font-weight: 500;
margin: 0;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
position: relative;
}
.title i {
font-size: 20px;
position: absolute;
top: 0;
right: 0;
}
.title i:hover {
cursor: pointer;

41
packages/builder/src/components/userInterface/Layout.svelte Normal file
View file

@ -0,0 +1,41 @@
<script>
import { goto } from "@sveltech/routify"
import { FrontendTypes } from "constants"
import ComponentTree from "./ComponentNavigationTree/ComponentTree.svelte"
import LayoutDropdownMenu from "./ComponentNavigationTree/LayoutDropdownMenu.svelte"
import initDragDropStore from "./ComponentNavigationTree/dragDropStore"
import NavItem from "components/common/NavItem.svelte"
import { last } from "lodash/fp"
import { store, currentAsset, selectedComponent } from "builderStore"
import { writable } from "svelte/store"
export let layout
let confirmDeleteDialog
let componentToDelete = ""
const dragDropStore = initDragDropStore()
const selectLayout = () => {
store.actions.layouts.select(layout._id)
$goto(`./${layout._id}`)
}
</script>
<NavItem
border={false}
icon="ri-layout-3-line"
text={layout.name}
withArrow
selected={$store.currentAssetId === layout._id}
opened={$store.currentAssetId === layout._id}
on:click={selectLayout}>
<LayoutDropdownMenu {layout} />
</NavItem>
{#if $store.currentAssetId === layout._id && layout.props?._children}
<ComponentTree
components={layout.props._children}
currentComponent={$selectedComponent}
{dragDropStore} />
{/if}

13
packages/builder/src/components/userInterface/LayoutSelect.svelte Normal file
View file

@ -0,0 +1,13 @@
<script>
import { store, currentAsset } from "builderStore"
import { Select } from "@budibase/bbui"
export let value
</script>
<Select bind:value extraThin secondary on:change>
<option value="">Choose an option</option>
{#each $store.layouts as layout}
<option value={layout._id}>{layout.name}</option>
{/each}
</Select>

25
packages/builder/src/components/userInterface/PagesList.svelte → packages/builder/src/components/userInterface/LayoutsList.svelte
View file

@ -2,12 +2,7 @@
import { params, goto } from "@sveltech/routify"
import { store } from "builderStore"
const getPage = (state, name) => {
const props = state.pages[name]
return { name, props }
}
const pages = [
const layouts = [
{
title: "Private",
id: "main",
@ -18,18 +13,22 @@
},
]
if (!$store.currentPageName)
store.actions.pages.select($params.page ? $params.page : "main")
if (!$store.currentAssetId) {
// refactor so the right layout is chosen
store.actions.layouts.select($params.layout)
}
const changePage = id => {
store.actions.pages.select(id)
$goto(`./${id}/page-layout`)
const changeLayout = id => {
store.actions.layouts.select(id)
$goto(`./${id}/layout`)
}
</script>
<div class="root">
{#each pages as { title, id }}
<button class:active={id === $params.page} on:click={() => changePage(id)}>
{#each layouts as { title, id }}
<button
class:active={id === $params.layout}
on:click={() => changeLayout(id)}>
{title}
</button>
{/each}

26
packages/builder/src/components/userInterface/NewLayoutModal.svelte Normal file
View file

@ -0,0 +1,26 @@
<script>
import { goto } from "@sveltech/routify"
import api from "builderStore/api"
import { notifier } from "builderStore/store/notifications"
import { store, backendUiStore, allScreens } from "builderStore"
import { Input, ModalContent } from "@budibase/bbui"
import analytics from "analytics"
const CONTAINER = "@budibase/standard-components/container"
let name = ""
async function save() {
try {
await store.actions.layouts.save({ name })
$goto(`./${$store.currentAssetId}`)
notifier.success(`Layout ${name} created successfully`)
} catch (err) {
notifier.danger(`Error creating layout ${name}.`)
}
}
</script>
<ModalContent title="Create Layout" confirmText="Create" onConfirm={save}>
<Input thin label="Name" bind:value={name} />
</ModalContent>

4
packages/builder/src/components/userInterface/NewScreenModal.svelte
View file

@ -72,7 +72,7 @@
// TODO: need to fix this up correctly
draftScreen.routing = { route, roleId: "ADMIN" }
await store.actions.screens.create(draftScreen)
const createdScreen = await store.actions.screens.create(draftScreen)
if (createLink) {
await store.actions.components.links.save(route, name)
}
@ -85,7 +85,7 @@
})
}
$goto(`./:page/${name}`)
$goto(`./screen/${createdScreen._id}`)
}
const routeNameExists = route => {

44
packages/builder/src/components/userInterface/PageLayout.svelte
View file

@ -1,44 +0,0 @@
<script>
import { goto } from "@sveltech/routify"
import ComponentTree from "./ComponentNavigationTree/ComponentTree.svelte"
import NavItem from "components/common/NavItem.svelte"
import { last } from "lodash/fp"
import { store } from "builderStore"
import { writable } from "svelte/store"
export let layout
let confirmDeleteDialog
let componentToDelete = ""
const dragDropStore = writable({})
const lastPartOfName = c =>
c && last(c.name ? c.name.split("/") : c._component.split("/"))
$: _layout = {
component: layout,
title: lastPartOfName(layout),
}
const setCurrentScreenToLayout = () => {
store.actions.selectPageOrScreen("page")
$goto("./:page/page-layout")
}
</script>
<NavItem
border={false}
icon="ri-layout-3-line"
text="Master Screen"
withArrow
selected={$store.currentComponentInfo?._id === _layout.component.props._id}
opened={$store.currentPreviewItem?.name === _layout.title}
on:click={setCurrentScreenToLayout} />
{#if $store.currentPreviewItem?.name === _layout.title && _layout.component.props._children}
<ComponentTree
components={_layout.component.props._children}
currentComponent={$store.currentComponentInfo}
{dragDropStore} />
{/if}

3
packages/builder/src/components/userInterface/PagesComponents.svelte
View file

@ -1,3 +0,0 @@
<script>
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
</script>

6
packages/builder/src/components/userInterface/PropertyControl.svelte
View file

@ -1,7 +1,7 @@
<script>
import { Icon } from "@budibase/bbui"
import Input from "./PropertyPanelControls/Input.svelte"
import { store, backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
import {
readableToRuntimeBinding,
@ -35,9 +35,9 @@
function getBindableProperties() {
// Get all bindableProperties
bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})
}

6
packages/builder/src/components/userInterface/ScreenSelect.svelte
View file

@ -1,7 +1,7 @@
<script>
import { DataList } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { store, allScreens, backendUiStore } from "builderStore"
import { store, allScreens, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
const dispatch = createEventDispatcher()
@ -27,9 +27,9 @@
]
const bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})

41
packages/builder/src/components/userInterface/SettingsView.svelte
View file

@ -1,10 +1,11 @@
<script>
import { isEmpty } from "lodash/fp"
import { FrontendTypes } from "constants"
import PropertyControl from "./PropertyControl.svelte"
import LayoutSelect from "./LayoutSelect.svelte"
import Input from "./PropertyPanelControls/Input.svelte"
import { goto } from "@sveltech/routify"
import { excludeProps } from "./propertyCategories.js"
import { store, allScreens } from "builderStore"
import { store, allScreens, currentAsset } from "builderStore"
import { walkProps } from "builderStore/storeUtils"
export let panelDefinition = []
@ -13,13 +14,13 @@
export let onChange = () => {}
export let onScreenPropChange = () => {}
export let displayNameField = false
export let screenOrPageInstance
export let assetInstance
let pageScreenProps = ["title", "favicon", "description", "route"]
let assetProps = ["title", "description", "route", "layoutId"]
let duplicateName = false
const propExistsOnComponentDef = prop =>
pageScreenProps.includes(prop) || prop in componentDefinition.props
assetProps.includes(prop) || prop in componentDefinition.props
function handleChange(key, data) {
data.target ? onChange(key, data.target.value) : onChange(key, data)
@ -28,12 +29,10 @@
const screenDefinition = [
{ key: "description", label: "Description", control: Input },
{ key: "route", label: "Route", control: Input },
{ key: "layoutId", label: "Layout", control: LayoutSelect },
]
const pageDefinition = [
{ key: "title", label: "Title", control: Input },
{ key: "favicon", label: "Favicon", control: Input },
]
const layoutDefinition = [{ key: "title", label: "Title", control: Input }]
const canRenderControl = (key, dependsOn) => {
let test = !isEmpty(componentInstance[dependsOn])
@ -44,8 +43,8 @@
)
}
$: isPage = screenOrPageInstance && screenOrPageInstance.favicon
$: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition
$: isLayout = assetInstance && assetInstance.favicon
$: assetDefinition = isLayout ? layoutDefinition : screenDefinition
const isDuplicateName = name => {
let duplicate = false
@ -58,15 +57,15 @@
}
})
}
// check page first
lookForDuplicate($store.pages[$store.currentPageName].props)
if (duplicate) return true
// check against layouts
for (let layout of $store.layouts) {
lookForDuplicate(layout.props)
}
// if viewing screen, check current screen for duplicate
if ($store.currentFrontEndType === "screen") {
lookForDuplicate($store.currentPreviewItem.props)
if ($store.currentFrontEndType === FrontendTypes.SCREEN) {
lookForDuplicate($currentAsset.props)
} else {
// viewing master page - need to dedupe against all screens
// need to dedupe against all screens
for (let screen of $allScreens) {
lookForDuplicate(screen.props)
}
@ -86,14 +85,14 @@
</script>
<div class="settings-view-container">
{#if screenOrPageInstance}
{#each screenOrPageDefinition as def}
{#if assetInstance}
{#each assetDefinition as def}
<PropertyControl
bindable={false}
control={def.control}
label={def.label}
key={def.key}
value={screenOrPageInstance[def.key]}
value={assetInstance[def.key]}
onChange={onScreenPropChange}
props={{ ...excludeProps(def, ['control', 'label']) }} />
{/each}

6
packages/builder/src/components/userInterface/TableViewSelect.svelte
View file

@ -1,7 +1,7 @@
<script>
import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { store, backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
const dispatch = createEventDispatcher()
@ -32,9 +32,9 @@
}, [])
$: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})

4
packages/builder/src/components/userInterface/pagesParsing/createProps.js → packages/builder/src/components/userInterface/assetParsing/createProps.js
View file

@ -25,7 +25,6 @@ export const createProps = (componentDefinition, derivedFromProps) => {
_id: uuid(),
_component: componentDefinition._component,
_styles: { normal: {}, hover: {}, active: {}, selected: {} },
_code: "",
}
const errors = []
@ -96,6 +95,3 @@ const parsePropDef = propDef => {
return cloneDeep(propDef.default)
}
export const arrayElementComponentName = (parentComponentName, arrayPropName) =>
`${parentComponentName}:${arrayPropName}`

0
packages/builder/src/components/userInterface/pagesParsing/getRootComponent.js → packages/builder/src/components/userInterface/assetParsing/getRootComponent.js
View file

0
packages/builder/src/components/userInterface/pagesParsing/searchComponents.js → packages/builder/src/components/userInterface/assetParsing/searchComponents.js
View file

0
packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js → packages/builder/src/components/userInterface/assetParsing/splitRootComponentName.js
View file

0
packages/builder/src/components/userInterface/pagesParsing/types.js → packages/builder/src/components/userInterface/assetParsing/types.js
View file

60
packages/builder/src/components/userInterface/pagesParsing/renameScreen.js
View file

@ -1,60 +0,0 @@
import { isPlainObject, isArray, cloneDeep } from "lodash/fp"
import { getExactComponent } from "./searchComponents"
export const rename = (pages, screens, oldname, newname) => {
pages = cloneDeep(pages)
screens = cloneDeep(screens)
const changedScreens = []
const existingWithNewName = getExactComponent(screens, newname, true)
if (existingWithNewName)
return {
components: screens,
pages,
error: "Component by that name already exists",
}
const traverseProps = props => {
let hasEdited = false
if (props._component && props._component === oldname) {
props._component = newname
hasEdited = true
}
for (let propName in props) {
const prop = props[propName]
if (isPlainObject(prop) && prop._component) {
hasEdited = traverseProps(prop) || hasEdited
}
if (isArray(prop)) {
for (let element of prop) {
hasEdited = traverseProps(element) || hasEdited
}
}
}
return hasEdited
}
for (let screen of screens) {
let hasEdited = false
if (screen.props.instanceName === oldname) {
screen.props.instanceName = newname
hasEdited = true
}
hasEdited = traverseProps(screen.props) || hasEdited
if (hasEdited && screen.props.instanceName !== newname)
changedScreens.push(screen.props.instanceName)
}
for (let pageName in pages) {
const page = pages[pageName]
if (page.appBody === oldname) {
page.appBody = newname
}
}
return { screens, pages, changedScreens }
}

4
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View file

@ -1197,7 +1197,7 @@ export default {
_component: "##builtin/screenslot",
name: "Screen Slot",
description:
"This component is a placeholder for the rendering of a screen within a page.",
"This component is a placeholder for the rendering of a screen within a layout.",
icon: "ri-crop-2-line",
properties: { design: { ...all } },
commonProps: {},
@ -1222,7 +1222,7 @@ export default {
"A component that automatically generates a login screen for your app.",
icon: "ri-login-box-line",
children: [],
showOnPages: ["unauthenticated"],
showOnAsset: ["login-screen"],
properties: {
design: { ...all },
settings: [

25
packages/builder/src/constants/index.js
View file

@ -2,22 +2,19 @@ export const TableNames = {
USERS: "ta_users",
}
export const FrontendTypes = {
PAGE: "page",
SCREEN: "screen",
LAYOUT: "layout",
NONE: "none",
}
// fields on the user table that cannot be edited
export const UNEDITABLE_USER_FIELDS = ["email", "password", "roleId"]
export const DEFAULT_PAGES_OBJECT = {
main: {
props: {
_component: "@budibase/standard-components/container",
},
_screens: {},
export const LAYOUT_NAMES = {
MASTER: {
PRIVATE: "layout_private_master",
PUBLIC: "layout_private_master",
},
unauthenticated: {
props: {
_component: "@budibase/standard-components/container",
},
_screens: {},
},
componentLibraries: [],
stylesheets: [],
}

4
packages/builder/src/pages/[application]/automate/[automation]/_layout.svelte
View file

@ -1,4 +1,6 @@
<script>
import { store } from "builderStore"
import { params } from "@sveltech/routify"
store.actions.pages.select($params.page)
store.actions.layouts.select($params.layout)
</script>

2
packages/builder/src/pages/[application]/data/_layout.svelte
View file

@ -2,7 +2,7 @@
import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
</script>
<!-- routify:options index=1 -->
<!-- routify:options index=0 -->
<div class="root">
<div class="nav">
<TableNavigator />

0
packages/builder/src/pages/[application]/design/[page]/[screen]/_fallback.svelte → packages/builder/src/pages/[application]/design/[assetType]/[asset]/_fallback.svelte
View file

63
packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte Normal file
View file

@ -0,0 +1,63 @@
<script>
import { params, leftover, goto } from "@sveltech/routify"
import { FrontendTypes } from "constants"
import { store, allScreens } from "builderStore"
// Get any leftover params not caught by Routifys params store.
const componentIds = $leftover.split("/").filter(id => id !== "")
const currentAssetId = decodeURI($params.asset)
let assetList
let actions
// Determine screens or layouts based on the URL
if ($params.assetType === FrontendTypes.SCREEN) {
assetList = $allScreens
actions = store.actions.screens
} else {
assetList = $store.layouts
actions = store.actions.layouts
}
// select the screen or layout in the UI
actions.select(currentAssetId)
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
if ($leftover) {
// Get the correct screen children.
const assetChildren = assetList.find(
asset =>
asset._id === $params.asset ||
asset._id === decodeURIComponent($params.asset)
).props._children
findComponent(componentIds, assetChildren)
}
// }
// Find Component with ID and continue
function findComponent(ids, children) {
// Setup stuff
let componentToSelect
let currentChildren = children
// Loop through each ID
ids.forEach(id => {
// Find ID
const component = currentChildren.find(child => child._id === id)
// If it does not exist, ignore (use last valid route)
if (!component) return
componentToSelect = component
// Update childrens array to selected components children
currentChildren = componentToSelect._children
})
// Select Component!
if (componentToSelect) store.actions.components.select(componentToSelect)
}
</script>
<slot />

7
packages/builder/src/pages/[application]/design/_layout.svelte → packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
View file

@ -1,6 +1,7 @@
<script>
import { store, backendUiStore } from "builderStore"
import { onMount } from "svelte"
import { FrontendTypes } from "constants"
import CurrentItemPreview from "components/userInterface/AppPreview"
import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
@ -26,8 +27,6 @@
const settings = () => {
settingsView.show()
}
const lastPartOfName = c => (c ? last(c.split("/")) : "")
</script>
<!-- routify:options index=1 -->
@ -37,7 +36,7 @@
</div>
<div class="preview-pane">
{#if $store.currentPageName && $store.currentPageName.length > 0}
{#if $store.currentAssetId && $store.currentAssetId.length > 0}
<ComponentSelectionList />
<div class="preview-content">
<CurrentItemPreview />
@ -45,7 +44,7 @@
{/if}
</div>
{#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
{#if $store.currentFrontEndType === FrontendTypes.SCREEN || $store.currentFrontEndType === FrontendTypes.LAYOUT}
<div class="components-pane">
<ComponentPropertiesPanel />
</div>

17
packages/builder/src/pages/[application]/design/[assetType]/index.svelte Normal file
View file

@ -0,0 +1,17 @@
<script>
import { store, allScreens } from "builderStore"
import { FrontendTypes } from "constants"
import { goto, params } from "@sveltech/routify"
// Go to first layout
if ($params.assetType === FrontendTypes.LAYOUT) {
$goto(`../${$store.layouts[0]?._id}`)
}
// Go to first screen
if ($params.assetType === FrontendTypes.SCREEN) {
$goto(`../${$allScreens[0]?._id}`)
}
</script>
<!-- routify:options index=false -->

69
packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte
View file

@ -1,69 +0,0 @@
<script>
import { onMount } from "svelte"
import { params, leftover, goto } from "@sveltech/routify"
import { store, allScreens } from "builderStore"
// Get any leftover params not caught by Routifys params store.
const componentIds = $leftover.split("/").filter(id => id !== "")
// It's a screen, set it to that screen
if ($params.screen !== "page-layout") {
const currentScreenName = decodeURI($params.screen)
const validScreen =
$allScreens.findIndex(screen => screen._id === currentScreenName) !== -1
if (!validScreen) {
// Go to main layout if URL set to invalid screen
store.actions.pages.select("main")
$goto("../../main")
} else {
// Otherwise proceed to set screen
store.actions.screens.select(currentScreenName)
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
if ($leftover) {
// Get the correct screen children.
const screenChildren = $store.pages[$params.page]._screens.find(
screen =>
screen._id === $params.screen ||
screen._id === decodeURIComponent($params.screen)
).props._children
findComponent(componentIds, screenChildren)
}
}
} else {
// It's a page, so set the screentype to page.
store.actions.selectPageOrScreen("page")
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
if ($leftover) {
findComponent(componentIds, $store.pages[$params.page].props._children)
}
}
// Find Component with ID and continue
function findComponent(ids, children) {
// Setup stuff
let componentToSelect
let currentChildren = children
// Loop through each ID
ids.forEach(id => {
// Find ID
const component = currentChildren.find(child => child._id === id)
// If it does not exist, ignore (use last valid route)
if (!component) return
componentToSelect = component
// Update childrens array to selected components children
currentChildren = componentToSelect._children
})
// Select Component!
if (componentToSelect) store.actions.components.select(componentToSelect)
}
</script>
<slot />

8
packages/builder/src/pages/[application]/design/[page]/_layout.svelte
View file

@ -1,8 +0,0 @@
<script>
import { params } from "@sveltech/routify"
import { store } from "builderStore"
store.actions.pages.select($params.page)
</script>
<slot />

4
packages/builder/src/pages/[application]/design/[page]/index.svelte
View file

@ -1,4 +0,0 @@
<script>
import { goto } from "@sveltech/routify"
$goto("../page-layout")
</script>

6
packages/builder/src/pages/[application]/design/index.svelte
View file

@ -1,6 +1,8 @@
<script>
import { goto } from "@sveltech/routify"
$goto("../main")
import { FrontendTypes } from "constants"
$goto(`../${FrontendTypes.SCREEN}`)
</script>
<!-- routify:options index=false -->
<!-- routify:options index=1 -->

4
packages/builder/tests/createProps.spec.js
View file

@ -1,4 +1,4 @@
import { createProps } from "../src/components/userInterface/pagesParsing/createProps"
import { createProps } from "../src/components/userInterface/assetParsing/createProps"
import { keys, some } from "lodash/fp"
import { stripStandardProps } from "./testData"
@ -158,8 +158,6 @@ describe("createDefaultProps", () => {
const comp = getcomponent()
comp.props.fieldName = { type: "string", default: 1 }
const { props } = createProps(comp)
expect(props._code).toBeDefined()
expect(props._styles).toBeDefined()
expect(props._code).toBeDefined()
})
})

51
packages/builder/tests/generate_css.spec.js
View file

@ -1,51 +0,0 @@
import {
generate_css,
generate_screen_css,
} from "../src/builderStore/generate_css.js"
describe("generate_css", () => {
test("Check how array styles are output", () => {
expect(generate_css({ margin: ["0", "10", "0", "15"] })).toBe("margin: 0px 10px 0px 15px;")
})
test("Check handling of an array with empty string values", () => {
expect(generate_css({ padding: ["", "", "", ""] })).toBe("")
})
test("Check handling of an empty array", () => {
expect(generate_css({ margin: [] })).toBe("")
})
test("Check handling of valid font property", () => {
expect(generate_css({ "font-size": "10px" })).toBe("font-size: 10px;")
})
})
describe("generate_screen_css", () => {
const normalComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: { "font-size": "16px" }, hover: {}, active: {}, selected: {} } }
test("Test generation of normal css styles", () => {
expect(generate_screen_css([normalComponent])).toBe(".header-123-456 {\nfont-size: 16px;\n}")
})
const hoverComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {"font-size": "16px"}, active: {}, selected: {} } }
test("Test generation of hover css styles", () => {
expect(generate_screen_css([hoverComponent])).toBe(".header-123-456:hover {\nfont-size: 16px;\n}")
})
const selectedComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: { "font-size": "16px" } } }
test("Test generation of selection css styles", () => {
expect(generate_screen_css([selectedComponent])).toBe(".header-123-456::selection {\nfont-size: 16px;\n}")
})
const emptyComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: {} } }
test.only("Testing handling of empty component styles", () => {
expect(generate_screen_css([emptyComponent])).toBe("")
})
})

2
packages/builder/tests/searchComponentsProps.spec.js
View file

@ -2,7 +2,7 @@ import {
searchAllComponents,
getExactComponent,
getAncestorProps,
} from "../src/components/userInterface/pagesParsing/searchComponents"
} from "../src/components/userInterface/assetParsing/searchComponents"
import { componentsAndScreens } from "./testData"

1
packages/builder/tests/testData.js
View file

@ -106,7 +106,6 @@ export const componentsAndScreens = () => ({
})
export const stripStandardProps = props => {
delete props._code
delete props._id
delete props._styles
}

294
packages/builder/yarn.lock
View file

@ -842,10 +842,10 @@
lodash "^4.17.19"
to-fast-properties "^2.0.0"
"@budibase/bbui@^1.51.0":
version "1.52.0"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.52.0.tgz#81fc8d3f80cb74f01a4f2d62e58389fa8fbfedeb"
integrity sha512-ytDZj/lQKUiwmF4wzz45yAQFTajEFW3Z7HWD7AmfTfxRtbwGXefbX+mF3JkWrYq5OclUtaA2+kluOX7tP1oZmw==
"@budibase/bbui@^1.52.2":
version "1.52.2"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.52.2.tgz#a0774880fb755eb81c762bc355550af7f4562b09"
integrity sha512-PxiN5xvr+Z/RpypMDYh3lNhCUnejH1moMoWW7PiuCiho5VXGauR+M8T49p5eTKoFSqRMC7BUdFJJ9ye/cnQxNA==
dependencies:
markdown-it "^12.0.2"
quill "^1.3.7"
@ -854,6 +854,15 @@
svelte-portal "^1.0.0"
turndown "^7.0.0"
"@budibase/client@^0.3.8":
version "0.3.8"
resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.3.8.tgz#75df7e97e8f0d9b58c00e2bb0d3b4a55f8d04735"
integrity sha512-tnFdmCdXKS+uZGoipr69Wa0oVoFHmyoV0ydihI6q0gKQH0KutypVHAaul2qPB8t5a/mTZopC//2WdmCeX1GKVg==
dependencies:
deep-equal "^2.0.1"
mustache "^4.0.1"
regexparam "^1.3.0"
"@budibase/colorpicker@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
@ -1646,6 +1655,11 @@ array-equal@^1.0.0:
resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
array-filter@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
array-union@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@ -1713,6 +1727,13 @@ atob@^2.1.2:
resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
available-typed-arrays@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
dependencies:
array-filter "^1.0.0"
aws-sign2@~0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@ -2047,6 +2068,14 @@ callsites@^3.0.0:
resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
camel-case@3.0.x:
version "3.0.0"
resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
dependencies:
no-case "^2.2.0"
upper-case "^1.1.1"
camelcase@^5.0.0, camelcase@^5.3.1:
version "5.3.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
@ -2157,6 +2186,13 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
clean-css@4.2.x:
version "4.2.3"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
dependencies:
source-map "~0.6.0"
cli-cursor@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
@ -2272,11 +2308,21 @@ commander@2, commander@^2.20.0:
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
commander@2.17.x:
version "2.17.1"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
commander@^5.0.0, commander@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
commander@~2.19.0:
version "2.19.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
common-tags@^1.8.0:
version "1.8.0"
resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@ -2851,6 +2897,27 @@ deep-equal@^1.0.1:
object-keys "^1.1.1"
regexp.prototype.flags "^1.2.0"
deep-equal@^2.0.1:
version "2.0.5"
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.5.tgz#55cd2fe326d83f9cbf7261ef0e060b3f724c5cb9"
integrity sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==
dependencies:
call-bind "^1.0.0"
es-get-iterator "^1.1.1"
get-intrinsic "^1.0.1"
is-arguments "^1.0.4"
is-date-object "^1.0.2"
is-regex "^1.1.1"
isarray "^2.0.5"
object-is "^1.1.4"
object-keys "^1.1.1"
object.assign "^4.1.2"
regexp.prototype.flags "^1.3.0"
side-channel "^1.0.3"
which-boxed-primitive "^1.0.1"
which-collection "^1.0.1"
which-typed-array "^1.1.2"
deep-is@~0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@ -3059,7 +3126,7 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2:
string.prototype.trimend "^1.0.1"
string.prototype.trimstart "^1.0.1"
es-abstract@^1.18.0-next.1:
es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
version "1.18.0-next.1"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
@ -3077,6 +3144,20 @@ es-abstract@^1.18.0-next.1:
string.prototype.trimend "^1.0.1"
string.prototype.trimstart "^1.0.1"
es-get-iterator@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.1.tgz#b93ddd867af16d5118e00881396533c1c6647ad9"
integrity sha512-qorBw8Y7B15DVLaJWy6WdEV/ZkieBcu6QCq/xzWzGOKJqgG1j754vXRfZ3NY7HSShneqU43mPB4OkQBTkvHhFw==
dependencies:
call-bind "^1.0.0"
get-intrinsic "^1.0.1"
has-symbols "^1.0.1"
is-arguments "^1.0.4"
is-map "^2.0.1"
is-set "^2.0.1"
is-string "^1.0.5"
isarray "^2.0.5"
es-to-primitive@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@ -3130,6 +3211,11 @@ estraverse@^4.2.0:
resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
estree-walker@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.2.1.tgz#bdafe8095383d8414d5dc2ecf4c9173b6db9412e"
integrity sha1-va/oCVOD2EFNXcLs9MkXO225QS4=
estree-walker@^0.5.2:
version "0.5.2"
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.2.tgz#d3850be7529c9580d815600b53126515e146dd39"
@ -3455,7 +3541,7 @@ for-in@^1.0.2:
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
foreach@~2.0.1:
foreach@^2.0.5, foreach@~2.0.1:
version "2.0.5"
resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
@ -3545,7 +3631,7 @@ get-caller-file@^2.0.1:
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
get-intrinsic@^1.0.0:
get-intrinsic@^1.0.0, get-intrinsic@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.1.tgz#94a9768fcbdd0595a1c9273aacf4c89d075631be"
integrity sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==
@ -3742,6 +3828,11 @@ hash.js@^1.0.0, hash.js@^1.0.3:
inherits "^2.0.3"
minimalistic-assert "^1.0.1"
he@1.2.x:
version "1.2.0"
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
hmac-drbg@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@ -3775,6 +3866,19 @@ html-escaper@^2.0.0:
resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
html-minifier@^3.0.2:
version "3.5.21"
resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
dependencies:
camel-case "3.0.x"
clean-css "4.2.x"
commander "2.17.x"
he "1.2.x"
param-case "2.1.x"
relateurl "0.2.x"
uglify-js "3.4.x"
http-signature@~1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@ -3903,6 +4007,11 @@ is-arrayish@^0.2.1:
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
is-bigint@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
integrity sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==
is-binary-path@~2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@ -3910,6 +4019,13 @@ is-binary-path@~2.1.0:
dependencies:
binary-extensions "^2.0.0"
is-boolean-object@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.0.tgz#e2aaad3a3a8fca34c28f6eee135b156ed2587ff0"
integrity sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==
dependencies:
call-bind "^1.0.0"
is-buffer@^1.1.5:
version "1.1.6"
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@ -3948,7 +4064,7 @@ is-data-descriptor@^1.0.0:
dependencies:
kind-of "^6.0.0"
is-date-object@^1.0.1:
is-date-object@^1.0.1, is-date-object@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@ -4025,6 +4141,11 @@ is-installed-globally@^0.3.2:
global-dirs "^2.0.1"
is-path-inside "^3.0.1"
is-map@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
is-module@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@ -4035,6 +4156,11 @@ is-negative-zero@^2.0.0:
resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
is-number-object@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
is-number@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@ -4100,6 +4226,11 @@ is-regex@^1.0.4, is-regex@^1.1.1:
dependencies:
has-symbols "^1.0.1"
is-set@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
is-stream@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@ -4110,6 +4241,11 @@ is-stream@^2.0.0:
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
is-string@^1.0.4, is-string@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
is-symbol@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@ -4117,11 +4253,32 @@ is-symbol@^1.0.2:
dependencies:
has-symbols "^1.0.1"
is-typed-array@^1.1.3:
version "1.1.4"
resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.4.tgz#1f66f34a283a3c94a4335434661ca53fff801120"
integrity sha512-ILaRgn4zaSrVNXNGtON6iFNotXW3hAPF3+0fB1usg2jFlWqo5fEDdmJkz0zBfoi7Dgskr8Khi2xZ8cXqZEfXNA==
dependencies:
available-typed-arrays "^1.0.2"
call-bind "^1.0.0"
es-abstract "^1.18.0-next.1"
foreach "^2.0.5"
has-symbols "^1.0.1"
is-typedarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
is-weakmap@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
is-weakset@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
is-windows@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@ -4147,6 +4304,11 @@ isarray@1.0.0, isarray@~1.0.0:
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
isarray@^2.0.5:
version "2.0.5"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
isbuffer@~0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@ -5051,6 +5213,11 @@ loose-envify@^1.0.0:
dependencies:
js-tokens "^3.0.0 || ^4.0.0"
lower-case@^1.1.1:
version "1.1.4"
resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
ltgt@^2.1.2:
version "2.2.1"
resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.2.1.tgz#f35ca91c493f7b73da0e07495304f17b31f87ee5"
@ -5224,7 +5391,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
minimatch@^3.0.4:
minimatch@^3.0.2, minimatch@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@ -5318,6 +5485,13 @@ nice-try@^1.0.4:
resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
no-case@^2.2.0:
version "2.3.2"
resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
dependencies:
lower-case "^1.1.1"
node-fetch@^2.6.0:
version "2.6.1"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
@ -5432,6 +5606,14 @@ object-is@^1.0.1:
define-properties "^1.1.3"
es-abstract "^1.18.0-next.1"
object-is@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.4.tgz#63d6c83c00a43f4cbc9434eb9757c8a5b8565068"
integrity sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==
dependencies:
call-bind "^1.0.0"
define-properties "^1.1.3"
object-keys@^1.0.12, object-keys@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@ -5458,7 +5640,7 @@ object-visit@^1.0.0:
dependencies:
isobject "^3.0.0"
object.assign@^4.1.0, object.assign@^4.1.1:
object.assign@^4.1.0, object.assign@^4.1.1, object.assign@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
@ -5582,6 +5764,13 @@ p-try@^2.0.0:
resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
param-case@2.1.x:
version "2.1.1"
resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
dependencies:
no-case "^2.2.0"
parchment@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
@ -6031,7 +6220,7 @@ regex-not@^1.0.0, regex-not@^1.0.2:
extend-shallow "^3.0.2"
safe-regex "^1.1.0"
regexp.prototype.flags@^1.2.0:
regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
@ -6039,6 +6228,11 @@ regexp.prototype.flags@^1.2.0:
define-properties "^1.1.3"
es-abstract "^1.17.0-next.1"
regexparam@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
regexpu-core@^4.7.1:
version "4.7.1"
resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
@ -6063,6 +6257,11 @@ regjsparser@^0.6.4:
dependencies:
jsesc "~0.5.0"
relateurl@0.2.x:
version "0.2.7"
resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
remixicon@^2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-2.5.0.tgz#b5e245894a1550aa23793f95daceadbf96ad1a41"
@ -6256,6 +6455,14 @@ rollup-plugin-css-only@^2.1.0:
"@rollup/pluginutils" "^3.0.0"
fs-extra "^9.0.0"
rollup-plugin-html@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/rollup-plugin-html/-/rollup-plugin-html-0.2.1.tgz#a1862eca87ae54b677689d0d4133911e8226463d"
integrity sha1-oYYuyoeuVLZ3aJ0NQTORHoImRj0=
dependencies:
html-minifier "^3.0.2"
rollup-pluginutils "^1.5.0"
rollup-plugin-livereload@^1.0.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/rollup-plugin-livereload/-/rollup-plugin-livereload-1.3.0.tgz#8da90df13df6502b9d982997d6ac871092f15fdd"
@ -6324,6 +6531,14 @@ rollup-plugin-url@^2.2.2:
mkdirp "^0.5.1"
rollup-pluginutils "^2.8.2"
rollup-pluginutils@^1.5.0:
version "1.5.2"
resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
integrity sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=
dependencies:
estree-walker "^0.2.1"
minimatch "^3.0.2"
rollup-pluginutils@^2.3.1, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
version "2.8.2"
resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
@ -6502,6 +6717,14 @@ shortid@^2.2.15:
dependencies:
nanoid "^2.1.0"
side-channel@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
dependencies:
es-abstract "^1.18.0-next.0"
object-inspect "^1.8.0"
signal-exit@^3.0.0, signal-exit@^3.0.2:
version "3.0.3"
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@ -6615,7 +6838,7 @@ source-map@^0.5.0, source-map@^0.5.6:
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@ -7108,6 +7331,14 @@ uc.micro@^1.0.1, uc.micro@^1.0.5:
resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
uglify-js@3.4.x:
version "3.4.10"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
integrity sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==
dependencies:
commander "~2.19.0"
source-map "~0.6.1"
unicode-canonical-property-names-ecmascript@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@ -7169,6 +7400,11 @@ untildify@^4.0.0:
resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
upper-case@^1.1.1:
version "1.1.3"
resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
uri-js@^4.2.2:
version "4.4.0"
resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.0.tgz#aa714261de793e8a82347a7bcc9ce74e86f28602"
@ -7334,11 +7570,45 @@ whatwg-url@^8.0.0:
tr46 "^2.0.2"
webidl-conversions "^6.1.0"
which-boxed-primitive@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
dependencies:
is-bigint "^1.0.0"
is-boolean-object "^1.0.0"
is-number-object "^1.0.3"
is-string "^1.0.4"
is-symbol "^1.0.2"
which-collection@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
dependencies:
is-map "^2.0.1"
is-set "^2.0.1"
is-weakmap "^2.0.1"
is-weakset "^2.0.1"
which-module@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
which-typed-array@^1.1.2:
version "1.1.4"
resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.4.tgz#8fcb7d3ee5adf2d771066fba7cf37e32fe8711ff"
integrity sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==
dependencies:
available-typed-arrays "^1.0.2"
call-bind "^1.0.0"
es-abstract "^1.18.0-next.1"
foreach "^2.0.5"
function-bind "^1.1.1"
has-symbols "^1.0.1"
is-typed-array "^1.1.3"
which@^1.2.9, which@^1.3.0:
version "1.3.1"
resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"

2
packages/client/package.json
View file

@ -3,7 +3,7 @@
"version": "0.3.8",
"license": "MPL-2.0",
"main": "dist/budibase-client.js",
"module": "dist/budibase-client.esm.mjs",
"module": "dist/budibase-client.js",
"scripts": {
"build": "rollup -c",
"dev:builder": "rollup -cw"

5
packages/client/src/components/ClientApp.svelte
View file

@ -20,6 +20,7 @@
})
</script>
{#if loaded}
<Component definition={$screenStore.page.props} />
{#if loaded && $screenStore.activeLayout}
<!-- // TODO: need to get the active screen as well -->
<Component definition={$screenStore.activeLayout.props} />
{/if}

2
packages/client/src/components/Screen.svelte
View file

@ -10,7 +10,7 @@
// Get the screen definition for the current route
$: screenDefinition = $screenStore.activeScreen?.props
// Redirect to home page if no matching route
// Redirect to home layout if no matching route
$: screenDefinition == null && routeStore.actions.navigate("/")
// Make a screen array so we can use keying to properly re-render each screen

2
packages/client/src/index.js
View file

@ -7,7 +7,7 @@ const loadBudibase = () => {
// Update builder store with any builder flags
builderStore.set({
inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
page: window["##BUDIBASE_PREVIEW_PAGE##"],
layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
previewId: window["##BUDIBASE_PREVIEW_ID##"],

2
packages/client/src/store/builder.js
View file

@ -3,7 +3,7 @@ import { writable } from "svelte/store"
const createBuilderStore = () => {
const initialState = {
inBuilder: false,
page: null,
layout: null,
screen: null,
selectedComponentId: null,
previewId: null,

2
packages/client/src/store/routes.js
View file

@ -34,7 +34,7 @@ const createRouteStore = () => {
}
const setActiveRoute = route => {
store.update(state => {
state.activeRoute = route
state.activeRoute = state.routes.find(x => x.path === route)
return state
})
}

23
packages/client/src/store/screens.js
View file

@ -7,30 +7,35 @@ import { getAppId } from "../utils/getAppId"
const createScreenStore = () => {
const config = writable({
screens: [],
page: {},
layouts: [],
})
const store = derived(
[config, routeStore, builderStore],
([$config, $routeStore, $builderStore]) => {
let page
let activeLayout
let activeScreen
if ($builderStore.inBuilder) {
// Use builder defined definitions if inside the builder preview
page = $builderStore.page
activeLayout = $builderStore.layout
activeScreen = $builderStore.screen
} else {
// Otherwise find the correct screen by matching the current route
page = $config.page
const { screens } = $config
const { screens, layouts } = $config
activeLayout = layouts[0]
if (screens.length === 1) {
activeScreen = screens[0]
} else {
} else if ($routeStore.activeRoute) {
activeScreen = screens.find(
screen => screen.routing.route === $routeStore.activeRoute
screen => screen._id === $routeStore.activeRoute.screenId
)
}
if (activeScreen) {
activeLayout = layouts.find(
layout => layout._id === activeScreen.layoutId
)
}
}
return { page, activeScreen }
return { activeLayout, activeScreen }
}
)
@ -38,7 +43,7 @@ const createScreenStore = () => {
const appDefinition = await API.fetchAppDefinition(getAppId())
config.set({
screens: appDefinition.screens,
page: appDefinition.page,
layouts: appDefinition.layouts,
})
}

131
packages/server/src/api/controllers/application.js
View file

@ -1,5 +1,5 @@
const CouchDB = require("../../db")
const compileStaticAssetsForPage = require("../../utilities/builder/compileStaticAssetsForPage")
const compileStaticAssets = require("../../utilities/builder/compileStaticAssets")
const env = require("../../environment")
const { existsSync } = require("fs-extra")
const { budibaseAppsDir } = require("../../utilities/budibaseDir")
@ -14,34 +14,54 @@ const {
generateAppID,
DocumentTypes,
SEPARATOR,
getPageParams,
getLayoutParams,
getScreenParams,
generatePageID,
generateScreenID,
} = require("../../db/utils")
const { BUILTIN_ROLE_IDS } = require("../../utilities/security/roles")
const {
BUILTIN_ROLE_IDS,
AccessController,
} = require("../../utilities/security/roles")
const {
downloadExtractComponentLibraries,
} = require("../../utilities/createAppPackage")
const { MAIN, UNAUTHENTICATED, PageTypes } = require("../../constants/pages")
const { HOME_SCREEN } = require("../../constants/screens")
const { BASE_LAYOUTS } = require("../../constants/layouts")
const {
createHomeScreen,
createLoginScreen,
} = require("../../constants/screens")
const { cloneDeep } = require("lodash/fp")
const { recurseMustache } = require("../../utilities/mustache")
const { generateAssetCss } = require("../../utilities/builder/generateCss")
const { USERS_TABLE_SCHEMA } = require("../../constants")
const APP_PREFIX = DocumentTypes.APP + SEPARATOR
// utility function, need to do away with this
async function getMainAndUnauthPage(db) {
let pages = await db.allDocs(
getPageParams(null, {
include_docs: true,
})
)
pages = pages.rows.map(row => row.doc)
async function getLayouts(db) {
return (
await db.allDocs(
getLayoutParams(null, {
include_docs: true,
})
)
).rows.map(row => row.doc)
}
const mainPage = pages.find(page => page.name === PageTypes.MAIN)
const unauthPage = pages.find(page => page.name === PageTypes.UNAUTHENTICATED)
return { mainPage, unauthPage }
async function getScreens(db) {
return (
await db.allDocs(
getScreenParams(null, {
include_docs: true,
})
)
).rows.map(row => row.doc)
}
function getUserRoleId(ctx) {
return !ctx.user.role || !ctx.user.role._id
? BUILTIN_ROLE_IDS.PUBLIC
: ctx.user.role._id
}
async function createInstance(template) {
@ -92,25 +112,16 @@ exports.fetch = async function(ctx) {
exports.fetchAppDefinition = async function(ctx) {
const db = new CouchDB(ctx.params.appId)
// TODO: need to get rid of pages here, they shouldn't be needed anymore
const { mainPage, unauthPage } = await getMainAndUnauthPage(db)
const userRoleId =
!ctx.user.role || !ctx.user.role._id
? BUILTIN_ROLE_IDS.PUBLIC
: ctx.user.role._id
const correctPage =
userRoleId === BUILTIN_ROLE_IDS.PUBLIC ? unauthPage : mainPage
const screens = (
await db.allDocs(
getScreenParams(correctPage._id, {
include_docs: true,
})
)
).rows.map(row => row.doc)
// TODO: need to handle access control here, limit screens to user role
const layouts = await getLayouts(db)
const userRoleId = getUserRoleId(ctx)
const accessController = new AccessController(ctx.params.appId)
const screens = await accessController.checkScreensAccess(
await getScreens(db),
userRoleId
)
ctx.body = {
page: correctPage,
screens: screens,
layouts,
screens,
libraries: ["@budibase/standard-components"],
}
}
@ -118,16 +129,19 @@ exports.fetchAppDefinition = async function(ctx) {
exports.fetchAppPackage = async function(ctx) {
const db = new CouchDB(ctx.params.appId)
const application = await db.get(ctx.params.appId)
const [layouts, screens] = await Promise.all([getLayouts(db), getScreens(db)])
const { mainPage, unauthPage } = await getMainAndUnauthPage(db)
for (let layout of layouts) {
layout._css = generateAssetCss([layout.props])
}
for (let screen of screens) {
screen._css = generateAssetCss([screen.props])
}
ctx.body = {
application,
pages: {
main: mainPage,
unauthenticated: unauthPage,
},
screens,
layouts,
}
await setBuilderToken(ctx, ctx.params.appId, application.version)
}
@ -200,27 +214,26 @@ const createEmptyAppPackage = async (ctx, app) => {
fs.mkdirpSync(newAppFolder)
const mainPage = cloneDeep(MAIN)
mainPage._id = generatePageID()
mainPage.title = app.name
let screensAndLayouts = []
for (let layout of BASE_LAYOUTS) {
const cloned = cloneDeep(layout)
cloned.title = app.name
screensAndLayouts.push(recurseMustache(cloned, app))
}
const unauthPage = cloneDeep(UNAUTHENTICATED)
unauthPage._id = generatePageID()
unauthPage.title = app.name
unauthPage.props._children[0].title = `Log in to ${app.name}`
const homeScreen = createHomeScreen(app)
homeScreen._id = generateScreenID()
screensAndLayouts.push(homeScreen)
const homeScreen = cloneDeep(HOME_SCREEN)
homeScreen._id = generateScreenID(mainPage._id)
await db.bulkDocs([mainPage, unauthPage, homeScreen])
await compileStaticAssetsForPage(app._id, "main", {
page: mainPage,
screens: [homeScreen],
})
await compileStaticAssetsForPage(app._id, "unauthenticated", {
page: unauthPage,
screens: [],
})
const loginScreen = createLoginScreen(app)
loginScreen._id = generateScreenID()
screensAndLayouts.push(loginScreen)
await db.bulkDocs(screensAndLayouts)
// at the end add CSS to all the structures
for (let asset of screensAndLayouts) {
asset._css = generateAssetCss([asset.props])
}
await compileStaticAssets(app._id, screensAndLayouts)
return newAppFolder
}

37
packages/server/src/api/controllers/deploy/aws.js
View file

@ -7,6 +7,8 @@ const { budibaseAppsDir } = require("../../../utilities/budibaseDir")
const PouchDB = require("../../../db")
const env = require("../../../environment")
const EXCLUDED_DIRECTORIES = ["css"]
/**
* Finalises the deployment, updating the quota for the user API key
* The verification process returns the levels to update to.
@ -136,25 +138,28 @@ exports.uploadAppAssets = async function({ appId, bucket, accountId }) {
const appAssetsPath = join(budibaseAppsDir(), appId, "public")
const appPages = fs.readdirSync(appAssetsPath)
let uploads = []
for (let page of appPages) {
// Upload HTML, CSS and JS for each page of the web app
walkDir(join(appAssetsPath, page), function(filePath) {
const appAssetUpload = prepareUploadForS3({
file: {
path: filePath,
name: [...filePath.split("/")].pop(),
},
s3Key: filePath.replace(appAssetsPath, `assets/${appId}`),
s3,
metadata: { accountId },
})
uploads.push(appAssetUpload)
// Upload HTML, CSS and JS of the web app
walkDir(appAssetsPath, function(filePath) {
const filePathParts = filePath.split("/")
const publicIndex = filePathParts.indexOf("public")
const directory = filePathParts[publicIndex + 1]
// don't include these top level directories
if (EXCLUDED_DIRECTORIES.indexOf(directory) !== -1) {
return
}
const appAssetUpload = prepareUploadForS3({
file: {
path: filePath,
name: filePathParts.pop(),
},
s3Key: filePath.replace(appAssetsPath, `assets/${appId}`),
s3,
metadata: { accountId },
})
}
uploads.push(appAssetUpload)
})
// Upload file attachments
const db = new PouchDB(appId)

43
packages/server/src/api/controllers/layout.js Normal file
View file

@ -0,0 +1,43 @@
const { EMPTY_LAYOUT } = require("../../constants/layouts")
const CouchDB = require("../../db")
const { generateLayoutID, getScreenParams } = require("../../db/utils")
exports.save = async function(ctx) {
const db = new CouchDB(ctx.user.appId)
let layout = ctx.request.body
if (!layout.props) {
layout = {
...layout,
...EMPTY_LAYOUT,
}
}
layout._id = layout._id || generateLayoutID()
const response = await db.put(layout)
layout._rev = response.rev
ctx.body = layout
ctx.status = 200
}
exports.destroy = async function(ctx) {
const db = new CouchDB(ctx.user.appId)
const layoutId = ctx.params.layoutId,
layoutRev = ctx.params.layoutRev
const layoutsUsedByScreens = (
await db.allDocs(
getScreenParams(null, {
include_docs: true,
})
)
).rows.map(element => element.doc.layoutId)
if (layoutsUsedByScreens.includes(layoutId)) {
ctx.throw(400, "Cannot delete a base layout")
}
await db.remove(layoutId, layoutRev)
ctx.message = "Layout deleted successfully"
ctx.status = 200
}

19
packages/server/src/api/controllers/page.js
View file

@ -1,19 +0,0 @@
const CouchDB = require("../../db/client")
const { generatePageID } = require("../../db/utils")
const compileStaticAssetsForPage = require("../../utilities/builder/compileStaticAssetsForPage")
exports.save = async function(ctx) {
const db = new CouchDB(ctx.user.appId)
const appPackage = ctx.request.body
const page = await db.get(ctx.params.pageId)
await compileStaticAssetsForPage(ctx.user.appId, page.name, ctx.request.body)
// remove special doc props which couch will complain about
delete appPackage.page._css
delete appPackage.page._screens
appPackage.page._id = appPackage.page._id || generatePageID()
ctx.body = await db.put(appPackage.page)
ctx.status = 200
}

35
packages/server/src/api/controllers/screen.js
View file

@ -1,6 +1,8 @@
const CouchDB = require("../../db")
const { getScreenParams, generateScreenID } = require("../../db/utils")
const { AccessController } = require("../../utilities/security/roles")
const { generateAssetCss } = require("../../utilities/builder/generateCss")
const compileStaticAssets = require("../../utilities/builder/compileStaticAssets")
exports.fetch = async ctx => {
const appId = ctx.user.appId
@ -20,40 +22,31 @@ exports.fetch = async ctx => {
)
}
exports.find = async ctx => {
const appId = ctx.user.appId
const db = new CouchDB(appId)
const screens = await db.allDocs(
getScreenParams(ctx.params.pageId, {
include_docs: true,
})
)
ctx.body = await new AccessController(appId).checkScreensAccess(
screens,
ctx.user.role._id
)
}
exports.save = async ctx => {
const appId = ctx.user.appId
const db = new CouchDB(appId)
const screen = ctx.request.body
let screen = ctx.request.body
if (!screen._id) {
screen._id = generateScreenID(ctx.params.pageId)
screen._id = generateScreenID()
}
delete screen._css
const response = await db.put(screen)
// update CSS so client doesn't need to make a call directly after
screen._css = generateAssetCss([screen.props])
await compileStaticAssets(appId, screen)
ctx.message = `Screen ${screen.name} saved.`
ctx.body = response
ctx.body = {
...screen,
_id: response.id,
_rev: response.rev,
}
}
exports.destroy = async ctx => {
const db = new CouchDB(ctx.user.appId)
await db.remove(ctx.params.screenId, ctx.params.revId)
await db.remove(ctx.params.screenId, ctx.params.screenRev)
ctx.message = "Screen deleted successfully"
ctx.status = 200
}

24
packages/server/src/api/controllers/static/index.js
View file

@ -15,12 +15,20 @@ const {
const CouchDB = require("../../../db")
const setBuilderToken = require("../../../utilities/builder/setBuilderToken")
const fileProcessor = require("../../../utilities/fileProcessor")
const { AuthTypes } = require("../../../constants")
const env = require("../../../environment")
const { generateAssetCss } = require("../../../utilities/builder/generateCss")
const compileStaticAssets = require("../../../utilities/builder/compileStaticAssets")
// this was the version before we started versioning the component library
const COMP_LIB_BASE_APP_VERSION = "0.2.5"
exports.generateCss = async function(ctx) {
const structure = ctx.request.body
structure._css = generateAssetCss([structure.props])
await compileStaticAssets(ctx.appId, structure)
ctx.body = { css: structure._css }
}
exports.serveBuilder = async function(ctx) {
let builderPath = resolve(__dirname, "../../../../builder")
if (ctx.file === "index.html") {
@ -142,15 +150,11 @@ exports.performLocalFileProcessing = async function(ctx) {
exports.serveApp = async function(ctx) {
const App = require("./templates/BudibaseApp.svelte").default
const db = new CouchDB(ctx.params.appId)
const appInfo = await db.get(ctx.params.appId)
const { head, html, css } = App.render({
title: appInfo.name,
pageName:
ctx.auth.authenticated === AuthTypes.APP ? "main" : "unauthenticated",
production: env.CLOUD,
appId: ctx.params.appId,
})
@ -185,15 +189,7 @@ exports.serveAttachment = async function(ctx) {
exports.serveAppAsset = async function(ctx) {
// default to homedir
const mainOrAuth =
ctx.auth.authenticated === AuthTypes.APP ? "main" : "unauthenticated"
const appPath = resolve(
budibaseAppsDir(),
ctx.user.appId,
"public",
mainOrAuth
)
const appPath = resolve(budibaseAppsDir(), ctx.user.appId, "public")
await send(ctx, ctx.file, { root: ctx.devPath || appPath })
}

5
packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
View file

@ -3,14 +3,13 @@
export let favicon = ""
export let appId
export let pageName = ""
export let production
export const PRODUCTION_ASSETS_URL = `https://${appId}.app.budi.live`
function publicPath(path) {
if (production) {
return `${PRODUCTION_ASSETS_URL}/assets/${appId}/${pageName}/${path}`
return `${PRODUCTION_ASSETS_URL}/assets/${appId}/${path}`
}
return `/assets/${path}`
@ -49,8 +48,6 @@
</svelte:head>
<body id="app">
<script src={publicPath('clientFrontendDefinition.js')}>
</script>
<script src={publicPath('budibase-client.js')}>
</script>
<script>

4
packages/server/src/api/routes/index.js
View file

@ -1,5 +1,5 @@
const authRoutes = require("./auth")
const pageRoutes = require("./pages")
const layoutRoutes = require("./layout")
const screenRoutes = require("./screen")
const userRoutes = require("./user")
const applicationRoutes = require("./application")
@ -20,7 +20,7 @@ const permissionRoutes = require("./permission")
exports.mainRoutes = [
deployRoutes,
pageRoutes,
layoutRoutes,
screenRoutes,
userRoutes,
applicationRoutes,

16
packages/server/src/api/routes/layout.js Normal file
View file

@ -0,0 +1,16 @@
const Router = require("@koa/router")
const authorized = require("../../middleware/authorized")
const { BUILDER } = require("../../utilities/security/permissions")
const controller = require("../controllers/layout")
const router = Router()
router
.post("/api/layouts", authorized(BUILDER), controller.save)
.delete(
"/api/layouts/:layoutId/:layoutRev",
authorized(BUILDER),
controller.destroy
)
module.exports = router

10
packages/server/src/api/routes/pages.js
View file

@ -1,10 +0,0 @@
const Router = require("@koa/router")
const authorized = require("../../middleware/authorized")
const { BUILDER } = require("../../utilities/security/permissions")
const controller = require("../controllers/page")
const router = Router()
router.post("/api/pages/:pageId", authorized(BUILDER), controller.save)
module.exports = router

6
packages/server/src/api/routes/screen.js
View file

@ -24,21 +24,21 @@ function generateSaveValidation() {
_styles: Joi.object().required(),
type: Joi.string().optional(),
table: Joi.string().optional(),
layoutId: Joi.string().optional(),
}).required().unknown(true),
}).unknown(true))
}
router
.get("/api/screens", authorized(BUILDER), controller.fetch)
.get("/api/screens/:pageId", authorized(BUILDER), controller.find)
.post(
"/api/screens/:pageId",
"/api/screens",
authorized(BUILDER),
generateSaveValidation(),
controller.save
)
.delete(
"/api/screens/:screenId/:revId",
"/api/screens/:screenId/:screenRev",
authorized(BUILDER),
controller.destroy
)

22
packages/server/src/api/routes/static.js
View file

@ -5,6 +5,22 @@ const env = require("../../environment")
const authorized = require("../../middleware/authorized")
const { BUILDER } = require("../../utilities/security/permissions")
const usage = require("../../middleware/usageQuota")
const joiValidator = require("../../middleware/joi-validator")
const Joi = require("joi")
function generateCssValidator() {
return joiValidator.body(
Joi.object({
_id: Joi.string().required(),
_rev: Joi.string().required(),
props: Joi.object()
.required()
.unknown(true),
})
.required()
.unknown(true)
)
}
const router = Router()
@ -24,6 +40,12 @@ if (env.NODE_ENV !== "production") {
}
router
.post(
"/api/css/generate",
authorized(BUILDER),
generateCssValidator(),
controller.generateCss
)
.post(
"/api/attachments/process",
authorized(BUILDER),

1
packages/server/src/api/routes/tests/automation.spec.js
View file

@ -17,7 +17,6 @@ const AUTOMATION_ID = generateAutomationID()
const TEST_AUTOMATION = {
_id: AUTOMATION_ID,
name: "My Automation",
pageId: "123123123",
screenId: "kasdkfldsafkl",
live: true,
uiTree: {

46
packages/server/src/api/routes/tests/generateCss.spec.js Normal file
View file

@ -0,0 +1,46 @@
const { generateAssetCss, generateCss } = require("../../../utilities/builder/generateCss")
describe("generate_css", () => {
it("Check how array styles are output", () => {
expect(generateCss({ margin: ["0", "10", "0", "15"] })).toBe("margin: 0 10 0 15;")
})
it("Check handling of an array with empty string values", () => {
expect(generateCss({ padding: ["", "", "", ""] })).toBe("")
})
it("Check handling of an empty array", () => {
expect(generateCss({ margin: [] })).toBe("")
})
it("Check handling of valid font property", () => {
expect(generateCss({ "font-size": "10px" })).toBe("font-size: 10px;")
})
})
describe("generate_screen_css", () => {
const normalComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: { "font-size": "16px" }, hover: {}, active: {}, selected: {} } }
it("Test generation of normal css styles", () => {
expect(generateAssetCss([normalComponent])).toBe(".header-123-456 {\nfont-size: 16px;\n}")
})
const hoverComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {"font-size": "16px"}, active: {}, selected: {} } }
it("Test generation of hover css styles", () => {
expect(generateAssetCss([hoverComponent])).toBe(".header-123-456:hover {\nfont-size: 16px;\n}")
})
const selectedComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: { "font-size": "16px" } } }
it("Test generation of selection css styles", () => {
expect(generateAssetCss([selectedComponent])).toBe(".header-123-456::selection {\nfont-size: 16px;\n}")
})
const emptyComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: {} } }
it("Testing handling of empty component styles", () => {
expect(generateAssetCss([emptyComponent])).toBe("")
})
})

36
packages/server/src/automations/automationUtils.js
View file

@ -1,41 +1,5 @@
const CouchDB = require("../db")
/**
* When running mustache statements to execute on the context of the automation it possible user's may input mustache
* in a few different forms, some of which are invalid but are logically valid. An example of this would be the mustache
* statement "{{steps[0].revision}}" here it is obvious the user is attempting to access an array or object using array
* like operators. These are not supported by Mustache and therefore the statement will fail. This function will clean up
* the mustache statement so it instead reads as "{{steps.0.revision}}" which is valid and will work. It may also be expanded
* to include any other mustache statement cleanup that has been deemed necessary for the system.
*
* @param {string} string The string which *may* contain mustache statements, it is OK if it does not contain any.
* @returns {string} The string that was input with cleaned up mustache statements as required.
*/
module.exports.cleanMustache = string => {
let charToReplace = {
"[": ".",
"]": "",
}
let regex = new RegExp(/{{[^}}]*}}/g)
let matches = string.match(regex)
if (matches == null) {
return string
}
for (let match of matches) {
let baseIdx = string.indexOf(match)
for (let key of Object.keys(charToReplace)) {
let idxChar = match.indexOf(key)
if (idxChar !== -1) {
string =
string.slice(baseIdx, baseIdx + idxChar) +
charToReplace[key] +
string.slice(baseIdx + idxChar + 1)
}
}
}
return string
}
/**
* When values are input to the system generally they will be of type string as this is required for mustache. This can
* generate some odd scenarios as the Schema of the automation requires a number but the builder might supply a string

17
packages/server/src/automations/thread.js
View file

@ -3,6 +3,7 @@ const actions = require("./actions")
const logic = require("./logic")
const automationUtils = require("./automationUtils")
const AutomationEmitter = require("../events/AutomationEmitter")
const { recurseMustache } = require("../utilities/mustache")
handlebars.registerHelper("object", value => {
return new handlebars.SafeString(JSON.stringify(value))
@ -10,22 +11,6 @@ handlebars.registerHelper("object", value => {
const FILTER_STEP_ID = logic.BUILTIN_DEFINITIONS.FILTER.stepId
function recurseMustache(inputs, context) {
for (let key of Object.keys(inputs)) {
let val = inputs[key]
if (typeof val === "string") {
val = automationUtils.cleanMustache(inputs[key])
const template = handlebars.compile(val)
inputs[key] = template(context)
}
// this covers objects and arrays
else if (typeof val === "object") {
inputs[key] = recurseMustache(inputs[key], context)
}
}
return inputs
}
/**
* The automation orchestrator is a class responsible for executing automations.
* It handles the context of the automation and makes sure each step gets the correct

238
packages/server/src/constants/layouts.js Normal file
View file

@ -0,0 +1,238 @@
const BASE_LAYOUT_PROP_IDS = {
PRIVATE: "layout_private_master",
PUBLIC: "layout_public_master",
}
const EMPTY_LAYOUT = {
componentLibraries: ["@budibase/standard-components"],
title: "{{ name }}",
favicon: "./_shared/favicon.png",
stylesheets: [],
props: {
_id: "30b8822a-d07b-49f4-9531-551e37c6899b",
_component: "@budibase/standard-components/container",
_children: [
{
_id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
_component: "##builtin/screenslot",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_children: [],
},
],
type: "div",
_styles: {
active: {},
hover: {},
normal: {},
selected: {},
},
className: "",
onLoad: [],
},
}
const BASE_LAYOUTS = [
{
_id: BASE_LAYOUT_PROP_IDS.PRIVATE,
componentLibraries: ["@budibase/standard-components"],
title: "{{ name }}",
favicon: "./_shared/favicon.png",
stylesheets: [],
name: "Top Navigation Layout",
props: {
_id: "4f569166-a4f3-47ea-a09e-6d218c75586f",
_component: "@budibase/standard-components/container",
_children: [
{
_id: "c74f07266980c4b6eafc33e2a6caa783d",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
display: "flex",
"flex-direction": "row",
"justify-content": "flex-start",
"align-items": "flex-start",
background: "#fff",
width: "100%",
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
},
hover: {},
active: {},
selected: {},
},
className: "",
onLoad: [],
type: "div",
_instanceName: "Header",
_children: [
{
_id: "49e0e519-9e5e-4127-885a-ee6a0a49e2c1",
_component: "@budibase/standard-components/navigation",
_styles: {
normal: {
"max-width": "1400px",
"margin-left": "auto",
"margin-right": "auto",
padding: "20px",
color: "#757575",
"font-weight": "400",
"font-size": "16px",
flex: "1 1 auto",
},
hover: {},
active: {},
selected: {},
},
logoUrl:
"https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
title: "",
backgroundColor: "",
color: "",
borderWidth: "",
borderColor: "",
borderStyle: "",
_instanceName: "Navigation",
_children: [
{
_id: "48b35328-4c91-4343-a6a3-1a1fd77b3386",
_component: "@budibase/standard-components/link",
_styles: {
normal: {
"font-family": "Inter",
"font-weight": "500",
color: "#000000",
"text-decoration-line": "none",
"font-size": "16px",
},
hover: {
color: "#4285f4",
},
active: {},
selected: {},
},
url: "/",
openInNewTab: false,
text: "Home",
color: "",
hoverColor: "",
underline: false,
fontSize: "",
fontFamily: "initial",
_instanceName: "Home Link",
_children: [],
},
],
},
],
},
{
_id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
_component: "##builtin/screenslot",
_styles: {
normal: {
flex: "1 1 auto",
display: "flex",
"flex-direction": "column",
"justify-content": "flex-start",
"align-items": "stretch",
"max-width": "100%",
"margin-left": "20px",
"margin-right": "20px",
width: "1400px",
padding: "20px",
},
hover: {},
active: {},
selected: {},
},
_children: [],
},
],
type: "div",
_styles: {
active: {},
hover: {},
normal: {
display: "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "flex-start",
"margin-right": "auto",
"margin-left": "auto",
"min-height": "100%",
"background-image":
"linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
},
selected: {},
},
className: "",
onLoad: [],
},
},
{
_id: BASE_LAYOUT_PROP_IDS.PUBLIC,
componentLibraries: ["@budibase/standard-components"],
title: "{{ name }}",
favicon: "./_shared/favicon.png",
stylesheets: [],
name: "Empty Layout",
props: {
_id: "3723ffa1-f9e0-4c05-8013-98195c788ed6",
_component: "@budibase/standard-components/container",
_children: [
{
_id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
_component: "##builtin/screenslot",
_styles: {
normal: {
flex: "1 1 auto",
display: "flex",
"flex-direction": "column",
"justify-content": "flex-start",
"align-items": "stretch",
"max-width": "100%",
"margin-left": "20px",
"margin-right": "20px",
width: "1400px",
padding: "20px",
},
hover: {},
active: {},
selected: {},
},
_children: [],
},
],
type: "div",
_styles: {
active: {},
hover: {},
normal: {
display: "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"margin-right": "auto",
"margin-left": "auto",
"min-height": "100%",
"background-image":
"linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
},
selected: {},
},
className: "",
onLoad: [],
},
},
]
module.exports = {
BASE_LAYOUTS,
BASE_LAYOUT_PROP_IDS,
EMPTY_LAYOUT,
}

198
packages/server/src/constants/pages.js
View file

@ -1,198 +0,0 @@
const PageTypes = {
MAIN: "main",
UNAUTHENTICATED: "unauthenticated",
}
const MAIN = {
componentLibraries: ["@budibase/standard-components"],
title: "{{ name }}",
favicon: "./_shared/favicon.png",
stylesheets: [],
name: PageTypes.MAIN,
props: {
_id: "private-master-root",
_component: "@budibase/standard-components/container",
_children: [
{
_id: "c74f07266980c4b6eafc33e2a6caa783d",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
display: "flex",
"flex-direction": "row",
"justify-content": "flex-start",
"align-items": "flex-start",
background: "#fff",
width: "100%",
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
},
hover: {},
active: {},
selected: {},
},
_code: "",
type: "div",
_appId: "inst_app_80b_f158d4057d2c4bedb0042d42fda8abaf",
_instanceName: "Header",
_children: [
{
_id: "49e0e519-9e5e-4127-885a-ee6a0a49e2c1",
_component: "@budibase/standard-components/navigation",
_styles: {
normal: {
"max-width": "1400px",
"margin-left": "auto",
"margin-right": "auto",
padding: "20px",
color: "#757575",
"font-weight": "400",
"font-size": "16px",
flex: "1 1 auto",
},
hover: {},
active: {},
selected: {},
},
_code: "",
logoUrl:
"https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
_appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
_instanceName: "Navigation",
_children: [
{
_id: "48b35328-4c91-4343-a6a3-1a1fd77b3386",
_component: "@budibase/standard-components/link",
_styles: {
normal: {
"font-family": "Inter",
"font-weight": "500",
color: "#000000",
"text-decoration-line": "none",
"font-size": "16px",
},
hover: {
color: "#4285f4",
},
active: {},
selected: {},
},
_code: "",
url: "/",
openInNewTab: false,
text: "Home",
_appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
_instanceName: "Home Link",
_children: [],
},
],
},
],
},
{
_id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
_component: "##builtin/screenslot",
_styles: {
normal: {
flex: "1 1 auto",
display: "flex",
"flex-direction": "column",
"justify-content": "flex-start",
"align-items": "stretch",
"max-width": "100%",
"margin-left": "20px",
"margin-right": "20px",
width: "1400px",
padding: "20px",
},
hover: {},
active: {},
selected: {},
},
_code: "",
_children: [],
},
],
type: "div",
_styles: {
active: {},
hover: {},
normal: {
display: "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "flex-start",
"margin-right": "auto",
"margin-left": "auto",
"min-height": "100%",
"background-image":
"linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
},
selected: {},
},
_code: "",
},
}
const UNAUTHENTICATED = {
componentLibraries: ["@budibase/standard-components"],
title: "{{ name }}",
favicon: "./_shared/favicon.png",
stylesheets: [],
name: PageTypes.UNAUTHENTICATED,
props: {
_id: "public-master-root",
_component: "@budibase/standard-components/container",
_children: [
{
_id: "686c252d-dbf2-4e28-9078-414ba4719759",
_component: "@budibase/standard-components/login",
_styles: {
normal: {
padding: "64px",
background: "rgba(255, 255, 255, 0.4)",
"border-radius": "0.5rem",
"margin-top": "0px",
margin: "0px",
"line-height": "1",
"box-shadow":
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
"font-size": "16px",
"font-family": "Inter",
flex: "0 1 auto",
transform: "0",
},
hover: {},
active: {},
selected: {},
},
_code: "",
_instanceName: "Login",
_children: [],
title: "Log in to {{ name }}",
buttonText: "Log In",
logo:
"https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
},
],
type: "div",
_styles: {
active: {},
hover: {},
normal: {
display: "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"margin-right": "auto",
"margin-left": "auto",
"min-height": "100%",
"background-image":
"linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
},
selected: {},
},
_code: "",
},
}
module.exports = { MAIN, UNAUTHENTICATED, PageTypes }

72
packages/server/src/constants/screens.js
View file

@ -1,8 +1,10 @@
const { BUILTIN_ROLE_IDS } = require("../utilities/security/roles")
const { BASE_LAYOUT_PROP_IDS } = require("./layouts")
exports.HOME_SCREEN = {
exports.createHomeScreen = () => ({
description: "",
url: "",
layoutId: BASE_LAYOUT_PROP_IDS.PRIVATE,
props: {
_id: "d834fea2-1b3e-4320-ab34-f9009f5ecc59",
_component: "@budibase/standard-components/container",
@ -18,7 +20,6 @@ exports.HOME_SCREEN = {
active: {},
selected: {},
},
_code: "",
type: "div",
_children: [
{
@ -32,10 +33,8 @@ exports.HOME_SCREEN = {
active: {},
selected: {},
},
_code: "",
text: "Welcome to your Budibase App 👋",
type: "h2",
_appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
_instanceName: "Heading",
_children: [],
},
@ -57,9 +56,7 @@ exports.HOME_SCREEN = {
active: {},
selected: {},
},
_code: "",
type: "div",
_appId: "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
_instanceName: "Video Container",
_children: [
{
@ -83,10 +80,8 @@ exports.HOME_SCREEN = {
active: {},
selected: {},
},
_code: "",
embed:
'<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
_appId: "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
_instanceName: "Rick Astley Video",
_children: [],
},
@ -99,5 +94,62 @@ exports.HOME_SCREEN = {
route: "/",
roleId: BUILTIN_ROLE_IDS.BASIC,
},
name: "d834fea2-1b3e-4320-ab34-f9009f5ecc59",
}
name: "home-screen",
})
exports.createLoginScreen = app => ({
description: "",
url: "",
layoutId: BASE_LAYOUT_PROP_IDS.PUBLIC,
props: {
_instanceName: "LoginScreenContainer",
_id: "5beb4c7b-3c8b-49b2-b8b3-d447dc76dda7",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
flex: "1 1 auto",
display: "flex",
"flex-direction": "column",
"justify-content": "center",
"align-items": "center",
},
hover: {},
active: {},
selected: {},
},
type: "div",
_children: [
{
_id: "781e497e-2e7c-11eb-adc1-0242ac120002",
_component: "@budibase/standard-components/login",
_styles: {
normal: {
padding: "64px",
background: "rgba(255, 255, 255, 0.4)",
"border-radius": "0.5rem",
"margin-top": "0px",
"box-shadow":
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
"font-size": "16px",
"font-family": "Inter",
flex: "0 1 auto",
},
hover: {},
active: {},
selected: {},
},
logo:
"https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
title: `Log in to ${app.name}`,
buttonText: "Log In",
_children: [],
_instanceName: "Login",
},
],
},
routing: {
route: "/",
roleId: BUILTIN_ROLE_IDS.PUBLIC,
},
name: "login-screen",
})

62
packages/server/src/db/utils.js
View file

@ -13,7 +13,7 @@ const DocumentTypes = {
ROLE: "role",
WEBHOOK: "wh",
INSTANCE: "inst",
PAGE: "page",
LAYOUT: "layout",
SCREEN: "screen",
}
@ -179,6 +179,36 @@ exports.getRoleParams = (roleId = null, otherProps = {}) => {
return getDocParams(DocumentTypes.ROLE, roleId, otherProps)
}
/**
* Generates a new layout ID.
* @returns {string} The new layout ID which the layout doc can be stored under.
*/
exports.generateLayoutID = id => {
return `${DocumentTypes.LAYOUT}${SEPARATOR}${id || newid()}`
}
/**
* Gets parameters for retrieving layout, this is a utility function for the getDocParams function.
*/
exports.getLayoutParams = (layoutId = null, otherProps = {}) => {
return getDocParams(DocumentTypes.LAYOUT, layoutId, otherProps)
}
/**
* Generates a new screen ID.
* @returns {string} The new screen ID which the screen doc can be stored under.
*/
exports.generateScreenID = () => {
return `${DocumentTypes.SCREEN}${SEPARATOR}${newid()}`
}
/**
* Gets parameters for retrieving screens, this is a utility function for the getDocParams function.
*/
exports.getScreenParams = (screenId = null, otherProps = {}) => {
return getDocParams(DocumentTypes.SCREEN, screenId, otherProps)
}
/**
* Generates a new webhook ID.
* @returns {string} The new webhook ID which the webhook doc can be stored under.
@ -187,36 +217,6 @@ exports.generateWebhookID = () => {
return `${DocumentTypes.WEBHOOK}${SEPARATOR}${newid()}`
}
/**
* Generates a new page ID.
* @returns {string} The new page ID which the page doc can be stored under.
*/
exports.generatePageID = () => {
return `${DocumentTypes.PAGE}${SEPARATOR}${newid()}`
}
/**
* Gets parameters for retrieving pages, this is a utility function for the getDocParams function.
*/
exports.getPageParams = (pageId = null, otherProps = {}) => {
return getDocParams(DocumentTypes.PAGE, pageId, otherProps)
}
/**
* Generates a new screen ID.
* @returns {string} The new screen ID which the screen doc can be stored under.
*/
exports.generateScreenID = pageId => {
return `${DocumentTypes.SCREEN}${SEPARATOR}${pageId}${SEPARATOR}${newid()}`
}
/**
* Gets parameters for retrieving screens for a particular page, this is a utility function for the getDocParams function.
*/
exports.getScreenParams = (pageId = null, otherProps = {}) => {
return getDocParams(DocumentTypes.SCREEN, pageId, otherProps)
}
/**
* Gets parameters for retrieving a webhook, this is a utility function for the getDocParams function.
*/

83
packages/server/src/utilities/builder/compileStaticAssets.js Normal file
View file

@ -0,0 +1,83 @@
const {
ensureDir,
constants,
copyFile,
writeFile,
readdir,
readFile,
existsSync,
} = require("fs-extra")
const { join } = require("../centralPath")
const { budibaseAppsDir } = require("../budibaseDir")
const CSS_DIRECTORY = "css"
/**
* Compile all the non-db static web assets that are required for the running of
* a budibase application. This includes CSS, the JSON structure of the DOM and
* the client library, a script responsible for reading the JSON structure
* and rendering the application.
* @param {string} appId id of the application we want to compile static assets for
* @param {array|object} assets a list of screens or screen layouts for which the CSS should be extracted and stored.
*/
module.exports = async (appId, assets) => {
const publicPath = join(budibaseAppsDir(), appId, "public")
await ensureDir(publicPath)
for (let asset of Array.isArray(assets) ? assets : [assets]) {
await buildCssBundle(publicPath, asset)
await copyClientLib(publicPath)
// remove props that shouldn't be present when written to DB
if (asset._css) {
delete asset._css
}
}
return assets
}
/**
* Reads the _css property of all screens and the screen layouts, and creates a singular CSS
* bundle for the app at <appId>/public/bundle.css
* @param {String} publicPath - path to the public assets directory of the budibase application
* @param {Object} asset a single screen or screen layout which is being updated
*/
const buildCssBundle = async (publicPath, asset) => {
const cssPath = join(publicPath, CSS_DIRECTORY)
let cssString = ""
// create a singular CSS file for this asset
const assetCss = asset._css ? asset._css.trim() : ""
if (assetCss.length !== 0) {
await ensureDir(cssPath)
await writeFile(join(cssPath, asset._id), assetCss)
}
// bundle up all the CSS in the directory into one top level CSS file
if (existsSync(cssPath)) {
const cssFiles = await readdir(cssPath)
for (let filename of cssFiles) {
const css = await readFile(join(cssPath, filename))
cssString += css
}
}
await writeFile(join(publicPath, "bundle.css"), cssString)
}
/**
* Copy the budibase client library and sourcemap from NPM to <appId>/public/.
* The client library is then served as a static asset when the budibase application
* is running in preview or prod
* @param {String} publicPath - path to write the client library to
*/
const copyClientLib = async publicPath => {
const sourcepath = require.resolve("@budibase/client")
const destPath = join(publicPath, "budibase-client.js")
await copyFile(sourcepath, destPath, constants.COPYFILE_FICLONE)
await copyFile(
sourcepath + ".map",
destPath + ".map",
constants.COPYFILE_FICLONE
)
}

102
packages/server/src/utilities/builder/compileStaticAssetsForPage.js
View file

@ -1,102 +0,0 @@
const { ensureDir, constants, copyFile, writeFile } = require("fs-extra")
const { join } = require("../centralPath")
const { budibaseAppsDir } = require("../budibaseDir")
/**
* Compile all the non-db static web assets that are required for the running of
* a budibase application. This includes CSS, the JSON structure of the DOM and
* the client library, a script responsible for reading the JSON structure
* and rendering the application.
* @param {} appId - id of the application we want to compile static assets for
* @param {*} pageName - name of the page that the assets will be served for
* @param {*} pkg - app package information/metadata
*/
module.exports = async (appId, pageName, pkg) => {
const pagePath = join(budibaseAppsDir(), appId, "public", pageName)
pkg.screens = pkg.screens || []
await ensureDir(pagePath)
await buildPageCssBundle(pagePath, pkg)
await buildFrontendAppDefinition(pagePath, pkg)
await copyClientLib(pagePath)
}
/**
* Reads the _css property of a page and its screens, and creates a singular CSS
* bundle for the page at <appId>/public/<pageName>/bundle.css
* @param {String} publicPagePath - path to the public assets directory of the budibase application
* @param {Object} pkg - app package information
* @param {"main" | "unauthenticated"} pageName - the pagename of the page we are compiling CSS for.
*/
const buildPageCssBundle = async (publicPagePath, pkg) => {
let cssString = ""
for (let screen of pkg.screens || []) {
if (!screen._css) continue
if (screen._css.trim().length === 0) {
delete screen._css
continue
}
cssString += screen._css
}
if (pkg.page._css) cssString += pkg.page._css
writeFile(join(publicPagePath, "bundle.css"), cssString)
}
/**
* Copy the budibase client library and sourcemap from NPM to <appId>/public/<pageName>.
* The client library is then served as a static asset when the budibase application
* is running in preview or prod
* @param {String} pagePath - path to write the client library to
*/
const copyClientLib = async pagePath => {
const sourcepath = require.resolve("@budibase/client")
const destPath = join(pagePath, "budibase-client.js")
await copyFile(sourcepath, destPath, constants.COPYFILE_FICLONE)
await copyFile(
sourcepath + ".map",
destPath + ".map",
constants.COPYFILE_FICLONE
)
}
/**
* Build the frontend definition for a budibase application. This includes all page and screen information,
* and is injected into the budibase client library to tell it how to start constructing
* the DOM from components defined in the frontendDefinition.
* @param {String} pagePath - path to the public folder of the page where the definition will be written
* @param {Object} pkg - app package information from which the frontendDefinition will be built.
*/
const buildFrontendAppDefinition = async (pagePath, pkg) => {
const filename = join(pagePath, "clientFrontendDefinition.js")
// Delete CSS code from the page and screens so it's not injected
delete pkg.page._css
for (let screen of pkg.screens) {
if (screen._css) {
delete pkg.page._css
}
}
const clientUiDefinition = JSON.stringify({
page: pkg.page,
screens: pkg.screens,
libraries: ["@budibase/standard-components"],
})
await writeFile(
filename,
`
window['##BUDIBASE_FRONTEND_DEFINITION##'] = ${clientUiDefinition};
`
)
}

12
packages/builder/src/builderStore/generate_css.js → packages/server/src/utilities/builder/generateCss.js
View file

@ -1,21 +1,21 @@
export const generate_screen_css = component_arr => {
exports.generateAssetCss = component_arr => {
let styles = ""
for (const { _styles, _id, _children, _component } of component_arr) {
let [componentName] = _component.match(/[a-z]*$/)
Object.keys(_styles).forEach(selector => {
const cssString = generate_css(_styles[selector])
const cssString = exports.generateCss(_styles[selector])
if (cssString) {
styles += apply_class(_id, componentName, cssString, selector)
styles += exports.applyClass(_id, componentName, cssString, selector)
}
})
if (_children && _children.length) {
styles += generate_screen_css(_children) + "\n"
styles += exports.generateAssetCss(_children) + "\n"
}
}
return styles.trim()
}
export const generate_css = style => {
exports.generateCss = style => {
let cssString = Object.entries(style).reduce((str, [key, value]) => {
if (typeof value === "string") {
if (value) {
@ -33,7 +33,7 @@ export const generate_css = style => {
return (cssString || "").trim()
}
export const apply_class = (id, name = "element", styles, selector) => {
exports.applyClass = (id, name = "element", styles, selector) => {
if (selector === "normal") {
return `.${name}-${id} {\n${styles}\n}`
} else {

73
packages/server/src/utilities/mustache.js Normal file
View file

@ -0,0 +1,73 @@
const handlebars = require("handlebars")
handlebars.registerHelper("object", value => {
return new handlebars.SafeString(JSON.stringify(value))
})
/**
* When running mustache statements to execute on the context of the automation it possible user's may input mustache
* in a few different forms, some of which are invalid but are logically valid. An example of this would be the mustache
* statement "{{steps[0].revision}}" here it is obvious the user is attempting to access an array or object using array
* like operators. These are not supported by Mustache and therefore the statement will fail. This function will clean up
* the mustache statement so it instead reads as "{{steps.0.revision}}" which is valid and will work. It may also be expanded
* to include any other mustache statement cleanup that has been deemed necessary for the system.
*
* @param {string} string The string which *may* contain mustache statements, it is OK if it does not contain any.
* @returns {string} The string that was input with cleaned up mustache statements as required.
*/
function cleanMustache(string) {
let charToReplace = {
"[": ".",
"]": "",
}
let regex = new RegExp(/{{[^}}]*}}/g)
let matches = string.match(regex)
if (matches == null) {
return string
}
for (let match of matches) {
let baseIdx = string.indexOf(match)
for (let key of Object.keys(charToReplace)) {
let idxChar = match.indexOf(key)
if (idxChar !== -1) {
string =
string.slice(baseIdx, baseIdx + idxChar) +
charToReplace[key] +
string.slice(baseIdx + idxChar + 1)
}
}
}
return string
}
/**
* Given an input object this will recurse through all props to try and update
* any handlebars/mustache statements within.
* @param {object|array} inputs The input structure which is to be recursed, it is important to note that
* if the structure contains any cycles then this will fail.
* @param {object} context The context that handlebars should fill data from.
* @returns {object|array} The structure input, as fully updated as possible.
*/
function recurseMustache(inputs, context) {
// JSON stringify will fail if there are any cycles, stops infinite recursion
try {
JSON.stringify(inputs)
} catch (err) {
throw "Unable to process inputs to JSON, cannot recurse"
}
for (let key of Object.keys(inputs)) {
let val = inputs[key]
if (typeof val === "string") {
val = cleanMustache(inputs[key])
const template = handlebars.compile(val)
inputs[key] = template(context)
}
// this covers objects and arrays
else if (typeof val === "object") {
inputs[key] = recurseMustache(inputs[key], context)
}
}
return inputs
}
exports.recurseMustache = recurseMustache