Refactor nextapp for wasm

cartridge-gg · Jan 14, 2025 · feae91a · feae91a
1 parent 9e4e20d
commit feae91a
Show file tree

Hide file tree

Showing 19 changed files with 338 additions and 411 deletions.
diff --git a/examples/next/next.config.js b/examples/next/next.config.js
@@ -6,29 +6,46 @@ const nextConfig = {
     externalDir: true,
   },
   webpack: (config, { isServer, dev }) => {
-    // Use the client static directory in the server bundle and prod mode
-    // Fixes `Error occurred prerendering page "/"`
-    config.output.webassemblyModuleFilename =
-      isServer && !dev
-        ? "../static/wasm/[modulehash].wasm"
-        : "static/wasm/[modulehash].wasm";
+    config.output.environment = {
+      ...config.output.environment,
+      asyncFunction: true,
+    };
 
     // Since Webpack 5 doesn't enable WebAssembly by default, we should do it manually
     config.experiments = {
       ...config.experiments,
       asyncWebAssembly: true,
-      layers: true,
+      topLevelAwait: true,
     };
 
-    // Add WASM file handling
-    config.module.rules.push({
-      test: /\.wasm$/,
-      type: "webassembly/async",
-    });
+    // https://github.com/vercel/next.js/issues/29362#issuecomment-971377869
+    if (!dev && isServer) {
+      config.output.webassemblyModuleFilename = "chunks/[id].wasm";
+      config.plugins.push(new WasmChunksFixPlugin());
+    }
 
     return config;
   },
   output: "standalone",
 };
 
+class WasmChunksFixPlugin {
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap("WasmChunksFixPlugin", (compilation) => {
+      compilation.hooks.processAssets.tap(
+        { name: "WasmChunksFixPlugin" },
+        (assets) =>
+          Object.entries(assets).forEach(([pathname, source]) => {
+            if (!pathname.match(/\.wasm$/)) return;
+            compilation.deleteAsset(pathname);
+
+            const name = pathname.split("/")[1];
+            const info = compilation.assetsInfo.get(pathname);
+            compilation.emitAsset(name, source, info);
+          }),
+      );
+    });
+  }
+}
+
 module.exports = nextConfig;
diff --git a/examples/next/package.json b/examples/next/package.json
@@ -4,7 +4,7 @@
   "version": "0.5.8",
   "scripts": {
     "dev": "next dev -p 3002",
-    "build": "NEXT_TELEMETRY_DISABLED=1 next build",
+    "build": "next build",
     "e2e": "playwright test",
     "e2e:ui": "playwright test --ui",
     "start": "next start -p 3002",
@@ -16,9 +16,9 @@
     "@cartridge/connector": "workspace:*",
     "@cartridge/controller": "workspace:*",
     "@cartridge/ui-next": "workspace:*",
-    "@starknet-react/chains": "^0.1.3",
+    "@starknet-react/chains": "^3.0.2",
     "@starknet-react/core": "^3.0.2",
-    "next": "^14.2.15",
+    "next": "^14.0.0",
     "next-themes": "^0.3.0",
     "prettier": "^2.7.1",
     "react": "^18.3.1",
@@ -29,7 +29,7 @@
     "@cartridge/tsconfig": "workspace:*",
     "@playwright/test": "^1.46.0",
     "@types/node": "^20.6.0",
-    "@types/react": "^18.3.12",
+    "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.18",
     "eslint": "^8.23.0",

diff --git a/examples/next/src/app/layout.tsx b/examples/next/src/app/layout.tsx
@@ -1,22 +1,20 @@
-import { Providers } from "components/providers";
+import { ReactNode } from "react";
 import { Metadata } from "next";
-import { PropsWithChildren } from "react";
 
 import "./globals.css";
+import { Providers } from "components/providers";
+
+export const metadata: Metadata = {
+  title: "Cartridge Controller",
+  description: "Cartridge Controller Example",
+};
 
-export default function RootLayout({ children }: PropsWithChildren) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className="bg-background text-foreground">
+      <body>
         <Providers>{children}</Providers>
       </body>
     </html>
   );
 }
-
-export const metadata: Metadata = {
-  title: "Cartridge Controller - Example (Next.js)",
-  icons: {
-    icon: "favicon.ico",
-  },
-};
diff --git a/examples/next/src/app/not-found.tsx b/examples/next/src/app/not-found.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+const NotFound: FC = () => {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center">
+      <h1>404 - Page Not Found</h1>
+    </div>
+  );
+};
+
+export default NotFound; 
diff --git a/examples/next/src/app/page.tsx b/examples/next/src/app/page.tsx
@@ -1,16 +1,20 @@
-import { Transfer } from "components/Transfer";
-import { ManualTransferEth } from "components/ManualTransferEth";
-import { InvalidTxn } from "components/InvalidTxn";
-import { SignMessage } from "components/SignMessage";
-import { DelegateAccount } from "components/DelegateAccount";
+"use client";
+
+import { FC } from "react";
+
 import { ColorModeToggle } from "components/ColorModeToggle";
-import { Profile } from "components/Profile";
-import { LookupControllers } from "components/LookupControllers";
 import Header from "components/Header";
+import { DelegateAccount } from "components/DelegateAccount";
+import { InvalidTxn } from "components/InvalidTxn";
+import { LookupControllers } from "components/LookupControllers";
+import { ManualTransferEth } from "components/ManualTransferEth";
+import { Profile } from "components/Profile";
+import { SignMessage } from "components/SignMessage";
+import { Transfer } from "components/Transfer";
 
-export default function Home() {
+const Home: FC = () => {
   return (
-    <div className="flex flex-col p-4 gap-4">
+    <main className="flex flex-col p-4 gap-4">
       <div className="flex justify-between">
         <h2 className="text-3xl font-bold underline text-primary">
           Controller Example (Next.js)
@@ -25,6 +29,8 @@ export default function Home() {
       <InvalidTxn />
       <SignMessage />
       <LookupControllers />
-    </div>
+    </main>
   );
-}
+};
+
+export default Home;
diff --git a/examples/next/src/app/token/page.tsx b/examples/next/src/app/token/page.tsx