From dd595371b36b4f2d2d92ace4e0d9336c31fa93e9 Mon Sep 17 00:00:00 2001
From: PapatMayuri <papat.mayuri25@gmail.com>
Date: Tue, 26 Nov 2024 18:44:39 +0530
Subject: [PATCH 1/3] Updated the example of with-unstated to utilize the App
 Router.

---
 .../{components => app/_components}/Clock.js  | 10 +++---
 .../with-unstated/app/_components/Counter.js  | 17 +++++++++
 examples/with-unstated/app/about/page.tsx     | 17 +++++++++
 .../clock.js => app/hooks/useClock.ts}        |  9 +++--
 .../with-unstated/app/hooks/useCounter.ts     | 13 +++++++
 examples/with-unstated/app/layout.tsx         | 16 +++++++++
 examples/with-unstated/app/page.tsx           | 17 +++++++++
 examples/with-unstated/components/Counter.js  | 16 ---------
 examples/with-unstated/containers/counter.js  | 13 -------
 examples/with-unstated/package.json           | 11 ++++--
 examples/with-unstated/pages/about.js         | 23 ------------
 examples/with-unstated/pages/index.js         | 23 ------------
 examples/with-unstated/tsconfig.json          | 35 +++++++++++++++++++
 13 files changed, 132 insertions(+), 88 deletions(-)
 rename examples/with-unstated/{components => app/_components}/Clock.js (73%)
 create mode 100644 examples/with-unstated/app/_components/Counter.js
 create mode 100644 examples/with-unstated/app/about/page.tsx
 rename examples/with-unstated/{containers/clock.js => app/hooks/useClock.ts} (65%)
 create mode 100644 examples/with-unstated/app/hooks/useCounter.ts
 create mode 100644 examples/with-unstated/app/layout.tsx
 create mode 100644 examples/with-unstated/app/page.tsx
 delete mode 100644 examples/with-unstated/components/Counter.js
 delete mode 100644 examples/with-unstated/containers/counter.js
 delete mode 100644 examples/with-unstated/pages/about.js
 delete mode 100644 examples/with-unstated/pages/index.js
 create mode 100644 examples/with-unstated/tsconfig.json

