init

src/components/App.svelte

@@ -0,0 +1,32 @@
+<h1>__PROJECT_TITLE__</h1>
+
+<style lang="less">
+    h1 {
+        color: red;
+    }
+</style>
+
+<script lang="typescript">
+    import { scrollToTop } from "svelte-scrollto"
+    import { location } from "../store"
+
+    export let url = ""
+    if (url) {
+        // ssr
+        let l = url.split("?")
+        $location = {
+            path: l[0],
+            search: l.length > 1 ? l[1] : "",
+            categoryPath: l[0].replace(/\/\d{4,99}[^\/]+$/, ""),
+            push: false,
+            pop: false,
+        }
+    }
+
+    // scroll to top on new site
+    location.subscribe((l) => {
+        if (l.push) scrollToTop()
+    })
+
+    if (typeof window !== "undefined") console.log("App initialized")
+</script>

src/config.ts

@@ -0,0 +1,22 @@
+// @ts-check
+import * as sentry from "./sentry"
+
+export const title = "__PROJECT_TITLE__"
+
+let _apiBaseURL =
+    typeof window !== "undefined" && window.localStorage?.getItem("apiBase")
+
+export const apiBaseURL = _apiBaseURL || "/api/"
+export const sentryDSN =
+    "https://95fad64e48484bd7b3e52e56416ac38e@sentry.basehosts.de/2"
+export const sentryTracingOrigins = [
+    "localhost",
+    apiBaseURL,
+    // more api trace urls here
+    /^\//,
+]
+export const sentryEnvironment = "local"
+
+// need to execute early for fetch wrapping
+// will be uncommented via drone CI
+// sentry.init(sentryDSN, sentryTracingOrigins, sentryEnvironment)

src/index.ts

@@ -0,0 +1,96 @@
+import App from "./components/App.svelte"
+import { location } from "./store"
+import { apiBaseURL } from "./config"
+
+console.log("API Base: ", apiBaseURL)
+
+// update location store
+const publishLocation = (_p?: string) => {
+    let _s: string
+    if (_p) {
+        const parts = _p.split("?")
+        _p = parts.shift()
+        _s = parts.join()
+        if (_s) _s = "?" + _s
+    }
+
+    const newLocation = {
+        path:
+            _p || (typeof window !== "undefined" && window.location?.pathname),
+        search:
+            _s || (typeof window !== "undefined" && window.location?.search),
+        push: !!_p,
+        pop: !_p,
+        categoryPath: "",
+    }
+    newLocation.categoryPath = newLocation.path.replace(/\/\d{4,99}[^\/]+$/, "")
+    location.set(newLocation)
+}
+
+// history proxy for location store update
+if (typeof history !== "undefined") {
+    if (typeof Proxy !== "undefined") {
+        // modern browser
+        const historyApply = (target, thisArg, argumentsList) => {
+            publishLocation(
+                argumentsList && argumentsList.length >= 2 && argumentsList[2]
+            )
+            Reflect.apply(target, thisArg, argumentsList)
+        }
+
+        history.pushState = new Proxy(history.pushState, {
+            apply: historyApply,
+        })
+
+        history.replaceState = new Proxy(history.replaceState, {
+            apply: historyApply,
+        })
+    } else {
+        // ie11
+        const pushStateFn = history.pushState
+        const replaceStateFn = history.replaceState
+
+        history.pushState = function (data: any, title: string, url?: string) {
+            publishLocation(url)
+            return pushStateFn.apply(history, arguments)
+        }
+        history.replaceState = function (
+            data: any,
+            title: string,
+            url?: string
+        ) {
+            publishLocation(url)
+            return replaceStateFn.apply(history, arguments)
+        }
+    }
+} // else ssr -> no history handling
+
+typeof window !== "undefined" &&
+    window.addEventListener("popstate", (event) => {
+        publishLocation()
+    })
+
+let appContainer = document?.getElementById("appContainer")
+
+const hydrate = true //import.meta?.env?.MODE !== "development"
+console.log("Features: ", { hydrate })
+const app = new App({
+    target: appContainer,
+    props: {},
+    hydrate,
+})
+
+export default app
+
+// PWA
+if (typeof navigator !== "undefined" && "serviceWorker" in navigator) {
+    console.log("Registering service worker")
+    navigator.serviceWorker
+        .register("/serviceworker.js", { scope: "/" })
+        .then((reg) => {
+            console.log("Registration succeeded. Scope is " + reg.scope)
+        })
+        .catch((e) => {
+            console.log("Registration failed:", e)
+        })
+}

src/sentry.ts

@@ -0,0 +1,24 @@
+import * as Sentry from "@sentry/browser"
+import { Integrations } from "@sentry/tracing"
+
+export const init = (dsn, tracingOrigins, environment) => {
+    if (typeof window !== "undefined") {
+        Sentry.init({
+            dsn: dsn,
+            integrations: [
+                new Integrations.BrowserTracing({
+                    tracingOrigins: tracingOrigins,
+                    traceFetch: false,
+                    traceXHR: false,
+                }),
+            ],
+            environment: environment,
+            tracesSampleRate: 1.0,
+            debug: false,
+        })
+        console.log("Sentry initialized")
+    }
+}
+
+export const currentTransaction = () =>
+    Sentry.getCurrentHub().getScope().getTransaction()

src/ssr.ts

@@ -0,0 +1,3 @@
+import App from "./components/App.svelte"
+
+export default App

src/store.ts

@@ -0,0 +1,12 @@
+import { writable, get } from "svelte/store"
+
+const initLoc = {
+    path: (typeof window !== "undefined" && window.location?.pathname) || "/",
+    search: (typeof window !== "undefined" && window.location?.search) || "",
+    push: false,
+    pop: false,
+    categoryPath: "",
+}
+initLoc.categoryPath = initLoc.path.replace(/\/\d{4,99}[^\/]+$/, "")
+
+export const location = writable(initLoc)