Init

Brooooooklyn · Brooooooklyn · commit 3bc2575cb6cf · 2018-11-15T16:19:51.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,85 @@
+
+# Created by https://www.gitignore.io/api/node
+# Edit at https://www.gitignore.io/?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# FuseBox cache
+.fusebox/
+
+# End of https://www.gitignore.io/api/node
+
+esm/
diff --git a/README.md b/README.md
@@ -0,0 +1,31 @@
+# React hooks for RxJS
+
+## useObservable
+
+```ts
+declare function useObservable<T>(sourceFactory: () => Observable<T>): T | null
+
+declare function useObservable<T>(sourceFactory: () => Observable<T>, initialState: T): T
+
+declare function useObservable<T, U>(sourceFactory: (props$: Observable<U>) => Observable<T>, initialState: T, inputs: U): T
+```
+
+## useEventCallback
+
+```ts
+declare type EventCallbackState<T, U> = [
+  ((e: SyntheticEvent<T>) => void) | typeof noop,
+  U
+]
+declare type EventCallback<T, U> = (
+  eventSource$: Observable<SyntheticEvent<T>>
+) => Observable<U>
+
+declare function useEventCallback<T, U = void>(
+  callback: EventCallback<T, U>
+): EventCallbackState<T, U | null>
+declare function useEventCallback<T, U = void>(
+  callback: EventCallback<T, U>,
+  initialState: U
+): EventCallbackState<T, U>
+```
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>React Observable Hooks</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,71 @@
+{
+  "name": "rxjs-hooks",
+  "version": "0.0.1",
+  "description": "React hooks for RxJS",
+  "main": "index.js",
+  "author": "LongYinan <lynweklm@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "build": "rm -rf esm && tsc -p src/tsconfig.json --outDir esm",
+    "lint": "tslint -c tslint.json -p src/tsconfig.json",
+    "start": "webpack-dev-server --progress --color"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:LeetCode-OpenSource/rxjs-hooks.git"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.118",
+    "@types/react-dom": "^16.0.9",
+    "@types/webpack": "^4.4.19",
+    "fork-ts-checker-webpack-plugin": "^0.4.15",
+    "happypack": "^5.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "husky": "^1.1.4",
+    "lint-staged": "^8.0.4",
+    "prettier": "^1.15.2",
+    "react": "16.7.0-alpha.2",
+    "react-dom": "16.7.0-alpha.2",
+    "rxjs": "^6.3.3",
+    "source-map-loader": "^0.2.4",
+    "standard": "^12.0.1",
+    "ts-loader": "^5.3.0",
+    "tslint": "^5.11.0",
+    "tslint-config-prettier": "^1.16.0",
+    "tslint-eslint-rules": "^5.4.0",
+    "tslint-react": "^3.6.0",
+    "tslint-sonarts": "^1.8.0",
+    "typescript": "^3.1.6",
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
+  },
+  "dependencies": {
+    "tslib": "^1.9.3"
+  },
+  "lint-staged": {
+    "*.js": [
+      "prettier --write",
+      "standard --fix",
+      "git add"
+    ],
+    "*.@(ts|tsx)": [
+      "prettier --write",
+      "tslint -c tslint.json --fix",
+      "git add"
+    ]
+  },
+  "prettier": {
+    "printWidth": 120,
+    "semi": false,
+    "trailingComma": "all",
+    "singleQuote": true,
+    "arrowParens": "always",
+    "parser": "typescript"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }
+}
diff --git a/playground/index.tsx b/playground/index.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import ReactDOM from 'react-dom'
+import { interval, Observable, timer } from 'rxjs'
+import { exhaustMap, mapTo, scan, switchMap } from 'rxjs/operators'
+
+import { useObservable } from '../src/use-observable'
+import { useEventCallback } from '../src/use-event-callback'
+
+const mockBackendRequest = (event$: Observable<React.SyntheticEvent<HTMLHeadElement>>) =>
+  event$.pipe(
+    exhaustMap(() => timer(1000).pipe(mapTo(100))),
+    scan((acc, cur) => acc + cur, 0),
+  )
+
+function IntervalValue(props: { interval: number }) {
+  const [clickCallback, value] = useEventCallback<HTMLHeadingElement, number>(mockBackendRequest, 0)
+  const intervalValue = useObservable(
+    (props$) =>
+      props$.pipe(
+        switchMap(([intervalTime]) => interval(intervalTime)),
+        scan((acc) => acc + 1, 0),
+      ),
+    0,
+    [props.interval],
+  )
+  return (
+    <h1 onClick={clickCallback}>
+      value:
+      {value + intervalValue}
+    </h1>
+  )
+}
+
+function App() {
+  const [intervalTime, setIntervalTime] = useState(1000)
+  const setTime = (intervalTime: number) => () => setIntervalTime(intervalTime)
+  return (
+    <>
+      <IntervalValue interval={intervalTime} />
+      <button onClick={setTime(1000)}>1000</button>
+      <button onClick={setTime(200)}>200</button>
+    </>
+  )
+}
+
+ReactDOM.render(<App />, document.querySelector('#app'))
diff --git a/src/tsconfig.json b/src/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.json"
+}
diff --git a/src/use-event-callback.ts b/src/use-event-callback.ts
@@ -0,0 +1,32 @@
+import { useEffect, useState, SyntheticEvent } from 'react'
+import { Observable, Subject, noop } from 'rxjs'
+
+export type EventCallbackState<T, U> = [((e: SyntheticEvent<T>) => void) | typeof noop, U]
+
+export type EventCallback<T, U> = (eventSource$: Observable<SyntheticEvent<T>>) => Observable<U>
+
+export function useEventCallback<T, U = void>(callback: EventCallback<T, U>): EventCallbackState<T, U | null>
+export function useEventCallback<T, U = void>(callback: EventCallback<T, U>, initialState: U): EventCallbackState<T, U>
+
+export function useEventCallback<T, U = void>(
+  callback: EventCallback<T, U>,
+  initialState?: U,
+): EventCallbackState<T, U | null> {
+  const initialValue = typeof initialState !== 'undefined' ? initialState : null
+  const [state, setState] = useState<EventCallbackState<T, U | null>>([noop, initialValue])
+  useEffect(
+    () => {
+      const event$ = new Subject<SyntheticEvent<T>>()
+      const clickCallback = (e: SyntheticEvent<T>) => event$.next(e)
+      setState([clickCallback, initialValue])
+      const value$ = callback(event$)
+      const subscription = value$.subscribe((value) => {
+        setState([clickCallback, value])
+      })
+      return () => subscription.unsubscribe()
+    },
+    [0], // immutable forever
+  )
+
+  return state
+}
diff --git a/src/use-observable.ts b/src/use-observable.ts
@@ -0,0 +1,61 @@
+import { Observable, BehaviorSubject, Subject } from 'rxjs'
+import { useState, useEffect, useMemo } from 'react'
+
+const PREFIX = '__SUBJECT__'
+
+const propsSubjects: {
+  [index: string]: Subject<any>
+} = {}
+
+let subjectId = 0
+
+const concatSubjectKey = (id: number) => `${PREFIX}${id}`
+
+export type InputFactory<T, U = undefined> = U extends undefined
+  ? () => Observable<T>
+  : (props$: Observable<U>) => Observable<T>
+
+export function useObservable<T, U = undefined>(inputFactory: InputFactory<T, U>): T | null
+export function useObservable<T, U = undefined>(inputFactory: InputFactory<T, U>, initialState: T): T
+export function useObservable<T, U extends ReadonlyArray<any>>(
+  inputFactory: InputFactory<T, U>,
+  initialState: T,
+  inputs: U,
+): T
+
+export function useObservable<T, U extends ReadonlyArray<any> | undefined>(
+  inputFactory: InputFactory<T, U>,
+  initialState?: T,
+  inputs?: U,
+): T | null {
+  const [state, setState] = useState<[T | null, number]>([initialState || null, 0])
+  if (inputs) {
+    useMemo(
+      () => {
+        const props$ = propsSubjects[concatSubjectKey(state[1])]
+        if (props$) {
+          props$.next(inputs)
+        }
+      },
+      inputs as ReadonlyArray<any>,
+    )
+  }
+  useEffect(
+    () => {
+      const props$ = new BehaviorSubject<U>(inputs as U)
+      const input$ = (inputFactory as (...args: any[]) => Observable<T>)(
+        typeof inputs !== 'undefined' ? props$ : void 0,
+      )
+      subjectId++
+      const subscription = input$.subscribe((value) => {
+        setState([value, subjectId])
+      })
+      propsSubjects[concatSubjectKey(subjectId)] = props$
+      return () => {
+        subscription.unsubscribe()
+      }
+    },
+    [0], // immutable forever
+  )
+  return state[0]
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "downlevelIteration": true,
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "module": "esnext",
+    "jsx": "react",
+    "target": "ES5",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "suppressExcessPropertyErrors": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "declaration": true
+  }
+}
diff --git a/tslint.json b/tslint.json
diff --git a/webpack.config.js b/webpack.config.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "extends": "../tsconfig.json"`
	`3`	`+}`