mirror of
https://github.com/hanzoai/insights-js.git
synced 2026-10-30 18:34:19 +00:00
Decomplect the half-finished fork so the dependency graph has ONE source with no posthog package identity, living under github.com/hanzoinsights. LAYER 1 (package identity): rename straggler package.json names — @posthog/next->@hanzo/insights-next (Next.js SDK; distinct from the existing @hanzo/insights-nextjs config helper), @posthog/mcp->@hanzo/insights-mcp, @posthog/plugin-utils->@hanzo/insights-plugin-utils, @posthog/react-slim->@hanzo/react-slim, @posthog-tooling/release-> @hanzo/insights-tooling-release, and the @posthog/rrweb* family->@hanzo/rrweb* (matching the already-published @hanzo/rrweb*@0.0.47 + minimumReleaseAgeExclude). Repoint every repository.url/homepage/bugs to github.com/hanzoinsights/insights-js and rebrand the PostHog author/description identity to Hanzo AI. LAYER 2 (cross-package imports): rewrite every internal @posthog/* import to its @hanzo/insights*|@hanzo/rrweb* equivalent and the bare module specifiers posthog-js->@hanzo/insights, posthog-node->@hanzo/insights-node, mirrored in package.json deps + the pnpm-lock importer keys. Result: 0 @posthog/* specifiers in packages/tooling/examples/playground source. LAYER 4 (wire protocol) PRESERVED: window.posthog global, ph_* keys, $-prefixed event names, distinct_id, /decide, /e/, /flags, and the __PosthogExtensions__ hook are left unchanged — the Insights server expects them. Also repair pre-existing fork merge damage that blocked compilation (unrelated to naming; identical to origin/main): restore the @hanzo/insights-core ./process subpath (spawn-local/utils, re-matching the published artifact), the lost constructor/var declarations in core + node clients, the mangled external-scripts-loader, the missing TreeShakeable/isPlainError imports, the DeviceId enum member, and stale ../posthog-core-stateless module paths. 26/34 turbo build tasks now pass; remaining failures (browser/react-native and their dependents) are pre-existing fork damage, not rebrand-caused.
68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import { usePostHog, useFeatureFlag, useActiveFeatureFlags } from '@hanzo/insights-next'
|
|
|
|
export default function ClientHooksContent() {
|
|
const posthog = usePostHog()
|
|
const exampleFlag = useFeatureFlag('example-flag')
|
|
const activeFlags = useActiveFeatureFlags()
|
|
|
|
return (
|
|
<div>
|
|
<h1 className="text-2xl font-bold mb-2">Client-Side Hooks</h1>
|
|
<p className="text-gray-600 mb-6">
|
|
These hooks from <code className="bg-gray-100 px-1 rounded">@hanzo/insights-next</code> provide real-time
|
|
feature flag values on the client. Create a flag called{' '}
|
|
<code className="bg-gray-100 px-1 rounded">example-flag</code> in your PostHog project to see values
|
|
below.
|
|
</p>
|
|
|
|
<div className="space-y-4">
|
|
<HookCard title="usePostHog()" description="Returns the PostHog client instance.">
|
|
<p className="text-sm">
|
|
Distinct ID:{' '}
|
|
<code className="bg-gray-100 px-1 rounded">{posthog?.get_distinct_id() ?? 'loading...'}</code>
|
|
</p>
|
|
<p className="text-sm">
|
|
Session ID:{' '}
|
|
<code className="bg-gray-100 px-1 rounded">{posthog?.get_session_id() ?? 'loading...'}</code>
|
|
</p>
|
|
</HookCard>
|
|
|
|
<HookCard title="useFeatureFlag('example-flag')">
|
|
<p className="text-sm">
|
|
Value: <code className="bg-gray-100 px-1 rounded">{JSON.stringify(exampleFlag, null, 2)}</code>
|
|
</p>
|
|
</HookCard>
|
|
|
|
<HookCard title="useActiveFeatureFlags()">
|
|
<p className="text-sm">
|
|
Active flags:{' '}
|
|
<code className="bg-gray-100 px-1 rounded">
|
|
{activeFlags && activeFlags.length > 0 ? activeFlags.join(', ') : 'none'}
|
|
</code>
|
|
</p>
|
|
</HookCard>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function HookCard({
|
|
title,
|
|
description,
|
|
children,
|
|
}: {
|
|
title: string
|
|
description?: string
|
|
children: React.ReactNode
|
|
}) {
|
|
return (
|
|
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
|
<h2 className="font-semibold font-mono text-sm mb-2">{title}</h2>
|
|
{description && <p className="text-sm text-gray-500 mb-2">{description}</p>}
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|