yarn add --dev experimental_react@npm:react@experimental experimental_react-dom@npm:react-dom@experimental experimental_react-test-renderer@npm:react-test-renderer@experimental

yarn add --dev jest-mock-scheduler

let Scheduler
let React
let ReactTestRenderer
let act
let MyLib

describe('Concurrent Mode', () => {
  beforeEach(() => {
    jest.resetModules()
    jest.mock('scheduler', () => require('jest-mock-scheduler'))
    jest.mock('react', () => require('experimental_react'))
    jest.mock('react-dom', () => require('experimental_react-dom'))
    jest.mock('react-test-renderer', () => require('experimental_react-test-renderer'))

    MyLib = require('../src')
    React = require('react')
    ReactTestRenderer = require('react-test-renderer')
    Scheduler = require('scheduler')

    act = ReactTestRenderer.act
  })
})

let Scheduler: import('./utils').Scheduler
let React: typeof import('react')
let ReactTestRenderer: typeof import('react-test-renderer')
let act: typeof import('react-test-renderer').act
let MyLib: typeof import('../src')

const useInputValue = input => {
  const [value, setValue] = React.useState('A')

  React.useEffect(() => {
    const callback = event => {
      setValue(event.currentTarget.value)
    }
    input.addEventListener('change', callback)
    return () => input.removeEventListener('change', callback)
  }, [input])

  return value
}

it('should should not tear', () => {
  const input = document.createElement('input')

  const emit = value => {
    input.value = value
    input.dispatchEvent(new Event('change'))
  }

  const Test = ({ id }) => {
    const value = useInputValue(input)
    // 打点
    Scheduler.unstable_yieldValue(`render:${id}:${value}`)
    return value
  }

  act(() => {
    ReactTestRenderer.create(
      <React.Fragment>
        <Test id="first" />
        <Test id="second" />
      </React.Fragment>,
      // 启用并发模式
      { unstable_isConcurrent: true }
    )

    // 初次渲染
    expect(Scheduler).toFlushAndYield(['render:first:A', 'render:second:A'])

    // 检查正常修改渲染
    emit('B')
    expect(Scheduler).toFlushAndYield(['render:first:B', 'render:second:B'])

    // 这次渲染到第一个组件后停止
    emit('C')
    expect(Scheduler).toFlushAndYieldThrough(['render:first:C'])

    // 同时产生新值
    emit('D')
    expect(Scheduler).toFlushAndYield([
      'render:second:C',
      'render:first:D',
      'render:second:D'
    ])
  })
})

import React from 'react'
import { useObservableState } from 'observable-hooks'
import { timer } from 'rxjs'
import { switchMap, mapTo, startWith } from 'rxjs/operators'

const App = () => {
  const [isTyping, updateIsTyping] = useObservableState(
    event$ => event$.pipe(
      switchMap(() =>
        timer(1000).pipe(
          mapTo(false),
          startWith(true)
        )
      )
    ),
    false
  )

  return (
    <div>
      <input type="text" onKeyDown={updateIsTyping} />
      <p>{isTyping ? 'Good you are typing.' : 'Why stop typing?'}</p>
    </div>
  )
}

// api.js
import { ObservableResource } from 'observable-hooks'

const postResource$$ = new Subject()

export const postsResource = new ObservableResource(postResource$$.pipe(
  switchMap(id => fakePostsXHR(id))
))

export function fetchPosts(id) {
  postResource$$.next(id)
}

// App.jsx
import { useObservableSuspense } from 'observable-hooks'

import { postsResource, fetchPosts } from './api'

fetchPosts('crimx')

function ProfilePage() {
  return (
    <Suspense fallback={<h1>Loading posts...</h1>}>
      <ProfileTimeline />
    </Suspense>
  )
}

function ProfileTimeline() {
  // Try to read posts, although they might not have loaded yet
  const posts = useObservableSuspense(postsResource)
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.text}</li>
      ))}
    </ul>
  )
}

type Foo<T = number> = T

// $ExpectType number
type T1 = Foo

// $ExpectType string
type T2 = Foo<string>

type Pluck<TObj extends {}, TKey extends keyof TObj = keyof TObj> = TObj[TKey]

type Obj = { a: number, b: string }

// $ExpectType string | number
type Props = Pluck<Obj>

// $ExpectType string
type Prop = Pluck<Obj, 'b'>

function identity<T>(arg: T): T {
  return arg
}

const text = identity('text')

// $ExpectType 'text'
typeof text

function fetchJSON<TResult>(src: string): Promise<TResult> {
  return fetch(src).then(r => r.json())
}

// $ExpectType Promise<{ result: string }>
fetchJSON<{ result: string }>('http://blog.crimx.com/json')

function fetchData<TResult, TKey extends keyof TResult>(
  src: string,
  key: TKey
): Promise<TResult[TKey]> {
  return fetch(src)
    .then(r => r.json())
    .then(json => json[key])
}

// Argument of type '"result"' is not assignable to parameter of type 'never'.ts(2345)
// $ExpectError
fetchData('http://blog.crimx.com/json', 'result')

// Expected 2 type arguments, but got 1.ts(2558)
// $ExpectError
fetchData<{ result: string }>('http://blog.crimx.com/json', 'result')

fetchJSON<{ result: string }>('http://blog.crimx.com/json')
  .then(json => json[key])

function fetchData<TResult>(
  src: string
): <TKey extends keyof TResult>(key: TKey) => Promise<TResult[TKey]> {
  return key =>
    fetch(src)
      .then(r => r.json())
      .then(json => json[key])
}

// $ExpectType Promise<string>
fetchData<{ result: string }>('http://blog.crimx.com/json')('result')