const express = require("express")
const app = express()
const port = 3002

app.get("/", (req, res) => {
  res.send("Hello World!")
})

app.listen(port, "127.0.0.1", () => {
  console.log(`Example app listening on port ${port}`)
})

const express = require("express")
const app = express()
const port = 3002

app.get("/", (req, res) => {
  res.send("Hello World!")
})

app.listen(port, "0.0.0.0", () => {
  console.log(`Example app listening on port ${port}`)
})

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import React, { useState } from 'react';
import { render } from 'react-dom';
import { ConfigProvider, DatePicker, message } from 'antd';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/es/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import 'antd/dist/antd.css';
import './index.css';

module.exports = {
  plugins: [
    ["import", { libraryName: "antd", style: true}] // `style: true` 会加载 less 文件
  ]
};

import React from 'react';
import "./style.less";
var Foo = function Foo(props) {
  return /*#__PURE__*/React.createElement("h4", {
    className: "foo"
  }, props.title);
};
export default Foo;

import styles from "rollup-plugin-styles"

export default {
  input: "src/main.js",
  output: {
    file: "dist/index.js",
    format: "cjs",
  },
  plugins: [styles({
    mode: "inject",
    modules: true,
  })],
}

import './index.css'
import style from './index.module.css'

console.log(style)

import puppeteer from "puppeteer"
;(async () => {
  const browser = await puppeteer.launch({
    headless: false,
  })
  const page = await browser.newPage()

  await page.goto("https://developer.mozilla.org/")

  await page.screenshot({ path: "MDN.png", fullPage: true })

  await browser.close()
})()

import puppeteer from "puppeteer"
;(async () => {
  const browser = await puppeteer.launch({
    headless: false,
  })
  const page = await browser.newPage()

  await page.goto("https://www.feishu.cn/approval/admin/approvalList")

  // 带有这个类的元素在登陆页面不存在，在有登陆态的列表页存在
  await page.waitForSelector(".approval-header")

  // 去拿 cookie
  const cookies = await page.cookies()
  // 可以通过在当前 page 环境去执行 JavaScript 来拿到 cookie，但是有些 cookie 可能是 HttpOnly 就拿不到
  const cookieStr = await page.evaluate(() => {
    return document.cookie
  })
  // 保存下来，下次就可以直接用 cookie，不用再重新登陆了
  page.setCookie(...cookies)
  await browser.close()
})()

import App from "./App.tsx"

ReactDOM.createRoot(document.getElementById("root")!).render(<App />)

function App() {
  return <>This is App</>;
}

export default App;

function ReactDOMRoot(internalRoot) {
  this._internalRoot = internalRoot
}

ReactDOMRoot.prototype.render = function (children) {
  const root = this._internalRoot
  console.log("sedationh render", root, children)
}

function createRoot(container) {
  const root = { containerInfo: container }

  return new ReactDOMRoot(root)
}

export default { createRoot }

{
  type: 'marquee',
  props: {
    bgcolor: '#ffa7c4',
    children: 'hi',
  },
  key: null,
  ref: null,
  $$typeof: Symbol.for('react.element'),
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <div>
    <h1>App</h1>
    <a href="https://baidu.com">baidu</a>
    This is App
  </div>
)

function updateContainer(element, container) {
  const { containerInfo } = container
  const fiber = createFiber(element, {
    type: containerInfo.nodeName.toLocaleLowerCase(),
    stateNode: containerInfo,
  })
  // 组件初次渲染
  scheduleUpdateOnFiber(fiber)
}

ReactDOMRoot.prototype.render = function (children) {
  const root = this._internalRoot
  console.log("sedationh render", root, children)
  + updateContainer(children, root)
}

  const fiber = createFiber(element, {
    type: containerInfo.nodeName.toLocaleLowerCase(),
    stateNode: containerInfo,
  })

