Skip to content

Commit 2503a0c

Browse files
simonebsimoneb
committed
feat: initial import
0 parents  commit 2503a0c

33 files changed

+987
-0
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/preset-env", "@babel/preset-react"]
3+
}

‎.eslintignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
cjs/
2+
es/
3+
umd/
4+
coverage/
5+
examples/*-umd.js

‎.eslintrc

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"parser": "babel-eslint",
3+
"extends": [
4+
"eslint:recommended",
5+
"plugin:react/recommended",
6+
"plugin:import/recommended",
7+
"plugin:prettier/recommended",
8+
"plugin:react-hooks/recommended"
9+
],
10+
"env": {
11+
"browser": true,
12+
"node": true,
13+
"es6": true,
14+
"jest": true
15+
},
16+
"settings": {
17+
"react": {
18+
"version": "detect"
19+
}
20+
}
21+
}

‎.github/workflows/ci.yml

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
name: ci
2+
3+
on:
4+
push:
5+
branches: [master]
6+
pull_request:
7+
branches: [master]
8+
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
13+
strategy:
14+
matrix:
15+
node-version: [14.x]
16+
17+
steps:
18+
- uses: actions/checkout@v2
19+
- name: Use Node.js ${{ matrix.node-version }}
20+
uses: actions/setup-node@v2
21+
with:
22+
node-version: ${{ matrix.node-version }}
23+
- run: npm i
24+
- run: npm run lint
25+
- run: npm run build
26+
- run: npm test -- --coverage
27+
- run: bash <(curl -s https://codecov.io/bash)

‎.gitignore

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
node_modules/
2+
cjs/
3+
es/
4+
umd/
5+
coverage/
6+
7+
examples/*-umd.js
8+
*.map
9+
.eslintcache
10+
package-lock.json
11+
.token

‎.npmignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
examples/

‎.prettierrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"arrowParens": "avoid",
3+
"semi": false,
4+
"singleQuote": true,
5+
"trailingComma": "es5"
6+
}

‎.release-it.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"git": {
3+
"commitMessage": "chore: 🚀 release v${version}"
4+
},
5+
"github": {
6+
"release": true
7+
},
8+
"hooks": {
9+
"after:bump": ["npm run toc"]
10+
}
11+
}

‎LICENSE

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
ISC License
2+
3+
Copyright (c) [year], [fullname]
4+
5+
Permission to use, copy, modify, and/or distribute this software for any
6+
purpose with or without fee is hereby granted, provided that the above
7+
copyright notice and this permission notice appear in all copies.
8+
9+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
10+
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
11+
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
12+
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
13+
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
14+
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
15+
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

‎README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# navigation-state-hooks
2+
3+
![ci](https://github.com/simoneb/navigation-state-hooks/workflows/ci/badge.svg)
4+
[![codecov](https://codecov.io/gh/simoneb/navigation-state-hooks/branch/master/graph/badge.svg?token=9q93I8kWJR)](https://codecov.io/gh/simoneb/navigation-state-hooks)
5+
[![npm version](https://badge.fury.io/js/navigation-state-hooks.svg)](https://badge.fury.io/js/navigation-state-hooks)
6+
[![bundlephobia](https://badgen.net/bundlephobia/minzip/navigation-state-hooks)](https://bundlephobia.com/result?p=navigation-state-hooks)
7+
[![bundlephobia](https://badgen.net/bundlephobia/dependency-count/navigation-state-hooks)](https://bundlephobia.com/result?p=navigation-state-hooks)
8+
9+
React Hooks library to store navigation state and restore it.
10+
11+
<!-- toc -->
12+
13+
14+
<!-- tocstop -->
15+
16+
## Setup
17+
18+
```bash
19+
npm i navigation-state-hooks
20+
```
21+

‎commitlint.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = { extends: ['@commitlint/config-conventional'] }

‎examples/.eslintrc

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"env": {
3+
"browser": true
4+
},
5+
"parserOptions": { "sourceType": "script" },
6+
"globals": {
7+
"React": true,
8+
"PropTypes": true,
9+
"ReactRouterDOM": true,
10+
"ReachRouter": true,
11+
"useReactRouterNavigationState": true,
12+
"useReachRouterNavigationState": true,
13+
"Source": true,
14+
"ReactRouterExample": true,
15+
"ReachRouterExample": true
16+
}
17+
}

‎examples/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
umd.js

‎examples/components/Example.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const choices = [ReactRouterExample, ReachRouterExample].reduce(
2+
(acc, c) => ({ ...acc, [c.name]: c }),
3+
{}
4+
)
5+
6+
function Example() {
7+
const [choice, setChoice] = React.useState(Object.keys(choices)[0])
8+
9+
const Component = choices[choice]
10+
11+
return (
12+
<div>
13+
<select value={choice} onChange={e => setChoice(e.target.value)}>
14+
{Object.keys(choices).map(c => (
15+
<option key={c}>{c}</option>
16+
))}
17+
</select>
18+
<div style={{ display: 'flex' }}>
19+
<div style={{ flex: 0.5 }}>
20+
<Component />
21+
</div>
22+
<div style={{ flex: 1, marginLeft: '3rem' }}>
23+
<Source fileName={choice} />
24+
</div>
25+
</div>
26+
</div>
27+
)
28+
}
29+
30+
Example.propTypes = {}

‎examples/components/ReachRouterExample.js

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
// eslint-disable-next-line no-unused-vars
2+
const ReachRouterExample = (function () {
3+
const { Router, Link } = ReachRouter
4+
5+
const useNavigationState = useReachRouterNavigationState
6+
const { NavigationStateProvider } = useNavigationState
7+
8+
function ReachRouterExample() {
9+
return (
10+
<Router>
11+
<Root default></Root>
12+
</Router>
13+
)
14+
}
15+
16+
function Root() {
17+
return (
18+
<NavigationStateProvider>
19+
<App />
20+
</NavigationStateProvider>
21+
)
22+
}
23+
24+
ReachRouterExample.propTypes = {}
25+
26+
function App() {
27+
return (
28+
<div>
29+
<header>
30+
<ul>
31+
<li>
32+
<Link to="/">Home</Link>
33+
</li>
34+
<li>
35+
<Link to="/about">About</Link>
36+
</li>
37+
<li>
38+
<Link to="/help">Help</Link>
39+
</li>
40+
</ul>
41+
</header>
42+
<div>
43+
<Router>
44+
<Home path="/" />
45+
<About path="/about" />
46+
<Help path="/help" />
47+
</Router>
48+
</div>
49+
</div>
50+
)
51+
}
52+
53+
function Home() {
54+
const [state, setState] = useNavigationState(1)
55+
56+
return (
57+
<div>
58+
<h2>Home</h2>
59+
<p>{state}</p>
60+
<button onClick={() => setState(s => s + 1)}>increase</button>
61+
</div>
62+
)
63+
}
64+
65+
function About() {
66+
const [state, setState] = useNavigationState(10)
67+
68+
return (
69+
<div>
70+
<h2>About</h2>
71+
<p>{state}</p>
72+
<button onClick={() => setState(s => s + 1)}>increase</button>
73+
</div>
74+
)
75+
}
76+
77+
function Help() {
78+
return 'Help'
79+
}
80+
81+
return ReachRouterExample
82+
})()

‎examples/components/ReactRouterExample.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
// eslint-disable-next-line no-unused-vars
2+
const ReactRouterExample = (function () {
3+
const { BrowserRouter, Link, Route, Switch } = ReactRouterDOM
4+
5+
const useNavigationState = useReactRouterNavigationState
6+
const { NavigationStateProvider } = useNavigationState
7+
8+
function App() {
9+
return (
10+
<div>
11+
<header>
12+
<ul>
13+
<li>
14+
<Link to="/">Home</Link>
15+
</li>
16+
<li>
17+
<Link to="/about">About</Link>
18+
</li>
19+
<li>
20+
<Link to="/help">Help</Link>
21+
</li>
22+
</ul>
23+
</header>
24+
<div>
25+
<Switch>
26+
<Route path="/" exact component={Home} />
27+
<Route path="/about" component={About} />
28+
<Route path="/help" component={Help} />
29+
</Switch>
30+
</div>
31+
</div>
32+
)
33+
}
34+
35+
function Home() {
36+
const [state, setState] = useNavigationState(1)
37+
38+
return (
39+
<div>
40+
<h2>Home</h2>
41+
<p>{state}</p>
42+
<button onClick={() => setState(s => s + 1)}>increase</button>
43+
</div>
44+
)
45+
}
46+
47+
function About() {
48+
const [state, setState] = useNavigationState(10)
49+
50+
return (
51+
<div>
52+
<h2>About</h2>
53+
<p>{state}</p>
54+
<button onClick={() => setState(s => s + 1)}>increase</button>
55+
</div>
56+
)
57+
}
58+
59+
function Help() {
60+
return 'Help'
61+
}
62+
63+
function ReactRouterExample() {
64+
return (
65+
<BrowserRouter>
66+
<NavigationStateProvider>
67+
<App />
68+
</NavigationStateProvider>
69+
</BrowserRouter>
70+
)
71+
}
72+
73+
return ReactRouterExample
74+
})()

‎examples/components/Source.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const { useState, useEffect } = React
2+
const T = PropTypes
3+
4+
function Source({ fileName }) {
5+
const [source, setSource] = useState()
6+
7+
useEffect(() => {
8+
async function fetchSource() {
9+
const res = await fetch(`/components/${fileName}.js`)
10+
11+
setSource(await res.text())
12+
}
13+
14+
fetchSource()
15+
}, [fileName])
16+
17+
return (
18+
<div>
19+
<h3>{fileName} source code</h3>
20+
<pre>
21+
<code>{source}</code>
22+
</pre>
23+
</div>
24+
)
25+
}
26+
27+
Source.propTypes = {
28+
fileName: T.string.isRequired,
29+
}

‎examples/index.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Examples - navigation-state-hooks</title>
6+
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
7+
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
8+
<script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
9+
<script src="https://unpkg.com/[email protected]/umd/react-router-dom.min.js"></script>
10+
<script src="https://unpkg.com/@reach/[email protected]/umd/reach-router.min.js"></script>
11+
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
12+
13+
<script src="react-router-umd.js"></script>
14+
<script src="reach-router-umd.js"></script>
15+
<script type="text/babel" src="components/ReactRouterExample.js"></script>
16+
<script type="text/babel" src="components/ReachRouterExample.js"></script>
17+
<script type="text/babel" src="components/Source.js"></script>
18+
<script type="text/babel" src="components/Example.js"></script>
19+
</head>
20+
<body>
21+
<div id="root"></div>
22+
<script type="text/babel">
23+
ReactDOM.render(<Example />, document.getElementById('root'))
24+
</script>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)