Merge pull request #1019 from InfiniteXyy/master

Miloas · web-flow · commit ea4aca7ca557 · 2022-06-19T23:22:18.000+08:00
chore: using `vite` for easier dev setup &amp; fix test runner issues
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,7 +1,7 @@
 defaults: &defaults
   working_directory: ~/rxjs-hooks
   docker:
-    - image: circleci/node:12-browsers
+    - image: circleci/node:16-browsers
 
 version: 2
 jobs:
diff --git a/index.html b/index.html
@@ -8,5 +8,6 @@
 </head>
 <body>
   <div id="app"></div>
+  <script type="module" src="./playground/index.tsx"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "build": "yarn build:esm && yarn build:cjs",
     "build:esm": "rm -rf dist/esm && tsc -p src/tsconfig.json --module es2015 --target es5 --outDir dist/esm",
     "build:cjs": "rm -rf dist/cjs && tsc -p src/tsconfig.json --module commonjs --target es5 --outDir dist/cjs",
-    "start": "webpack-dev-server --config ./tools/webpack.config.js --progress --color",
+    "start": "vite",
     "test": "NODE_ENV=test jest --no-cache --ci",
     "lint": "yarn lint:eslint && yarn lint:tsc",
     "lint:eslint": "eslint . --ext .ts,.tsx --fix --max-warnings 0",
@@ -30,17 +30,15 @@
     "@types/react-test-renderer": "^18.0.0",
     "@types/sinon": "^10.0.0",
     "@types/sinon-chai": "^3.2.3",
-    "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^4.19.0",
     "@typescript-eslint/parser": "^4.19.0",
+    "@vitejs/plugin-react": "^1.3.2",
     "browser-resolve": "^2.0.0",
     "codecov": "^3.6.1",
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-react": "^7.23.1",
-    "fork-ts-checker-webpack-plugin": "^7.0.0",
     "happypack": "^5.0.1",
-    "html-webpack-plugin": "^5.0.0",
     "husky": "^8.0.1",
     "jest": "^27.0.4",
     "lint-staged": "^13.0.0",
@@ -50,14 +48,10 @@
     "react-test-renderer": "17.0.2",
     "rxjs": "^7.0.0",
     "sinon": "^14.0.0",
-    "source-map-loader": "^4.0.0",
     "standard": "^17.0.0",
     "ts-jest": "^27.0.2",
-    "ts-loader": "^9.1.0",
     "typescript": "^4.2.0",
-    "webpack": "^5.0.0",
-    "webpack-cli": "^4.0.0",
-    "webpack-dev-server": "^4.0.0"
+    "vite": "^2.9.12"
   },
   "dependencies": {
     "tslib": "^2.1.0",
diff --git a/playground/index.tsx b/playground/index.tsx
@@ -1,14 +1,14 @@
 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 { exhaustMap, map, scan, switchMap } from 'rxjs/operators'
 
 import { useObservable } from '../src/use-observable'
 import { useEventCallback } from '../src/use-event-callback'
 
 const mockBackendRequest = (event$: Observable<React.MouseEvent<HTMLHeadElement>>) =>
   event$.pipe(
-    exhaustMap(() => timer(1000).pipe(mapTo(100))),
+    exhaustMap(() => timer(1000).pipe(map(() => 100))),
     scan((acc, cur) => acc + cur, 0),
   )
 
diff --git a/src/__test__/use-event-callback.spec.tsx b/src/__test__/use-event-callback.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Observable, of, Observer } from 'rxjs'
-import { mapTo, delay, withLatestFrom, combineLatest, map } from 'rxjs/operators'
+import { map, delay, withLatestFrom, combineLatestWith } from 'rxjs/operators'
 import { create, act } from 'react-test-renderer'
 import * as Sinon from 'sinon'
 
