feat: Allow changing persistence (#1025)

PostHog · Feb 20, 2024 · c820f2c · c820f2c
1 parent e973135
commit c820f2c
Show file tree

Hide file tree

Showing 17 changed files with 792 additions and 108 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "author": "[email protected]",
     "license": "MIT",
     "scripts": {
-        "start": "pnpm build-rollup -w",
+        "start": "pnpm build-react && pnpm build-rollup -w",
         "build": "pnpm build-rollup && pnpm build-react",
         "build-rollup": "rm -rf lib && tsc -b && rollup -c --bundleConfigAsCjs",
         "build-react": "cd react; pnpm i; pnpm build;",

diff --git a/playground/nextjs/package.json b/playground/nextjs/package.json
@@ -3,7 +3,8 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
-        "dev": "next dev",
+        "clean-react": "cd ../../react && rm -rf ./node_modules/",
+        "dev": "pnpm run clean-react && next dev",
         "build": "next build",
         "start": "next start",
         "lint": "next lint"
@@ -20,5 +21,10 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "typescript": "4.9.5"
+    },
+    "devDependencies": {
+        "autoprefixer": "^10.4.17",
+        "postcss": "^8.4.35",
+        "tailwindcss": "^3.4.1"
     }
 }
diff --git a/playground/nextjs/pages/_app.tsx b/playground/nextjs/pages/_app.tsx
@@ -6,6 +6,7 @@ import { useRouter } from 'next/router'
 
 import posthog from 'posthog-js'
 import { PostHogProvider } from 'posthog-js/react'
+import { CookieBanner, cookieConsentGiven } from '@/src/CookieBanner'
 
 if (typeof window !== 'undefined') {
     posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || '', {
@@ -15,10 +16,11 @@ if (typeof window !== 'undefined') {
         },
         debug: true,
         __preview_send_client_session_params: true,
-        __preview_measure_pageview_stats: true,
         scroll_root_selector: ['#scroll_element', 'html'],
+        persistence: cookieConsentGiven() ? 'localStorage+cookie' : 'memory',
     })
-    ;(window as any).posthog = posthog
+
+    window.posthog = posthog
 }
 
 export default function App({ Component, pageProps }: AppProps) {
@@ -37,6 +39,8 @@ export default function App({ Component, pageProps }: AppProps) {
     return (
         <PostHogProvider client={posthog}>
             <Component {...pageProps} />
+
+            <CookieBanner />
         </PostHogProvider>
     )
 }
diff --git a/playground/nextjs/pages/iframe.tsx b/playground/nextjs/pages/iframe.tsx
@@ -27,6 +27,7 @@ export default function Home() {
 
                 {otherHost && (
                     <iframe
+                        className="border rounded"
                         src={`http://${otherHost}:3000/`}
                         style={{ width: '100%', height: '500px' }}
                         onLoad={() => {

diff --git a/playground/nextjs/pages/index.tsx b/playground/nextjs/pages/index.tsx
@@ -5,11 +5,13 @@ import Link from 'next/link'
 
 export default function Home() {
     const posthog = usePostHog()
+    const [isClient, setIsClient] = useState(false)
     const result = useFeatureFlagEnabled('test')
 
     const [time, setTime] = useState('')
 
     useEffect(() => {
+        setIsClient(true)
         const t = setInterval(() => {
             setTime(new Date().toISOString().split('T')[1].split('.')[0])
         }, 1000)
@@ -32,10 +34,10 @@ export default function Home() {
 
                 <p>The current time is {time}</p>
 
-                <div className="buttons">
+                <div className="flex items-center gap-2 flex-wrap">
                     <button onClick={() => posthog.capture('Clicked button')}>Capture event</button>
                     <button data-attr="autocapture-button">Autocapture buttons</button>
-                    <a data-attr="autocapture-button" href="#">
+                    <a className="Button" data-attr="autocapture-button" href="#">
                         <span>Autocapture a &gt; span</span>
                     </a>
 
@@ -52,9 +54,11 @@ export default function Home() {
                     >
                         Set user properties
                     </button>
+
+                    <button onClick={() => posthog?.reset()}>Reset</button>
                 </div>
 
-                <div className="buttons">
+                <div className="flex items-center gap-2">
                     <Link href="/animations">Animations</Link>
                     <Link href="/iframe">Iframe</Link>
                     <Link href="/canvas">Canvas</Link>
@@ -64,6 +68,26 @@ export default function Home() {
                 </div>
 
                 <p>Feature flag response: {JSON.stringify(result)}</p>
+
+                {isClient && (
+                    <>
+                        <h2 className="mt-4">PostHog info</h2>
+                        <ul className="text-xs bg-gray-100 rounded border-2 border-gray-800 p-4">
+                            <li className="font-mono">
+                                DistinctID: <b>{posthog.get_distinct_id()}</b>
+                            </li>
+                            <li className="font-mono">
+                                SessionID: <b>{posthog.get_session_id()}</b>
+                            </li>
+                            <code></code>
+                        </ul>
+
+                        <h2 className="mt-4">PostHog config</h2>
+                        <pre className="text-xs bg-gray-100 rounded border-2 border-gray-800 p-4">
+                            <code>{JSON.stringify(posthog.config, null, 2)}</code>
+                        </pre>
+                    </>
+                )}
             </main>
         </>
     )

diff --git a/playground/nextjs/pages/long.tsx b/playground/nextjs/pages/long.tsx
@@ -11,7 +11,7 @@ export default function Home() {
             </Head>
             <main>
                 <h1>A long page</h1>
-                <div className="buttons">
+                <div className="flex items-center gap-2">
                     <Link href="/">Home</Link>
                 </div>
 
@@ -25,7 +25,7 @@ export default function Home() {
                     </p>
                 ))}
 
-                <div className="buttons">
+                <div className="flex items-center gap-2">
                     <Link href="/">Home</Link>
                 </div>
             </main>

diff --git a/playground/nextjs/pages/longmain.tsx b/playground/nextjs/pages/longmain.tsx
@@ -46,7 +46,7 @@ export default function Home() {
                         The window itself does not scroll, the <code>main</code> element does. The content is exactly
                         4000px tall.
                     </p>
-                    <div className="buttons">
+                    <div className="flex items-center gap-2">
                         <Link href="/">Home</Link>
                     </div>
 
@@ -60,7 +60,7 @@ export default function Home() {
                         </p>
                     ))}
 
-                    <div className="buttons">
+                    <div className="flex items-center gap-2">
                         <Link href="/">Home</Link>
                     </div>
                 </div>