From 71fd86b3766e77cee50e5774bd123cc409ddc18d Mon Sep 17 00:00:00 2001 From: Sebastian Frank Date: Wed, 8 Dec 2021 12:56:19 +0100 Subject: [PATCH] upgrade --- .drone.yml | 27 +- esbuild-svelte.plugin.js | 230 -- esbuild.config.js | 9 +- package.json | 15 +- src/components/App.svelte | 2 +- src/components/ContentBlocks.svelte | 152 +- src/components/routes/Content.svelte | 2 +- tsconfig.json | 3 +- yarn.lock | 3869 +++++++++++--------------- 9 files changed, 1693 insertions(+), 2616 deletions(-) delete mode 100644 esbuild-svelte.plugin.js diff --git a/.drone.yml b/.drone.yml index 3a25949..51dc399 100644 --- a/.drone.yml +++ b/.drone.yml @@ -6,18 +6,6 @@ workspace: path: /drone/workdir steps: - - name: mongo - image: mongo - pull: if-not-exists - detach: true - - - name: maildev - image: maildev/maildev - pull: if-not-exists - commands: - - node bin/maildev --web 80 --smtp 25 -v --hide-extensions=STARTTLS - detach: true - - name: load dependencies image: node pull: if-not-exists @@ -39,6 +27,21 @@ steps: - cat .yarnrc - yarn install --verbose --frozen-lockfile + - name: mongo + image: mongo + pull: if-not-exists + detach: true + + - name: maildev + image: node + pull: if-not-exists + volumes: + - name: cache + path: /cache + commands: + - yarn run maildev --web 80 --smtp 25 -v --hide-extensions=STARTTLS + detach: true + - name: liveserver image: node pull: if-not-exists diff --git a/esbuild-svelte.plugin.js b/esbuild-svelte.plugin.js deleted file mode 100644 index 3dbdd0c..0000000 --- a/esbuild-svelte.plugin.js +++ /dev/null @@ -1,230 +0,0 @@ -const { preprocess, compile } = require("svelte/compiler") -const { dirname, relative } = require("path") -const { promisify } = require("util") -const { readFile, statSync, readFileSync } = require("fs") - -const convertMessage = ({ message, start, end, filename, frame }) => ({ - text: message, - location: start && - end && { - file: filename, - line: start.line, - column: start.column, - length: start.line === end.line ? end.column - start.column : 0, - lineText: frame, - }, -}) - -const SVELTE_FILTER = /\.svelte$/ -const FAKE_CSS_FILTER = /\.esbuild-svelte-fake-css$/ - -module.exports = (options) => { - return { - name: "esbuild-svelte", - setup(build) { - if (!options) { - options = {} - } - // see if we are incrementally building or watching for changes and enable the cache - // also checks if it has already been defined and ignores this if it has - if ( - options.cache == undefined && - (build.initialOptions.incremental || build.initialOptions.watch) - ) { - options.cache = true - } - - // disable entry file generation by default - if (options.fromEntryFile == undefined) { - options.fromEntryFile = false - } - - //Store generated css code for use in fake import - const cssCode = new Map() - const fileCache = new Map() - - //check and see if trying to load svelte files directly - build.onResolve({ filter: SVELTE_FILTER }, ({ path, kind }) => { - if (kind === "entry-point" && options?.fromEntryFile) { - return { path, namespace: "esbuild-svelte-direct-import" } - } - }) - - //main loader - build.onLoad( - { - filter: SVELTE_FILTER, - namespace: "esbuild-svelte-direct-import", - }, - async (args) => { - return { - errors: [ - { - text: "esbuild-svelte doesn't support creating entry files yet", - }, - ], - } - } - ) - - //main loader - build.onLoad({ filter: SVELTE_FILTER }, async (args) => { - // if told to use the cache, check if it contains the file, - // and if the modified time is not greater than the time when it was cached - // if so, return the cached data - if (options?.cache === true && fileCache.has(args.path)) { - const cachedFile = fileCache.get(args.path) || { - dependencies: new Map(), - data: null, - } // should never hit the null b/c of has check - let cacheValid = true - - //for each dependency check if the mtime is still valid - //if an exception is generated (file was deleted or something) then cache isn't valid - try { - cachedFile.dependencies.forEach((time, path) => { - if (statSync(path).mtime > time) { - cacheValid = false - } - }) - } catch { - cacheValid = false - } - - if (cacheValid) { - return cachedFile.data - } else { - fileCache.delete(args.path) //can remove from cache if no longer valid - } - } - - //reading files - let source = await promisify(readFile)(args.path, "utf8") - let filename = relative(process.cwd(), args.path) - - //file modification time storage - const dependencyModifcationTimes = new Map() - dependencyModifcationTimes.set( - args.path, - statSync(args.path).mtime - ) // add the target file - - //actually compile file - let preprocessMap - try { - //do preprocessor stuff if it exists - if (options?.preprocess) { - let preprocessResult = await preprocess( - source, - options.preprocess, - { - filename, - } - ) - source = preprocessResult.code - preprocessMap = preprocessResult.map - - // if caching then we need to store the modifcation times for all dependencies - if (options?.cache === true) { - preprocessResult.dependencies?.forEach((entry) => { - dependencyModifcationTimes.set( - entry, - statSync(entry).mtime - ) - }) - } - } - - let compileOptions = { - css: false, - ...options?.compileOptions, - } - - if (preprocessMap) { - for (let i = 0; i < preprocessMap.sources.length; i++) { - preprocessMap.sources[i] = preprocessMap.sources[ - i - ]?.replace(/(.+\/)+/, "") - } - compileOptions.sourcemap = preprocessMap - } - - let { js, css, warnings } = compile(source, { - ...compileOptions, - filename, - }) - - if (!js.map.sourcesContent) { - try { - js.map.sourcesContent = [ - readFileSync(filename), // , "utf8"), - ] - } catch (e) {} - } - - // console.log(js.map) - - let contents = - js.code + `\n//# sourceMappingURL=` + js.map.toUrl() - - //if svelte emits css seperately, then store it in a map and import it from the js - if (!compileOptions.css && css.code) { - let cssPath = args.path - .replace(".svelte", ".esbuild-svelte-fake-css") - .replace(/\\/g, "/") - cssCode.set( - cssPath, - css.code + - `/*# sourceMappingURL=${css.map.toUrl()} */` - ) - contents = contents + `\nimport "${cssPath}";` - } - - const result = { - contents, - warnings: warnings.map(convertMessage), - } - - // if we are told to cache, then cache - if (options?.cache === true) { - fileCache.set(args.path, { - data: result, - dependencies: dependencyModifcationTimes, - }) - } - - // make sure to tell esbuild to watch any additional files used if supported - if (build.initialOptions.watch) { - // this array does include the orignal file, but esbuild should be smart enough to ignore it - result.watchFiles = Array.from( - dependencyModifcationTimes.keys() - ) - } - - return result - } catch (e) { - return { errors: [convertMessage(e)] } - } - }) - - //if the css exists in our map, then output it with the css loader - build.onResolve({ filter: FAKE_CSS_FILTER }, ({ path }) => { - return { path, namespace: "fakecss" } - }) - - build.onLoad( - { filter: FAKE_CSS_FILTER, namespace: "fakecss" }, - ({ path }) => { - const css = cssCode.get(path) - return css - ? { - contents: css, - loader: "css", - resolveDir: dirname(path), - } - : null - } - ) - }, - } -} diff --git a/esbuild.config.js b/esbuild.config.js index dd80942..6658b63 100644 --- a/esbuild.config.js +++ b/esbuild.config.js @@ -14,7 +14,7 @@ const resolvePlugin = { ////////////////////////// esbuild-svelte -const sveltePlugin = require("./esbuild-svelte.plugin") +const sveltePlugin = require("esbuild-svelte") const distDir = "dist" @@ -28,7 +28,7 @@ copydir.sync(__dirname + "/public", __dirname + "/" + distDir) const svelteConfig = require("./svelte.config") const esbuildSvelte = sveltePlugin({ - compileOptions: { + compilerOptions: { css: false, hydratable: true, dev: (process.argv?.length > 2 ? process.argv[2] : "build") !== "build", @@ -63,10 +63,13 @@ const bsMiddleware = [] if (process.argv[2] == "start") { const { createProxyMiddleware } = require("http-proxy-middleware") - const apiBase = process.env.API_BASE || "https://login.wmbasic.de" + const apiBase = + process.env.API_BASE || + "http://localhost:8080/api/v1/_/" + process.env.NAMESPACE bsMiddleware.push( createProxyMiddleware("/api", { target: apiBase, + pathRewrite: { "^/api": "" }, changeOrigin: true, }) ) diff --git a/package.json b/package.json index 56c7eeb..2abcf54 100644 --- a/package.json +++ b/package.json @@ -21,28 +21,23 @@ "cy:docker:open": "CURRENT_UID=$(id -u):$(id -g) CY_COMMAND=open docker-compose -f docker-compose.cypress.yml up --exit-code-from=cypress" }, "devDependencies": { - "@ampproject/remapping": "^1.0.1", "@babel/cli": "^7.15.4", "@babel/core": "^7.15.5", "@babel/plugin-transform-spread": "^7.14.6", "@babel/preset-env": "^7.15.6", - "@prerenderer/prerenderer": "^0.7.2", - "@prerenderer/renderer-jsdom": "^0.2.0", - "@prerenderer/renderer-puppeteer": "^0.2.0", "@tsconfig/svelte": "^2.0.1", "browser-sync": "^2.27.5", "chokidar": "^3.5.2", "connect-history-api-fallback": "^1.6.0", "copy-dir": "^1.3.0", - "esbuild": "^0.12.27", - "esbuild-svelte": "^0.5.4", + "esbuild": "^0.14.2", + "esbuild-svelte": "^0.6.0", "http-proxy-middleware": "^2.0.1", "less": "^4.1.1", "morgan": "^1.10.0", "postcss": "^8.3.6", "prettier": "^2.4.0", "prettier-plugin-svelte": "^2.4.0", - "sass": "^1.39.2", "svelte": "^3.42.5", "svelte-check": "^2.2.6", "svelte-preprocess": "^4.9.4", @@ -56,13 +51,13 @@ "dependencies": { "@sentry/browser": "^6.12.0", "@sentry/tracing": "^6.12.0", - "core-js": "3.17.3" + "core-js": "3.19.3" }, "optionalDependencies": { "@cypress/code-coverage": "^3.9.10", - "axios": "^0.21.4", + "axios": "^0.24.0", "babel-plugin-istanbul": "^6.0.0", - "cypress": "^8.3.1", + "cypress": "^9.1.1", "cypress-terminal-report": "^3.3.2", "live-server": "^1.2.1", "mongodb": "^4.1.1" diff --git a/src/components/App.svelte b/src/components/App.svelte index 8c87605..e52caf3 100644 --- a/src/components/App.svelte +++ b/src/components/App.svelte @@ -1,4 +1,4 @@ - - +{#if blocks?.length} +
+
+ {#each blocks as box, idx} + +
+ {#if box.images?.length && (box.layout == 1 || box.layout == 3)} +
+ {box.images[0].label || ''} +
+ {/if} + {#if box.text || box.title || (box.button_text && box.button_url)} +
+ {#if box.subtitle} +
{box.subtitle}
+ {/if} + {#if box.title} + {#if accordeon == true} +

+ {box.title} + \/ +

+ {:else} +

{box.title}

+ {/if} + {/if} +
+ {@html box.text} + {#if box.button_text && box.button_url} + {box.button_text} + {/if} +
+
+ {/if} + {#if box.images?.length && (box.layout == 2 || box.layout == 4)} +
+ {box.images[0].label || ''} +
+ {/if} +
+ {/each} +
+
+{/if} diff --git a/src/components/routes/Content.svelte b/src/components/routes/Content.svelte index eda416a..238e183 100644 --- a/src/components/routes/Content.svelte +++ b/src/components/routes/Content.svelte @@ -1,4 +1,4 @@ -