diff --git a/examples/url-sync-transit/pages/_app.tsx b/examples/url-sync-transit/pages/_app.tsx index 0c01c60e..f31c9d6e 100755 --- a/examples/url-sync-transit/pages/_app.tsx +++ b/examples/url-sync-transit/pages/_app.tsx @@ -1,18 +1,27 @@ import '../styles/globals.css' import { RecoilRoot } from 'recoil' -import { RecoilURLSyncJSONNext } from 'recoil-sync-next' +import { RecoilURLSyncTransitNext } from 'recoil-sync-next' import type { AppProps } from 'next/app' +import { ViewState } from '../src/components/ViewStateForm' function MyApp({ Component, pageProps }: AppProps) { return ( - [x.active, x.pos], + read: ([active, pos]) => new ViewState(active, pos), + }, + ]} > - + ) } diff --git a/examples/url-sync-transit/pages/index.tsx b/examples/url-sync-transit/pages/index.tsx index 393ce230..a5191e9a 100755 --- a/examples/url-sync-transit/pages/index.tsx +++ b/examples/url-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' @@ -12,17 +10,20 @@ const Home: NextPage = () => { return (
- Top - Example of RecoilURLSyncJSONNext + Top - Example of RecoilHistorySyncJSONNext

Top page (Static)

- - - - - +
+

ViewState

+ +
+
+

Links

+ +
) diff --git a/examples/url-sync-transit/pages/ssg/[id].tsx b/examples/url-sync-transit/pages/ssg/[id].tsx index b3a3845a..c07d4d67 100644 --- a/examples/url-sync-transit/pages/ssg/[id].tsx +++ b/examples/url-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' @@ -15,16 +14,19 @@ const SSGPage: NextPage = ({ id }) => { return (
- SSG - Example of RecoilURLSyncJSONNext + SSG - Example of RecoilHistorySyncJSONNext

SSG Page {id}

- - - - - +
+

ViewState

+ +
+
+

Links

+ +
) diff --git a/examples/url-sync-transit/pages/ssr/[id].tsx b/examples/url-sync-transit/pages/ssr/[id].tsx index e313a2ba..e2da33bc 100644 --- a/examples/url-sync-transit/pages/ssr/[id].tsx +++ b/examples/url-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' @@ -15,16 +14,19 @@ const SSRPage: NextPage = ({ id }) => { return (
- SSR - Example of RecoilURLSyncJSONNext + SSR - Example of RecoilHistorySyncJSONNext

SSR Page {id}

- - - - - +
+

ViewState

+ +
+
+

Links

+ +
) diff --git a/examples/url-sync-transit/src/components/Counter/index.tsx b/examples/url-sync-transit/src/components/Counter/index.tsx deleted file mode 100644 index 12493c32..00000000 --- a/examples/url-sync-transit/src/components/Counter/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { number } from '@recoiljs/refine' -import { useRecoilState } from 'recoil' -import { syncEffect } from 'recoil-sync' -import { atomFamilyWithInitialValue } from 'recoil-sync-next' - -import styles from './index.module.css' - -export const counter = atomFamilyWithInitialValue({ - key: 'counterState', - effects: [syncEffect({ storeKey: 'url-json-store', refine: number() })], -}) - -export type Props = { - name: string - initialValue: number -} - -export const Counter: React.FC = ({ name, initialValue }) => { - const [count, setCount] = useRecoilState(counter(name, initialValue)) - - return ( -
-
- count[{name}]: {count} -
-
- - -
-
- ) -} diff --git a/examples/url-sync-transit/src/components/Links/index.tsx b/examples/url-sync-transit/src/components/Links/index.tsx index 6d03cb90..8b00cd31 100644 --- a/examples/url-sync-transit/src/components/Links/index.tsx +++ b/examples/url-sync-transit/src/components/Links/index.tsx @@ -9,10 +9,6 @@ export const Links: React.FC = () => {
  • Top
    • -
  • - Top -  (with text: "Recoil") -
    • SSR
    @@ -22,14 +18,10 @@ export const Links: React.FC = () => { SSR 1
  • - SSR 2 -  (with text: "Sync") + SSR 2
  • - - SSR 3 - -  (with foo: 1, bar: 11) + SSR 3
    • @@ -40,14 +32,10 @@ export const Links: React.FC = () => { SSG 1
  • - SSG 2 -  (with text: "Sync") + SSG 2
  • - - SSG 3 - -  (with foo: 1, bar: 11) + SSG 3
    • diff --git a/examples/url-sync-transit/src/components/Textfield/index.module.css b/examples/url-sync-transit/src/components/Textfield/index.module.css deleted file mode 100644 index 0888644f..00000000 --- a/examples/url-sync-transit/src/components/Textfield/index.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.wrapper { - width: 200px; -} diff --git a/examples/url-sync-transit/src/components/Textfield/index.tsx b/examples/url-sync-transit/src/components/Textfield/index.tsx deleted file mode 100644 index 8b271ede..00000000 --- a/examples/url-sync-transit/src/components/Textfield/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { string } from '@recoiljs/refine' -import { atom, useRecoilState } from 'recoil' -import { syncEffect } from 'recoil-sync' - -import styles from './index.module.css' - -export const textState = atom({ - key: 'textState', - default: '', - effects: [syncEffect({ storeKey: 'url-json-store', refine: string() })], -}) - -export const Textfield: React.FC = () => { - const [text, setText] = useRecoilState(textState) - - return ( -
    - setText(e.currentTarget.value)} /> -
    - ) -} diff --git a/examples/url-sync-transit/src/components/Counter/index.module.css b/examples/url-sync-transit/src/components/ViewStateForm/index.module.css similarity index 76% rename from examples/url-sync-transit/src/components/Counter/index.module.css rename to examples/url-sync-transit/src/components/ViewStateForm/index.module.css index 17570eef..f5ffa1f3 100644 --- a/examples/url-sync-transit/src/components/Counter/index.module.css +++ b/examples/url-sync-transit/src/components/ViewStateForm/index.module.css @@ -1,5 +1,6 @@ -.wrapper { +.row { display: flex; justify-content: space-between; width: 200px; -} + margin: 0; +} \ No newline at end of file diff --git a/examples/url-sync-transit/src/components/ViewStateForm/index.tsx b/examples/url-sync-transit/src/components/ViewStateForm/index.tsx new file mode 100644 index 00000000..92e0d4e2 --- /dev/null +++ b/examples/url-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({ + 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 ( +
    +
    + active: +
    +
    +
    pos: { JSON.stringify(state.pos) }
    + +
    +
    +) +} \ No newline at end of file