forked from cms/tibi-svelte-starter
upgrade
This commit is contained in:
parent
45c628fef8
commit
71fd86b376
GPG Key ID:
A0E05A8199CE3F57
27
.drone.yml
27
.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
|
||||
|
||||
@ -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
|
||||
}
|
||||
)
|
||||
},
|
||||
}
|
||||
}
|
||||
@ -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,
|
||||
})
|
||||
)
|
||||
|
||||
15
package.json
15
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"
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script lang="typescript">
|
||||
<script lang="ts">
|
||||
import { Router, Route, links } from "svelte-routing"
|
||||
import { scrollToTop } from "svelte-scrollto"
|
||||
import { location } from "../store"
|
||||
|
||||
@ -1,67 +1,13 @@
|
||||
{#if blocks?.length}
|
||||
<section class="section_padding">
|
||||
<div class="container">
|
||||
{#each blocks as box, idx}
|
||||
<!-- Teaserbox -->
|
||||
<div class="row center_row">
|
||||
{#if box.images?.length && (box.layout == 1 || box.layout == 3)}
|
||||
<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}
|
||||
{#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}
|
||||
<script lang="ts">
|
||||
export let blocks: ContentBlock[]
|
||||
export let imageBase: string
|
||||
|
||||
export let accordeon = false
|
||||
|
||||
let activeAccordeons: {
|
||||
[key: number]: boolean
|
||||
} = {}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.acc_trigger {
|
||||
@ -93,13 +39,71 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="typescript">
|
||||
export let blocks: ContentBlock[]
|
||||
export let imageBase: string
|
||||
|
||||
export let accordeon = false
|
||||
|
||||
let activeAccordeons: {
|
||||
[key: number]: boolean
|
||||
} = {}
|
||||
</script>
|
||||
{#if blocks?.length}
|
||||
<section class="section_padding">
|
||||
<div class="container">
|
||||
{#each blocks as box, idx}
|
||||
<!-- Teaserbox -->
|
||||
<div class="row center_row">
|
||||
{#if box.images?.length && (box.layout == 1 || box.layout == 3)}
|
||||
<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}
|
||||
{#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}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script lang="typescript">
|
||||
<script lang="ts">
|
||||
export let path: string
|
||||
|
||||
console.log("Content: ", path)
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"importsNotUsedAsValues": "error",
|
||||
|
||||
"allowJs": true,
|
||||
"checkJs": true
|
||||
"checkJs": true,
|
||||
"preserveValueImports": true
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user