examples: history-sync-transit impl

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

@@ -1,15 +1,26 @@
 import '../styles/globals.css'
 import { RecoilRoot } from 'recoil'
-import { RecoilHistorySyncJSONNext } from 'recoil-sync-next'
+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>
-      <RecoilHistorySyncJSONNext>
+      <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} />
-      </RecoilHistorySyncJSONNext>
+      </RecoilHistorySyncTransitNext>
     </RecoilRoot>
   )
 }

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

@@ -1,9 +1,7 @@
 import Head from 'next/head'
-import Link from 'next/link'
 
-import { Counter } from '../src/components/Counter'
 import { Links } from '../src/components/Links'
-import { Textfield } from '../src/components/Textfield'
+import { ViewStateForm } from '../src/components/ViewStateForm'
 import styles from '../styles/Home.module.css'
 
 import type { NextPage } from 'next'
@@ -18,11 +16,14 @@ const Home: NextPage = () => {
 
       <main className={styles.main}>
         <h1 className={styles.title}>Top page (Static)</h1>
-        <Textfield />
-        <Counter name="foo" initialValue={0} />
-        <Counter name="bar" initialValue={10} />
-        <Counter name="baz" initialValue={100} />
-        <Links />
+        <div>
+          <h2>ViewState</h2>
+          <ViewStateForm />
+        </div>
+        <div>
+          <h2>Links</h2>
+          <Links />
+        </div>
       </main>
     </div>
   )

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

@@ -1,8 +1,7 @@
 import Head from 'next/head'
 
-import { Counter } from '../../src/components/Counter'
-import { Textfield } from '../../src/components/Textfield'
 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'
@@ -20,11 +19,14 @@ const SSGPage: NextPage<Props> = ({ id }) => {
 
       <main className={styles.main}>
         <h1 className={styles.title}>SSG Page {id}</h1>
-        <Textfield />
-        <Counter name="foo" initialValue={0} />
-        <Counter name="bar" initialValue={10} />
-        <Counter name="baz" initialValue={100} />
-        <Links />
+        <div>
+          <h2>ViewState</h2>
+          <ViewStateForm />
+        </div>
+        <div>
+          <h2>Links</h2>
+          <Links />
+        </div>
       </main>
     </div>
   )

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

@@ -1,8 +1,7 @@
 import Head from 'next/head'
 
-import { Counter } from '../../src/components/Counter'
 import { Links } from '../../src/components/Links'
-import { Textfield } from '../../src/components/Textfield'
+import { ViewStateForm } from '../../src/components/ViewStateForm'
 import styles from '../../styles/Home.module.css'
 
 import type { GetServerSideProps, NextPage } from 'next'
@@ -20,11 +19,14 @@ const SSRPage: NextPage<Props> = ({ id }) => {
 
       <main className={styles.main}>
         <h1 className={styles.title}>SSR Page {id}</h1>
-        <Textfield />
-        <Counter name="foo" initialValue={0} />
-        <Counter name="bar" initialValue={10} />
-        <Counter name="baz" initialValue={100} />
-        <Links />
+        <div>
+          <h2>ViewState</h2>
+          <ViewStateForm />
+        </div>
+        <div>
+          <h2>Links</h2>
+          <Links />
+        </div>
       </main>
     </div>
   )

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

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

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

@@ -0,0 +1,37 @@
+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>
+)
+}