updated with-styletron example to utilize the app router. (#73252)

This PR updates the with-react-foundation example for using the App Router. Here are the changes that have been made: - I renamed the `pages` folder and moved it to the `app` folder. - Added the layout.tsx file as part of the App Router. - Updated the package.json file. CC: @samcx --------- Co-authored-by: samcx <[email protected]>
vercel · Nov 29, 2024 · b31ee94 · b31ee94
1 parent 1efa3c2
commit b31ee94
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 66 deletions.
diff --git a/examples/with-styletron/app/layout.tsx b/examples/with-styletron/app/layout.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { Provider as StyletronProvider } from "styletron-react";
+import { styletron } from "../styletron";
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <StyletronProvider value={styletron}>
+        <body>{children}</body>
+      </StyletronProvider>
+    </html>
+  );
+}
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
@@ -1,15 +1,20 @@
 {
   "private": true,
   "scripts": {
-    "dev": "next",
+    "dev": "next dev",
     "build": "next build",
     "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"
+    "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/_app.js b/examples/with-styletron/pages/_app.js
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,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}