@t8/react-store 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +2 -2
  2. package/_layouts/index.html +0 -35
  3. package/_layouts/section.html +0 -58
  4. package/_layouts/start.html +0 -27
  5. package/favicon.svg +0 -1
  6. package/index.html +0 -32
  7. package/start.html +0 -4
  8. package/x/Usage.html +0 -87
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@t8/react-store",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "description": "Straightforward and minimalist shared state management for React apps",
5
5
  "main": "dist/index.js",
6
6
  "type": "module",
@@ -17,7 +17,7 @@
17
17
  "type": "git",
18
18
  "url": "git+https://github.com/t8js/react-store.git"
19
19
  },
20
- "homepage": "https://t8js.github.io/react-store",
20
+ "homepage": "https://t8.js.org/react-store",
21
21
  "keywords": [
22
22
  "react",
23
23
  "shared state",
package/_layouts/index.html DELETED
@@ -1,35 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" style="--color-scheme: mediumseagreen">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>@t8/react-store | Straightforward and minimalist shared state management for React apps</title>
7
- <link rel="stylesheet" href="https://unpkg.com/ghstage@2.2/dist/css/base.css">
8
- <link rel="stylesheet" href="https://unpkg.com/ghstage@2.2/dist/css/index.css">
9
- <link rel="icon" type="image/svg+xml" href="{{site.github.baseurl}}/favicon.svg">
10
- <link rel="prefetch" href="{{site.github.baseurl}}/start">
11
- <link rel="prefetch" href="{{site.github.baseurl}}/x/Usage">
12
- </head>
13
- <body>
14
- <div class="layout">
15
- <main>
16
- {{content}}
17
- </main>
18
- </div>
19
-
20
- {% if content contains '<pre><code ' %}<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/base16/material.min.css">
21
- <link rel="stylesheet" href="https://unpkg.com/ghstage@2.2/dist/css/code.css">
22
- <script src="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/highlight.min.js"></script>
23
- <script>hljs.highlightAll()</script>{% elsif content contains '<pre ' %}<link rel="stylesheet" href="https://unpkg.com/ghstage@2.2/dist/css/code.lightbulb.css">
24
- {% endif %}
25
- <script>
26
- (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
27
- m[i].l=1*new Date();
28
- for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
29
- k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
30
- (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
31
- ym(103784239, "init", {clickmap: true, trackLinks: true, accurateTrackBounce: true});
32
- </script>
33
- <noscript><div><img src="https://mc.yandex.ru/watch/103784239" style="position:absolute;left:-9999px;" alt=""></div></noscript>
34
- </body>
35
- </html>
package/_layouts/section.html DELETED
@@ -1,58 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" style="--color-scheme: mediumseagreen">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>{{page.title | strip_html}} | @t8/react-store</title>
7
- <link rel="stylesheet" href="https://unpkg.com/ghstage@2.2/dist/css/base.css">
8
- <link rel="stylesheet" href="https://unpkg.com/ghstage@2.2/dist/css/section.css">
9
- <link rel="icon" type="image/svg+xml" href="{{site.github.baseurl}}/favicon.svg">
10
- {% unless page.next.id == '' %}<link rel="prefetch" href="{{site.github.baseurl}}/x/{{page.next.id}}">{% endunless %}
11
- {% unless page.prev.id == '' %}<link rel="prefetch" href="{{site.github.baseurl}}/x/{{page.prev.id}}">{% endunless %}
12
- </head>
13
- <body>
14
- <div class="layout">
15
- <div class="no-nav body">
16
-
17
- <main>
18
- <h1><a href="{{site.github.baseurl}}/">@t8/react-store</a></h1>
19
- {{content}}
20
-
21
- <p class="pagenav">
22
- <span class="prev">
23
- <span class="icon">←</span>
24
- {% if page.prev.id == '' %}<a href="{{site.github.baseurl}}/">Intro</a>{% else %}<a href="{{site.github.baseurl}}/x/{{page.prev.id}}">{{page.prev.title}}</a>{% endif %}
25
- </span>
26
- <span class="sep">|</span>
27
- {% if page.next.id == '' %}
28
- <span class="repo next">
29
- <a href="https://github.com/t8js/react-store" target="_blank">GitHub</a>
30
- <span class="icon">✦</span>
31
- </span>
32
- {% else %}
33
- <span class="next">
34
- <a href="{{site.github.baseurl}}/x/{{page.next.id}}">{{page.next.title}}</a>
35
- <span class="icon">→</span>
36
- </span>
37
- {% endif %}
38
- </p>
39
- </main>
40
- </div>
41
- </div>
42
-
43
- {% if content contains '<pre><code ' %}<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/base16/material.min.css">
44
- <link rel="stylesheet" href="https://unpkg.com/ghstage@2.2/dist/css/code.css">
45
- <script src="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/highlight.min.js"></script>
46
- <script>hljs.highlightAll()</script>{% elsif content contains '<pre ' %}<link rel="stylesheet" href="https://unpkg.com/ghstage@2.2/dist/css/code.lightbulb.css">
47
- {% endif %}
48
- <script>
49
- (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
50
- m[i].l=1*new Date();
51
- for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
52
- k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
53
- (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
54
- ym(103784239, "init", {clickmap: true, trackLinks: true, accurateTrackBounce: true});
55
- </script>
56
- <noscript><div><img src="https://mc.yandex.ru/watch/103784239" style="position:absolute;left:-9999px;" alt=""></div></noscript>
57
- </body>
58
- </html>
package/_layouts/start.html DELETED
@@ -1,27 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" class="blank" style="--color-scheme: mediumseagreen">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width">
6
- <meta http-equiv="refresh" content="0; URL={{site.github.baseurl}}/x/{{page.start_id}}">
7
- <title>@t8/react-store</title>
8
- <link rel="stylesheet" href="https://unpkg.com/ghstage@2.2/dist/css/base.css">
9
- <link rel="icon" type="image/svg+xml" href="{{site.github.baseurl}}/favicon.svg">
10
- <script>window.location.replace("{{site.github.baseurl}}/x/{{page.start_id}}");</script>
11
- </head>
12
- <body>
13
- <div class="layout">
14
- <h1>@t8/react-store</h1>
15
- </div>
16
-
17
- <script>
18
- (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
19
- m[i].l=1*new Date();
20
- for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
21
- k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
22
- (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
23
- ym(103784239, "init", {clickmap: true, trackLinks: true, accurateTrackBounce: true});
24
- </script>
25
- <noscript><div><img src="https://mc.yandex.ru/watch/103784239" style="position:absolute;left:-9999px;" alt=""></div></noscript>
26
- </body>
27
- </html>
package/favicon.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>.b{fill:mediumseagreen;}.c0{fill:oklch(from mediumseagreen calc(100*(.78 - l)) 0 0 / .5);}.c1{fill:oklch(from mediumseagreen calc(100*(.78 - l)) 0 0 / .3);}.c2{fill:none;}</style><g stroke="none"><path d="M0,15 L50,0 L100,15 L100,78 L50,100 L0,81z" stroke="none" class="b"/><path d="M0,15 L50,30 L100,15 L50,0z" stroke="none" class="c1"/><path d="M0,15 L50,30 L50,100 L0,81z" stroke="none" class="c0"/><path d="M50,30 L100,15 L100,78 L50,100z" stroke="none" class="c2"/></g></svg>
package/index.html DELETED
@@ -1,32 +0,0 @@
1
- ---
2
- layout: index
3
- ---
4
-
5
- <section class="intro-title">
6
- <div class="badges">
7
- <p><a href="https://www.npmjs.com/package/@t8/react-store"><img src="https://flat.badgen.net/npm/v/@t8/react-store?labelColor=345&amp;color=46e" alt="npm"></a> <img src="https://flat.badgen.net/bundlephobia/minzip/@t8/react-store/?label=minzip&amp;labelColor=345&amp;color=46e" alt="Lightweight"> <img src="https://flat.badgen.net/badge/TypeScript/%E2%9C%93?labelColor=345&amp;color=345" alt="TypeScript ✓"> <img src="https://flat.badgen.net/badge/CSR/%E2%9C%93?labelColor=345&amp;color=345" alt="CSR ✓"> <img src="https://flat.badgen.net/badge/SSR/%E2%9C%93?labelColor=345&amp;color=345" alt="SSR ✓"></p>
8
- </div>
9
- <h1>@t8/react-store</h1>
10
- <div class="description">
11
- <p><em>Straightforward and minimalist shared state management for React apps</em></p>
12
- </div>
13
- <p class="actions">
14
- <a href="{{site.github.baseurl}}/start" class="primary button">Docs ›››</a>
15
- <span class="sep"> • </span>
16
- <a href="https://github.com/t8js/react-store" class="button" target="_blank">GitHub</a>
17
- </p>
18
- <p class="ref"><a href="https://axtk.github.io/x/t8_react_store">Backstory</a></p>
19
- <p class="installation"><code>npm i @t8/react-store</code></p>
20
- </section>
21
-
22
- <section class="intro">
23
- <div class="features">
24
- <h2>Features</h2>
25
- <ul>
26
- <li>Similar to <code>useState()</code></li>
27
- <li>No boilerplate</li>
28
- <li>Painless transition from local state to shared state and vice versa</li>
29
- <li>SSR-compatible</li>
30
- </ul>
31
- </div>
32
- </section>
package/start.html DELETED
@@ -1,4 +0,0 @@
1
- ---
2
- layout: start
3
- start_id: "Usage"
4
- ---
package/x/Usage.html DELETED
@@ -1,87 +0,0 @@
1
- ---
2
- layout: section
3
- id: "Usage"
4
- title: "Usage"
5
- prev:
6
- id: ""
7
- title: ""
8
- next:
9
- id: ""
10
- title: ""
11
- ---
12
-
13
- <h2 id="usage">Usage</h2>
14
- <p>Moving the local state to the full-fledged shared state:</p>
15
- <pre><code class="language-diff"> import {createContext, useContext} from 'react';
16
- + import {Store, useStore} from '@t8/react-store';
17
- +
18
- + let AppContext = createContext(new Store(0));
19
-
20
- let Counter = () =&gt; {
21
- - let [counter, setCounter] = useState(0);
22
- + let [counter, setCounter] = useStore(useContext(AppContext));
23
-
24
- let handleClick = () =&gt; {
25
- setCounter(value =&gt; value + 1);
26
- };
27
-
28
- return &lt;button onClick={handleClick}&gt;{counter}&lt;/button&gt;;
29
- };
30
-
31
- let ResetButton = () =&gt; {
32
- - let [, setCounter] = useState(0);
33
- + let [, setCounter] = useStore(useContext(AppContext), false);
34
-
35
- let handleClick = () =&gt; {
36
- setCounter(0);
37
- };
38
-
39
- return &lt;button onClick={handleClick}&gt;×&lt;/button&gt;;
40
- };
41
-
42
- let App = () =&gt; &lt;&gt;&lt;Counter/&gt;{' '}&lt;ResetButton/&gt;&lt;/&gt;;
43
- </code></pre>
44
- <p><a href="https://codesandbox.io/p/sandbox/rtng37?file=%2Fsrc%2FPlusButton.jsx" target="_blank">Live demo</a></p>
45
- <p>🔹 The shared state setup with <code>@t8/react-store</code> is very similar to <code>useState()</code> allowing for quick migration from local state to shared state or the other way around.</p>
46
- <p>🔹 The <code>false</code> parameter in <code>useStore(store, false)</code> (as in <code>&lt;ResetButton&gt;</code> above) tells the hook not to subscribe the component to tracking the store state updates. The common use case is when the component doesn't make use of the store state value, but it may use the state setter.</p>
47
- <p>🔹 An application can have as many stores as needed, whether on a single React Context or multiple Contexts.</p>
48
- <pre><code class="language-js">let AppContext = createContext({
49
- users: new Store(/* ... */),
50
- items: new Store(/* ... */),
51
- });
52
- </code></pre>
53
- <p>🔹 Apart from a boolean, <code>useStore(store, shouldUpdate)</code> can take a function of <code>(nextState, prevState) =&gt; boolean</code> as the second parameter to filter store updates to respond to:</p>
54
- <pre><code class="language-jsx">let ItemCard = ({id}) =&gt; {
55
- let hasRelevantUpdates = useCallback((nextItems, prevItems) =&gt; {
56
- return nextItems[id].revision !== prevItems[id].revision;
57
- }, [id]);
58
-
59
- let [items, setItems] = useStore(
60
- useContext(AppContext).items,
61
- hasRelevantUpdates,
62
- );
63
-
64
- return (
65
- // content
66
- );
67
- };
68
- </code></pre>
69
- <p>🔹 Shared state can be provided to the app by means of a regular React Context provider:</p>
70
- <pre><code class="language-diff"> let App = () =&gt; (
71
- - &lt;AppContext.Provider value={42}&gt;
72
- + &lt;AppContext.Provider value={new Store(42)}&gt;
73
- &lt;PlusButton/&gt;{' '}&lt;Display/&gt;
74
- &lt;/AppContext.Provider&gt;
75
- );
76
- </code></pre>
77
- <p>🔹 A store can contain data of any type.</p>
78
- <p>Live demos:<br>
79
- <a href="https://codesandbox.io/p/sandbox/rtng37?file=%2Fsrc%2FPlusButton.jsx" target="_blank">Primitive value state</a><br>
80
- <a href="https://codesandbox.io/p/sandbox/y7wt2j?file=%2Fsrc%2FPlusButton.jsx" target="_blank">Object value state</a></p>
81
- <p>🔹 Immer can be used with <code>useStore()</code> just the same way as <a href="https://immerjs.github.io/immer/example-setstate#usestate--immer" target="_blank">with <code>useState()</code></a> to facilitate deeply nested data changes.</p>
82
- <p><a href="https://codesandbox.io/p/sandbox/rn4qsr?file=%2Fsrc%2FPlusButton.jsx" target="_blank">Live demo with Immer</a></p>
83
- <p>🔹 A store initialized outside a component can be used as the component's remount-persistent state.</p>
84
- <hr>
85
- <ul>
86
- <li><a href="https://github.com/t8js/react-pending" target="_blank">Shared async action state tracking</a></li>
87
- </ul>