sourcemap tests

.prettierrc

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

.vscode/settings.json

@@ -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",

api/hooks/lib/utils.js

@@ -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", {})
+    var info = context.db.deleteMany("ssr", {})
-    context.header("X-SSR-Cleared", info.removed)
+    context.response.header("X-SSR-Cleared", info.removed)
 }
 
 /**

babel.config.cypress.json

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

esbuild-svelte.plugin.js

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

esbuild.config.cypress.js

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

esbuild.config.js

@@ -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 = {

package.json

@@ -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",
+        "@ampproject/remapping": "^1.0.1",
-        "@babel/core": "^7.12.9",
+        "@babel/cli": "^7.15.4",
-        "@babel/plugin-transform-spread": "^7.12.1",
+        "@babel/core": "^7.15.5",
-        "@babel/preset-env": "^7.12.7",
+        "@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",
+        "@tsconfig/svelte": "^2.0.1",
-        "chokidar": "^3.4.3",
+        "chokidar": "^3.5.2",
         "copy-dir": "^1.3.0",
-        "esbuild": "^0.8.17",
+        "esbuild": "^0.12.27",
-        "esbuild-svelte": "^0.4.0",
+        "esbuild-svelte": "^0.5.4",
-        "less": "^3.12.2",
+        "less": "^4.1.1",
-        "postcss": "^8.1.10",
+        "postcss": "^8.3.6",
-        "prettier": "^2.2.0",
+        "prettier": "^2.4.0",
-        "prettier-plugin-svelte": "^1.4.1",
+        "prettier-plugin-svelte": "^2.4.0",
-        "sass": "^1.30.0",
+        "sass": "^1.39.2",
-        "svelte": "^3.29.7",
+        "svelte": "^3.42.5",
-        "svelte-check": "^1.1.11",
+        "svelte-check": "^2.2.6",
-        "svelte-preprocess": "^4.0.8",
+        "svelte-preprocess": "^4.9.4",
-        "svelte-preprocess-esbuild": "^1.0.4",
+        "svelte-preprocess-esbuild": "^2.0.0",
-        "svelte-routing": "^1.4.2",
+        "svelte-routing": "^1.6.0",
         "svelte-scrollto": "^0.2.0",
-        "tslib": "^2.0.3",
+        "tslib": "^2.3.1",
-        "typescript": "^4.1.2",
+        "typescript": "^4.4.3",
         "wmbasic-api-types": "https://gitbase.de/cms/wmbasic-api-types.git"
     },
     "dependencies": {
-        "@sentry/browser": "^6.2.1",
+        "@sentry/browser": "^6.12.0",
-        "@sentry/tracing": "^6.2.1",
+        "@sentry/tracing": "^6.12.0",
-        "core-js": "3"
+        "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"
     }
 }

public/spa.html

@@ -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

scripts/cy-command.docker.sh

@@ -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
+

scripts/esbuild-wrapper.js

@@ -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.`)
 }

src/components/App.svelte

@@ -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> -->

src/components/routes/Content.svelte

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

src/config.ts

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

src/css/main.less

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

svelte.config.js

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