Skip to content

Commit

Permalink
SSR
Browse files Browse the repository at this point in the history
  • Loading branch information
@PascalPixel
PascalPixel committed Oct 23, 2023
1 parent d65e321 commit 14f96dc
Show file tree
Hide file tree
Showing 15 changed files with 1,099 additions and 511 deletions.
2 changes: 2 additions & 0 deletions playground/nextjs-app-router/.env.example
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
NEXT_PUBLIC_POSTHOG_KEY=""
NEXT_PUBLIC_POSTHOG_HOST=""
46 changes: 46 additions & 0 deletions playground/nextjs-app-router/app/animations/content.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
'use client'

import { Player } from '@lottiefiles/react-lottie-player'

export default function Content() {
return (
<>
<Player
src="https://lottie.host/7401522f-2d8b-4049-ad18-eb0edb6af224/CE9lFrNlEH.json"
// className="ph-no-capture"
background="Transparent"
speed={3}
style={{ width: 300, height: 300 }}
direction={1}
// mode="normal"
loop
// controls
autoplay
/>
<Player
src="https://lottie.host/fb187981-8846-4ae9-98db-b95fc6347955/vO2S1YTZMn.json"
// className="ph-no-capture"
background="Transparent"
speed={3}
style={{ width: 300, height: 300 }}
direction={1}
// mode="normal"
loop
// controls
autoplay
/>
<Player
src="https://lottie.host/3239c7de-e4de-4148-830d-e95b7f747f91/vftYOWDcUO.json"
// className="ph-no-capture"
background="Transparent"
speed={3}
style={{ width: 300, height: 300 }}
direction={1}
// mode="normal"
loop
// controls
autoplay
/>
</>
)
}
52 changes: 6 additions & 46 deletions playground/nextjs-app-router/app/animations/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,16 @@
import Head from 'next/head'
import { useFeatureFlagEnabled, usePostHog } from 'posthog-js/react'
import { useEffect, useState } from 'react'
import { Player, Controls } from '@lottiefiles/react-lottie-player'
import Content from './content'

