Skip to content

Commit 53b4183

Browse files
nikgrafnikgraf
authored
fixes to support hypergraph in nextjs (fix imports, use automerge slim) (#180)
1 parent 7adf82d commit 53b4183

29 files changed

+850
-242
lines changed

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,15 @@ cd apps/server
3030
pnpm prisma migrate dev # this will also generate the Prisma client
3131
```
3232

33+
You can run the next example app with:
34+
35+
```sh
36+
# Notes:
37+
# - You need to build the packages first and every time you make changes to the packages
38+
cd apps/next-example
39+
pnpm dev
40+
```
41+
3342
## Upgrading Dependencies
3443

3544
```sh

‎apps/events/package.json‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
},
1010
"dependencies": {
1111
"@automerge/automerge": "^2.2.9",
12-
"@automerge/automerge-repo": "^2.0.0-beta.2",
13-
"@automerge/automerge-repo-react-hooks": "^2.0.0-beta.2",
12+
"@automerge/automerge-repo": "=2.0.0-beta.5",
13+
"@automerge/automerge-repo-react-hooks": "=2.0.0-beta.5",
1414
"@graphprotocol/grc-20": "^0.11.5",
1515
"@graphprotocol/hypergraph": "workspace:*",
1616
"@graphprotocol/hypergraph-react": "workspace:*",
@@ -51,8 +51,6 @@
5151
"@vitejs/plugin-react": "^4.4.1",
5252
"globals": "^16.1.0",
5353
"tailwindcss": "^4.1.5",
54-
"vite-plugin-node-polyfills": "^0.23.0",
55-
"vite-plugin-top-level-await": "^1.5.0",
56-
"vite-plugin-wasm": "^3.4.1"
54+
"vite-plugin-node-polyfills": "^0.23.0"
5755
}
5856
}

‎apps/events/vite.config.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,10 @@ import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
44
import react from '@vitejs/plugin-react';
55
import { defineConfig } from 'vite';
66
import { nodePolyfills } from 'vite-plugin-node-polyfills';
7-
import topLevelAwait from 'vite-plugin-top-level-await';
8-
import wasm from 'vite-plugin-wasm';
97

108
// https://vitejs.dev/config/
119
export default defineConfig({
1210
plugins: [
13-
wasm(),
14-
topLevelAwait(),
1511
TanStackRouterVite(),
1612
react(),
1713
nodePolyfills({

‎apps/next-example/.gitignore‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts

‎apps/next-example/next.config.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { NextConfig } from 'next';
2+
3+
const nextConfig: NextConfig = {
4+
// turbopack: {
5+
// root: path.join(__dirname, '../..'),
6+
// resolveAlias: {
7+
// '@graphprotocol/hypergraph': path.resolve(__dirname, '../../packages/hypergraph'),
8+
// '@graphprotocol/hypergraph-react': path.resolve(__dirname, '../../packages/hypergraph-react'),
9+
// },
10+
// },
11+
};
12+
13+
export default nextConfig;

‎apps/next-example/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "next-example",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev --turbopack",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"type": "module",
12+
"dependencies": {
13+
"@graphprotocol/grc-20": "^0.11.5",
14+
"@graphprotocol/hypergraph": "workspace:*",
15+
"@graphprotocol/hypergraph-react": "workspace:*",
16+
"@privy-io/react-auth": "^2.13.0",
17+
"next": "15.3.2",
18+
"react": "^19.0.0",
19+
"react-dom": "^19.0.0"
20+
},
21+
"devDependencies": {
22+
"@types/node": "^22",
23+
"@types/react": "^19",
24+
"@types/react-dom": "^19",
25+
"typescript": "^5"
26+
}
27+
}

‎apps/next-example/src/app/favicon.ico‎

25.3 KB
Binary file not shown.

‎apps/next-example/src/app/globals.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
:root {
2+
--background: #ffffff;
3+
--foreground: #171717;
4+
}
5+
6+
@media (prefers-color-scheme: dark) {
7+
:root {
8+
--background: #0a0a0a;
9+
--foreground: #ededed;
10+
}
11+
}
12+
13+
html,
14+
body {
15+
max-width: 100vw;
16+
overflow-x: hidden;
17+
}
18+
19+
body {
20+
color: var(--foreground);
21+
background: var(--background);
22+
font-family: Arial, Helvetica, sans-serif;
23+
-webkit-font-smoothing: antialiased;
24+
-moz-osx-font-smoothing: grayscale;
25+
}
26+
27+
* {
28+
box-sizing: border-box;
29+
padding: 0;
30+
margin: 0;
31+
}
32+
33+
a {
34+
color: inherit;
35+
text-decoration: none;
36+
}
37+
38+
@media (prefers-color-scheme: dark) {
39+
html {
40+
color-scheme: dark;
41+
}
42+
}

‎apps/next-example/src/app/layout.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Providers from '@/components/providers';
2+
import type { Metadata } from 'next';
3+
import { Geist, Geist_Mono } from 'next/font/google';
4+
import './globals.css';
5+
6+
const geistSans = Geist({
7+
variable: '--font-geist-sans',
8+
subsets: ['latin'],
9+
});
10+
11+
const geistMono = Geist_Mono({
12+
variable: '--font-geist-mono',
13+
subsets: ['latin'],
14+
});
15+
16+
export const metadata: Metadata = {
17+
title: 'Create Next App',
18+
description: 'Generated by create next app',
19+
};
20+
21+
export default function RootLayout({
22+
children,
23+
}: Readonly<{
24+
children: React.ReactNode;
25+
}>) {
26+
return (
27+
<html lang="en">
28+
<body className={`${geistSans.variable} ${geistMono.variable}`}>
29+
<Providers>{children}</Providers>
30+
</body>
31+
</html>
32+
);
33+
}

‎apps/next-example/src/app/page.module.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.page {
2+
--gray-rgb: 0, 0, 0;
3+
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
4+
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
5+
6+
--button-primary-hover: #383838;
7+
--button-secondary-hover: #f2f2f2;
8+
9+
display: grid;
10+
grid-template-rows: 20px 1fr 20px;
11+
align-items: center;
12+
justify-items: center;
13+
min-height: 100svh;
14+
padding: 80px;
15+
gap: 64px;
16+
font-family: var(--font-geist-sans);
17+
}
18+
19+
@media (prefers-color-scheme: dark) {
20+
.page {
21+
--gray-rgb: 255, 255, 255;
22+
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
23+
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);
24+
25+
--button-primary-hover: #ccc;
26+
--button-secondary-hover: #1a1a1a;
27+
}
28+
}
29+
30+
.main {
31+
display: flex;
32+
flex-direction: column;
33+
gap: 32px;
34+
grid-row-start: 2;
35+
}

0 commit comments

Comments
 (0)