cms/tibi-svelte-starter
Template
4
0
Fork 2
Code Issues Pull Requests Projects Releases Wiki Activity

upgrade

Browse Source
This commit is contained in:
Sebastian Frank 2021-12-08 12:56:19 +01:00
parent bd087ae658
commit 9c559f7020
9 changed files with 1693 additions and 2616 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
.drone.yml
View File

@ -6,18 +6,6 @@ workspace:
path: /drone/workdir path: /drone/workdir
steps: 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 - name: load dependencies
image: node image: node
pull: if-not-exists pull: if-not-exists
@ -39,6 +27,21 @@ steps:
- cat .yarnrc - cat .yarnrc
- yarn install --verbose --frozen-lockfile - 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 - name: liveserver
image: node image: node
pull: if-not-exists pull: if-not-exists

230
esbuild-svelte.plugin.js
View File

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

9
esbuild.config.js
View File

@ -14,7 +14,7 @@ const resolvePlugin = {
////////////////////////// esbuild-svelte ////////////////////////// esbuild-svelte
const sveltePlugin = require("./esbuild-svelte.plugin") const sveltePlugin = require("esbuild-svelte")
const distDir = "dist" const distDir = "dist"
@ -28,7 +28,7 @@ copydir.sync(__dirname + "/public", __dirname + "/" + distDir)
const svelteConfig = require("./svelte.config") const svelteConfig = require("./svelte.config")
const esbuildSvelte = sveltePlugin({ const esbuildSvelte = sveltePlugin({
compileOptions: { compilerOptions: {
css: false, css: false,
hydratable: true, hydratable: true,
dev: (process.argv?.length > 2 ? process.argv[2] : "build") !== "build", dev: (process.argv?.length > 2 ? process.argv[2] : "build") !== "build",
@ -63,10 +63,13 @@ const bsMiddleware = []
if (process.argv[2] == "start") { if (process.argv[2] == "start") {
const { createProxyMiddleware } = require("http-proxy-middleware") 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( bsMiddleware.push(
createProxyMiddleware("/api", { createProxyMiddleware("/api", {
target: apiBase, target: apiBase,
pathRewrite: { "^/api": "" },
changeOrigin: true, changeOrigin: true,
}) })
) )

15
package.json
View File

@ -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" "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": { "devDependencies": {
"@ampproject/remapping": "^1.0.1",
"@babel/cli": "^7.15.4", "@babel/cli": "^7.15.4",
"@babel/core": "^7.15.5", "@babel/core": "^7.15.5",
"@babel/plugin-transform-spread": "^7.14.6", "@babel/plugin-transform-spread": "^7.14.6",
"@babel/preset-env": "^7.15.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", "@tsconfig/svelte": "^2.0.1",
"browser-sync": "^2.27.5", "browser-sync": "^2.27.5",
"chokidar": "^3.5.2", "chokidar": "^3.5.2",
"connect-history-api-fallback": "^1.6.0", "connect-history-api-fallback": "^1.6.0",
"copy-dir": "^1.3.0", "copy-dir": "^1.3.0",
"esbuild": "^0.12.27", "esbuild": "^0.14.2",
"esbuild-svelte": "^0.5.4", "esbuild-svelte": "^0.6.0",
"http-proxy-middleware": "^2.0.1", "http-proxy-middleware": "^2.0.1",
"less": "^4.1.1", "less": "^4.1.1",
"morgan": "^1.10.0", "morgan": "^1.10.0",
"postcss": "^8.3.6", "postcss": "^8.3.6",
"prettier": "^2.4.0", "prettier": "^2.4.0",
"prettier-plugin-svelte": "^2.4.0", "prettier-plugin-svelte": "^2.4.0",
"sass": "^1.39.2",
"svelte": "^3.42.5", "svelte": "^3.42.5",
"svelte-check": "^2.2.6", "svelte-check": "^2.2.6",
"svelte-preprocess": "^4.9.4", "svelte-preprocess": "^4.9.4",
@ -56,13 +51,13 @@
"dependencies": { "dependencies": {
"@sentry/browser": "^6.12.0", "@sentry/browser": "^6.12.0",
"@sentry/tracing": "^6.12.0", "@sentry/tracing": "^6.12.0",
"core-js": "3.17.3" "core-js": "3.19.3"
}, },
"optionalDependencies": { "optionalDependencies": {
"@cypress/code-coverage": "^3.9.10", "@cypress/code-coverage": "^3.9.10",
"axios": "^0.21.4", "axios": "^0.24.0",
"babel-plugin-istanbul": "^6.0.0", "babel-plugin-istanbul": "^6.0.0",
"cypress": "^8.3.1", "cypress": "^9.1.1",
"cypress-terminal-report": "^3.3.2", "cypress-terminal-report": "^3.3.2",
"live-server": "^1.2.1", "live-server": "^1.2.1",
"mongodb": "^4.1.1" "mongodb": "^4.1.1"

2
src/components/App.svelte
View File

@ -1,4 +1,4 @@
<script lang="typescript"> <script lang="ts">
import { Router, Route, links } from "svelte-routing" import { Router, Route, links } from "svelte-routing"
import { scrollToTop } from "svelte-scrollto" import { scrollToTop } from "svelte-scrollto"
import { location } from "../store" import { location } from "../store"

152
src/components/ContentBlocks.svelte
View File

@ -1,67 +1,13 @@
{#if blocks?.length} <script lang="ts">
<section class="section_padding"> export let blocks: ContentBlock[]
<div class="container"> export let imageBase: string
{#each blocks as box, idx}
<!-- Teaserbox --> export let accordeon = false
<div class="row center_row">
{#if box.images?.length && (box.layout == 1 || box.layout == 3)} let activeAccordeons: {
<div class="col-md-{box.layout < 3 ? 6 : 12}"> [key: number]: boolean
<img } = {}
loading="lazy" </script>
src="{imageBase + box.images[0].file.src}"
alt="{box.images[0].label || ''}"
/>
</div>
{/if}
{#if box.text || box.title || (box.button_text && box.button_url)}
<div class="col-md-{box.layout < 3 ? 6 : 12}">
{#if box.subtitle}
<div class="subline">{box.subtitle}</div>
{/if}
{#if box.title}
{#if accordeon == true}
<h2
class="h2_nooffset acc_trigger"
class:active="{activeAccordeons[idx]}"
on:click="{() => {
activeAccordeons[idx] = !activeAccordeons[idx]
}}"
>
{box.title}
<span class="icon">\/</span>
</h2>
{:else}
<h2 class="h2_nooffset">{box.title}</h2>
{/if}
{/if}
<div
class="boxText"
class:hideText="{accordeon && box.title && !activeAccordeons[idx]}"
>
{@html box.text}
{#if box.button_text && box.button_url}
<a
href="{box.button_url}"
class="btn btn_blue"
>{box.button_text}</a>
{/if}
</div>
</div>
{/if}
{#if box.images?.length && (box.layout == 2 || box.layout == 4)}
<div class="col-md-{box.layout < 3 ? 6 : 12}">
<img
loading="lazy"
src="{imageBase + box.images[0].file.src}"
alt="{box.images[0].label || ''}"
/>
</div>
{/if}
</div>
{/each}
</div>
</section>
{/if}
<style lang="less"> <style lang="less">
.acc_trigger { .acc_trigger {
@ -93,13 +39,71 @@
} }
</style> </style>
<script lang="typescript"> {#if blocks?.length}
export let blocks: ContentBlock[] <section class="section_padding">
export let imageBase: string <div class="container">
{#each blocks as box, idx}
export let accordeon = false <!-- Teaserbox -->
<div class="row center_row">
let activeAccordeons: { {#if box.images?.length && (box.layout == 1 || box.layout == 3)}
[key: number]: boolean <div class="col-md-{box.layout < 3 ? 6 : 12}">
} = {} <img
</script> loading="lazy"
src="{imageBase + box.images[0].file.src}"
alt="{box.images[0].label || ''}"
/>
</div>
{/if}
{#if box.text || box.title || (box.button_text && box.button_url)}
<div class="col-md-{box.layout < 3 ? 6 : 12}">
{#if box.subtitle}
<div class="subline">{box.subtitle}</div>
{/if}
{#if box.title}
{#if accordeon == true}
<h2
class="h2_nooffset acc_trigger"
class:active="{activeAccordeons[idx]}"
on:click="{() => {
activeAccordeons[idx] =
!activeAccordeons[idx]
}}"
>
{box.title}
<span class="icon">\/</span>
</h2>
{:else}
<h2 class="h2_nooffset">{box.title}</h2>
{/if}
{/if}
<div
class="boxText"
class:hideText="{accordeon &&
box.title &&
!activeAccordeons[idx]}"
>
{@html box.text}
{#if box.button_text && box.button_url}
<a
href="{box.button_url}"
class="btn btn_blue"
>{box.button_text}</a
>
{/if}
</div>
</div>
{/if}
{#if box.images?.length && (box.layout == 2 || box.layout == 4)}
<div class="col-md-{box.layout < 3 ? 6 : 12}">
<img
loading="lazy"
src="{imageBase + box.images[0].file.src}"
alt="{box.images[0].label || ''}"
/>
</div>
{/if}
</div>
{/each}
</div>
</section>
{/if}

2
src/components/routes/Content.svelte
View File

@ -1,4 +1,4 @@
<script lang="typescript"> <script lang="ts">
export let path: string export let path: string
console.log("Content: ", path) console.log("Content: ", path)

3
tsconfig.json
View File

@ -18,6 +18,7 @@
"importsNotUsedAsValues": "error", "importsNotUsedAsValues": "error",
"allowJs": true, "allowJs": true,
"checkJs": true "checkJs": true,
"preserveValueImports": true
} }
} }

3869
yarn.lock
View File

File diff suppressed because it is too large Load Diff