recruit-tech · AkifumiSato · Sep 3, 2023 · Aug 26, 2023 · Aug 26, 2023 · Aug 26, 2023
diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
@@ -1,4 +1,4 @@
-name: Test
+name: Check
 
 on:
   pull_request:
@@ -8,7 +8,7 @@ jobs:
   Test:
     runs-on: ubuntu-latest
     timeout-minutes: 30
-    name: Run test
+    name: Run check project
     steps:
       - uses: actions/checkout@v3
       - name: Install and cache nodejs
@@ -21,6 +21,6 @@ jobs:
           version: 8
           run_install: false
       - name: Install packages
-        run: pnpm install
-      - name: Show coverage
+        run: pnpm i --ignore-scripts
+      - name: Check project
         run: pnpm check
diff --git a/.gitignore b/.gitignore
@@ -28,3 +28,6 @@ yarn-error.log*
 
 # turbo
 .turbo
+
+# project
+/packages/*/types
diff --git a/apps/example-next/.eslintrc.json b/apps/example-next/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/apps/example-next/.gitignore b/apps/example-next/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/apps/example-next/README.md b/apps/example-next/README.md
@@ -0,0 +1,8 @@
+# Examples next app
+
+## Getting Started
+
+```
+$ pnpm i
+$ pnpm run dev
+```
diff --git a/apps/example-next/next.config.js b/apps/example-next/next.config.js
@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    scrollRestoration: true,
+  },
+};
+
+module.exports = nextConfig;
diff --git a/apps/example-next/package.json b/apps/example-next/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "example-next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@types/node": "20.5.6",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "eslint": "8.48.0",
+    "eslint-config-next": "13.4.19",
+    "next": "13.4.19",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "5.2.2",
+    "@location-state/core": "workspace:*",
+    "@location-state/next": "workspace:*"
+  }
+}
diff --git a/apps/example-next/src/app/_components/Providers.tsx b/apps/example-next/src/app/_components/Providers.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { LocationStateProvider, NavigationSyncer } from "@location-state/core";
+import { unsafeNavigation } from "@location-state/core/unsafe-navigation";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <LocationStateProvider syncer={new NavigationSyncer(unsafeNavigation)}>
+      {children}
+    </LocationStateProvider>
+  );
+}
diff --git a/apps/example-next/src/app/dynamic/page.tsx b/apps/example-next/src/app/dynamic/page.tsx
@@ -0,0 +1,21 @@
+import { Counter } from "@/components/Counter";
+import { List } from "@/components/List";
+import { headers } from "next/headers";
+import Link from "next/link";
+
+export default function Page() {
+  const headersList = headers();
+  const referer = headersList.get("referer");
+
+  return (
+    <main>
+      <h1>Dynamic page</h1>
+      <Link href="/">/(top)</Link>
+      <p>referer: {referer}</p>
+      <Counter storeName="session" />
+      <Counter storeName="url" />
+      <List storeName="session" />
+      <List storeName="url" />
+    </main>
+  );
+}
diff --git a/apps/example-next/src/app/layout.tsx b/apps/example-next/src/app/layout.tsx
@@ -0,0 +1,21 @@
+import { Providers } from "@/app/_components/Providers";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/example-next/src/app/page.tsx b/apps/example-next/src/app/page.tsx
@@ -0,0 +1,26 @@
+import { Counter } from "@/components/Counter";
+import { List } from "@/components/List";
+import Link from "next/link";
+
+export default function Page() {
+  return (
+    <main>
+      <h1>Top page</h1>
+      <ul>
+        <li>
+          <Link href="/static">/static</Link>
+        </li>
+        <li>
+          <Link href="/dynamic">/dynamic</Link>
+        </li>
+        <li>
+          <Link href="/pages">/pages</Link>
+        </li>
+      </ul>
+      <Counter storeName="session" />
+      <Counter storeName="url" />
+      <List storeName="session" />
+      <List storeName="url" />
+    </main>
+  );
+}
diff --git a/apps/example-next/src/app/static/page.tsx b/apps/example-next/src/app/static/page.tsx
@@ -0,0 +1,16 @@
+import { Counter } from "@/components/Counter";
+import { List } from "@/components/List";
+import Link from "next/link";
+
+export default function Page() {
+  return (
+    <main>
+      <h1>Static page</h1>
+      <Link href="/">/(top)</Link>
+      <Counter storeName="session" />
+      <Counter storeName="url" />
+      <List storeName="session" />
+      <List storeName="url" />
+    </main>
+  );
+}
diff --git a/apps/example-next/src/components/Counter.tsx b/apps/example-next/src/components/Counter.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { useLocationState, StoreName } from "@location-state/core";
+
+export function Counter({ storeName }: { storeName: StoreName }) {
+  const [counter, setCounter] = useLocationState({
+    name: "counter",
+    defaultValue: 0,
+    storeName,
+  });
+  console.debug("rendered Counter", { storeName, counter });
+
+  return (
+    <div>
+      <p>
+        storeName: <b>{storeName}</b>, counter: <b>{counter}</b>
+      </p>
+      <button onClick={() => setCounter(counter + 1)}>increment</button>
+    </div>
+  );
+}
diff --git a/apps/example-next/src/components/List.tsx b/apps/example-next/src/components/List.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { useLocationState, StoreName } from "@location-state/core";
+
+export function List({ storeName }: { storeName: StoreName }) {
+  const [displayList, setDisplayList] = useLocationState({
+    name: "display-list",
+    defaultValue: false,
+    storeName,
+  });
+  const list = Array(displayList ? 100 : 0).fill(0);
+  console.debug("rendered List", { storeName, displayList });
+
+  return (
+    <div>
+      <p>
+        storeName: <b>{storeName}</b> List
+      </p>
+      <label>
+        <input
+          type="checkbox"
+          checked={displayList}
+          onChange={(event) => setDisplayList(event.currentTarget.checked)}
+        />
+        Display List
+      </label>
+      <ul>
+        {list.map((_, index) => (
+          <li key={index}>{index}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/apps/example-next/src/pages/_app.tsx b/apps/example-next/src/pages/_app.tsx
@@ -0,0 +1,12 @@
+import { LocationStateProvider } from "@location-state/core";
+import { useNextPagesSyncer } from "@location-state/next";
+import type { AppProps } from "next/app";
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  const syncer = useNextPagesSyncer();
+  return (
+    <LocationStateProvider syncer={syncer}>
+      <Component {...pageProps} />
+    </LocationStateProvider>
+  );
+}
diff --git a/apps/example-next/src/pages/pages/index.tsx b/apps/example-next/src/pages/pages/index.tsx
@@ -0,0 +1,26 @@
+import { Counter } from "@/components/Counter";
+import { List } from "@/components/List";
+import Link from "next/link";
+
+export default function Page() {
+  return (
+    <div>
+      <h1>Page</h1>
+      <ul>
+        <li>
+          <Link href="/pages/other">/pages/other</Link>
+        </li>
+        <li>
+          <Link href="/pages/ssr/1">/pages/ssr/1</Link>
+        </li>
+        <li>
+          <Link href="/pages/ssg/1">/pages/ssg/1</Link>
+        </li>
+      </ul>
+      <Counter storeName="session" />
+      <Counter storeName="url" />
+      <List storeName="session" />
+      <List storeName="url" />
+    </div>
+  );
+}
diff --git a/apps/example-next/src/pages/pages/other.tsx b/apps/example-next/src/pages/pages/other.tsx
@@ -0,0 +1,18 @@
+import { Counter } from "@/components/Counter";
+import { List } from "@/components/List";
+import Link from "next/link";
+
+export default function Page() {
+  return (
+    <div>
+      <h1>Other Page</h1>
+      <p>
+        <Link href="/pages">/pages</Link>
+      </p>
+      <Counter storeName="session" />
+      <Counter storeName="url" />
+      <List storeName="session" />
+      <List storeName="url" />
+    </div>
+  );
+}
diff --git a/apps/example-next/src/pages/pages/ssg/[id].tsx b/apps/example-next/src/pages/pages/ssg/[id].tsx
@@ -0,0 +1,48 @@
+import { Counter } from "@/components/Counter";
+import { List } from "@/components/List";
+import { GetServerSideProps, GetStaticPaths } from "next";
+import Link from "next/link";
+
+type Props = {
+  id: number;
+};
+
+export default function Page({ id }: Props) {
+  const nextUrl = `/pages/ssg/${id + 1}`;
+  return (
+    <div>
+      <h1>SSG Page</h1>
+      <p>id: {id}</p>
+      <p>
+        <Link href="/pages">/pages</Link>
+      </p>
+      <p>
+        <Link href={nextUrl}>{nextUrl}</Link>
+      </p>
+      <Counter storeName="session" />
+      <Counter storeName="url" />
+      <List storeName="session" />
+      <List storeName="url" />
+    </div>
+  );
+}
+
+export const getStaticPaths: GetStaticPaths<{ id: string }> = async () => {
+  return {
+    paths: Array.from({ length: 10 }, (_, i) => ({
+      params: { id: String(i) },
+    })),
+    fallback: false,
+  };
+};
+
+export const getStaticProps: GetServerSideProps<
+  Props,
+  { id: string }
+> = async ({ params }) => {
+  return {
+    props: {
+      id: Number(params?.id),
+    },
+  };
+};