Add example transit

examples/history-sync-transit/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals"
+}

examples/history-sync-transit/.gitignore

@@ -0,0 +1,38 @@
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# yarn
+yarn.lock

examples/history-sync-transit/README.md

@@ -0,0 +1,8 @@
+## history-sync-transit
+
+Example of `RecoilHistorySyncTransitNext`.
+
+```bash
+# run example application
+yarn dev
+```

examples/history-sync-transit/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/history-sync-transit/next.config.js

@@ -0,0 +1,11 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  experimental: {
+    scrollRestoration: true,
+    newNextLinkBehavior: true,
+  },
+}
+
+module.exports = nextConfig

examples/history-sync-transit/package-copy.sh

@@ -0,0 +1,19 @@
+#!/bin/sh
+
+echo "[recoil-sync-next] copy to current directory..."
+
+CURRENT=`pwd`
+cd ../../
+yarn clean-build
+yarn pack --filename recoil-sync-next-local.tgz
+
+cd $CURRENT/node_modules
+rm -Rf recoil-sync-next/
+tar zxf ../../../recoil-sync-next-local.tgz
+mv package/ recoil-sync-next/
+
+cd ..
+rm -Rf .next/
+
+echo "[recoil-sync-next] copy success!"
+exit $?

examples/history-sync-transit/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "history-sync-transit",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "inst": "yarn install",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint:eslint": "next lint",
+    "lint:tsc": "tsc --noEmit -p tsconfig.json",
+    "lint-fix:eslint": "next lint --fix",
+    "lint-fix:prettier": "prettier \"{pages,src,styles}/**/*.{ts,tsx,css}\" --write",
+    "local-build": "yarn run local-copy && yarn run build",
+    "local-dev": "yarn run local-copy && yarn run dev",
+    "local-copy": "./package-copy.sh"
+  },
+  "dependencies": {
+    "next": "^12.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "recoil": "^0.7.4",
+    "recoil-sync": "^0.1.0",
+    "recoil-sync-next": "latest"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.3",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "eslint": "^8.19.0",
+    "eslint-config-next": "^12.2.2",
+    "typescript": "^4.7.4"
+  }
+}

examples/history-sync-transit/pages/_app.tsx

@@ -0,0 +1,28 @@
+import '../styles/globals.css'
+import { RecoilRoot } from 'recoil'
+import { RecoilHistorySyncTransitNext } from 'recoil-sync-next'
+
+import type { AppProps } from 'next/app'
+import { ViewState } from '../src/components/ViewStateForm'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <RecoilRoot>
+      <RecoilHistorySyncTransitNext
+        storeKey="history-transit-store"
+        handlers={[
+          {
+            tag: 'VS',
+            class: ViewState,
+            write: (x) => [x.active, x.pos],
+            read: ([active, pos]) => new ViewState(active, pos),
+          },
+        ]}
+      >
+        <Component {...pageProps} />
+      </RecoilHistorySyncTransitNext>
+    </RecoilRoot>
+  )
+}
+
+export default MyApp

examples/history-sync-transit/pages/index.tsx

@@ -0,0 +1,32 @@
+import Head from 'next/head'
+
+import { Links } from '../src/components/Links'
+import { ViewStateForm } from '../src/components/ViewStateForm'
+import styles from '../styles/Home.module.css'
+
+import type { NextPage } from 'next'
+
+const Home: NextPage = () => {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Top - Example of RecoilHistorySyncTransitNext</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>Top page (Static)</h1>
+        <div>
+          <h2>ViewState</h2>
+          <ViewStateForm />
+        </div>
+        <div>
+          <h2>Links</h2>
+          <Links />
+        </div>
+      </main>
+    </div>
+  )
+}
+
+export default Home

examples/history-sync-transit/pages/ssg/[id].tsx

@@ -0,0 +1,58 @@
+import Head from 'next/head'
+
+import { Links } from '../../src/components/Links'
+import { ViewStateForm } from '../../src/components/ViewStateForm'
+import styles from '../../styles/Home.module.css'
+
+import type { GetStaticPaths, GetStaticProps, NextPage } from 'next'
+
+type Props = {
+  id: string
+}
+
+const SSGPage: NextPage<Props> = ({ id }) => {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>SSG - Example of RecoilHistorySyncTransitNext</title>
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>SSG Page {id}</h1>
+        <div>
+          <h2>ViewState</h2>
+          <ViewStateForm />
+        </div>
+        <div>
+          <h2>Links</h2>
+          <Links />
+        </div>
+      </main>
+    </div>
+  )
+}
+
+export default SSGPage
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: [
+      { params: { id: '1' } },
+      { params: { id: '2' } },
+      { params: { id: '3' } },
+    ],
+    fallback: false,
+  }
+}
+
+export const getStaticProps: GetStaticProps<Props, { id: string }> = async ({
+  params,
+}) => {
+  if (params?.id === undefined) throw new Error('`params.id` is undefined.')
+
+  return {
+    props: {
+      id: params?.id,
+    },
+  }
+}