@@ -46,7 +46,12 @@ describe('useEventCallback specs', () => {
     const timer = Sinon.useFakeTimers()
     const timeToDelay = 200
     const value = 1
-    const Fixture = createFixture((event$: Observable<any>) => event$.pipe(mapTo(value), delay(timeToDelay)))
+    const Fixture = createFixture((event$: Observable<any>) =>
+      event$.pipe(
+        map(() => value),
+        delay(timeToDelay),
+      ),
+    )
     const fixtureNode = <Fixture />
     const testRenderer = create(fixtureNode)
     act(() => testRenderer.update(fixtureNode))
@@ -64,7 +69,11 @@ describe('useEventCallback specs', () => {
     const value = 1
     const timeToDelay = 200
     const Fixture = createFixture(
-      (event$: Observable<any>) => event$.pipe(mapTo(value), delay(timeToDelay)),
+      (event$: Observable<any>) =>
+        event$.pipe(
+          map(() => value),
+          delay(timeToDelay),
+        ),
       initialValue,
     )
     const fixtureNode = <Fixture />
@@ -129,7 +138,7 @@ describe('useEventCallback specs', () => {
       inputs$: Observable<number[]>,
     ): Observable<number> =>
       event$.pipe(
-        combineLatest(inputs$),
+        combineLatestWith(inputs$),
         map(([, [count]]) => {
           return value + count
         }),
diff --git a/src/__test__/use-observable.spec.tsx b/src/__test__/use-observable.spec.tsx
@@ -119,7 +119,6 @@ describe('useObservable specs', () => {
   })
 
   it('should emit changed props in observableFactory', () => {
-    const timer = Sinon.useFakeTimers()
     const spy = Sinon.spy()
     const timeToDelay = 200
     function Fixture(props: { foo: number; bar: string; baz: any }) {
@@ -152,15 +151,15 @@ describe('useObservable specs', () => {
     act(() => testRenderer.update(<Fixture {...newProps} />))
     // wait useEffect fired
     // https://reactjs.org/docs/hooks-reference.html#timing-of-effects
-    timer.tick(timeToDelay)
+    fakeTimer.tick(timeToDelay)
     expect(spy.callCount).toBe(1)
     expect(spy.args[0]).toEqual([[newProps.foo, newProps.baz]])
     expect(find(testRenderer.root, 'h1').children).toEqual([`${newProps.foo}`])
     expect(find(testRenderer.root, 'div').children).toEqual([`${newProps.baz.foo}`])
 
     const renewProps = { ...props, foo: 1000 }
     act(() => testRenderer.update(<Fixture {...renewProps} />))
-    timer.tick(timeToDelay)
+    fakeTimer.tick(timeToDelay)
 
     expect(spy.callCount).toBe(2)
     expect(spy.args[1]).toEqual([[renewProps.foo, renewProps.baz]])
diff --git a/src/use-observable.ts b/src/use-observable.ts
@@ -34,12 +34,14 @@ export function useObservable<State, Inputs extends ReadonlyArray<any>>(
   useEffect(() => {
     let output$: BehaviorSubject<State>
     if (inputs) {
-      output$ = (inputFactory as (
-        state$: Observable<State | undefined>,
-        inputs$: Observable<RestrictArray<Inputs> | undefined>,
-      ) => Observable<State>)(state$, inputs$) as BehaviorSubject<State>
+      output$ = (
+        inputFactory as (
+          state$: Observable<State | undefined>,
+          inputs$: Observable<RestrictArray<Inputs> | undefined>,
+        ) => Observable<State>
+      )(state$, inputs$) as BehaviorSubject<State>
     } else {
-      output$ = ((inputFactory as unknown) as (state$: Observable<State | undefined>) => Observable<State>)(
+      output$ = (inputFactory as unknown as (state$: Observable<State | undefined>) => Observable<State>)(
         state$,
       ) as BehaviorSubject<State>
     }
diff --git a/tools/webpack.config.js b/tools/webpack.config.js
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/yarn.lock b/yarn.lock
