From b75f411e0a796c946c970a8ae6e367056ea89cbd Mon Sep 17 00:00:00 2001 From: PapatMayuri Date: Wed, 27 Nov 2024 16:47:31 +0530 Subject: [PATCH 1/5] updated with-plausible example to utilize the app router. --- .vscode/settings.json | 5 ++- .../{components => app/_components}/Header.js | 0 .../{components => app/_components}/Page.js | 0 .../{pages/about.js => app/about/page.tsx} | 2 +- .../contact.js => app/contact/page.tsx} | 3 +- examples/with-plausible/app/layout.tsx | 21 +++++++++++ .../{pages/index.js => app/page.tsx} | 3 +- examples/with-plausible/package.json | 13 ++++--- examples/with-plausible/pages/_app.js | 9 ----- examples/with-plausible/tsconfig.json | 35 +++++++++++++++++++ 10 files changed, 74 insertions(+), 17 deletions(-) rename examples/with-plausible/{components => app/_components}/Header.js (100%) rename examples/with-plausible/{components => app/_components}/Page.js (100%) rename examples/with-plausible/{pages/about.js => app/about/page.tsx} (74%) rename examples/with-plausible/{pages/contact.js => app/contact/page.tsx} (93%) create mode 100644 examples/with-plausible/app/layout.tsx rename examples/with-plausible/{pages/index.js => app/page.tsx} (62%) delete mode 100644 examples/with-plausible/pages/_app.js create mode 100644 examples/with-plausible/tsconfig.json diff --git a/.vscode/settings.json b/.vscode/settings.json index 06425d362dd17..43723b395145b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -98,5 +98,8 @@ "${workspaceRoot}/.git-blame-ignore-revs" ], "astGrep.serverPath": "node_modules/@ast-grep/cli/ast-grep", - "rust-analyzer.imports.prefix": "crate" + "rust-analyzer.imports.prefix": "crate", + "[typescriptreact]": { + "editor.defaultFormatter": "vscode.typescript-language-features" + } } diff --git a/examples/with-plausible/components/Header.js b/examples/with-plausible/app/_components/Header.js similarity index 100% rename from examples/with-plausible/components/Header.js rename to examples/with-plausible/app/_components/Header.js diff --git a/examples/with-plausible/components/Page.js b/examples/with-plausible/app/_components/Page.js similarity index 100% rename from examples/with-plausible/components/Page.js rename to examples/with-plausible/app/_components/Page.js diff --git a/examples/with-plausible/pages/about.js b/examples/with-plausible/app/about/page.tsx similarity index 74% rename from examples/with-plausible/pages/about.js rename to examples/with-plausible/app/about/page.tsx index 425faf7c40891..df84156f33499 100644 --- a/examples/with-plausible/pages/about.js +++ b/examples/with-plausible/app/about/page.tsx @@ -1,4 +1,4 @@ -import Page from "../components/Page"; +import Page from "../_components/Page"; export default function About() { return ( diff --git a/examples/with-plausible/pages/contact.js b/examples/with-plausible/app/contact/page.tsx similarity index 93% rename from examples/with-plausible/pages/contact.js rename to examples/with-plausible/app/contact/page.tsx index 51896d6a14c02..3d2e8b7378dbb 100644 --- a/examples/with-plausible/pages/contact.js +++ b/examples/with-plausible/app/contact/page.tsx @@ -1,5 +1,6 @@ +"use client" import { useState } from "react"; -import Page from "../components/Page"; +import Page from "../_components/Page"; import { usePlausible } from "next-plausible"; export default function Contact() { diff --git a/examples/with-plausible/app/layout.tsx b/examples/with-plausible/app/layout.tsx new file mode 100644 index 0000000000000..64c49172520e6 --- /dev/null +++ b/examples/with-plausible/app/layout.tsx @@ -0,0 +1,21 @@ +import PlausibleProvider from "next-plausible"; + +export const metadata = { + title: 'Next.js', + description: 'Generated by Next.js', +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + + {children} + + + + ) +} diff --git a/examples/with-plausible/pages/index.js b/examples/with-plausible/app/page.tsx similarity index 62% rename from examples/with-plausible/pages/index.js rename to examples/with-plausible/app/page.tsx index fcda57a616b2e..6133ae26b315a 100644 --- a/examples/with-plausible/pages/index.js +++ b/examples/with-plausible/app/page.tsx @@ -1,4 +1,5 @@ -import Page from "../components/Page"; +import React from "react"; +import Page from "./_components/Page"; export default function Home() { return ( diff --git a/examples/with-plausible/package.json b/examples/with-plausible/package.json index 71171265b4e7f..47c829eb3cf08 100644 --- a/examples/with-plausible/package.json +++ b/examples/with-plausible/package.json @@ -1,14 +1,19 @@ { "private": true, "scripts": { - "dev": "next", + "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { "next": "latest", - "next-plausible": "^1.6.0", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "next-plausible": "^3.12.4", + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "devDependencies": { + "@types/node": "^22.10.0", + "@types/react": "^18.3.12", + "typescript": "^5.7.2" } } diff --git a/examples/with-plausible/pages/_app.js b/examples/with-plausible/pages/_app.js deleted file mode 100644 index 0067d5768633d..0000000000000 --- a/examples/with-plausible/pages/_app.js +++ /dev/null @@ -1,9 +0,0 @@ -import PlausibleProvider from "next-plausible"; - -export default function MyApp({ Component, pageProps }) { - return ( - - - - ); -} diff --git a/examples/with-plausible/tsconfig.json b/examples/with-plausible/tsconfig.json new file mode 100644 index 0000000000000..f619795e7255f --- /dev/null +++ b/examples/with-plausible/tsconfig.json @@ -0,0 +1,35 @@ +{ + "compilerOptions": { + "target": "ES2017", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "noEmit": true, + "incremental": true, + "module": "esnext", + "esModuleInterop": true, + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "plugins": [ + { + "name": "next" + } + ] + }, + "include": [ + "next-env.d.ts", + ".next/types/**/*.ts", + "**/*.ts", + "**/*.tsx" + ], + "exclude": [ + "node_modules" + ] +} From ac1e26494cc5fb1787b7e02b91260c767048e52d Mon Sep 17 00:00:00 2001 From: samcx Date: Wed, 27 Nov 2024 17:53:37 -0800 Subject: [PATCH 2/5] chore: revert .vscode changes --- .vscode/settings.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 43723b395145b..06425d362dd17 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -98,8 +98,5 @@ "${workspaceRoot}/.git-blame-ignore-revs" ], "astGrep.serverPath": "node_modules/@ast-grep/cli/ast-grep", - "rust-analyzer.imports.prefix": "crate", - "[typescriptreact]": { - "editor.defaultFormatter": "vscode.typescript-language-features" - } + "rust-analyzer.imports.prefix": "crate" } From 59a88c532c5560860b56079c6064974efaf76afc Mon Sep 17 00:00:00 2001 From: samcx Date: Wed, 27 Nov 2024 18:05:44 -0800 Subject: [PATCH 3/5] chore(examples): update tsconfig.json --- examples/with-plausible/tsconfig.json | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/examples/with-plausible/tsconfig.json b/examples/with-plausible/tsconfig.json index f619795e7255f..e934c5ff210d9 100644 --- a/examples/with-plausible/tsconfig.json +++ b/examples/with-plausible/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "ES2017", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": false, @@ -13,7 +9,7 @@ "incremental": true, "module": "esnext", "esModuleInterop": true, - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", @@ -21,15 +17,11 @@ { "name": "next" } - ] + ], + "paths": { + "@/*": ["./*"] + } }, - "include": [ - "next-env.d.ts", - ".next/types/**/*.ts", - "**/*.ts", - "**/*.tsx" - ], - "exclude": [ - "node_modules" - ] + "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] } From e25c78d2c5e548bf9351b02f7152690c795c2517 Mon Sep 17 00:00:00 2001 From: samcx Date: Wed, 27 Nov 2024 18:06:03 -0800 Subject: [PATCH 4/5] chore(examples): refactor to use Layout properly --- .../{app => }/_components/Header.js | 0 .../with-plausible/app/_components/Page.js | 10 ------- examples/with-plausible/app/contact/page.tsx | 8 ++--- examples/with-plausible/app/layout.tsx | 29 ++++++++++--------- examples/with-plausible/app/page.tsx | 7 ++--- 5 files changed, 22 insertions(+), 32 deletions(-) rename examples/with-plausible/{app => }/_components/Header.js (100%) delete mode 100644 examples/with-plausible/app/_components/Page.js diff --git a/examples/with-plausible/app/_components/Header.js b/examples/with-plausible/_components/Header.js similarity index 100% rename from examples/with-plausible/app/_components/Header.js rename to examples/with-plausible/_components/Header.js diff --git a/examples/with-plausible/app/_components/Page.js b/examples/with-plausible/app/_components/Page.js deleted file mode 100644 index 9ecadce7f7766..0000000000000 --- a/examples/with-plausible/app/_components/Page.js +++ /dev/null @@ -1,10 +0,0 @@ -import Header from "./Header"; - -export default function Page({ children }) { - return ( -
-
- {children} -
- ); -} diff --git a/examples/with-plausible/app/contact/page.tsx b/examples/with-plausible/app/contact/page.tsx index 3d2e8b7378dbb..6a3e4dbda9d98 100644 --- a/examples/with-plausible/app/contact/page.tsx +++ b/examples/with-plausible/app/contact/page.tsx @@ -1,6 +1,6 @@ -"use client" +"use client"; + import { useState } from "react"; -import Page from "../_components/Page"; import { usePlausible } from "next-plausible"; export default function Contact() { @@ -22,7 +22,7 @@ export default function Contact() { }; return ( - +

This is the Contact page

- +
); } diff --git a/examples/with-plausible/app/layout.tsx b/examples/with-plausible/app/layout.tsx index 64c49172520e6..c5694db5267a2 100644 --- a/examples/with-plausible/app/layout.tsx +++ b/examples/with-plausible/app/layout.tsx @@ -1,21 +1,24 @@ import PlausibleProvider from "next-plausible"; +import Header from "@/_components/Header"; export const metadata = { - title: 'Next.js', - description: 'Generated by Next.js', -} + title: "Next.js", + description: "Generated by Next.js", +}; export default function RootLayout({ children, -}: { - children: React.ReactNode -}) { +}: Readonly<{ + children: React.ReactNode; +}>) { return ( - - - {children} - - - - ) + + + +
+ {children} + + + + ); } diff --git a/examples/with-plausible/app/page.tsx b/examples/with-plausible/app/page.tsx index 6133ae26b315a..c1484b028f301 100644 --- a/examples/with-plausible/app/page.tsx +++ b/examples/with-plausible/app/page.tsx @@ -1,10 +1,7 @@ -import React from "react"; -import Page from "./_components/Page"; - export default function Home() { return ( - +

This is the Home page

- +
); } From 47bc50aa9a3016bfae852653feb5b308c7626dac Mon Sep 17 00:00:00 2001 From: samcx Date: Wed, 27 Nov 2024 19:13:20 -0800 Subject: [PATCH 5/5] chore(example): refactor --- examples/with-plausible/app/about/page.tsx | 6 ++---- examples/with-plausible/app/contact/page.tsx | 10 +++------- examples/with-plausible/app/layout.tsx | 12 ++++++++---- 3 files changed, 13 insertions(+), 15 deletions(-) diff --git a/examples/with-plausible/app/about/page.tsx b/examples/with-plausible/app/about/page.tsx index df84156f33499..de5d6a6f92ad4 100644 --- a/examples/with-plausible/app/about/page.tsx +++ b/examples/with-plausible/app/about/page.tsx @@ -1,9 +1,7 @@ -import Page from "../_components/Page"; - export default function About() { return ( - +

This is the About page

- +
); } diff --git a/examples/with-plausible/app/contact/page.tsx b/examples/with-plausible/app/contact/page.tsx index 6a3e4dbda9d98..e7df8e0bb8140 100644 --- a/examples/with-plausible/app/contact/page.tsx +++ b/examples/with-plausible/app/contact/page.tsx @@ -1,13 +1,13 @@ "use client"; -import { useState } from "react"; +import { FormEvent, useState } from "react"; import { usePlausible } from "next-plausible"; export default function Contact() { const [message, setMessage] = useState(""); const plausible = usePlausible(); - const handleSubmit = (e) => { + const handleSubmit = (e: FormEvent) => { e.preventDefault(); plausible("customEventName", { @@ -17,7 +17,6 @@ export default function Contact() { }); // your own submit logic - setMessage(""); }; @@ -27,10 +26,7 @@ export default function Contact() {