From c2aa9eebfc271cd0d58095774e5303fb4b27c131 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Thu, 12 Nov 2020 10:25:25 +0000 Subject: [PATCH] remove squirrelly, compile a single bundle.css for each page, svelte and hbs server rendering --- packages/server/package.json | 1 - .../src/api/controllers/static/index.js | 64 +++++++++---------- .../static/templates/BudibaseApp.svelte | 62 ++++++++++++++++++ .../api/controllers/static/templates/app.hbs | 10 +++ .../static/templates/index.template.html | 63 ------------------ packages/server/src/api/routes/static.js | 2 +- packages/server/src/db/client.js | 2 +- .../builder/compileStaticAssetsForPage.js | 62 ++++-------------- .../utilities/builder/convertCssToFiles.js | 45 ++++--------- .../src/utilities/builder/publicPath.js | 3 - .../src/utilities/initialiseBudibase.js | 5 +- packages/server/yarn.lock | 13 ++-- 12 files changed, 137 insertions(+), 195 deletions(-) create mode 100644 packages/server/src/api/controllers/static/templates/app.hbs delete mode 100644 packages/server/src/api/controllers/static/templates/index.template.html delete mode 100644 packages/server/src/utilities/builder/publicPath.js diff --git a/packages/server/package.json b/packages/server/package.json index 699efbc56e..259e292c80 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -77,7 +77,6 @@ "pouchdb-all-dbs": "^1.0.2", "pouchdb-replication-stream": "^1.2.9", "sanitize-s3-objectkey": "^0.0.1", - "squirrelly": "^7.5.0", "svelte": "^3.29.4", "tar-fs": "^2.1.0", "to-json-schema": "^0.2.5", diff --git a/packages/server/src/api/controllers/static/index.js b/packages/server/src/api/controllers/static/index.js index 0a342a2e24..19f51a06cb 100644 --- a/packages/server/src/api/controllers/static/index.js +++ b/packages/server/src/api/controllers/static/index.js @@ -1,27 +1,29 @@ require("svelte/register") const send = require("koa-send") -const { resolve, join } = require("../../utilities/centralPath") +const { resolve, join } = require("../../../utilities/centralPath") const fetch = require("node-fetch") const fs = require("fs-extra") const uuid = require("uuid") const AWS = require("aws-sdk") -const { prepareUploadForS3 } = require("./deploy/aws") +const { prepareUploadForS3 } = require("../deploy/aws") +const handlebars = require("handlebars") const { budibaseAppsDir, budibaseTempDir, -} = require("../../utilities/budibaseDir") -const CouchDB = require("../../db") -const setBuilderToken = require("../../utilities/builder/setBuilderToken") -const fileProcessor = require("../../utilities/fileProcessor") -const { AuthTypes } = require("../../constants") -const env = require("../../environment") +} = require("../../../utilities/budibaseDir") +const { getPageParams } = require("../../../db/utils") +const CouchDB = require("../../../db") +const setBuilderToken = require("../../../utilities/builder/setBuilderToken") +const fileProcessor = require("../../../utilities/fileProcessor") +const { AuthTypes } = require("../../../constants") +const env = require("../../../environment") // this was the version before we started versioning the component library const COMP_LIB_BASE_APP_VERSION = "0.2.5" exports.serveBuilder = async function(ctx) { - let builderPath = resolve(__dirname, "../../../builder") + let builderPath = resolve(__dirname, "../../../../builder") if (ctx.file === "index.html") { await setBuilderToken(ctx) } @@ -141,37 +143,31 @@ exports.performLocalFileProcessing = async function(ctx) { exports.serveAppNew = async function(ctx) { const App = require("./templates/BudibaseApp.svelte").default + // Need to get app information here - const { html } = App.render({ - name: "Budibase", - authenticated: + const db = new CouchDB(ctx.params.appId) + + const appInfo = await db.get(ctx.params.appId) + + console.log("INFO", appInfo) + + const { head, html, css } = App.render({ + title: appInfo.name, + pageName: ctx.auth.authenticated === AuthTypes.APP ? "main" : "unauthenticated", production: env.CLOUD, + appId: ctx.params.appId, }) - // // default to homedir - // const appPath = resolve( - // budibaseAppsDir(), - // ctx.params.appId, - // "public", - // mainOrAuth - // ) + const template = handlebars.compile( + fs.readFileSync(`${__dirname}/templates/app.hbs`, "utf8") + ) - ctx.body = html - - // const appId = ctx.user.appId - - // if (env.CLOUD) { - // const S3_URL = `https://${appId}.app.budi.live/assets/${appId}/${mainOrAuth}/${ctx.file || - // "index.production.html"}` - - // const response = await fetch(S3_URL) - // const body = await response.text() - // ctx.body = body - // return - // } - - // await send(ctx, ctx.file || "index.html", { root: ctx.devPath || appPath }) + ctx.body = template({ + head, + body: html, + style: css.code, + }) } exports.serveApp = async function(ctx) { diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte index e69de29bb2..648829891e 100644 --- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte +++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte @@ -0,0 +1,62 @@ + + + + + + + {title} + + + + + + + + + + + + + + + diff --git a/packages/server/src/api/controllers/static/templates/app.hbs b/packages/server/src/api/controllers/static/templates/app.hbs new file mode 100644 index 0000000000..cce07180ae --- /dev/null +++ b/packages/server/src/api/controllers/static/templates/app.hbs @@ -0,0 +1,10 @@ + + + + + {{{head}}} + + + {{{body}}} + + \ No newline at end of file diff --git a/packages/server/src/api/controllers/static/templates/index.template.html b/packages/server/src/api/controllers/static/templates/index.template.html deleted file mode 100644 index e7cf633277..0000000000 --- a/packages/server/src/api/controllers/static/templates/index.template.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - - {{ title }} - - - - - {{ each(options.stylesheets) }} - - {{ /each }} - - {{ each(options.screenStyles) }} - {{ if(options.production) }} - - {{#else}} - - {{ /if }} - {{ /each }} - - {{ if(options.pageStyle) }} - {{ if(options.production) }} - - {{#else}} - - {{ /if }} - {{ /if }} - - - - - {{ if(options.production) }} - - - {{#else}} - - - {{ /if }} - - - - - - - \ No newline at end of file diff --git a/packages/server/src/api/routes/static.js b/packages/server/src/api/routes/static.js index 5c33900eca..e832df17c4 100644 --- a/packages/server/src/api/routes/static.js +++ b/packages/server/src/api/routes/static.js @@ -33,6 +33,6 @@ router .get("/componentlibrary", controller.serveComponentLibrary) .get("/assets/:file*", controller.serveAppAsset) .get("/attachments/:file*", controller.serveAttachment) - .get("/:appId/:path*", controller.serveApp) + .get("/:appId/:path*", controller.serveAppNew) module.exports = router diff --git a/packages/server/src/db/client.js b/packages/server/src/db/client.js index c796ab0160..1d025a1402 100644 --- a/packages/server/src/db/client.js +++ b/packages/server/src/db/client.js @@ -38,6 +38,6 @@ function replicateLocal() { }) } -//replicateLocal() +replicateLocal() module.exports = Pouch diff --git a/packages/server/src/utilities/builder/compileStaticAssetsForPage.js b/packages/server/src/utilities/builder/compileStaticAssetsForPage.js index 598f7745fb..4e3b7ea75e 100644 --- a/packages/server/src/utilities/builder/compileStaticAssetsForPage.js +++ b/packages/server/src/utilities/builder/compileStaticAssetsForPage.js @@ -1,27 +1,25 @@ -const { constants, copyFile, writeFile, readFile } = require("fs-extra") -const { join, resolve } = require("../centralPath") -const sqrl = require("squirrelly") -const { convertCssToFiles } = require("./convertCssToFiles") -const publicPath = require("./publicPath") +const { ensureDir, constants, copyFile, writeFile } = require("fs-extra") +const { join } = require("../centralPath") +const { convertCssToBundle } = require("./convertCssToFiles") const { budibaseAppsDir } = require("../budibaseDir") module.exports = async (appId, pageName, pkg) => { - const appPath = join(budibaseAppsDir(), appId) + const pagePath = join(budibaseAppsDir(), appId, "public", pageName) pkg.screens = pkg.screens || [] - await convertCssToFiles(publicPath(appPath, pageName), pkg) + await ensureDir(pagePath) - await buildIndexHtml(appId, pageName, appPath, pkg) + await convertCssToBundle(pagePath, pkg) - await buildFrontendAppDefinition(appId, pageName, pkg, appPath) + await buildFrontendAppDefinition(pagePath, pkg) - await copyClientLib(appPath, pageName) + await copyClientLib(pagePath) } -const copyClientLib = async (appPath, pageName) => { +const copyClientLib = async pagePath => { const sourcepath = require.resolve("@budibase/client") - const destPath = join(publicPath(appPath, pageName), "budibase-client.js") + const destPath = join(pagePath, "budibase-client.js") await copyFile(sourcepath, destPath, constants.COPYFILE_FICLONE) @@ -32,44 +30,8 @@ const copyClientLib = async (appPath, pageName) => { ) } -const buildIndexHtml = async (appId, pageName, appPath, pkg) => { - const appPublicPath = publicPath(appPath, pageName) - - const stylesheetUrl = s => (s.startsWith("http") ? s : `/${appId}/${s}`) - - const templateObj = { - title: pkg.page.title || "Budibase App", - favicon: `${pkg.page.favicon || "/_shared/favicon.png"}`, - stylesheets: (pkg.page.stylesheets || []).map(stylesheetUrl), - screenStyles: pkg.screens.filter(s => s._css).map(s => s._css), - pageStyle: pkg.page._css, - appId, - pageName, - } - - const indexHtmlTemplate = await readFile( - resolve(__dirname, "index.template.html"), - "utf8" - ) - - const indexHtmlPath = join(appPublicPath, "index.html") - const deployableHtmlPath = join(appPublicPath, "index.production.html") - - const indexHtml = sqrl.Render(indexHtmlTemplate, templateObj) - const deployableHtml = sqrl.Render(indexHtmlTemplate, { - ...templateObj, - production: true, - }) - - await writeFile(indexHtmlPath, indexHtml, { flag: "w+" }) - await writeFile(deployableHtmlPath, deployableHtml, { flag: "w+" }) -} - -const buildFrontendAppDefinition = async (appId, pageName, pkg) => { - const appPath = join(budibaseAppsDir(), appId) - const appPublicPath = publicPath(appPath, pageName) - - const filename = join(appPublicPath, "clientFrontendDefinition.js") +const buildFrontendAppDefinition = async (pagePath, pkg) => { + const filename = join(pagePath, "clientFrontendDefinition.js") delete pkg.page._css diff --git a/packages/server/src/utilities/builder/convertCssToFiles.js b/packages/server/src/utilities/builder/convertCssToFiles.js index c81f9497ec..6146dea91f 100644 --- a/packages/server/src/utilities/builder/convertCssToFiles.js +++ b/packages/server/src/utilities/builder/convertCssToFiles.js @@ -1,11 +1,15 @@ -const crypto = require("crypto") -const { ensureDir, emptyDir, writeFile } = require("fs-extra") +const { writeFile } = require("fs-extra") const { join } = require("../centralPath") -module.exports.convertCssToFiles = async (publicPagePath, pkg) => { - const cssDir = join(publicPagePath, "css") - await ensureDir(cssDir) - await emptyDir(cssDir) +/** + * Reads the _css property of all pages and screens in the budibase application, and creates a singlular CSS + * bundle for the app at /public/bundle.css. + * @param {*} publicPagePath - path to the public assets directory of the budibase application + * @param {*} pkg - app package information + * @param {*} pageName - the pagename of the page we are compiling CSS for. + */ +module.exports.convertCssToBundle = async (publicPagePath, pkg) => { + let cssString = "" for (let screen of pkg.screens || []) { if (!screen._css) continue @@ -13,31 +17,10 @@ module.exports.convertCssToFiles = async (publicPagePath, pkg) => { delete screen._css continue } - screen._css = await createCssFile(cssDir, screen._css) + cssString += screen._css } - if (pkg.page._css) { - pkg.page._css = await createCssFile(cssDir, pkg.page._css) - } -} - -module.exports.getHashedCssPaths = (cssDir, _css) => { - const fileName = - crypto - .createHash("md5") - .update(_css) - .digest("hex") + ".css" - - const filePath = join(cssDir, fileName) - const url = `/css/${fileName}` - - return { filePath, url } -} - -const createCssFile = async (cssDir, _css) => { - const { filePath, url } = module.exports.getHashedCssPaths(cssDir, _css) - - await writeFile(filePath, _css) - - return url + if (pkg.page._css) cssString += pkg.page._css + + writeFile(join(publicPagePath, "bundle.css"), cssString) } diff --git a/packages/server/src/utilities/builder/publicPath.js b/packages/server/src/utilities/builder/publicPath.js deleted file mode 100644 index 03917d4370..0000000000 --- a/packages/server/src/utilities/builder/publicPath.js +++ /dev/null @@ -1,3 +0,0 @@ -const { join } = require("../centralPath") - -module.exports = (appPath, pageName) => join(appPath, "public", pageName) diff --git a/packages/server/src/utilities/initialiseBudibase.js b/packages/server/src/utilities/initialiseBudibase.js index 4e6902a50f..1a88b4d1c2 100644 --- a/packages/server/src/utilities/initialiseBudibase.js +++ b/packages/server/src/utilities/initialiseBudibase.js @@ -1,6 +1,6 @@ const { existsSync, readFile, writeFile, ensureDir } = require("fs-extra") const { join, resolve } = require("./centralPath") -const Sqrl = require("squirrelly") +const handlebars = require("handlebars") const uuid = require("uuid") module.exports = async opts => { @@ -31,7 +31,8 @@ const createDevEnvFile = async opts => { } ) opts.cookieKey1 = opts.cookieKey1 || uuid.v4() - const config = Sqrl.Render(template, opts) + const hbTemplate = handlebars.compile(template) + const config = hbTemplate.render(opts) await writeFile(destConfigFile, config, { flag: "w+" }) } } diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock index 048694e6de..9e6b472dac 100644 --- a/packages/server/yarn.lock +++ b/packages/server/yarn.lock @@ -200,10 +200,10 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" -"@budibase/client@^0.3.4": - version "0.3.4" - resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.3.4.tgz#aca2d13170dae870d069a56f53519d9fbb4bdc00" - integrity sha512-zs9Jnr1CzvgZY4NrliatqDUm0gVhlcQkpdsMblO+3zRcwBzRXAeFyzwMtGpcbiQm29zHjPBOivmQQUMxgi3lUg== +"@budibase/client@^0.3.6": + version "0.3.7" + resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.3.7.tgz#8ed2d40d91ba3788a69ee5db5078f757adb4187f" + integrity sha512-EgpHfw/WOUYeCG4cILDbaN2WFBDSPS698Z+So7FP5l+4E1fvmqtpXVKJYsviwYEx8AKKYyU3nuDi0l6xzb5Flg== dependencies: deep-equal "^2.0.1" mustache "^4.0.1" @@ -7146,11 +7146,6 @@ sprintf-js@~1.0.2: resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c" integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw= -squirrelly@^7.5.0: - version "7.9.2" - resolved "https://registry.yarnpkg.com/squirrelly/-/squirrelly-7.9.2.tgz#f8b0a08201b73653351afe9f7f24878237d2751a" - integrity sha512-QsLQ43p7/p5LfhqMsUM1PP0DU/YuirA/pZ1RQKU8/qZjWHD8uTblpfPoCVkD9VLrS1jCJ+2gqECv3amlPgrLCA== - sshpk@^1.7.0: version "1.16.1" resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"