export function createFiber(vnode, returnFiber) {

    // 第一个子fiber
    child: null,
    // 下一个兄弟节点
    sibling: null,
    // 父亲节点
    return: returnFiber,

export function createFiber(vnode, returnFiber) {
  console.log("sedationh createFiber", vnode, returnFiber)
  const fiber = {
    // 类型
    type: vnode.type,
    key: vnode.key,
    // 属性
    props: vnode.props,
    // 不同类型的组件， stateNode也不同
    // 原生标签 dom节点
    // class 实例
    stateNode: null,

    // 第一个子fiber
    child: null,
    // 下一个兄弟节点
    sibling: null,
    // 父亲节点
    return: returnFiber,

    flags: Placement,

    // 记录节点在当前层级下的位置
    index: null,
  }

  if (isString(vnode.type)) {
    fiber.tag = HostComponent
  }

  return fiber
}

let wip = null // work in progress 当前正在工作中的
let wipRoot = null

export function scheduleUpdateOnFiber(fiber) {
  wip = fiber
  wipRoot = fiber
}

/**
 - @param {IdleDeadline} idleDeadline
 */
function workLoop(idleDeadline) {
  while (wip && idleDeadline.timeRemaining() > 0) {
    performUnitOfWork()
  }

  if (!wip && wipRoot) {
    commitRoot()
  }
}

requestIdleCallback(workLoop)

function performUnitOfWork() {
  const { tag } = wip

  switch (tag) {
    case HostComponent:
      updateHostComponent(wip)
      break

    default:
      break
  }

  // dfs
  if (wip.child) {
    wip = wip.child
    return
  }

  let next = wip
  while (next) {
    if (next.sibling) {
      wip = next.sibling
      return
    }

    next = next.return
  }

  wip = null
}

export const FunctionComponent = 0
export const ClassComponent = 1
export const IndeterminateComponent = 2 // Before we know whether it is function or class
export const HostRoot = 3 // Root of a host tree. Could be nested inside another node.
export const HostPortal = 4 // A subtree. Could be an entry point to a different renderer.
export const HostComponent = 5
export const HostText = 6
export const Fragment = 7
export const Mode = 8
export const ContextConsumer = 9
export const ContextProvider = 10
export const ForwardRef = 11
export const Profiler = 12
export const SuspenseComponent = 13
export const MemoComponent = 14
export const SimpleMemoComponent = 15
export const LazyComponent = 16
export const IncompleteClassComponent = 17
export const DehydratedFragment = 18
export const SuspenseListComponent = 19
export const ScopeComponent = 21
export const OffscreenComponent = 22
export const LegacyHiddenComponent = 23
export const CacheComponent = 24
export const TracingMarkerComponent = 25

export function updateHostComponent(wip) {
  if (!wip.stateNode) {
    wip.stateNode = document.createElement(wip.type)
    updateNode(wip.stateNode, wip.props)
  }

  reconcileChildren(wip, wip.props.children)
}

export function updateNode(node, nextVal) {
  Object.keys(nextVal).forEach((key) => {
    if (key === "children") {
      if (isStringOrNumber(nextVal[key])) {
        node.textContent = nextVal[key]
      }
    } else {
      node[key] = nextVal[key]
    }
  })
}

function reconcileChildren(wip, children) {
  if (isStringOrNumber(children)) {
    return
  }

  const newChildren = isArray(children) ? children : [children]
  let previousNewFiber = null
  for (let i = 0; i < newChildren.length; i++) {
    const newChild = newChildren[i]
    if (newChild == null) {
      continue
    }
    const newFiber = createFiber(newChild, wip)

    if (previousNewFiber === null) {
      // head node
      wip.child = newFiber
    } else {
      previousNewFiber.sibling = newFiber
    }

    previousNewFiber = newFiber
  }
}

function commitRoot() {
  commitWorker(wipRoot)
  wipRoot = null
}

function commitWorker(wip) {
  if (!wip) {
    return
  }

  // 1. 提交自己
  const parentNode = getParentNode(wip.return)
  const { flags, stateNode } = wip
  if (flags & Placement && stateNode) {
    parentNode.appendChild(stateNode)
  }
  // 2. 提交子节点
  commitWorker(wip.child)
  // 3. 提交兄弟
  commitWorker(wip.sibling)
}

function getParentNode(wip) {
  let p = wip
  while (p) {
    if (p.stateNode) {
      return p.stateNode
    }

    p = p.return
  }
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <div>
    <h1>App</h1>
    <a href="https://baidu.com">baidu</a>
    This is App
  </div>
)

export function createFiber(vnode, returnFiber) {
  console.log("sedationh createFiber", vnode, returnFiber)
  const fiber = {
    // 类型
    type: vnode.type,
    key: vnode.key,
    // 属性
    props: vnode.props,
    // 不同类型的组件， stateNode也不同
    // 原生标签 dom节点
    // class 实例
    stateNode: null,

    // 第一个子fiber
    child: null,
    // 下一个兄弟节点
    sibling: null,
    return: returnFiber,

    flags: Placement,

    // 记录节点在当前层级下的位置
    index: null,
  }

  if (isString(vnode.type)) {
    fiber.tag = HostComponent
  }
  if (isFunction(vnode.type)) {
    fiber.tag = FunctionComponent
  }

  return fiber
}

function performUnitOfWork() {
  const { tag } = wip

  switch (tag) {
    case HostComponent:
      updateHostComponent(wip)
      break
    case FunctionComponent:
      updateFunctionComponent(wip)
      break

export function updateFunctionComponent(wip) {
  const { type, props } = wip
  const children = type(props)
  reconcileChildren(wip, children)
}

function performUnitOfWork() {
  const { tag } = wip

  switch (tag) {
    case HostComponent:
      updateHostComponent(wip)
      break
    case FunctionComponent:
      updateFunctionComponent(wip)
      break
    case ClassComponent:
      updateClassComponent(wip)
      break
    case HostText:
      updateHostComponent(wip)
      break

export function updateClassComponent(wip) {
  const { type, props } = wip
  const instance = new type(props)
  const children = instance.render()
  reconcileChildren(wip, children)
}

export function updateHostTextComponent(wip) {
  wip.stateNode = document.createTextNode(wip.props.children)
}

    <div>
      <h1>App</h1>
      <a href="https://baidu.com">baidu</a>
      有其他同级元素的文本
      {/* @ts-ignore */}
      <ClassComp />
    </div>

export function updateNode(node, nextVal) {
  Object.keys(nextVal).forEach((key) => {
    if (key === "children") {
      if (isStringOrNumber(nextVal[key])) {
        // STUDY: seda 文本节点处理
        node.textContent = nextVal[key]
      }
    } else {
      node[key] = nextVal[key]
    }
  })
}

function reconcileChildren(wip, children) {
  if (isStringOrNumber(children)) {
    return
  }

function workLoop() {
  while (wip) {
    performUnitOfWork()
  }

  if (!wip && wipRoot) {
    commitRoot()
  }
}

// requestIdleCallback(workLoop)

export function scheduleUpdateOnFiber(fiber) {
  wip = fiber
  wipRoot = fiber

  scheduleCallback(workLoop)
}

import { Heap } from "./heap"

let taskIdCounter = 0

const taskHeap = new Heap((parent, child) => {
  if (parent.expirationTime === child.expirationTime) {
    return parent.id < child.id
  }
  return parent.expirationTime < child.expirationTime
})

export function scheduleCallback(callback) {
  const currentTime = getCurrentTime()
  const timeout = -1

  const expirationTime = currentTime - timeout

  const newTask = {
    id: taskIdCounter,
    callback,
    expirationTime,
  }
  taskIdCounter += 1

  taskHeap.add(newTask)

  requestHostCallback()
}

const channel = new MessageChannel()
function requestHostCallback() {
  channel.port1.postMessage(null)
}
channel.port2.onmessage = function () {
  workLoop()
}

function workLoop() {
  let currentTask = taskHeap.pop()

  while (currentTask) {
    const callback = currentTask.callback
    callback()
    currentTask = taskHeap.pop()
  }
}

export function getCurrentTime() {
  return performance.now()
}

function FunctionComp() {
  const [cnt, dispatchCnt] = useReducer((state, action) => {
    console.log("sedationh action", action, n++)
    return state + 1
  }, 0)

  const [cnt2, dispatchCnt2] = useReducer((state, action) => {
    console.log("sedationh action", action, n++)
    return state + 2
  }, 0)

  return (
    <div>
      <button
        onClick={() => {
          dispatchCnt("action")
        }}
      >
        dispatchCnt cnt1
      </button>
      {cnt}
      <hr />
      <button
        onClick={() => {
          dispatchCnt2("action")
        }}
      >
        dispatchCnt cnt2
      </button>
      {cnt2}
      <h1>FunctionComp</h1>
    </div>
  )
}

export function updateNode(node, nextVal) {
  Object.keys(nextVal).forEach((key) => {
    if (key === "children") {
      if (isStringOrNumber(nextVal[key])) {
        node.textContent = nextVal[key]
      }
    } else if (key.slice(0, 2) === "on") {
      const eventName = key.slice(2).toLowerCase()
      node.addEventListener(eventName, nextVal[key])
    } else {
      node[key] = nextVal[key]
    }
  })
}

    hook = {
      memoriedState: null, // 状态
      next: null, // 下一个 hook
    }

export const useReducer = (reducer, initialState) => {
  const hook = updateWorkInProgressHook()

  if (!currentlyRenderingFiber.alternate) {
    // 初次渲染
    hook.memoriedState = initialState
  }

  const dispatch = (action) => {
    hook.memoriedState = reducer(hook.memoriedState, action)
    currentlyRenderingFiber.alternate = { ...currentlyRenderingFiber }
    scheduleUpdateOnFiber(currentlyRenderingFiber)
  }

  return [hook.memoriedState, dispatch]
}

export function createFiber(vnode, returnFiber) {
  const fiber = {

...

    // old fiber
    alternate: null,

    // function component, hook0
    memoriedState: null,
  }

...

let currentlyRenderingFiber = null
let workInProgressHook = null

function updateWorkInProgressHook() {
  let hook

  const current = currentlyRenderingFiber.alternate
  if (!current) {
    // 初次渲染
    hook = {
      memoriedState: null,
      next: null,
    }

    if (!workInProgressHook) {
      // hook0
      workInProgressHook = currentlyRenderingFiber.memoriedState = hook
    } else {
      // hook1, hook2, hook3 ...
      workInProgressHook = workInProgressHook.next = hook
    }
  } else {
    // 更新
    currentlyRenderingFiber.memoriedState = current.memoriedState
    if (!workInProgressHook) {
      // hook0
      hook = workInProgressHook = currentlyRenderingFiber.memoriedState
    } else {
      // hook1, hook2, hook3 ...
      hook = workInProgressHook = workInProgressHook.next
    }
  }

  return hook
}

export const renderWithHooks = (wip) => {
  currentlyRenderingFiber = wip
  currentlyRenderingFiber.memoriedState = null
  workInProgressHook = null
}

export function updateFunctionComponent(wip) {
  renderWithHooks(wip)

  const { type, props } = wip
  const children = type(props)
  reconcileChildren(wip, children)
}

// 协调（diff）
// 创建新 fiber
function reconcileChildren(wip, children) {
  if (isStringOrNumber(children)) {
    return
  }

  const newChildren = isArray(children) ? children : [children]
  let oldFiber = wip.alternate?.child
  let previousNewFiber = null
  for (let i = 0; i < newChildren.length; i++) {
    const newChild = newChildren[i]
    if (newChild == null) {
      continue
    }
    const newFiber = createFiber(newChild, wip)
    const same = isSame(oldFiber, newFiber)
    if (same) {
      Object.assign(newFiber, {
        alternate: oldFiber,
        stateNode: oldFiber.stateNode,
        flags: Update,
      })
    }

    if (oldFiber) {
      oldFiber = oldFiber.sibling
    }

    if (previousNewFiber === null) {
      // head node
      wip.child = newFiber
    } else {
      previousNewFiber.sibling = newFiber
    }

    previousNewFiber = newFiber
  }
}

function commitWorker(wip) {
  if (!wip) {
    return
  }

  // 1. 提交自己
  const parentNode = getParentNode(wip.return)
  const { flags, stateNode } = wip
  if (flags & Placement && stateNode) {
    parentNode.appendChild(stateNode)
  }
  if (flags & Update && stateNode) {
    updateNode(stateNode, wip.alternate.props, wip.props)
  }
  // 2. 提交子节点
  commitWorker(wip.child)
  // 3. 提交兄弟
  commitWorker(wip.sibling)
}

export function updateNode(node, prev, nextVal) {
  Object.keys(prev).forEach((key) => {
    if (key === "children") {
      if (isStringOrNumber(nextVal[key])) {
        node.textContent = ""
      }
    } else if (key.slice(0, 2) === "on") {
      const eventName = key.slice(2).toLowerCase()
      node.removeEventListener(eventName, prev[key])
    } else {
      node[key] = ""
    }
  })

  Object.keys(nextVal).forEach((key) => {
    if (key === "children") {
      if (isStringOrNumber(nextVal[key])) {
        // STUDY: seda 文本节点处理
        node.textContent = nextVal[key]
      }
    } else if (key.slice(0, 2) === "on") {
      const eventName = key.slice(2).toLowerCase()
      node.addEventListener(eventName, nextVal[key])
    } else {
      node[key] = nextVal[key]
    }
  })
}

export const useState = (initialState) => {
  const hook = updateWorkInProgressHook()

  if (!currentlyRenderingFiber.alternate) {
    // 初次渲染
    hook.memoriedState = initialState
  }

  const fiber = currentlyRenderingFiber

  const dispatch = (newState) => {
    hook.memoriedState = typeof newState === "function" ? newState(hook.memoriedState) : newState
    fiber.alternate = { ...fiber }
    fiber.sibling = null
    scheduleUpdateOnFiber(fiber)
  }

  return [hook.memoriedState, dispatch]
}

export function createFiber(vnode, returnFiber) {
  const fiber = {

...

	// 处理删除
    deletoins: null,
  }

function reconcileChildren(returnFiber, children) {
  if (isStringOrNumber(children)) {
    return
  }

  const newChildren = isArray(children) ? children : [children]
  let oldFiber = returnFiber.alternate?.child
  let previousNewFiber = null
  let newIndex
  for (newIndex = 0; newIndex < newChildren.length; newIndex++) {
    const newChild = newChildren[newIndex]
    if (newChild == null) {
      continue
    }
    const newFiber = createFiber(newChild, returnFiber)
    const same = isSame(oldFiber, newFiber)
    if (same) {
      Object.assign(newFiber, {
        alternate: oldFiber,
        stateNode: oldFiber.stateNode,
        flags: Update,
      })
    }
    if (!same && oldFiber) {
      // 删除节点
      deleteChild(returnFiber, oldFiber)
    }

    if (oldFiber) {
      oldFiber = oldFiber.sibling
    }

    if (previousNewFiber === null) {
      // head node
      returnFiber.child = newFiber
    } else {
      previousNewFiber.sibling = newFiber
    }

    previousNewFiber = newFiber
  }

  /**
   - new ab
   - old abcdef
   *
   - 通过遍历 ab 是走不到 cdef 的
   */
  if (newIndex === newChildren.length) {
    deleteRemainingChildren(returnFiber, oldFiber)
    return
  }
}

function deleteRemainingChildren(returnFiber, currentFirstChild) {
  let childToDelete = currentFirstChild
  while (childToDelete) {
    deleteChild(returnFiber, childToDelete)
    childToDelete = childToDelete.sibling
  }
}

function SearchBox() {
  const [result, setResult] = useState("")
  const handleInput = (e) => {
    const value = e.target.value
    request(value).then((response) => {
      setResult(response.data)
    })
  }
  return (
    <>
      <input onChange={handleInput} />
      {result}
    </>
  )
}

// 产生 4000 2000 1000 4000 ...
const random2 = (function () {
  let i = 1

  const array = [4000, 2000, 1000]

  return () => {
    return array[i++ % array.length]
  }
})()

function request(value) {
  return new Promise<{
    data: string
  }>((resolve) => {
    setTimeout(() => {
      resolve({
        data: value,
      })
    }, random2())
  })
}

function SearchBox() {
  const [result, setResult] = useState("")
  const latestRequestTimeRef = useRef(0)
  const handleInput = (e) => {
    const value = e.target.value
    const requestTime = Date.now() // 记录时间
    latestRequestTimeRef.current = requestTime
    request(value).then((response) => {
      if (requestTime >= latestRequestTimeRef.current) {
        // 对比时间
        setResult(response.data)
      }
    })
  }
  return (
    <>
      <input onChange={handleInput} />
      {result}
    </>
  )
}

function SearchBox() {
  const [result, setResult] = useState("")
  // 下面的 BehaviorSubject 和 Subject 一模一样，除了有一个初始值会在订阅时立刻发出
  const input$ = useMemo(() => new BehaviorSubject(""), [])
  // 输入内容时向流发送值
  const handleInput = (e) => {
    input$.next(e.target.value)
  }
  useEffect(() => {
    // 订阅这个流
    const subscription = input$.subscribe((v) => {
      setResult(v)
    })
    return () => {
      // 组件卸载时取消订阅
      subscription.unsubscribe()
    }
  }, [])

  return (
    <>
      <input onChange={handleInput} />
      {result}
    </>
  )
}

function SearchBox() {
  const [result, setResult] = useState("")
  // 下面的 BehaviorSubject 和 Subject 一模一样，除了有一个初始值会在订阅时立刻发出
  const input$ = useMemo(() => new BehaviorSubject(""), [])
  // 输入内容时向流发送值
  const handleInput = (e) => {
    input$.next(e.target.value)
  }
  useEffect(() => {
    const subscription = input$
      .pipe(
        // 防抖的实现 -----------------------------
        debounce((input) => {
          if (input.length === 0) {
            return of(null) // 立即响应
          } else {
            return timer(500) // 等待 500ms
          }
        })
      )
      .subscribe((v) => {
        setResult(v)
      })
    return () => {
      subscription.unsubscribe()
    }
  }, [])

  return (
    <>
      <input onChange={handleInput} />
      {result}
    </>
  )
}

function SearchBox() {
  const [result, setResult] = useState("")
  // 下面的 BehaviorSubject 和 Subject 一模一样，除了有一个初始值会在订阅时立刻发出
  const input$ = useMemo(() => new BehaviorSubject(""), [])
  // 输入内容时向流发送值
  const handleInput = (e) => {
    input$.next(e.target.value)
  }
  useEffect(() => {
    const subscription = input$
      .pipe(
        // 防抖的实现 -----------------------------
        debounce((input) => {
          if (input.length === 0) {
            return of(null) // 立即响应
          } else {
            return timer(500) // 等待 500ms
          }
        }),
        distinctUntilChanged()
      )
      .subscribe((v) => {
        setResult(v)
      })
    return () => {
      subscription.unsubscribe()
    }
  }, [])

  return (
    <>
      <input onChange={handleInput} />
      {result}
    </>
  )
}

// 产生 4000 2000 1000 4000 ...
const random2 = (function () {
  let i = 1

  const array = [4000, 2000, 1000]

  return () => {
    return array[i++ % array.length]
  }
})()

function request(value) {
  return new Promise<{
    data: string
  }>((resolve) => {
    setTimeout(() => {
      resolve({
        data: value,
      })
    }, random2())
  })
}

function SearchBox() {
  const [result, setResult] = useState("")
  // 下面的 BehaviorSubject 和 Subject 一模一样，除了有一个初始值会在订阅时立刻发出
  const input$ = useMemo(() => new BehaviorSubject(""), [])
  // 输入内容时向流发送值
  const handleInput = (e) => {
    input$.next(e.target.value)
  }
  useEffect(() => {
    const subscription = input$
      .pipe(
        // 防抖的实现 -----------------------------
        debounce((input) => {
          if (input.length === 0) {
            return of(null) // 立即响应
          } else {
            return timer(500) // 等待 500ms
          }
        }),
        distinctUntilChanged(),
        // 网络请求的实现 -----------------------------
        switchMap((input) => {
          return request(input) // 取最新开发发起的结果
        })
      )
      .subscribe((v) => {
        setResult(v.data)
      })
    return () => {
      subscription.unsubscribe()
    }
  }, [])

  return (
    <>
      <input onChange={handleInput} />
      {result}
    </>
  )
}

function fetcher(input: string): Promise<{
  value: string
  error: boolean
}> {
  return new Promise<string>((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.5) reject()
      resolve("api " + input)
    }, Math.random() * 1000)
  })
    .then((res) => {
      return {
        value: res,
        error: false,
      }
    })
    .catch(() => {
      return {
        value: "",
        error: true,
      }
    })
}

function SearchBox() {
  const [result, setResult] = useState("")
  // 下面的 BehaviorSubject 和 Subject 一模一样，除了有一个初始值会在订阅时立刻发出
  const input$ = useMemo(() => new BehaviorSubject(""), [])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(false)

  const errorRef = useRef<boolean>(false)
  errorRef.current = error

  // 输入内容时向流发送值
  const handleInput = (e) => {
    input$.next(e.target.value)
  }
  useEffect(() => {
    const subscription = input$
      .pipe(
        // 防抖的实现 -----------------------------
        debounce((input) => {
          // 补充 error 处理
          if (input.length === 0 || errorRef.current) {
            return of(null) // 立即响应
          } else {
            return timer(500) // 等待 500ms
          }
        }),
        distinctUntilChanged(),
        // 网络请求的实现 -----------------------------
        switchMap((input) => {
          if (input.length === 0) {
            setLoading(false)
            setError(false)
            return of({
              value: "default",
              error: false,
            })
          }
          setError(false)
          setLoading(true)
          return fetcher(input)
        })
      )
      .subscribe({
        next: ({ error, value }) => {
          if (error) {
            setError(true)
            setLoading(false)
          } else {
            setError(false)
            setLoading(false)
            setResult(value)
          }
        },
      })
    return () => {
      subscription.unsubscribe()
    }
  }, [])

  return (
    <>
      <div>
        <input onChange={handleInput} />
      </div>
      {error ? "error" : loading ? "loading" : result}
    </>
  )
}

function App() {
  return (
    <div>
      <button>Hi</button>
      <div>
        我是产品想配置的文案，<a href="https://www.google.com.hk/">https://www.google.com.hk</a>
        中间可能夹杂链接，并且位置不知道在哪
      </div>
    </div>
  )
}

export default App

import Markdown from "markdown-to-jsx"

function App() {
  return (
    <div>
      <button>Hi</button>
      <div>
        我是产品想配置的文案，<a href="https://www.google.com.hk/">https://www.google.com.hk</a>
        中间可能夹杂链接，并且位置不知道在哪
      </div>

      <hr />
      <h2>markdown-to-jsx 方案</h2>
      <Markdown>
        我是产品想配置的文案，[https://www.google.com.hk/](https://www.google.com.hk/)
        中间可能夹杂链接，并且位置不知道在哪
      </Markdown>
    </div>
  )
}

export default App

import { create } from 'zustand'

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

function BearCounter() {
  const bears = useStore((state) => state.bears)
  return <h1>{bears} around here...</h1>
}

function Controls() {
  const increasePopulation = useStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}