@posthog/wizard 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -13
- package/dist/src/nextjs/docs.js.map +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
> **⚠️ Experimental:** This wizard is still in an experimental phase.
|
|
6
6
|
> If you have any feedback, please drop an email to **joshua** [at] **posthog** [dot] **com**.
|
|
7
7
|
|
|
8
|
-
<h1>PostHog Wizard
|
|
9
|
-
<h4>The PostHog Wizard helps you quickly add PostHog to your project.</h4>
|
|
8
|
+
<h1>PostHog Wizard ✨</h1>
|
|
9
|
+
<h4>The PostHog Wizard helps you quickly add PostHog to your project using AI.</h4>
|
|
10
10
|
|
|
11
11
|
# Usage
|
|
12
12
|
|
|
@@ -16,21 +16,21 @@ To use the wizard, you can run it directly using:
|
|
|
16
16
|
npx @posthog/wizard
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
Currently the wizard can be used for Next.js
|
|
19
|
+
Currently the wizard can be used for React & Next.js projects. If you have other integrations you would like the wizard to support, please open a [GitHub issue](https://github.com/posthog/wizard/issues)!
|
|
20
20
|
|
|
21
21
|
# Options
|
|
22
22
|
|
|
23
23
|
The following CLI arguments are available:
|
|
24
24
|
|
|
25
|
-
| Option | Description | Type | Default | Choices
|
|
26
|
-
| ----------------- | -------------------------------------------------------------------------- | ------- | ------------------------------- |
|
|
27
|
-
| `--help` | Show help | boolean | |
|
|
28
|
-
| `--version` | Show version number | boolean | |
|
|
29
|
-
| `--debug` | Enable verbose logging | boolean | `false` |
|
|
30
|
-
| `--integration` | Choose the integration to setup | choices | Select integration during setup | "nextjs"
|
|
31
|
-
| `--force-install` | Force install the SDK NPM package (use with caution!) | boolean | `false` |
|
|
32
|
-
| `--install-dir` | Relative path to install in | string | `.` |
|
|
33
|
-
| `--region` | PostHog region to use | choices | | "us", "eu"
|
|
34
|
-
| `--default` | Select the default option for all questions automatically (where possible) | boolean | `false` |
|
|
25
|
+
| Option | Description | Type | Default | Choices | Environment Variable |
|
|
26
|
+
| ----------------- | -------------------------------------------------------------------------- | ------- | ------------------------------- | ----------------- | ---------------------------- |
|
|
27
|
+
| `--help` | Show help | boolean | | | |
|
|
28
|
+
| `--version` | Show version number | boolean | | | |
|
|
29
|
+
| `--debug` | Enable verbose logging | boolean | `false` | | `POSTHOG_WIZARD_DEBUG` |
|
|
30
|
+
| `--integration` | Choose the integration to setup | choices | Select integration during setup | "nextjs", "react" | `POSTHOG_WIZARD_INTEGRATION` |
|
|
31
|
+
| `--force-install` | Force install the SDK NPM package (use with caution!) | boolean | `false` | | |
|
|
32
|
+
| `--install-dir` | Relative path to install in | string | `.` | | `POSTHOG_WIZARD_INSTALL_DIR` |
|
|
33
|
+
| `--region` | PostHog region to use | choices | | "us", "eu" | `POSTHOG_WIZARD_REGION` |
|
|
34
|
+
| `--default` | Select the default option for all questions automatically (where possible) | boolean | `false` | | `POSTHOG_WIZARD_DEFAULT` |
|
|
35
35
|
|
|
36
36
|
> Note: A large amount of the scaffolding for this came from the amazing Sentry wizard, which you can find [here](https://github.com/getsentry/sentry-wizard) 💖
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"docs.js","sourceRoot":"","sources":["../../../src/nextjs/docs.ts"],"names":[],"mappings":";;;AAAA,wCAAwE;AAEjE,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EACJ,QAAQ,GAIT,EAAE,EAAE;IACH,OAAO;;
|
|
1
|
+
{"version":3,"file":"docs.js","sourceRoot":"","sources":["../../../src/nextjs/docs.ts"],"names":[],"mappings":";;;AAAA,wCAAwE;AAEjE,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EACJ,QAAQ,GAIT,EAAE,EAAE;IACH,OAAO;;wBAGL,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KACtC;;;;;;;;;;;;;;;;;;;kBAmBgB,IAAA,wBAAiB,EAAC,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA4C1B,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA2BxC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;;;;;;;;;;;;aAY1C,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;wBAyBO,IAAA,2BAAoB,EAAC,IAAI,CAAC;;;;wBAI1B,IAAI;;;;wBAIJ,IAAI;;;;;;;;mDAQuB,CAAC;AACpD,CAAC,CAAC;AA3JW,QAAA,sBAAsB,0BA2JjC;AAEK,MAAM,wBAAwB,GAAG,CAAC,EACvC,IAAI,EACJ,QAAQ,GAIT,EAAE,EAAE;IACH,OAAO;;aAEI,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;mCAElD,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KACtC;;;;;;;;;;;;;;;;;;kBAkBgB,IAAA,wBAAiB,EAAC,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;gBAuBzB,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;;;;;;;;;;;;aAY1C,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;wBAyBO,IAAA,2BAAoB,EAAC,IAAI,CAAC;;;;wBAI1B,IAAI;;;;wBAIJ,IAAI;;;;;;;;mDAQuB,CAAC;AACpD,CAAC,CAAC;AA3GW,QAAA,wBAAwB,4BA2GnC","sourcesContent":["import { getAssetHostFromHost, getUiHostFromHost } from '../utils/urls';\n\nexport const getNextjsAppRouterDocs = ({\n host,\n language,\n}: {\n host: string;\n language: 'typescript' | 'javascript';\n}) => {\n return `\n==============================\nFILE: PostHogProvider.${\n language === 'typescript' ? 'tsx' : 'jsx'\n } (put it somewhere where client files are, like the components folder)\nLOCATION: Wherever other providers are, or the components folder\n==============================\nChanges:\n- Create a PostHogProvider component that will be imported into the layout file.\n\nExample:\n--------------------------------------------------\n\"use client\"\n\nimport posthog from \"posthog-js\"\nimport { PostHogProvider as PHProvider, usePostHog } from \"posthog-js/react\"\nimport { Suspense, useEffect } from \"react\"\nimport { usePathname, useSearchParams } from \"next/navigation\"\n\nexport function PostHogProvider({ children }: { children: React.ReactNode }) {\n useEffect(() => {\n posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {\n api_host: \"/ingest\",\n ui_host: \"${getUiHostFromHost(host)}\",\n capture_pageview: false, // We capture pageviews manually\n capture_pageleave: true, // Enable pageleave capture\n })\n }, [])\n\n return (\n <PHProvider client={posthog}>\n <SuspendedPostHogPageView />\n {children}\n </PHProvider>\n )\n}\n\n\nfunction PostHogPageView() {\n const pathname = usePathname()\n const searchParams = useSearchParams()\n const posthog = usePostHog()\n\n useEffect(() => {\n if (pathname && posthog) {\n let url = window.origin + pathname\n const search = searchParams.toString()\n if (search) {\n url += \"?\" + search\n }\n posthog.capture(\"$pageview\", { \"$current_url\": url })\n }\n }, [pathname, searchParams, posthog])\n\n return null\n}\n\nfunction SuspendedPostHogPageView() {\n return (\n <Suspense fallback={null}>\n <PostHogPageView />\n </Suspense>\n )\n}\n--------------------------------------------------\n\n==============================\nFILE: layout.${language === 'typescript' ? 'tsx' : 'jsx'}\nLOCATION: Wherever the root layout is\n==============================\nChanges:\n- Import the PostHogProvider from the providers file and wrap the app in it.\n\nExample:\n--------------------------------------------------\n// other imports\nimport { PostHogProvider } from \"LOCATION_OF_POSTHOG_PROVIDER\"\n\nexport default function RootLayout({ children }) {\n return (\n <html lang=\"en\">\n <body>\n <PostHogProvider>\n {/* other providers */}\n {children}\n {/* other providers */}\n </PostHogProvider>\n </body>\n </html>\n )\n}\n--------------------------------------------------\n\n==============================\nFILE: posthog.${language === 'typescript' ? 'ts' : 'js'}\nLOCATION: Wherever works best given the project structure\n==============================\nChanges:\n- Initialize the PostHog Node.js client\n\nExample:\n--------------------------------------------------\nimport { PostHog } from \"posthog-node\"\n\nexport default function PostHogClient() {\n const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {\n host: \"${host}\",\n flushAt: 1,\n flushInterval: 0,\n })\n return posthogClient\n}\n--------------------------------------------------\n\n==============================\nFILE: next.config.{js,ts,mjs,cjs}\nLOCATION: Wherever the root next config is\n==============================\nChanges:\n- Add rewrites to the Next.js config to support PostHog, if there are existing rewrites, add the PostHog rewrites to them.\n- Add skipTrailingSlashRedirect to the Next.js config to support PostHog trailing slash API requests.\n- This can be of type js, ts, mjs, cjs etc. You should adapt the file according to what extension it uses, and if it does not exist yet use '.js'.\n\nExample:\n--------------------------------------------------\nconst nextConfig = {\n // other config\n async rewrites() {\n return [\n {\n source: \"/ingest/static/:path*\",\n destination: \"${getAssetHostFromHost(host)}/static/:path*\",\n },\n {\n source: \"/ingest/:path*\",\n destination: \"${host}/:path*\",\n },\n {\n source: \"/ingest/decide\",\n destination: \"${host}/decide\",\n },\n ];\n },\n // This is required to support PostHog trailing slash API requests\n skipTrailingSlashRedirect: true,\n}\nmodule.exports = nextConfig\n--------------------------------------------------`;\n};\n\nexport const getNextjsPagesRouterDocs = ({\n host,\n language,\n}: {\n host: string;\n language: 'typescript' | 'javascript';\n}) => {\n return `\n==============================\nFILE: _app.${language === 'typescript' ? 'tsx' : 'jsx'}\nLOCATION: Wherever the root _app.${\n language === 'typescript' ? 'tsx' : 'jsx'\n } file is\n==============================\nChanges:\n- Initialize PostHog in _app.js.\n- Wrap the application in PostHogProvider.\n- Manually capture $pageview events.\n\nExample:\n--------------------------------------------------\nimport { useEffect } from \"react\"\nimport { Router } from \"next/router\"\nimport posthog from \"posthog-js\"\nimport { PostHogProvider } from \"posthog-js/react\"\n\nexport default function App({ Component, pageProps }) {\n useEffect(() => {\n posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {\n api_host: \"/ingest\",\n ui_host: \"${getUiHostFromHost(host)}\",\n loaded: (posthog) => {\n if (process.env.NODE_ENV === \"development\") posthog.debug()\n },\n })\n\n const handleRouteChange = () => posthog?.capture(\"$pageview\")\n Router.events.on(\"routeChangeComplete\", handleRouteChange)\n\n return () => {\n Router.events.off(\"routeChangeComplete\", handleRouteChange)\n }\n }, [])\n\n return (\n <PostHogProvider client={posthog}>\n <Component {...pageProps} />\n </PostHogProvider>\n )\n}\n--------------------------------------------------\n\n==============================\nFILE: posthog.${language === 'typescript' ? 'ts' : 'js'}\nLOCATION: Wherever works best given the project structure\n==============================\nChanges:\n- Initialize the PostHog Node.js client\n\nExample:\n--------------------------------------------------\nimport { PostHog } from \"posthog-node\"\n\nexport default function PostHogClient() {\n const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {\n host: \"${host}\",\n flushAt: 1,\n flushInterval: 0,\n })\n return posthogClient\n}\n--------------------------------------------------\n\n==============================\nFILE: next.config.{js,ts,mjs,cjs}\nLOCATION: Wherever the root next config is\n==============================\nChanges:\n- Add rewrites to the Next.js config to support PostHog, if there are existing rewrites, add the PostHog rewrites to them.\n- Add skipTrailingSlashRedirect to the Next.js config to support PostHog trailing slash API requests.\n- This can be of type js, ts, mjs, cjs etc. You should adapt the file according to what extension it uses, and if it does not exist yet use '.js'.\n\nExample:\n--------------------------------------------------\nconst nextConfig = {\n // other config\n async rewrites() {\n return [\n {\n source: \"/ingest/static/:path*\",\n destination: \"${getAssetHostFromHost(host)}/static/:path*\",\n },\n {\n source: \"/ingest/:path*\",\n destination: \"${host}/:path*\",\n },\n {\n source: \"/ingest/decide\",\n destination: \"${host}/decide\",\n },\n ];\n },\n // This is required to support PostHog trailing slash API requests\n skipTrailingSlashRedirect: true,\n}\nmodule.exports = nextConfig\n--------------------------------------------------`;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@posthog/wizard",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"homepage": "https://github.com/posthog/wizard",
|
|
5
5
|
"repository": "https://github.com/posthog/wizard",
|
|
6
6
|
"description": "The PostHog wizard helps you to configure your project",
|
|
@@ -71,6 +71,7 @@
|
|
|
71
71
|
"eslint": "^8.18.0",
|
|
72
72
|
"eslint-config-prettier": "^8.3.0",
|
|
73
73
|
"eslint-plugin-jest": "^25.3.0",
|
|
74
|
+
"husky": "^9.1.7",
|
|
74
75
|
"jest": "^29.5.0",
|
|
75
76
|
"prettier": "^2.8.7",
|
|
76
77
|
"rimraf": "^3.0.2",
|