diff --git a/examples/04_react_router/package.json b/examples/04_react_router/package.json new file mode 100644 index 0000000..bc2d791 --- /dev/null +++ b/examples/04_react_router/package.json @@ -0,0 +1,24 @@ +{ + "name": "jotai-location-example", + "version": "0.1.0", + "private": true, + "dependencies": { + "@types/react": "latest", + "@types/react-dom": "latest", + "history": "5.1.0", + "jotai": "latest", + "jotai-location": "latest", + "react": "latest", + "react-dom": "latest", + "react-router-dom": "6.8.0", + "react-scripts": "latest", + "typescript": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"] +} diff --git a/examples/04_react_router/public/index.html b/examples/04_react_router/public/index.html new file mode 100644 index 0000000..b8c44ca --- /dev/null +++ b/examples/04_react_router/public/index.html @@ -0,0 +1,8 @@ + + + jotai-location example + + +
+ + diff --git a/examples/04_react_router/src/App.tsx b/examples/04_react_router/src/App.tsx new file mode 100644 index 0000000..98d30bb --- /dev/null +++ b/examples/04_react_router/src/App.tsx @@ -0,0 +1,51 @@ +import { + unstable_HistoryRouter as HistoryRouter, + Routes, + Route, + Link, +} from 'react-router-dom'; +import { atomWithLocation } from 'jotai-location'; +import { useAtomValue } from 'jotai'; +import * as React from 'react'; +import history from './routerHistory'; + +const Route1 =

Hello

; +const Route2 =

World

; +const location = atomWithLocation({ + getLocation: () => ({ + searchParams: new URLSearchParams(history.location.search), + ...history.location, + }), + subscribe: (callback) => history.listen(callback), +}); + +const App = () => { + const loc = useAtomValue(location); + return ( +
+ {/* @ts-expect-error: https://github.com/remix-run/react-router/issues/9630#issuecomment-1341643731 */} + + current pathname in atomWithLocation: "{loc.pathname}" +
+ to 1 + to 1/123 + to 2 + to 2/123 +
+ + + + + +
+ ); +}; +export default App; diff --git a/examples/04_react_router/src/index.tsx b/examples/04_react_router/src/index.tsx new file mode 100644 index 0000000..a124673 --- /dev/null +++ b/examples/04_react_router/src/index.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './App'; + +const ele = document.getElementById('app'); +if (ele) { + createRoot(ele).render(); +} diff --git a/examples/04_react_router/src/routerHistory.ts b/examples/04_react_router/src/routerHistory.ts new file mode 100644 index 0000000..eae95d4 --- /dev/null +++ b/examples/04_react_router/src/routerHistory.ts @@ -0,0 +1,4 @@ +import { createBrowserHistory } from 'history'; + +const routerHistory = createBrowserHistory(); +export default routerHistory; diff --git a/package.json b/package.json index 7d30736..7e3c60f 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,8 @@ "tsc-test": "tsc --project . --noEmit", "examples:01_minimal": "DIR=01_minimal EXT=js webpack serve", "examples:02_typescript": "DIR=02_typescript EXT=tsx webpack serve", - "examples:03_hash": "DIR=03_hash EXT=tsx webpack serve" + "examples:03_hash": "DIR=03_hash EXT=tsx webpack serve", + "examples:04_react_router": "DIR=04_react_router EXT=tsx webpack serve" }, "jest": { "testEnvironment": "jsdom", @@ -63,6 +64,7 @@ "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-prettier": "^5.0.1", "eslint-plugin-react": "^7.33.2", + "history": "5.1.0", "html-webpack-plugin": "^5.5.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -73,6 +75,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.11", + "react-router-dom": "6.8.0", "ts-jest": "^29.1.1", "ts-loader": "^9.5.0", "typescript": "^5.2.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9d9c2de..b0e20d7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -49,6 +49,9 @@ devDependencies: eslint-plugin-react: specifier: ^7.33.2 version: 7.33.2(eslint@8.51.0) + history: + specifier: 5.1.0 + version: 5.1.0 html-webpack-plugin: specifier: ^5.5.3 version: 5.5.3(webpack@5.89.0) @@ -79,6 +82,9 @@ devDependencies: react-error-boundary: specifier: ^4.0.11 version: 4.0.11(react@18.2.0) + react-router-dom: + specifier: 6.8.0 + version: 6.8.0(react-dom@18.2.0)(react@18.2.0) ts-jest: specifier: ^29.1.1 version: 29.1.1(@babel/core@7.23.2)(jest@29.7.0)(typescript@5.2.2) @@ -1770,6 +1776,11 @@ packages: tslib: 2.6.2 dev: true + /@remix-run/router@1.3.1: + resolution: {integrity: sha512-+eun1Wtf72RNRSqgU7qM2AMX/oHp+dnx7BHk1qhK5ZHzdHTUU4LA1mGG1vT+jMc8sbhG3orvsfOmryjzx2PzQw==} + engines: {node: '>=14'} + dev: true + /@rollup/plugin-alias@3.1.9(rollup@2.79.1): resolution: {integrity: sha512-QI5fsEvm9bDzt32k39wpOwZhVzRcL5ydcffUHMyLVaVaLeC70I8TJZ17F1z1eMoLu4E/UOcH9BWVkKpIKdrfiw==} engines: {node: '>=8.0.0'} @@ -4827,6 +4838,12 @@ packages: hasBin: true dev: true + /history@5.1.0: + resolution: {integrity: sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==} + dependencies: + '@babel/runtime': 7.23.2 + dev: true + /hosted-git-info@2.8.9: resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==} dev: true @@ -7379,6 +7396,29 @@ packages: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} dev: true + /react-router-dom@6.8.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-hQouduSTywGJndE86CXJ2h7YEy4HYC6C/uh19etM+79FfQ6cFFFHnHyDlzO4Pq0eBUI96E4qVE5yUjA00yJZGQ==} + engines: {node: '>=14'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + dependencies: + '@remix-run/router': 1.3.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-router: 6.8.0(react@18.2.0) + dev: true + + /react-router@6.8.0(react@18.2.0): + resolution: {integrity: sha512-760bk7y3QwabduExtudhWbd88IBbuD1YfwzpuDUAlJUJ7laIIcqhMvdhSVh1Fur1PE8cGl84L0dxhR3/gvHF7A==} + engines: {node: '>=14'} + peerDependencies: + react: '>=16.8' + dependencies: + '@remix-run/router': 1.3.1 + react: 18.2.0 + dev: true + /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} diff --git a/tsconfig.json b/tsconfig.json index 9cd1b5c..9c59fa5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,6 +15,7 @@ "baseUrl": ".", "paths": { "jotai-location": ["./src"] - } + }, + "skipLibCheck": true } }