export default function Home() {
const posthog = usePostHog()
export const metadata = {
title: 'PostHog',
}

export default function Page() {
return (
<>
<Head>
<title>PostHog</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<main>
<h1>Animations</h1>
<p>Useful testing for Replay handling heavy animations</p>
<Player
src="https://lottie.host/7401522f-2d8b-4049-ad18-eb0edb6af224/CE9lFrNlEH.json"
// className="ph-no-capture"
background="Transparent"
speed={3}
style={{ width: 300, height: 300 }}
direction={1}
// mode="normal"
loop
// controls
autoplay
/>
<Player
src="https://lottie.host/fb187981-8846-4ae9-98db-b95fc6347955/vO2S1YTZMn.json"
// className="ph-no-capture"
background="Transparent"
speed={3}
style={{ width: 300, height: 300 }}
direction={1}
// mode="normal"
loop
// controls
autoplay
/>
<Player
src="https://lottie.host/3239c7de-e4de-4148-830d-e95b7f747f91/vftYOWDcUO.json"
// className="ph-no-capture"
background="Transparent"
speed={3}
style={{ width: 300, height: 300 }}
direction={1}
// mode="normal"
loop
// controls
autoplay
/>
<Content />
</main>
</>
)
Expand Down
70 changes: 70 additions & 0 deletions playground/nextjs-app-router/app/content.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
'use client'

import Link from 'next/link'
import { useEffect, useState } from 'react'
import { useFeatureFlagEnabled, usePostHog } from 'posthog-js/react'

export default function Content({ flags }: { flags: Record<string, string | boolean> }) {
const posthog = usePostHog()
const result = useFeatureFlagEnabled('test')

const [time, setTime] = useState('')

useEffect(() => {
const t = setInterval(() => {
setTime(new Date().toISOString().split('T')[1].split('.')[0])
}, 1000)

return () => {
clearInterval(t)
}
}, [])

const randomID = () => Math.round(Math.random() * 10000)

return (
<>
<main>
<h1>PostHog React</h1>

<p>The current time is {time}</p>

<div className="buttons">
<button onClick={() => posthog.capture('Clicked button')}>Capture event</button>
<button data-attr="autocapture-button">Autocapture buttons</button>
<a data-attr="autocapture-button" href="#">
<span>Autocapture a &gt; span</span>
</a>

<button className="ph-no-capture">Ignore certain elements</button>

<button onClick={() => posthog?.identify('user-' + randomID())}>Identify</button>

<button
onClick={() =>
posthog?.setPersonProperties({
email: `user-${randomID()}@posthog.com`,
})
}
>
Set user properties
</button>
</div>

<div className="buttons">
<Link href="/animations">Animations</Link>
<Link href="/iframe">Iframe</Link>
<Link href="/media">Media</Link>
<Link href="/long">Long</Link>
</div>

<p>
Feature flag response: <code>{JSON.stringify(result)}</code>
</p>
<p>
SSR feature flags: <code>{JSON.stringify(flags)}</code>
</p>
</main>
</>
)
}
37 changes: 37 additions & 0 deletions playground/nextjs-app-router/app/iframe/content.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
'use client'

import { usePostHog } from 'posthog-js/react'
import { useEffect, useState } from 'react'

export default function Page() {
const posthog = usePostHog()

const [otherHost, setOtherHost] = useState('')

useEffect(() => {
setOtherHost(window.location.origin.includes('other-localhost') ? 'localhost' : 'other-localhost')
})

return (
<>
<main>
<h1>Iframes</h1>

<h2>Cross origin iframe</h2>
<p>
This loads the same page but from <b>other-localhost</b> which you need to add to your hosts file.
</p>

{otherHost && (
<iframe
src={`http://${otherHost}:3000/`}
style={{ width: '100%', height: '500px' }}
onLoad={() => {
posthog.capture('iframe loaded')
}}
/>
)}
</main>
</>
)
}
30 changes: 6 additions & 24 deletions playground/nextjs-app-router/app/iframe/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,12 @@
import Head from 'next/head'
import { usePostHog } from 'posthog-js/react'
import { useEffect, useState } from 'react'
import Content from './content'

export default function Home() {
const posthog = usePostHog()

const [otherHost, setOtherHost] = useState('')

useEffect(() => {
setOtherHost(window.location.origin.includes('other-localhost') ? 'localhost' : 'other-localhost')
})
export const metadata = {
title: 'PostHog',
}

export default function Page() {
return (
<>
<Head>
<title>PostHog</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<main>
<h1>Iframes</h1>

Expand All @@ -25,15 +15,7 @@ export default function Home() {
This loads the same page but from <b>other-localhost</b> which you need to add to your hosts file.
</p>

{otherHost && (
<iframe
src={`http://${otherHost}:3000/`}
style={{ width: '100%', height: '500px' }}
onLoad={() => {
posthog.capture('iframe loaded')
}}
/>
)}
<Content />
</main>
</>
)
Expand Down
46 changes: 12 additions & 34 deletions playground/nextjs-app-router/app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,17 @@
import '@/styles/globals.css'
import { ReactNode, Suspense } from 'react'
import { PostHogPageview, Providers } from './providers'

import React, { useEffect } from 'react'
import type { AppProps } from 'next/app'
import { useRouter } from 'next/router'

import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'

if (typeof window !== 'undefined') {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || '', {
api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com',
session_recording: {
recordCrossOriginIframes: true,
},
debug: true,
})
;(window as any).posthog = posthog
}

export default function App({ Component, pageProps }: AppProps) {
const router = useRouter()

useEffect(() => {
// Track page views
const handleRouteChange = () => posthog.capture('$pageview')
router.events.on('routeChangeComplete', handleRouteChange)

return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [])

export default function RootLayout({ children }: { children: ReactNode }) {
return (
<PostHogProvider client={posthog}>
<Component {...pageProps} />
</PostHogProvider>
<html lang="en">
<Suspense>
<PostHogPageview />
</Suspense>

<Providers>
<body>{children}</body>
</Providers>
</html>
)
}
12 changes: 5 additions & 7 deletions playground/nextjs-app-router/app/long/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import Head from 'next/head'
import Link from 'next/link'
import React from 'react'

export default function Home() {
export const metadata = {
title: 'PostHog',
}

export default function Page() {
return (
<>
<Head>
<title>PostHog</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<main>
<h1>A long page</h1>
<div className="buttons">
Expand Down
21 changes: 11 additions & 10 deletions playground/nextjs-app-router/app/media/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
import Head from 'next/head'
export const metadata = {
title: 'PostHog',
}

export default function Home() {
export default function Page() {
return (
<>
<Head>
<title>PostHog</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<main>
<h1>Video</h1>
<p>Useful testing for Replay handling video elements</p>
<div style={{margin: 10}}>
<div style={{ margin: 10 }}>
<h3>Video</h3>
<video controls={true} style={{width: 500}}>
<video controls={true} style={{ width: 500 }}>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
</video>
</div>

<div style={{margin: 10}}>
<div style={{ margin: 10 }}>
<h3>Audio</h3>
<audio controls={true}>
<source src="https://github.com/rafaelreis-hotmart/Audio-Sample-files/raw/master/sample.mp3" type="audio/mp3" />
<source
src="https://github.com/rafaelreis-hotmart/Audio-Sample-files/raw/master/sample.mp3"
type="audio/mp3"
/>
</audio>
</div>
</main>
Expand Down
Loading

0 comments on commit 14f96dc

Please sign in to comment.