feat: react integration

Author: eddort

package.json

@@ -20,6 +20,9 @@
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^3.2.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@types/react": "^17.0.19",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "release-it": "^14.11.5",

packages/dotto.x/computed/take.d.ts

@@ -4,7 +4,7 @@ import type { ReadableStore } from './computed'
 import { DotXStore } from '../create-store'
 import { ResolveType } from '../utils/get'
 
-export function take<Sub extends ReadableStore>(dep: Sub): ReturnType<Sub.get>
+export function take<Sub extends ReadableStore>(dep: Sub): ReturnType<Sub['get']>
 
 export function take<Data, Query extends string>(
   dep: DotXStore<Data>,

packages/fetch/package.json

@@ -7,7 +7,6 @@
   "author": "Eddort <[email protected]>",
   "license": "MIT",
   "sideEffects": false,
-  "private": false,
   "type": "module",
   "types": "./index.d.ts",
   "scripts": {

packages/react/index.d.ts

@@ -1 +1,17 @@
-export { useSelector } from './useSelector'
+import { DotXStore, ResolveType, ReadableStore, BindedStore } from 'dotto.x'
+
+export function useStore<Data extends any>(store: DotXStore<Data>): Data
+export function useStore<Store extends ReadableStore>(
+  store: Store
+): ReturnType<Store['get']>
+
+export function useStore<Store extends BindedStore>(
+  store: Store
+): ReturnType<Store['get']>
+
+export function useStore<Data, Selector extends string>(
+  store: DotXStore<Data>,
+  selector: Selector
+): ResolveType<Data, Selector>
+
+

packages/react/index.js

@@ -1 +1,15 @@
-export { useSelector } from './useSelector'
+import { useState, useEffect } from 'react'
+import { unstable_batchedUpdates } from 'react-dom'
+
+export const useStore = (store, selector) => {
+  let [, force] = useState({})
+  useEffect(() => {
+    let cb = () => {
+      unstable_batchedUpdates(() => {
+        force({})
+      })
+    }
+    return store._run ? store.listen(cb) : store.listen(selector, cb)
+  }, [selector, store])
+  return store.get(selector)
+}

packages/react/index.test.ts

@@ -0,0 +1,67 @@
+import '@testing-library/jest-dom/extend-expect'
+import React, { FC } from 'react'
+import ReactTesting from '@testing-library/react'
+import { createStore, bind } from 'dotto.x'
+
+import { useStore } from './index'
+
+let { render, screen, act } = ReactTesting
+let { createElement: h } = React
+
+it('renders store', async () => {
+  let renders = 0
+
+  let user = createStore({ name: 'John' })
+  let project = createStore({ name: 'dotto' })
+
+  let Test1: FC = () => {
+    renders += 1
+    let uName = useStore(user, 'name')
+    let pName = useStore(project, 'name')
+    return h('div', { 'data-testid': 'test1' }, `${uName}-${pName}`)
+  }
+
+  render(h(Test1))
+  expect(screen.getByTestId('test1')).toHaveTextContent('John-dotto')
+  expect(renders).toEqual(1)
+
+  await act(async () => {
+    user.set('name', 'John Constantine')
+    project.set('name', 'dotto.x')
+  })
+
+  expect(screen.getByTestId('test1')).toHaveTextContent(
+    'John Constantine-dotto.x'
+  )
+  expect(renders).toEqual(2)
+})
+
+it('renders computed', async () => {
+  let renders = 0
+
+  let user = createStore({ name: 'John' })
+  let project = createStore({ name: 'dotto' })
+  let userName = bind(user, 'name')
+  let projectName = bind(project, 'name')
+
+  let Test1: FC = () => {
+    renders += 1
+    let uName = useStore(userName)
+    let pName = useStore(projectName)
+    return h('div', { 'data-testid': 'test1' }, `${uName}-${pName}`)
+  }
+
+  render(h(Test1))
+  expect(screen.getByTestId('test1')).toHaveTextContent('John-dotto')
+  expect(renders).toEqual(1)
+
+  await act(async () => {
+    userName.set('John Constantine')
+    projectName.set('dotto.x')
+  })
+
+  expect(screen.getByTestId('test1')).toHaveTextContent(
+    'John Constantine-dotto.x'
+  )
+  expect(renders).toEqual(2)
+})