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

sourcemap tests

Browse Source
This commit is contained in:
Sebastian Frank 2021-09-13 18:12:40 +02:00
parent 0bf64b1031
commit 95c2950193
17 changed files with 4001 additions and 663 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc
View File

@ -8,7 +8,7 @@
"no-duplicate-variable": [true, "check-parameters"],
"no-var-keyword": true,
"svelteSortOrder": "markup-styles-scripts",
"svelteSortOrder": "scripts-styles-markup",
"svelteStrictMode": true,
"svelteBracketNewLine": true,
"svelteAllowShorthand": true,

2
.vscode/settings.json vendored
View File

@ -13,7 +13,7 @@
},
"liveServer.settings.root": "/dist",
"liveServer.settings.file": "spa.html",
"liveServer.settings.port": 5501,
"liveServer.settings.port": 5502,
"liveServer.settings.proxy": {
"enable": true,
"baseUri": "/api",

6
api/hooks/lib/utils.js
View File

@ -51,7 +51,7 @@ function isSsrToken(c) {
* @returns {string}
*/
function tpl(c, filename) {
return c.template(c.file(filename), {
return c.tpl.execute(c.fs.readFile(filename), {
context: c,
config: config,
/**
@ -200,8 +200,8 @@ function parseDate(d) {
* clear SSR cache
*/
function clearSSRCache() {
var info = context.deleteDocuments("ssr", {})
context.header("X-SSR-Cleared", info.removed)
var info = context.db.deleteMany("ssr", {})
context.response.header("X-SSR-Cleared", info.removed)
}
/**

5
babel.config.cypress.json Normal file
View File

@ -0,0 +1,5 @@
{
"sourceMaps": "inline",
"inputSourceMap": true,
"plugins": ["istanbul"]
}

231
esbuild-svelte.plugin.js Normal file
View File

@ -0,0 +1,231 @@
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
}
)
},
}
}

6
esbuild.config.cypress.js Normal file
View File

@ -0,0 +1,6 @@
const config = require("./esbuild.config.js")
config.options.sourcemap = "inline"
config.options.minify = false
module.exports = config

13
esbuild.config.js
View File

@ -14,8 +14,7 @@ const resolvePlugin = {
////////////////////////// esbuild-svelte
const sveltePlugin = require("esbuild-svelte")
const sveltePlugin = require("./esbuild-svelte.plugin")
const distDir = "dist"
@ -28,7 +27,6 @@ copydir.sync(__dirname + "/public", __dirname + "/" + distDir)
)*/
const svelteConfig = require("./svelte.config")
//const esbuildSvelte = require("esbuild-svelte")({
const esbuildSvelte = sveltePlugin({
compileOptions: {
css: false,
@ -40,10 +38,11 @@ const esbuildSvelte = sveltePlugin({
})
const options = {
logLevel: "info",
color: true,
entryPoints: ["./src/index.ts"],
outfile: "./" + distDir + "/_dist_/index.mjs",
metafile: "./" + distDir + "/_dist_/meta.json",
metafile: true, //"./" + distDir + "/_dist_/meta.json",
format: "esm",
minify: true,
bundle: true,
@ -51,9 +50,13 @@ const options = {
plugins: [esbuildSvelte, resolvePlugin],
loader: {
".woff2": "file",
".woff": "file",
".eot": "file",
".svg": "file",
".ttf": "file",
},
sourcemap: true,
target: ["es2020", "chrome61", "firefox60", "safari11", "edge16"],
target: ["es2020", "chrome61", "firefox60", "safari11", "edge18"],
}
module.exports = {

62
package.json
View File

@ -11,39 +11,53 @@
"build": "node scripts/esbuild-wrapper.js build",
"build:legacy": "node scripts/esbuild-wrapper.js build esbuild.config.legacy.js && babel _temp/index.js -o _temp/index.babeled.js && esbuild _temp/index.babeled.js --outfile=dist/_dist_/index.es5.js --target=es5 --bundle --minify --sourcemap",
"build:server": "node scripts/esbuild-wrapper.js build esbuild.config.server.js && babel _temp/app.server.js -o _temp/app.server.babeled.js && esbuild _temp/app.server.babeled.js --outfile=api/hooks/lib/app.server.js --target=es5 --bundle --sourcemap --platform=node",
"build:test": "node scripts/esbuild-wrapper.js build esbuild.config.test.js && babel --config-file ./babel.config.test.json _temp/hook.test.js -o _temp/hook.test.babeled.js && esbuild _temp/hook.test.babeled.js --outfile=api/hooks/lib/hook.test.js --target=es5 --bundle --sourcemap --platform=node"
"build:test": "node scripts/esbuild-wrapper.js build esbuild.config.test.js && babel --config-file ./babel.config.test.json _temp/hook.test.js -o _temp/hook.test.babeled.js && esbuild _temp/hook.test.babeled.js --outfile=api/hooks/lib/hook.test.js --target=es5 --bundle --sourcemap --platform=node",
"build:instanbul": "node scripts/esbuild-wrapper.js build esbuild.config.cypress.js && babel dist/_dist_/index.mjs -o dist/_dist_/index.mjs --config-file ./babel.config.cypress.json",
"cy:run": "cypress run",
"cy:open": "cypress open",
"cy:docker:run": "CURRENT_UID=$(id -u):$(id -g) CY_COMMAND=run 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": {
"@babel/cli": "^7.12.8",
"@babel/core": "^7.12.9",
"@babel/plugin-transform-spread": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@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": "^1.0.10",
"chokidar": "^3.4.3",
"@tsconfig/svelte": "^2.0.1",
"chokidar": "^3.5.2",
"copy-dir": "^1.3.0",
"esbuild": "^0.8.17",
"esbuild-svelte": "^0.4.0",
"less": "^3.12.2",
"postcss": "^8.1.10",
"prettier": "^2.2.0",
"prettier-plugin-svelte": "^1.4.1",
"sass": "^1.30.0",
"svelte": "^3.29.7",
"svelte-check": "^1.1.11",
"svelte-preprocess": "^4.0.8",
"svelte-preprocess-esbuild": "^1.0.4",
"svelte-routing": "^1.4.2",
"esbuild": "^0.12.27",
"esbuild-svelte": "^0.5.4",
"less": "^4.1.1",
"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",
"svelte-preprocess-esbuild": "^2.0.0",
"svelte-routing": "^1.6.0",
"svelte-scrollto": "^0.2.0",
"tslib": "^2.0.3",
"typescript": "^4.1.2",
"tslib": "^2.3.1",
"typescript": "^4.4.3",
"wmbasic-api-types": "https://gitbase.de/cms/wmbasic-api-types.git"
},
"dependencies": {
"@sentry/browser": "^6.2.1",
"@sentry/tracing": "^6.2.1",
"core-js": "3"
"@sentry/browser": "^6.12.0",
"@sentry/tracing": "^6.12.0",
"core-js": "3.17.3"
},
"optionalDependencies": {
"@cypress/code-coverage": "^3.9.10",
"axios": "^0.21.4",
"babel-plugin-istanbul": "^6.0.0",
"cypress": "^8.3.1",
"cypress-terminal-report": "^3.3.2",
"mongodb": "^4.1.1"
}
}

2
public/spa.html
View File

@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>__PROJECT_NAME__</title>
<base href="/" />
<link rel="stylesheet" href="/_dist_/index.mjs.css?t=__TIMESTAMP__" />
<link rel="stylesheet" href="/_dist_/index.css?t=__TIMESTAMP__" />
<!--
<link

7
scripts/cy-command.docker.sh Executable file
View File

@ -0,0 +1,7 @@
#!/bin/sh
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0.0
export DISPLAY=host.docker.internal:0.0
echo DISPLAY: $DISPLAY
yarn cy:$1

10
scripts/esbuild-wrapper.js
View File

@ -1,4 +1,7 @@
const esbuild = require("esbuild")
const fs = require("fs")
const path = require("path")
const config = require(process.cwd() +
(process.argv?.length > 3 ? "/" + process.argv[3] : "/esbuild.config.js"))
const { watch } = require("chokidar")
@ -20,10 +23,17 @@ async function build(catchError) {
buildResults = buildResults
? await buildResults.rebuild()
: await esbuild.build(config.options)
if (config.options.metafile) {
fs.writeFileSync(
path.dirname(config.options.outfile) + "/meta.json",
JSON.stringify(buildResults.metafile, null, 4)
)
}
} catch (e) {
console.log(e)
if (!catchError) throw e
}
const timerEnd = Date.now()
log(`built in ${timerEnd - timerStart}ms.`)
}

48
src/components/App.svelte
View File

@ -1,29 +1,8 @@
<h1>__PROJECT_TITLE__</h1>
<div use:links>
<a href="/test1">1</a>
<a href="/test2">2</a>
<a href="/test3">3</a>
<a href="/test4">4</a>
<Router url="{url}">
<Route path="/*path" let:params>
<Content path="/{params.path}" />
</Route>
</Router>
</div>
<style lang="less">
@import "./../css/main.less";
h1 {
color: red;
}
</style>
<script lang="typescript">
import { Router, Route, links } from "svelte-routing"
// import { Router, Route, links } from "svelte-routing"
import { scrollToTop } from "svelte-scrollto"
import { location } from "../store"
import Content from "./Content.svelte"
import Content from "./routes/Content.svelte"
export let url = ""
if (url) {
@ -45,3 +24,26 @@
if (typeof window !== "undefined") console.log("App initialized")
</script>
<style lang="less" global>
@import "./../css/main.less";
h1 {
color: red;
}
</style>
<h1>__PROJECT_TITLE__</h1>
<Content path="test" />
<!-- <div use:links>
<a href="/test1">1</a>
<a href="/test2">2</a>
<a href="/test3">3</a>
<a href="/test4">4</a>
<Router url="{url}">
<Route path="/*path" let:params>
<Content path="/{params.path}" />
</Route>
</Router>
</div> -->

6
src/components/Content.svelte → src/components/routes/Content.svelte
View File

@ -1,5 +1,7 @@
<h2>{path}</h2>
<script lang="typescript">
export let path: string
console.log("Content: ", path)
</script>
<h2>{path}</h2>

2
src/config.ts
View File

@ -1,5 +1,5 @@
// @ts-check
import * as sentry from "./sentry"
// import * as sentry from "./sentry"
export const title = "__PROJECT_TITLE__"

3
src/css/main.less
View File

@ -0,0 +1,3 @@
body {
background-color: #eee;
}

1
svelte.config.js
View File

@ -5,6 +5,7 @@ module.exports = {
typescript({
sourcemap: true,
}),
sveltePreprocess({
sourceMap: true,
typescript: false,

4258
yarn.lock
View File

File diff suppressed because it is too large Load Diff