From 35a3a0194d7967700cb9580e57a4f0c0cbb6fe80 Mon Sep 17 00:00:00 2001
From: Nikita Galaiko <nikita@galaiko.rocks>
Date: Thu, 23 Feb 2023 12:27:29 +0100
Subject: [PATCH] optimize posthog load

---
 src/hooks.client.ts       | 20 --------------------
 src/lib/posthog.ts        | 31 +++++++++++++++++++++++++++++++
 src/routes/+layout.svelte | 23 ++++-------------------
 src/routes/+layout.ts     | 37 ++++++++++++++++++++-----------------
 4 files changed, 55 insertions(+), 56 deletions(-)
 delete mode 100644 src/hooks.client.ts
 create mode 100644 src/lib/posthog.ts

diff --git a/src/hooks.client.ts b/src/hooks.client.ts
deleted file mode 100644
index e718f41b1..000000000
--- a/src/hooks.client.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import posthog from "posthog-js";
-import { PUBLIC_POSTHOG_API_KEY } from "$env/static/public";
-
-async function setupPostHog() {
-    console.log("Initializing PostHog");
-    posthog.init(PUBLIC_POSTHOG_API_KEY, {
-        api_host: "https://eu.posthog.com",
-        capture_performance: false,
-    });
-}
-
-// Initialize the database *once*
-const phSetup = setupPostHog();
-
-export async function handle({ request, render }) {
-    // Wait for the posthog to initialize the first time
-    // or instantly get the result of when it was initialized
-    const ph = await phSetup;
-    return await render(request);
-}
diff --git a/src/lib/posthog.ts b/src/lib/posthog.ts
new file mode 100644
index 000000000..a6e3f4caf
--- /dev/null
+++ b/src/lib/posthog.ts
@@ -0,0 +1,31 @@
+import posthog from "posthog-js";
+import { PUBLIC_POSTHOG_API_KEY } from "$env/static/public";
+import type { User } from "$lib/api";
+import { log } from "$lib";
+
+export default () => {
+    const instance = posthog.init(PUBLIC_POSTHOG_API_KEY, {
+        api_host: "https://eu.posthog.com",
+        capture_performance: false,
+    });
+    log.info("posthog initialized");
+    return {
+        identify: (user: User | undefined) => {
+            if (user) {
+                log.info("posthog identify", {
+                    id: user.id,
+                    name: user.name,
+                    email: user.email,
+                });
+                instance?.identify(`user_${user.id}`, {
+                    email: user.email,
+                    name: user.name,
+                });
+            } else {
+                log.info("posthog reset");
+                instance?.capture("log-out");
+                instance?.reset();
+            }
+        },
+    };
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index fc990d26d..708eab916 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,33 +2,18 @@
     import "../app.postcss";
 
     import type { LayoutData } from "./$types";
-    import { log } from "$lib";
-    import { onMount } from "svelte";
     import { BackForwardButtons } from "$lib/components";
     import { setContext } from "svelte";
     import { writable } from "svelte/store";
     import Breadcrumbs from "$lib/components/Breadcrumbs.svelte";
-    import posthog from "posthog-js";
+
+    export let data: LayoutData;
+    const { user, posthog } = data;
 
     setContext("project", writable(null));
     setContext("session", writable(null));
 
-    onMount(log.setup);
-
-    export let data: LayoutData;
-    const { user } = data;
-
-    user.subscribe((user) => {
-        if (user) {
-            posthog.identify("user_" + user.id.toString(), {
-                email: user.email,
-                name: user.name,
-            });
-        } else {
-            posthog.capture("log-out");
-            posthog.reset();
-        }
-    });
+    user.subscribe(posthog.identify);
 </script>
 
 <header
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 665b85819..2d9bbd255 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -3,6 +3,8 @@ import type { LayoutLoad } from "./$types";
 import { building } from "$app/environment";
 import type { Project } from "$lib/projects";
 import Api from "$lib/api";
+import Posthog from "$lib/posthog";
+import { log } from "$lib";
 
 export const ssr = false;
 export const prerender = true;
@@ -11,25 +13,26 @@ export const csr = true;
 export const load: LayoutLoad = async ({ fetch }) => {
     const projects = building
         ? {
-              ...readable<Project[]>([]),
-              add: () => {
-                  throw new Error("not implemented");
-              },
-              get: () => {
-                  throw new Error("not implemented");
-              },
-          }
+            ...readable<Project[]>([]),
+            add: () => {
+                throw new Error("not implemented");
+            },
+            get: () => {
+                throw new Error("not implemented");
+            },
+        }
         : await (await import("$lib/projects")).default();
     const user = building
         ? {
-              ...readable<undefined>(undefined),
-              set: () => {
-                  throw new Error("not implemented");
-              },
-              delete: () => {
-                  throw new Error("not implemented");
-              },
-          }
+            ...readable<undefined>(undefined),
+            set: () => {
+                throw new Error("not implemented");
+            },
+            delete: () => {
+                throw new Error("not implemented");
+            },
+        }
         : await (await import("$lib/users")).default();
-    return { projects, user, api: Api({ fetch }) };
+    await log.setup();
+    return { projects, user, api: Api({ fetch }), posthog: Posthog() };
 };