ssr via fetch

frontend/src/api.ts

@@ -1,12 +1,77 @@
 import { apiRequest } from "../../api/hooks/lib/ssr"
+import * as sentry from "./sentry"
+
+// fetch polyfill
+// [MIT License](LICENSE.md) © [Jason Miller](https://jasonformat.com/)
+const _f = function (url: string, options?: { [key: string]: any }) {
+    if (typeof XMLHttpRequest === "undefined") {
+        return Promise.resolve(null)
+    }
+
+    options = options || {}
+    return new Promise((resolve, reject) => {
+        const request = new XMLHttpRequest()
+        const keys: string[] = []
+        const all = []
+        const headers = {}
+
+        const response = () => ({
+            ok: ((request.status / 100) | 0) == 2, // 200-299
+            statusText: request.statusText,
+            status: request.status,
+            url: request.responseURL,
+            text: () => Promise.resolve(request.responseText),
+            json: () => Promise.resolve(request.responseText).then(JSON.parse),
+            blob: () => Promise.resolve(new Blob([request.response])),
+            clone: response,
+            headers: {
+                // @ts-ignore
+                keys: () => keys,
+                // @ts-ignore
+                entries: () => all,
+                get: (n) => headers[n.toLowerCase()],
+                has: (n) => n.toLowerCase() in headers,
+            },
+        })
+
+        request.open(options.method || "get", url, true)
+
+        request.onload = () => {
+            request
+                .getAllResponseHeaders()
+                // @ts-ignore
+                .replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm, (m, key, value) => {
+                    keys.push((key = key.toLowerCase()))
+                    all.push([key, value])
+                    headers[key] = headers[key] ? `${headers[key]},${value}` : value
+                })
+            resolve(response())
+        }
+
+        request.onerror = reject
+
+        request.withCredentials = options.credentials == "include"
+
+        for (const i in options.headers) {
+            request.setRequestHeader(i, options.headers[i])
+        }
+
+        request.send(options.body || null)
+    })
+}
+
+// fetch must be declared after sentry import to get the hijacked fetch
+// @ts-ignore
+export const _fetch: typeof fetch =
+    typeof fetch === "undefined" ? (typeof window === "undefined" ? _f : window.fetch || _f) : fetch
 
 export const api = async <T>(
     endpoint: string,
     options?: ApiOptions,
     body?: any
 ): Promise<{ data: T; count: number } | any> => {
-    let data = await apiRequest(endpoint, options, body)
+    let data = await apiRequest(endpoint, options, body, sentry, _fetch)
     // @ts-ignore
-    console.log(data, "data")
+    // console.log(data, "data")
     return data
 }

frontend/src/lib/components/CookieSet.svelte

@@ -10,31 +10,33 @@
         unten: "flex-end",
     }
 
-    window.addEventListener("ccAccept", (e) => {
-        if ((e as CustomEvent).detail[1] == cookieName) contentShown = true
-    })
-    //isCookieSet isnt really precise
-    function checkCookie(cookieName: string) {
-        // Get all cookies
-        var allCookies = decodeURIComponent(document.cookie)
-        // Split into individual cookies
-        var cookies = allCookies.split(";")
-        var ccTagCookies: string[] = []
-        cookies.forEach((e) => {
-            e.includes("ccTags") ? (ccTagCookies = e.split(",")) : void 0
+    if (typeof window !== "undefined") {
+        window.addEventListener("ccAccept", (e) => {
+            if ((e as CustomEvent).detail[1] == cookieName) contentShown = true
         })
-        for (var i = 0; i < ccTagCookies.length; i++) {
-            var c = ccTagCookies[i]
-            // Trim whitespace
-            while (c.charAt(0) == " ") c = c.substring(1)
-            // If the cookie's name matches the given name
-            if (c == cookieName) return true
+        //isCookieSet isnt really precise
+        function checkCookie(cookieName: string) {
+            // Get all cookies
+            var allCookies = decodeURIComponent(document.cookie)
+            // Split into individual cookies
+            var cookies = allCookies.split(";")
+            var ccTagCookies: string[] = []
+            cookies.forEach((e) => {
+                e.includes("ccTags") ? (ccTagCookies = e.split(",")) : void 0
+            })
+            for (var i = 0; i < ccTagCookies.length; i++) {
+                var c = ccTagCookies[i]
+                // Trim whitespace
+                while (c.charAt(0) == " ") c = c.substring(1)
+                // If the cookie's name matches the given name
+                if (c == cookieName) return true
+            }
+            return false
         }
-        return false
-    }
 
-    // Verwendung
-    if (checkCookie(cookieName)) contentShown = true
+        // Verwendung
+        if (checkCookie(cookieName)) contentShown = true
+    }
 </script>
 
 {#if contentShown}

frontend/src/lib/components/Header.svelte

@@ -4,7 +4,7 @@
 
     let opened = -1
     let openMenu = false
-    $: {
+    $: if (typeof document !== "undefined") {
         if (openMenu) document.body.style.overflow = "hidden"
         else document.body.style.overflow = "auto"
     }

frontend/src/lib/components/pagebuilder/form/Datepicker.svelte

@@ -90,24 +90,26 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="container">
-    <div
-        class="datepicker"
-        on:click|preventDefault|stopPropagation
-        on:keydown|stopPropagation
-        on:submit|stopPropagation|preventDefault
-    >
-        <CalendarView
-            weekStart="{1}"
-            bind:vaue="{value}"
-            on:change="{(e) => {
-                value = e.detail
-            }}"
-            min="{today}"
-            max="{oneYearFromNow}"
-            blackout="{blackoutDates}"
-            locale="de-DE"
-        />
-    </div>
+    {#if typeof window !== "undefined"}
+        <div
+            class="datepicker"
+            on:click|preventDefault|stopPropagation
+            on:keydown|stopPropagation
+            on:submit|stopPropagation|preventDefault
+        >
+            <CalendarView
+                weekStart="{1}"
+                bind:vaue="{value}"
+                on:change="{(e) => {
+                    value = e.detail
+                }}"
+                min="{today}"
+                max="{oneYearFromNow}"
+                blackout="{blackoutDates}"
+                locale="de-DE"
+            />
+        </div>
+    {/if}
 </div>
 
 <style lang="less">

frontend/src/routes/Page.svelte

@@ -2,14 +2,11 @@
     import { mediaLibrary, pages } from "../lib/store"
     import Pagebuilder from "../lib/components/pagebuilder/Pagebuilder.svelte"
     import { apiBaseURL, baseURL } from "../config"
-    import { onMount } from "svelte"
     import NotFound from "./NotFound.svelte"
     export let path: string = "/"
     export let isHomepage = true
     let page: Content = $pages[path]
     $: page = $pages[path]
-    let personPage = false
-    //test
 </script>
 
 <svelte:head>