mirror of
https://github.com/hanzoai/insights.git
synced 2026-10-30 16:15:31 +00:00
zeekay
10e6fec4c0
The rule table mapped HOG_ -> FN_ ahead of any POSTHOG rule, so POSTHOG_FOO split into POST + HOG_ and came out POSTFN_FOO. Nothing sets that. The live pods set INSIGHTS_SKIP_MIGRATION_CHECKS, which bin/migrate-check reads on the container entrypoint, so the misspelling does not degrade a feature -- it runs migrate --check against a database whose history this tree does not share and the container never starts. Both replacements are measured against the shipped tree rather than chosen: every HOG_ name with a counterpart there is spelled INSIGHTS_ (HOG_QL -> INSIGHTS_QL, HOG_FUNCTION_TEMPLATES -> INSIGHTS_FUNCTION_TEMPLATES, 12 of 12 determinate cases), and FN_ appears in it nowhere. Upstream carries 95 HOG_ tokens and zero FN_ ones, so repairing FN_ back out is exactly the inverse of the bad rule and cannot collide with an upstream name. The rule is fixed for the next convergence, and the tree it already produced is repaired in the same commit -- the codemod is idempotent against its own output, so it cannot undo this itself.
122 lines
4.9 KiB
TypeScript
122 lines
4.9 KiB
TypeScript
import { OnboardingComponentsContext, createInstallation } from 'scenes/onboarding/shared/OnboardingDocsContentWrapper'
|
|
|
|
import { StepDefinition } from '../steps'
|
|
import { SDK_DEFAULTS_DATE } from './_snippets/sdkDefaults'
|
|
|
|
export const getTanStackSteps = (ctx: OnboardingComponentsContext): StepDefinition[] => {
|
|
const { CodeBlock, Markdown, CalloutBox, dedent, snippets } = ctx
|
|
|
|
const JSEventCapture = snippets?.JSEventCapture
|
|
|
|
return [
|
|
{
|
|
title: 'Install the package',
|
|
badge: 'required',
|
|
content: (
|
|
<>
|
|
<Markdown>Install the Insights JavaScript library using your package manager:</Markdown>
|
|
<CodeBlock
|
|
blocks={[
|
|
{
|
|
language: 'bash',
|
|
file: 'npm',
|
|
code: dedent`
|
|
npm install insights-js
|
|
`,
|
|
},
|
|
{
|
|
language: 'bash',
|
|
file: 'yarn',
|
|
code: dedent`
|
|
yarn add insights-js
|
|
`,
|
|
},
|
|
{
|
|
language: 'bash',
|
|
file: 'pnpm',
|
|
code: dedent`
|
|
pnpm add insights-js
|
|
`,
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: 'Add environment variables',
|
|
badge: 'required',
|
|
content: (
|
|
<>
|
|
<Markdown>Add your Insights project token and host to your environment variables:</Markdown>
|
|
<CodeBlock
|
|
blocks={[
|
|
{
|
|
language: 'bash',
|
|
file: '.env',
|
|
code: dedent`
|
|
VITE_INSIGHTS_PROJECT_TOKEN=<ph_project_token>
|
|
VITE_INSIGHTS_HOST=<ph_client_api_host>
|
|
`,
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: 'Initialize Insights',
|
|
badge: 'required',
|
|
content: (
|
|
<>
|
|
<Markdown>
|
|
Wrap your app with the `InsightsProvider` component at the root of your application (such as
|
|
`main.tsx`):
|
|
</Markdown>
|
|
<CodeBlock
|
|
blocks={[
|
|
{
|
|
language: 'tsx',
|
|
file: 'main.tsx',
|
|
code: dedent`
|
|
import { StrictMode } from 'react'
|
|
import { createRoot } from 'react-dom/client'
|
|
import './index.css'
|
|
import App from './App.jsx'
|
|
import { InsightsProvider } from '@hanzo/react'
|
|
|
|
const options = {
|
|
api_host: import.meta.env.VITE_INSIGHTS_HOST,
|
|
defaults: '${SDK_DEFAULTS_DATE}',
|
|
} as const
|
|
|
|
createRoot(document.getElementById('root')).render(
|
|
<StrictMode>
|
|
<InsightsProvider apiKey={import.meta.env.VITE_INSIGHTS_PROJECT_TOKEN} options={options}>
|
|
<App />
|
|
</InsightsProvider>
|
|
</StrictMode>
|
|
)
|
|
`,
|
|
},
|
|
]}
|
|
/>
|
|
<CalloutBox type="fyi" title="defaults option">
|
|
<Markdown>
|
|
The `defaults` option automatically configures Insights with recommended settings for new
|
|
projects. See [SDK defaults](https://hanzo.ai/docs/libraries/js#sdk-defaults) for
|
|
details.
|
|
</Markdown>
|
|
</CalloutBox>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: 'Send events',
|
|
content: <>{JSEventCapture && <JSEventCapture />}</>,
|
|
},
|
|
]
|
|
}
|
|
|
|
export const TanStackInstallation = createInstallation(getTanStackSteps)
|