Move React integration from Nano Stores

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.github/workflows/test.yml

@@ -0,0 +1,44 @@
+name: Test
+on:
+  push:
+  pull_request:
+jobs:
+  full:
+    name: Node.js 16 Full
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v2
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Run tests
+        run: yarn test
+        env:
+          FORCE_COLOR: 2
+  short:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version:
+          - 14
+          - 12
+    name: Node.js ${{ matrix.node-version }} Quick
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v2
+      - name: Install Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Run unit tests
+        run: node --experimental-vm-modules node_modules/.bin/jest
+        env:
+          FORCE_COLOR: 2

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+yarn-error.log
+
+coverage/

.npmignore

@@ -0,0 +1,6 @@
+yarn-error.log
+yarn.lock
+
+coverage/
+*.test.ts
+tsconfig.json

CHANGELOG.md

@@ -0,0 +1,2 @@
+# Change Log
+This project adheres to [Semantic Versioning](http://semver.org/).

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright 2020 Andrey Sitnik <andrey@sitnik.ru>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,4 @@
+# Nano Stores React
+
+<img align="right" width="92" height="92" title="Nano Stores logo"
+     src="https://nanostores.github.io/nanostores/logo.svg">

batch/index.js

@@ -0,0 +1,3 @@
+import { unstable_batchedUpdates } from 'react-dom'
+
+export let batch = unstable_batchedUpdates

batch/index.native.js

@@ -0,0 +1,3 @@
+import { unstable_batchedUpdates } from 'react-native'
+
+export let batch = unstable_batchedUpdates

index.d.ts

@@ -0,0 +1,57 @@
+import { MapStore, Store, StoreValue } from '../atom/index.js'
+
+export interface UseStoreOptions<SomeStore, Key extends string> {
+  keys?: SomeStore extends MapStore ? Key[] : never
+}
+
+/**
+ * Subscribe to store changes and get store’s value.
+ *
+ * Can be user with store builder too.
+ *
+ * ```js
+ * import { useStore } from 'nanostores/react'
+ *
+ * import { router } from '../store/router'
+ *
+ * export const Layout = () => {
+ *   let page = useStore(router)
+ *   if (page.router === 'home') {
+ *     return <HomePage />
+ *   } else {
+ *     return <Error404 />
+ *   }
+ * }
+ * ```
+ *
+ * @param store Store instance.
+ * @returns Store value.
+ */
+export function useStore<
+  SomeStore extends Store,
+  Value extends StoreValue<Store>,
+  Key extends keyof Value
+>(
+  store: SomeStore,
+  options?: UseStoreOptions<SomeStore, Key>
+): SomeStore extends MapStore ? Pick<Value, Key> : Value
+
+/**
+ * Batch React updates. It is just wrap for React’s `unstable_batchedUpdates`
+ * with fix for React Native.
+ *
+ * ```js
+ * import { batch } from 'nanostores/react'
+ *
+ * React.useEffect(() => {
+ *   let unbind = store.listen(() => {
+ *     batch(() => {
+ *       forceRender({})
+ *     })
+ *   })
+ * })
+ * ```
+ *
+ * @param cb Callback to run in batching.
+ */
+export function batch(cb: () => void): void

index.js

@@ -0,0 +1,34 @@
+import { listenKeys } from 'nanostores'
+import React from 'react'
+
+import { batch } from './batch/index.js'
+
+export { batch }
+
+export function useStore(store, opts = {}) {
+  let [, forceRender] = React.useState({})
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof store === 'function') {
+      throw new Error(
+        'Use useStore(Template(id)) or useSync() ' +
+          'from @logux/client/react for templates'
+      )
+    }
+  }
+
+  React.useEffect(() => {
+    let rerender = () => {
+      batch(() => {
+        forceRender({})
+      })
+    }
+    if (opts.keys) {
+      return listenKeys(store, opts.keys, rerender)
+    } else {
+      return store.listen(rerender)
+    }
+  }, [store, '' + opts.keys])
+
+  return store.get()
+}