From 755349cc815b6391411ef70151b212b1f21c5782 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Wed, 14 Oct 2020 20:48:24 +0100 Subject: [PATCH 1/4] sort screens alphabetically --- .../userInterface/ComponentsHierarchy.svelte | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index 74ec5694cd..8393299b12 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -11,6 +11,9 @@ export let screens = [] + $: sortedScreens = screens.sort( + (s1, s2) => s1.props._instanceName > s2.props._instanceName + ) /* Using a store here seems odd.... have a look in the code file to find out why. @@ -24,12 +27,15 @@ const joinPath = join("/") const normalizedName = name => - pipe(name, [ - trimCharsStart("./"), - trimCharsStart("~/"), - trimCharsStart("../"), - trimChars(" "), - ]) + pipe( + name, + [ + trimCharsStart("./"), + trimCharsStart("~/"), + trimCharsStart("../"), + trimChars(" "), + ] + ) const changeScreen = screen => { store.setCurrentScreen(screen.props._instanceName) @@ -38,7 +44,7 @@
- {#each screens as screen} + {#each sortedScreens as screen}
Date: Wed, 14 Oct 2020 20:54:07 +0100 Subject: [PATCH 2/4] app screen routing - routes are no case insensitive --- packages/client/src/render/screenRouter.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js index fb84248d94..901a05a2b9 100644 --- a/packages/client/src/render/screenRouter.js +++ b/packages/client/src/render/screenRouter.js @@ -28,7 +28,9 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => { function route(url) { const _url = makeRootedPath(url.state || url) current = routes.findIndex( - p => p !== "*" && new RegExp("^" + p + "$").test(_url) + p => + p !== "*" && + new RegExp("^" + p.toLowerCase() + "$").test(_url.toLowerCase()) ) const params = {} From 38bcf5c0c289cfd257b9e81da9f59c5937968692 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Thu, 15 Oct 2020 19:13:48 +0100 Subject: [PATCH 3/4] generate css before saving screen --- packages/builder/src/builderStore/store/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index bb61712f1a..f80ce48a81 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -161,8 +161,8 @@ const createScreen = store => async screen => { state.currentPreviewItem = screen state.currentComponentInfo = screen.props state.currentFrontEndType = "screen" - savePromise = _saveScreen(store, state, screen) regenerateCssForCurrentScreen(state) + savePromise = _saveScreen(store, state, screen) return state }) await savePromise From c88c671758d691bd99780133d94d34a5d756967a Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Thu, 15 Oct 2020 23:20:56 +0100 Subject: [PATCH 4/4] fix: ensure CSS is built on app creation --- .../builder/src/builderStore/store/index.js | 24 +++++++++++++++++++ .../builder/src/builderStore/storeUtils.js | 8 ++++--- .../components/start/CreateAppModal.svelte | 1 + 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index be8da095f7..277f57584e 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -24,6 +24,7 @@ import { saveCurrentPreviewItem as _saveCurrentPreviewItem, saveScreenApi as _saveScreenApi, regenerateCssForCurrentScreen, + regenerateCssForScreen, generateNewIdsForComponent, getComponentDefinition, } from "../storeUtils" @@ -98,6 +99,29 @@ const setPackage = (store, initial) => async pkg => { }, } + // if the app has just been created + // we need to build the CSS and save + if (pkg.justCreated) { + const generateInitialPageCss = async name => { + const page = pkg.pages[name] + regenerateCssForScreen(page) + for (let screen of page._screens) { + regenerateCssForScreen(screen) + } + + await api.post(`/_builder/api/${pkg.application._id}/pages/${name}`, { + page: { + componentLibraries: pkg.application.componentLibraries, + ...page, + }, + screens: page._screens, + }) + } + generateInitialPageCss("main") + generateInitialPageCss("unauthenticated") + pkg.justCreated = false + } + initial.libraries = pkg.application.componentLibraries initial.components = await fetchComponentLibDefinitions(pkg.application._id) initial.name = pkg.application.name diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js index 9111f06bd5..6155974d2b 100644 --- a/packages/builder/src/builderStore/storeUtils.js +++ b/packages/builder/src/builderStore/storeUtils.js @@ -79,10 +79,12 @@ export const walkProps = (props, action, cancelToken = null) => { } } +export const regenerateCssForScreen = screen => { + screen._css = generate_screen_css([screen.props]) +} + export const regenerateCssForCurrentScreen = state => { - state.currentPreviewItem._css = generate_screen_css([ - state.currentPreviewItem.props, - ]) + regenerateCssForScreen(state.currentPreviewItem) return state } diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte index e171dc836e..7ee707d490 100644 --- a/packages/builder/src/components/start/CreateAppModal.svelte +++ b/packages/builder/src/components/start/CreateAppModal.svelte @@ -154,6 +154,7 @@ const pkg = await applicationPkg.json() if (applicationPkg.ok) { backendUiStore.actions.reset() + pkg.justCreated = true await store.setPackage(pkg) automationStore.actions.fetch() } else {