examples/history-sync-transit/pages/ssr/[id].tsx

@@ -0,0 +1,48 @@
+import Head from 'next/head'
+
+import { Links } from '../../src/components/Links'
+import { ViewStateForm } from '../../src/components/ViewStateForm'
+import styles from '../../styles/Home.module.css'
+
+import type { GetServerSideProps, NextPage } from 'next'
+
+type Props = {
+  id: string
+}
+
+const SSRPage: NextPage<Props> = ({ id }) => {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>SSR - Example of RecoilHistorySyncTransitNext</title>
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>SSR Page {id}</h1>
+        <div>
+          <h2>ViewState</h2>
+          <ViewStateForm />
+        </div>
+        <div>
+          <h2>Links</h2>
+          <Links />
+        </div>
+      </main>
+    </div>
+  )
+}
+
+export default SSRPage
+
+export const getServerSideProps: GetServerSideProps<
+  Props,
+  { id: string }
+> = async ({ params }) => {
+  if (params?.id === undefined) throw new Error('`params.id` is undefined.')
+
+  return {
+    props: {
+      id: params?.id,
+    },
+  }
+}

examples/history-sync-transit/src/components/Links/index.tsx

@@ -0,0 +1,44 @@
+import Link from 'next/link'
+
+export const Links: React.FC = () => {
+  return (
+    <dl>
+      <dt>Top</dt>
+      <dd>
+        <ul>
+          <li>
+            <Link href="/">Top</Link>
+          </li>
+        </ul>
+      </dd>
+      <dt>SSR</dt>
+      <dd>
+        <ul>
+          <li>
+            <Link href="/ssr/1">SSR 1</Link>
+          </li>
+          <li>
+            <Link href="/ssr/2">SSR 2</Link>
+          </li>
+          <li>
+            <Link href="/ssr/3">SSR 3</Link>
+          </li>
+        </ul>
+      </dd>
+      <dt>SSG</dt>
+      <dd>
+        <ul>
+          <li>
+            <Link href="/ssg/1">SSG 1</Link>
+          </li>
+          <li>
+            <Link href="/ssg/2">SSG 2</Link>
+          </li>
+          <li>
+            <Link href="/ssg/3">SSG 3</Link>
+          </li>
+        </ul>
+      </dd>
+    </dl>
+  )
+}

examples/history-sync-transit/src/components/ViewStateForm/index.module.css

@@ -0,0 +1,6 @@
+.row {
+  display: flex;
+  justify-content: space-between;
+  width: 200px;
+  margin: 0;
+}

examples/history-sync-transit/src/components/ViewStateForm/index.tsx

@@ -0,0 +1,38 @@
+import { custom } from '@recoiljs/refine'
+import { atom, useRecoilState } from 'recoil'
+import { syncEffect } from 'recoil-sync'
+
+import styles from './index.module.css'
+
+export class ViewState {
+  constructor(public active: boolean, public pos: [number, number]) {}
+}
+
+const viewStateChecker = custom((x) => (x instanceof ViewState ? x : null))
+const viewState = atom<ViewState>({
+  key: 'viewState',
+  default: new ViewState(true, [1, 2]),
+  effects: [
+    syncEffect({ storeKey: 'history-transit-store', refine: viewStateChecker }),
+  ],
+})
+
+export const ViewStateForm: React.FC = () => {
+  const [state, setState] = useRecoilState(viewState)
+  const toggleActive = () => setState(new ViewState(!state.active, state.pos))
+  const incrementPos = () =>
+    setState(new ViewState(state.active, [state.pos[0] + 1, state.pos[1] + 1]))
+
+  return (
+    <div>
+      <div className={styles.row}>
+        active:{' '}
+        <input type="checkbox" checked={state.active} onChange={toggleActive} />
+      </div>
+      <div className={styles.row}>
+        <div>pos: {JSON.stringify(state.pos)}</div>
+        <button onClick={incrementPos}>increment</button>
+      </div>
+    </div>
+  )
+}