From 63076eb1fd93a562ddb4dffc9c781499b5b4bfd4 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Mon, 9 Jan 2023 18:09:25 +0900
Subject: [PATCH] Cleanup example next project (switch to next 13 features)

---
 README.md                                     | 32 ++++++++++++++-
 examples/next-example/next.config.js          |  3 +-
 examples/next-example/package.json            |  1 -
 examples/next-example/src/pages/_app.tsx      | 39 +++++++++++++++----
 examples/next-example/src/pages/_document.tsx | 36 -----------------
 5 files changed, 64 insertions(+), 47 deletions(-)
 delete mode 100644 examples/next-example/src/pages/_document.tsx

diff --git a/README.md b/README.md
index f10dab3..dc79cf3 100644
--- a/README.md
+++ b/README.md
@@ -188,6 +188,36 @@ const style = registry.flush();
 
 #### Next
 
+Starting Next 13, a new hook is available to do this easily. If you have not yet migrated to next 13, don't worry, there is another solution below.
+
+Wrap your app with the following component:
+
+```tsx
+import { ReactNode, useMemo } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { createStyleRegistry, StyleRegistryProvider } from "yoshiki";
+
+const RootRegistry = ({ children }: { children: ReactNode }) => {
+	const registry = useMemo(() => createStyleRegistry(), []);
+
+	useServerInsertedHTML(() => {
+		return registry.flushToComponent();
+	});
+
+	return <StyleRegistryProvider registry={registry}>{children}</StyleRegistryProvider>;
+};
+
+const App = ({ Component, pageProps }: AppProps) => {
+	return (
+		<RootRegistry>
+			<Component {...pageProps} />
+		</RootRegistry>
+	);
+};
+```
+
+#### Next < 13
+
 Simply use the following `getInitialProps` inside the `pages/_document.tsx` file.
 
 ```tsx
@@ -275,7 +305,7 @@ const App = () => {
 		light: { background: "white", text: "black" },
 		dark: { background: "black", text: "white" },
 	};
-	const auto = useAutomaticTheme(theme);
+	const auto = useAutomaticTheme("key", theme);
 	const { css } = useYoshiki();
 
 	return (
diff --git a/examples/next-example/next.config.js b/examples/next-example/next.config.js
index 63a85ba..2e4316e 100644
--- a/examples/next-example/next.config.js
+++ b/examples/next-example/next.config.js
@@ -3,7 +3,6 @@
 // Licensed under the MIT license. See LICENSE file in the project root for details.
 //
 
-const withTM = require("next-transpile-modules")(["yoshiki"]);
 const path = require("path");
 
 /**
@@ -22,4 +21,4 @@ const nextConfig = {
 	},
 };
 
-module.exports = withTM(nextConfig);
+module.exports = nextConfig;
diff --git a/examples/next-example/package.json b/examples/next-example/package.json
index 8685661..091f310 100644
--- a/examples/next-example/package.json
+++ b/examples/next-example/package.json
@@ -10,7 +10,6 @@
 	},
 	"dependencies": {
 		"next": "13.0.3",
-		"next-transpile-modules": "^10.0.0",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"yoshiki": "workspace:^"
diff --git a/examples/next-example/src/pages/_app.tsx b/examples/next-example/src/pages/_app.tsx
index f031857..0c84848 100644
--- a/examples/next-example/src/pages/_app.tsx
+++ b/examples/next-example/src/pages/_app.tsx
@@ -3,9 +3,18 @@
 // Licensed under the MIT license. See LICENSE file in the project root for details.
 //
 
-import { Theme, ThemeProvider, useAutomaticTheme } from "yoshiki";
-import { useYoshiki, useMobileHover } from "yoshiki/web";
 import { AppProps } from "next/app";
+import { ReactNode, useMemo } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import {
+	useYoshiki,
+	createStyleRegistry,
+	useMobileHover,
+	StyleRegistryProvider,
+	Theme,
+	ThemeProvider,
+	useAutomaticTheme,
+} from "yoshiki";
 
 declare module "yoshiki" {
 	export interface Theme {
@@ -27,7 +36,21 @@ export const theme: Theme = {
 
 const AppName = () => {
 	const { css, theme } = useYoshiki();
-	return <p {...css({ padding: (theme) => theme.spacing })}>{theme.name}</p>;
+	return (
+		<div {...css({ hover: { text: { color: "red" } } })}>
+			<p {...css([{ padding: (theme) => theme.spacing }, "text"])}>{theme.name}</p>
+		</div>
+	);
+};
+
+const RootRegistry = ({ children }: { children: ReactNode }) => {
+	const registry = useMemo(() => createStyleRegistry(), []);
+
+	useServerInsertedHTML(() => {
+		return registry.flushToComponent();
+	});
+
+	return <StyleRegistryProvider registry={registry}>{children}</StyleRegistryProvider>;
 };
 
 const App = ({ Component, pageProps }: AppProps) => {
@@ -35,10 +58,12 @@ const App = ({ Component, pageProps }: AppProps) => {
 	const auto = useAutomaticTheme("theme", theme);
 
 	return (
-		<ThemeProvider theme={{ ...theme, ...auto }}>
-			<Component {...pageProps} />
-			<AppName />
-		</ThemeProvider>
+		<RootRegistry>
+			<ThemeProvider theme={{ ...theme, ...auto }}>
+				<Component {...pageProps} />
+				<AppName />
+			</ThemeProvider>
+		</RootRegistry>
 	);
 };
 
diff --git a/examples/next-example/src/pages/_document.tsx b/examples/next-example/src/pages/_document.tsx
deleted file mode 100644
index 0b0efe4..0000000
--- a/examples/next-example/src/pages/_document.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-//
-// Copyright (c) Zoe Roux and contributors. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for details.
-//
-
-import { StyleRegistryProvider, createStyleRegistry } from "yoshiki/web";
-import Document, { DocumentContext } from "next/document";
-
-Document.getInitialProps = async (ctx: DocumentContext) => {
-	const renderPage = ctx.renderPage;
-	const registry = createStyleRegistry();
-
-	ctx.renderPage = () =>
-		renderPage({
-			enhanceApp: (App) => (props) => {
-				return (
-					<StyleRegistryProvider registry={registry}>
-						<App {...props} />
-					</StyleRegistryProvider>
-				);
-			},
-		});
-
-	const props = await ctx.defaultGetInitialProps(ctx);
-	return {
-		...props,
-		styles: (
-			<>
-				{props.styles}
-				{registry.flushToComponent()}
-			</>
-		),
-	};
-};
-
-export default Document;