updated with-styletron example to utilize the app router.

vercel · Nov 27, 2024 · 2c2a209 · 2c2a209
1 parent 564794d
commit 2c2a209
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 58 deletions.
diff --git a/examples/with-styletron/pages/_app.js → examples/with-styletron/app/layout.tsx b/examples/with-styletron/pages/_app.js → 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 (
     <StyletronProvider value={styletron}>
-      <Component {...pageProps} />
+    <html lang="en">
+      <head />
+      <body>{children}</body>
+    </html>
     </StyletronProvider>
   );
 }
diff --git a/examples/with-styletron/pages/index.js → examples/with-styletron/app/page.tsx b/examples/with-styletron/pages/index.js → 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 (
     <div>
       <Title>Title</Title>

diff --git 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
diff --git a/examples/with-styletron/tsconfig.json b/examples/with-styletron/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"
+  ]
+}