From 2c2a2098ea199b772fa83225970e4e1729a32443 Mon Sep 17 00:00:00 2001 From: PapatMayuri Date: Wed, 27 Nov 2024 15:46:12 +0530 Subject: [PATCH 1/5] updated with-styletron example to utilize the app router. --- .../{pages/_app.js => app/layout.tsx} | 8 +++- .../{pages/index.js => app/page.tsx} | 11 +++-- examples/with-styletron/package.json | 15 ++++-- examples/with-styletron/pages/_document.js | 47 ------------------- examples/with-styletron/tsconfig.json | 35 ++++++++++++++ 5 files changed, 58 insertions(+), 58 deletions(-) rename examples/with-styletron/{pages/_app.js => app/layout.tsx} (52%) rename examples/with-styletron/{pages/index.js => app/page.tsx} (71%) delete mode 100644 examples/with-styletron/pages/_document.js create mode 100644 examples/with-styletron/tsconfig.json diff --git a/examples/with-styletron/pages/_app.js b/examples/with-styletron/app/layout.tsx similarity index 52% rename from examples/with-styletron/pages/_app.js rename to examples/with-styletron/app/layout.tsx index 7c701979cd640..d6778f0ebaacb 100644 --- a/examples/with-styletron/pages/_app.js +++ b/examples/with-styletron/app/layout.tsx @@ -1,10 +1,14 @@ +"use client"; import { Provider as StyletronProvider } from "styletron-react"; import { styletron } from "../styletron"; -export default function App({ Component, pageProps }) { +export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - + + + {children} + ); } diff --git a/examples/with-styletron/pages/index.js b/examples/with-styletron/app/page.tsx similarity index 71% rename from examples/with-styletron/pages/index.js rename to examples/with-styletron/app/page.tsx index 52939a2d6598e..2dd7becf5ef63 100644 --- a/examples/with-styletron/pages/index.js +++ b/examples/with-styletron/app/page.tsx @@ -1,22 +1,25 @@ // DOCUMENTATION: http://styletron.org +"use client"; + import { styled, useStyletron } from "styletron-react"; -// statically styled component +// Statically styled component const Title = styled("h1", { color: "red", fontSize: "82px", }); -// dynamically styled component -const SubTitle = styled("h2", ({ $size }) => ({ +// Dynamically styled component +const SubTitle = styled("h2", ({ $size }: { $size: number }) => ({ color: "blue", fontSize: `${$size}px`, })); export default function Home() { - // an alternative hook based API + // An alternative hook-based API const [css] = useStyletron(); + return (
Title diff --git a/examples/with-styletron/package.json b/examples/with-styletron/package.json index 326bd2c37b411..f1535b0278e49 100644 --- a/examples/with-styletron/package.json +++ b/examples/with-styletron/package.json @@ -6,10 +6,15 @@ "start": "next start" }, "dependencies": { - "next": "latest", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "styletron-engine-atomic": "1.4.6", - "styletron-react": "6.1.0" + "next": "^15.0.3", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "styletron-engine-atomic": "^1.6.2", + "styletron-react": "^6.1.1" + }, + "devDependencies": { + "@types/node": "^22.10.0", + "@types/react": "^18.3.12", + "typescript": "^5.7.2" } } diff --git a/examples/with-styletron/pages/_document.js b/examples/with-styletron/pages/_document.js deleted file mode 100644 index 20d20a8ab23a0..0000000000000 --- a/examples/with-styletron/pages/_document.js +++ /dev/null @@ -1,47 +0,0 @@ -import Document, { Html, Head, Main, NextScript } from "next/document"; -import { Provider as StyletronProvider } from "styletron-react"; -import { styletron } from "../styletron"; - -class MyDocument extends Document { - static async getInitialProps(context) { - const renderPage = () => - context.renderPage({ - enhanceApp: (App) => (props) => ( - - - - ), - }); - - const initialProps = await Document.getInitialProps({ - ...context, - renderPage, - }); - const stylesheets = styletron.getStylesheets() || []; - return { ...initialProps, stylesheets }; - } - - render() { - return ( - - - {this.props.stylesheets.map((sheet, i) => ( -