diff --git a/examples/with-unstated/components/Clock.js b/examples/with-unstated/app/_components/Clock.js
similarity index 73%
rename from examples/with-unstated/components/Clock.js
rename to examples/with-unstated/app/_components/Clock.js
index 546a9a3ed6103..890631d028155 100644
--- a/examples/with-unstated/components/Clock.js
+++ b/examples/with-unstated/app/_components/Clock.js
@@ -1,16 +1,16 @@
-import ClockContainer from "../containers/clock";
-
+"use client"
+import { useClock } from "../hooks/useClock";
 const pad = (n) => (n < 10 ? `0${n}` : n);
 
 const format = (t) =>
   `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`;
 
 export default function Clock() {
-  const clock = ClockContainer.useContainer();
+  const { lastUpdate, light } = useClock(); 
 
   return (
-    <div className={clock.light ? "light" : ""}>
-      {format(new Date(clock.lastUpdate))}
+    <div className={light ? "light" : ""}>
+      {format(new Date(lastUpdate))}
       <style jsx>{`
         div {
           padding: 15px;
diff --git a/examples/with-unstated/app/_components/Counter.js b/examples/with-unstated/app/_components/Counter.js
new file mode 100644
index 0000000000000..66d23b05842ca
--- /dev/null
+++ b/examples/with-unstated/app/_components/Counter.js
@@ -0,0 +1,17 @@
+"use client"
+import { useCounter } from "../hooks/useCounter"; // import the custom hook
+
+export default function Counter() {
+  const { count, increment, decrement, reset } = useCounter(); 
+
+  return (
+    <div>
+      <h1>
+        Count: <span>{count}</span>
+      </h1>
+      <button onClick={() => decrement()}>-1</button>
+      <button onClick={() => increment()}>+1</button>
+      <button onClick={() => reset()}>Reset</button>
+    </div>
+  );
+}
diff --git a/examples/with-unstated/app/about/page.tsx b/examples/with-unstated/app/about/page.tsx
new file mode 100644
index 0000000000000..08be690d7ad5c
--- /dev/null
+++ b/examples/with-unstated/app/about/page.tsx
@@ -0,0 +1,17 @@
+import Link from "next/link";
+import Clock from "../_components/Clock";
+import Counter from "../_components/Counter";
+
+export default function Index() {
+  return (
+        <div>
+          <Link href="/">go to Index</Link>
+          <br />
+          <br />
+          <div>
+            <Clock />
+            <Counter />
+          </div>
+        </div>
+  );
+}
diff --git a/examples/with-unstated/containers/clock.js b/examples/with-unstated/app/hooks/useClock.ts
similarity index 65%
rename from examples/with-unstated/containers/clock.js
rename to examples/with-unstated/app/hooks/useClock.ts
index b56a14a557b2e..20528e5cdd83c 100644
--- a/examples/with-unstated/containers/clock.js
+++ b/examples/with-unstated/app/hooks/useClock.ts
@@ -1,11 +1,12 @@
+"use client";
+
 import { useState, useEffect } from "react";
-import { createContainer } from "unstated-next";
 
-function useClock() {
+export function useClock() {
   const [data, setData] = useState({ lastUpdate: 0, light: false });
 
   useEffect(() => {
-    let interval = setInterval(() => {
+    const interval = setInterval(() => {
       setData({ lastUpdate: Date.now(), light: !data.light });
     }, 1000);
 
@@ -14,5 +15,3 @@ function useClock() {
 
   return data;
 }
-
-export default createContainer(useClock);
diff --git a/examples/with-unstated/app/hooks/useCounter.ts b/examples/with-unstated/app/hooks/useCounter.ts
new file mode 100644
index 0000000000000..cfa16f8638c6c
--- /dev/null
+++ b/examples/with-unstated/app/hooks/useCounter.ts
@@ -0,0 +1,13 @@
+"use client"; 
+
+import { useState } from "react";
+
+export function useCounter() {
+    const [count, setCount] = useState(0);
+    const decrement = () => setCount(count - 1);
+    const increment = () => setCount(count + 1);
+    const reset = () => setCount(0);
+  
+    return { count, decrement, increment, reset };
+  }
+  
\ No newline at end of file
diff --git a/examples/with-unstated/app/layout.tsx b/examples/with-unstated/app/layout.tsx
new file mode 100644
index 0000000000000..a14e64fcd5e33
--- /dev/null
+++ b/examples/with-unstated/app/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/examples/with-unstated/app/page.tsx b/examples/with-unstated/app/page.tsx
new file mode 100644
index 0000000000000..60e4189b9b9b4
--- /dev/null
+++ b/examples/with-unstated/app/page.tsx
@@ -0,0 +1,17 @@
+import Link from "next/link";
+import Clock from "./_components/Clock";
+import Counter from "./_components/Counter";
+
+export default function Page() {
+  return (
+    <div>
+      <Link href="/about">Go to About</Link>
+      <br />
+      <br />
+      <div>
+        <Clock />
+        <Counter />
+      </div>
+    </div>
+  );
+}
diff --git a/examples/with-unstated/components/Counter.js b/examples/with-unstated/components/Counter.js
deleted file mode 100644
index 3f4071b934f9e..0000000000000
--- a/examples/with-unstated/components/Counter.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import CounterContainer from "../containers/counter";
-
-export default function Counter() {
-  const counter = CounterContainer.useContainer();
-
-  return (
-    <div>
-      <h1>
-        Count: <span>{counter.count}</span>
-      </h1>
-      <button onClick={() => counter.decrement()}>-1</button>
-      <button onClick={() => counter.increment()}>+1</button>
-      <button onClick={() => counter.reset()}>Reset</button>
-    </div>
-  );
-}
diff --git a/examples/with-unstated/containers/counter.js b/examples/with-unstated/containers/counter.js
deleted file mode 100644
index 6bacf9c2f38dd..0000000000000
--- a/examples/with-unstated/containers/counter.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useState } from "react";
-import { createContainer } from "unstated-next";
-
-function useCounter() {
-  const [count, setCount] = useState(0);
-  const decrement = () => setCount(count - 1);
-  const increment = () => setCount(count + 1);
-  const reset = () => setCount(0);
-
-  return { count, decrement, increment, reset };
-}
-
-export default createContainer(useCounter);
diff --git a/examples/with-unstated/package.json b/examples/with-unstated/package.json
index 9e1f0f8ca6b91..2d0b37ef35f25 100644
--- a/examples/with-unstated/package.json
+++ b/examples/with-unstated/package.json
@@ -7,8 +7,13 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "unstated-next": "1.1.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "unstated-next": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "@types/react": "^18.3.12",
+    "typescript": "^5.7.2"
   }
 }
diff --git a/examples/with-unstated/pages/about.js b/examples/with-unstated/pages/about.js
deleted file mode 100644
index 7a6330c0ddf63..0000000000000
--- a/examples/with-unstated/pages/about.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Link from "next/link";
-import ClockContainer from "../containers/clock";
-import CounterContainer from "../containers/counter";
-import Clock from "../components/Clock";
-import Counter from "../components/Counter";
-
-export default function Index() {
-  return (
-    <CounterContainer.Provider>
-      <ClockContainer.Provider>
-        <div>
-          <Link href="/">go to Index</Link>
-          <br />
-          <br />
-          <div>
-            <Clock />
-            <Counter />
-          </div>
-        </div>
-      </ClockContainer.Provider>
-    </CounterContainer.Provider>
-  );
-}
diff --git a/examples/with-unstated/pages/index.js b/examples/with-unstated/pages/index.js
deleted file mode 100644
index 43c39814607ef..0000000000000
--- a/examples/with-unstated/pages/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Link from "next/link";
-import ClockContainer from "../containers/clock";
-import CounterContainer from "../containers/counter";
-import Clock from "../components/Clock";
-import Counter from "../components/Counter";
-
-export default function Index() {
-  return (
-    <CounterContainer.Provider>
-      <ClockContainer.Provider>
-        <div>
-          <Link href="/about">go to About</Link>
-          <br />
-          <br />
-          <div>
-            <Clock />
-            <Counter />
-          </div>
-        </div>
-      </ClockContainer.Provider>
-    </CounterContainer.Provider>
-  );
-}
diff --git a/examples/with-unstated/tsconfig.json b/examples/with-unstated/tsconfig.json
new file mode 100644
index 0000000000000..f619795e7255f
--- /dev/null
+++ b/examples/with-unstated/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 fdf13a03d732152ad4e38917cfbf719c086ac34b Mon Sep 17 00:00:00 2001
From: PapatMayuri <papat.mayuri25@gmail.com>
Date: Tue, 26 Nov 2024 19:15:22 +0530
Subject: [PATCH 2/3] slight change in package json file.

---
 examples/with-unstated/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/with-unstated/package.json b/examples/with-unstated/package.json
index 2d0b37ef35f25..bfa7ed22087da 100644
--- a/examples/with-unstated/package.json
+++ b/examples/with-unstated/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "scripts": {
-    "dev": "next",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },

From 3bbc3e509ae2a9fc6812b3da4ebb4983fdbbc5a9 Mon Sep 17 00:00:00 2001
From: samcx <sam@vercel.com>
Date: Tue, 26 Nov 2024 14:24:14 -0800
Subject: [PATCH 3/3] chore(examples): remove example (unstated-next is very
 old)

---
 examples/with-unstated/.gitignore             | 36 -------------------
 examples/with-unstated/README.md              | 29 ---------------
 .../with-unstated/app/_components/Clock.js    | 31 ----------------
 .../with-unstated/app/_components/Counter.js  | 17 ---------
 examples/with-unstated/app/about/page.tsx     | 17 ---------
 examples/with-unstated/app/hooks/useClock.ts  | 17 ---------
 .../with-unstated/app/hooks/useCounter.ts     | 13 -------
 examples/with-unstated/app/layout.tsx         | 16 ---------
 examples/with-unstated/app/page.tsx           | 17 ---------
 examples/with-unstated/package.json           | 19 ----------
 examples/with-unstated/tsconfig.json          | 35 ------------------
 11 files changed, 247 deletions(-)
 delete mode 100644 examples/with-unstated/.gitignore
 delete mode 100644 examples/with-unstated/README.md
 delete mode 100644 examples/with-unstated/app/_components/Clock.js
 delete mode 100644 examples/with-unstated/app/_components/Counter.js
 delete mode 100644 examples/with-unstated/app/about/page.tsx
 delete mode 100644 examples/with-unstated/app/hooks/useClock.ts
 delete mode 100644 examples/with-unstated/app/hooks/useCounter.ts
 delete mode 100644 examples/with-unstated/app/layout.tsx
 delete mode 100644 examples/with-unstated/app/page.tsx
 delete mode 100644 examples/with-unstated/package.json
 delete mode 100644 examples/with-unstated/tsconfig.json

diff --git a/examples/with-unstated/.gitignore b/examples/with-unstated/.gitignore
deleted file mode 100644
index fd3dbb571a12a..0000000000000
--- a/examples/with-unstated/.gitignore
+++ /dev/null
@@ -1,36 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
diff --git a/examples/with-unstated/README.md b/examples/with-unstated/README.md
deleted file mode 100644
index 20d489aa5fdeb..0000000000000
--- a/examples/with-unstated/README.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Unstated example
-
-This example shows how to integrate [Unstated Next](https://github.com/jamiebuilds/unstated-next) with Next.js.
-
-There are two pages, `/` and `/about`, both render a counter and a timer, the state is saved for the current page and reset when switching to a different page. To keep a shared state between pages you can add the state providers to `pages/_app.js` instead of using the page.
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-unstated)
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-unstated&project-name=with-unstated&repository-name=with-unstated)
-
-## How to use
-
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
-
-```bash
-npx create-next-app --example with-unstated with-unstated-app
-```
-
-```bash
-yarn create next-app --example with-unstated with-unstated-app
-```
-
-```bash
-pnpm create next-app --example with-unstated with-unstated-app
-```
-
-Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-unstated/app/_components/Clock.js b/examples/with-unstated/app/_components/Clock.js
deleted file mode 100644
index 890631d028155..0000000000000
--- a/examples/with-unstated/app/_components/Clock.js
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client"
-import { useClock } from "../hooks/useClock";
-const pad = (n) => (n < 10 ? `0${n}` : n);
-
-const format = (t) =>
-  `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`;
-
-export default function Clock() {
-  const { lastUpdate, light } = useClock(); 
-
-  return (
-    <div className={light ? "light" : ""}>
-      {format(new Date(lastUpdate))}
-      <style jsx>{`
-        div {
-          padding: 15px;
-          display: inline-block;
-          color: #82fa58;
-          font:
-            50px menlo,
-            monaco,
-            monospace;
-          background-color: #000;
-        }
-        .light {
-          background-color: #999;
-        }
-      `}</style>
-    </div>
-  );
-}
diff --git a/examples/with-unstated/app/_components/Counter.js b/examples/with-unstated/app/_components/Counter.js
deleted file mode 100644
index 66d23b05842ca..0000000000000
--- a/examples/with-unstated/app/_components/Counter.js
+++ /dev/null
@@ -1,17 +0,0 @@
-"use client"
-import { useCounter } from "../hooks/useCounter"; // import the custom hook
-
-export default function Counter() {
-  const { count, increment, decrement, reset } = useCounter(); 
-
-  return (
-    <div>
-      <h1>
-        Count: <span>{count}</span>
-      </h1>
-      <button onClick={() => decrement()}>-1</button>
-      <button onClick={() => increment()}>+1</button>
-      <button onClick={() => reset()}>Reset</button>
-    </div>
-  );
-}
diff --git a/examples/with-unstated/app/about/page.tsx b/examples/with-unstated/app/about/page.tsx
deleted file mode 100644
index 08be690d7ad5c..0000000000000
--- a/examples/with-unstated/app/about/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Link from "next/link";
-import Clock from "../_components/Clock";
-import Counter from "../_components/Counter";
-
-export default function Index() {
-  return (
-        <div>
-          <Link href="/">go to Index</Link>
-          <br />
-          <br />
-          <div>
-            <Clock />
-            <Counter />
-          </div>
-        </div>
-  );
-}
diff --git a/examples/with-unstated/app/hooks/useClock.ts b/examples/with-unstated/app/hooks/useClock.ts
deleted file mode 100644
index 20528e5cdd83c..0000000000000
--- a/examples/with-unstated/app/hooks/useClock.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-
-export function useClock() {
-  const [data, setData] = useState({ lastUpdate: 0, light: false });
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setData({ lastUpdate: Date.now(), light: !data.light });
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [data.light]);
-
-  return data;
-}
diff --git a/examples/with-unstated/app/hooks/useCounter.ts b/examples/with-unstated/app/hooks/useCounter.ts
deleted file mode 100644
index cfa16f8638c6c..0000000000000
--- a/examples/with-unstated/app/hooks/useCounter.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-"use client"; 
-
-import { useState } from "react";
-
-export function useCounter() {
-    const [count, setCount] = useState(0);
-    const decrement = () => setCount(count - 1);
-    const increment = () => setCount(count + 1);
-    const reset = () => setCount(0);
-  
-    return { count, decrement, increment, reset };
-  }
-  
\ No newline at end of file
diff --git a/examples/with-unstated/app/layout.tsx b/examples/with-unstated/app/layout.tsx
deleted file mode 100644
index a14e64fcd5e33..0000000000000
--- a/examples/with-unstated/app/layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export const metadata = {
-  title: 'Next.js',
-  description: 'Generated by Next.js',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  )
-}
diff --git a/examples/with-unstated/app/page.tsx b/examples/with-unstated/app/page.tsx
deleted file mode 100644
index 60e4189b9b9b4..0000000000000
--- a/examples/with-unstated/app/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Link from "next/link";
-import Clock from "./_components/Clock";
-import Counter from "./_components/Counter";
-
-export default function Page() {
-  return (
-    <div>
-      <Link href="/about">Go to About</Link>
-      <br />
-      <br />
-      <div>
-        <Clock />
-        <Counter />
-      </div>
-    </div>
-  );
-}
diff --git a/examples/with-unstated/package.json b/examples/with-unstated/package.json
deleted file mode 100644
index bfa7ed22087da..0000000000000
--- a/examples/with-unstated/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "next": "latest",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "unstated-next": "^1.1.0"
-  },
-  "devDependencies": {
-    "@types/node": "^22.10.0",
-    "@types/react": "^18.3.12",
-    "typescript": "^5.7.2"
-  }
-}
diff --git a/examples/with-unstated/tsconfig.json b/examples/with-unstated/tsconfig.json
deleted file mode 100644
index f619795e7255f..0000000000000
--- a/examples/with-unstated/tsconfig.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "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"
-  ]
-}