const ReactDOM: Object = {
  // 省略...
  hydrate(element: React$Node, container: DOMContainer, callback: ?Function) {
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      true,
      callback,
    );
  },
  render(
    element: React$Element<any>,
    container: DOMContainer,
    callback: ?Function,
  ) {
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      false,
      callback,
    );
  },
  // 省略...
}

function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,
  children: ReactNodeList,
  container: DOMContainer,
  forceHydrate: boolean,
  callback: ?Function,
) {
  // 省略...
  let root: Root = (container._reactRootContainer: any);
  if (!root) {
    // 创建 ReactRoot
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );
    if (typeof callback === 'function') {
      const originalCallback = callback;
      // 封装回调函数
      callback = function() {
        const instance = DOMRenderer.getPublicRootInstance(root._internalRoot);
        originalCallback.call(instance);
      };
    }
    // 执行渲染
    DOMRenderer.unbatchedUpdates(() => {
      if (parentComponent != null) {
        // 忽略
        root.legacy_renderSubtreeIntoContainer(
          parentComponent,
          children,
          callback,
        );
      } else {
        // 调用 ReactRoot 的 render 方法
        root.render(children, callback);
      }
    });
  } else {
    // 省略...
  }
  return DOMRenderer.getPublicRootInstance(root._internalRoot);
}

function legacyCreateRootFromDOMContainer(
  container: DOMContainer,
  forceHydrate: boolean,
): Root {
  const shouldHydrate =
    forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
  if (!shouldHydrate) {
    let warned = false;
    let rootSibling;
    while ((rootSibling = container.lastChild)) {
      container.removeChild(rootSibling);
    }
  }
  const isConcurrent = false;
  return new ReactRoot(container, isConcurrent, shouldHydrate);
}

function ReactRoot(
  container: Container,
  isConcurrent: boolean,
  hydrate: boolean,
) {
  const root = DOMRenderer.createContainer(container, isConcurrent, hydrate);
  this._internalRoot = root;
}

export function createContainer(
  containerInfo: Container,
  isConcurrent: boolean,
  hydrate: boolean,
): OpaqueRoot {
  return createFiberRoot(containerInfo, isConcurrent, hydrate);
}

ReactRoot.prototype.render = function(
  children: ReactNodeList,
  callback: ?() => mixed,
): Work {
  const root = this._internalRoot;
  // 创建一个 work
  const work = new ReactWork();
  callback = callback === undefined ? null : callback;
  if (callback !== null) {
    // 等待当前的 work 执行完成后执行回调函数
    work.then(callback);
  }
  // 触发更新
  DOMRenderer.updateContainer(children, root, null, work._onCommit);
  return work;
};

export function updateContainer(
  element: ReactNodeList,
  container: OpaqueRoot,
  parentComponent: ?React$Component<any, any>,
  callback: ?Function,
): ExpirationTime {
  // container 为当前的 FiberRoot 实例化对象
  const current = container.current;
  // 用于计算任务调度优先级
  const currentTime = requestCurrentTime();
  const expirationTime = computeExpirationForFiber(currentTime, current);
  // 推送和触发更新调度任务
  return updateContainerAtExpirationTime(
    element,
    container,
    parentComponent,
    expirationTime,
    callback,
  );
}

export function updateContainerAtExpirationTime(
  element: ReactNodeList,
  container: OpaqueRoot,
  parentComponent: ?React$Component<any, any>,
  expirationTime: ExpirationTime,
  callback: ?Function,
) {
  const current = container.current;
  const context = getContextForSubtree(parentComponent);
  if (container.context === null) {
    container.context = context;
  } else {
    container.pendingContext = context;
  }
  return scheduleRootUpdate(current, element, expirationTime, callback);
}

function scheduleRootUpdate(
  current: Fiber,
  element: ReactNodeList,
  expirationTime: ExpirationTime,
  callback: ?Function,
) {
  // 创建一个 update 更新任务
  const update = createUpdate(expirationTime);
  update.payload = {element};

  callback = callback === undefined ? null : callback;
  if (callback !== null) {
    warningWithoutStack(
      typeof callback === 'function',
      'render(...): Expected the last optional `callback` argument to be a ' +
        'function. Instead received: %s.',
      callback,
    );
    update.callback = callback;
  }
  // 把当前的更新任务和当前的 FiberRoot 压入任务队列
  enqueueUpdate(current, update);
  // 触发任务队列进行任务执行
  scheduleWork(current, expirationTime);
  return expirationTime;
}

import React from 'react'
import { useState } from 'react'
import { Button } from 'antd'

const Counter = () => {
  const [count, setCount] = useState(0)
  const onButtonClick = () => {
    setCount(count => count + 1)
  }
  return (
    <Button onClick={onButtonClick}>{count}</Button>
  )
}

export default Counter

setCount(count => count + 1)

import React from 'react'
import { useReducer } from 'react'
import { Button } from 'antd'

const countReducer = (state, action) => {
  switch(action.type) {
    case 'add':
      return state + 1 
    case 'sub':
      return state - 1
    default:
      return state
  }
}

const Counter = () => {
  const [count, dispatchCount] = useReducer(countReducer, 0)
  const onButtonClick = (type) => {
    dispatchCount({ type })
  }
  return (
    <>
      <p>{count}</p>
      <Button onClick={() => onButtonClick('add')}>Add</Button>
      <Button onClick={() => onButtonClick('sub')}>Sub</Button>
    </>
  )
}

export default Counter

import React, { useEffect, useState } from 'react'

const Counter = () => {
  const [autoCount, setAutoCount] = useState(0)

  useEffect(() => {
    const timer = setInterval(() => {
      setAutoCount(autoCount => autoCount + 1)
    }, 1000)
    return () => { clearInterval(timer) }
  }, [])

  return (
    <>
      <p>AutoCount: {autoCount}</p>
    </>
  )
}

export default Counter

import React, { useEffect, useState } from 'react'
import { useReducer } from 'react'
import { Button } from 'antd'

const countReducer = (state, action) => {
  switch(action.type) {
    case 'add':
      return state + 1 
    case 'sub':
      return state - 1
    default:
      return state
  }
}

const Counter = () => {
  const [count, dispatchCount] = useReducer(countReducer, 0)
  const [full, setFull] = useState(false)
  const onButtonClick = (type) => {
    dispatchCount({ type })
  }

  useEffect(() => {
    count >= 10 ? setFull(true) : setFull(false)
  }, [count])
   
  return (
    <>
      <p>Full: {full ? 'Full' : 'Not Full'}</p>
      <p>{count}</p>
      <Button onClick={() => onButtonClick('add')}>Add</Button>
      <Button onClick={() => onButtonClick('sub')}>Sub</Button>
    </>
  )
}

export default Counter

import React, {createContext} from 'react'

const Context = createContext('')

export default Context

import React from 'react'
import Context from '../components/context'
import Counter from '../components/counter'

const App = () => {
  return (
    <>
      <Context.Provider value="This is Counter">
        <Counter></Counter>
      </Context.Provider>
    </>
  )
}

export default App

import React, { useEffect, useState, useContext } from 'react'
import { useReducer } from 'react'
import { Button } from 'antd'
import Context from './context'

const countReducer = (state, action) => {
  switch(action.type) {
    case 'add':
      return state + 1 
    case 'sub':
      return state - 1
    default:
      return state
  }
}

const Counter = () => {
  const [count, dispatchCount] = useReducer(countReducer, 0)
  const [full, setFull] = useState(false)
  const context = useContext(Context)
  const onButtonClick = (type) => {
    dispatchCount({ type })
  }

  useEffect(() => {
    count >= 10 ? setFull(true) : setFull(false)
  }, [count])
   
  return (
    <>
      <p>Context: {context}</p>
      <p>Full: {full ? 'Full' : 'Not Full'}</p>
      <p>{count}</p>
      <Button onClick={() => onButtonClick('add')}>Add</Button>
      <Button onClick={() => onButtonClick('sub')}>Sub</Button>
    </>
  )
}

export default Counter

import React, { useEffect, useRef } from 'react'
import { Button } from 'antd'

const Counter = () => {
  const ref = useRef()

  useEffect(() => {
    console.log(ref.current)
  }, [])

  return (
    <>
      <Button ref={ref} onClick={() => onButtonClick('add')}>Add</Button>
    </>
  )
}

export default Counter

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

import React, { useState, useCallback } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)
  const onCount = useCallback(() => {
    return setCount(count => count + 1)
  }, [])
  return (
    <>
      <p>{count}</p>
      <ChildComponent onCount={onCount}></ChildComponent>
    </>
  )
}

export default Counter

import React, { memo } from 'react'
import { Button } from 'antd'

const ChildComponent = memo(({ onCount }) => {
  return <Button onClick={onCount}>Add</Button>
})

import React, { useState, useCallback, useMemo } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)
  const onCount = useCallback(() => {
    return setCount(count => count + 1)
  }, [])
  const couteComputed = useMemo(() => {
    return (count * 1000) / 1024 
  }, [count]) 
  return (
    <>
      <p>{count}</p>
      <p>{couteComputed}</p>
      <ChildComponent onCount={onCount}></ChildComponent>
    </>
  )
}

export default Counter

const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
const { VueLoaderPlugin } = require('vue-loader')
const { resolve } = require('./utils/resolve')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')

module.exports = {
  resolve: {
    extensions: ['.vue', '.js', '.json'],
    alias: {
      '@': resolve(process.cwd(), 'examples'),
      '~': resolve(process.cwd(), 'packages'),
      src: resolve(process.cwd(), 'src')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'happypack/loader?id=eslint',
        enforce: 'pre'
      },
      {
        test: /\.js$/,
        loader: 'happypack/loader?id=babel'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loader: {
            js: 'happypack/loader?id=babel'
          }
        }
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'eslint',
      loaders: [{
        loader: 'eslint-loader',
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      }],
      verbose: false,
      threadPool: happyThreadPool
    }),
    new HappyPack({
      id: 'babel',
      loaders: [{
        loader: 'babel-loader',
        options: {
          cacheDirectory: true
        }
      }],
      verbose: false,
      threadPool: happyThreadPool
    }),
    new ProgressBarPlugin(),
    new VueLoaderPlugin()
  ]
}

const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const baseConf = require('./webpack.base')

const config = merge(baseConf, {
  mode: 'development',
  entry: './examples/main.js',
  plugins: [
    new HtmlWebpackPlugin({
      template: './examples/template/index.html'
    })
  ]
})

module.exports = config

const webpack = require('webpack')
const config = require('../webpack.watch')
const middleware = require('webpack-dev-middleware')

const compiler = webpack(config)
const express = require('express')
const app = express()

app.use(
  middleware(compiler, {
  })
)

app.listen(3000, () => console.log('Example app listening on port 3000!'))

const merge = require('webpack-merge')
const baseConf = require('./webpack.base')
const { externals } = require('./config')
const { resolve } = require('./utils/resolve')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const config = merge(baseConf, {
  mode: 'production',
  entry: resolve(process.cwd(), 'src', 'index.js'),
  output: {
    path: resolve(process.cwd(), './lib'),
    publicPath: '/dist/',
    filename: 'index.js',
    library: 'BEST',
    libraryTarget: 'umd'
  },
  performance: {
    hints: false
  },
  externals,
  plugins: [
    new CleanWebpackPlugin()
  ]
})

module.exports = config

const webpack = require('webpack')
const config = require('../webpack.build')

const compiler = webpack(config)

compiler.run(function (err, stats) {
  if (err) {
    return console.error(err)
  }
})

const merge = require('webpack-merge')
const baseConf = require('./webpack.base')
const { externals } = require('./config')
const { resolve } = require('./utils/resolve')

const components = require('../components.json')

const entrys = {}
Object.keys(components).forEach(component => {
  entrys[component] = components[component]
})

const config = merge(baseConf, {
  mode: 'production',
  entry: entrys,
  output: {
    path: resolve(process.cwd(), 'lib'),
    publicPath: '/dist/',
    filename: '[name].js',
    libraryTarget: 'commonjs2'
  },
  optimization: {
    minimize: false
  },
  performance: {
    hints: false
  },
  externals
})

module.exports = config

'use strict'

const { series, src, dest } = require('gulp')
const sass = require('gulp-sass')
const autoprefixer = require('gulp-autoprefixer')
const cssmin = require('gulp-cssmin')
const basepath = './packages/theme'

function compile () {
  return src(`${basepath}/src/*.scss`)
    .pipe(sass.sync())
    .pipe(autoprefixer({
      cascade: false
    }))
    .pipe(cssmin())
    .pipe(dest('./lib/theme'))
}

function copyfont () {
  return src(`${basepath}/src/fonts/**`)
    .pipe(cssmin())
    .pipe(dest('./lib/theme/fonts'))
}

exports.build = series(compile, copyfont)

import BTButton from './src/button'

BTButton.install = function (Vue) {
  Vue.component(BTButton.name, BTButton)
}

export default BTButton

import Button from '~/button'

const components = [
  Button,
]

const install = function (Vue, opts = {}) {
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

export default {
  install,
  Button,
}

export default {
  methods: {
    /**
     * @desc 向上遍历找寻对应组件名称的父组件分发事件
     * @param {*} componentName
     * @param {*} eventName
     * @param {*} params
     */
    dispatch (componentName, eventName, params) {
      let parent = this.$parent || this.$root
      let name = parent.$options.name

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent

        if (parent) {
          name = parent.$options.name
        }
      }
      if (parent) {
        parent.$emit(eventName, params)
      }
    },
    /**
     * @desc 向下便利找寻对应组件名称的子组件分发事件
     * @param {*} componentName
     * @param {*} eventName
     * @param {*} params
     */
    broadcast (componentName, eventName, params) {
      this.$children.forEach(child => {
        const name = child.$options.name

        if (name === componentName) {
          child.$emit(eventName, params)
        } else {
          this.broadcast.apply(child, [componentName, eventName, params])
        }
      })
    }
  }
}

import Vue from 'vue';
import BestUI from '@douku/best-ui'; 
import '@douku/best-ui/lib/theme/index.css';

Vue.use(BestUI);

import { Button } from '@douku/best-ui';

Vue.component(Button.name, Button);

new Vue({
  el: '#app',
  render: h => h(App)
});

import { Button } from '@douku/best-ui';

const button = require('@douku/best-ui/lib/button.js');
require('@douku/best-ui/lib/theme/button.css');

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    // 响应式处理
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

function initWatch (vm: Component, watch: Object) {
  for (const key in watch) {
    const handler = watch[key]
    if (Array.isArray(handler)) {
      for (let i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i])
      }
    } else {
      createWatcher(vm, key, handler)
    }
  }
}

function createWatcher (
  vm: Component,
  expOrFn: string | Function,
  handler: any,
  options?: Object
) {
  if (isPlainObject(handler)) {
    options = handler
    handler = handler.handler
  }
  if (typeof handler === 'string') {
    handler = vm[handler]
  }
  return vm.$watch(expOrFn, handler, options)
}

Vue.prototype.$watch = function (
  expOrFn: string | Function,
  cb: any,
  options?: Object
): Function {
  const vm: Component = this
  if (isPlainObject(cb)) {
    return createWatcher(vm, expOrFn, cb, options)
  }
  options = options || {}
  options.user = true
  const watcher = new Watcher(vm, expOrFn, cb, options)
  if (options.immediate) {
    try {
      cb.call(vm, watcher.value)
    } catch (error) {
      handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)
    }
  }
  return function unwatchFn () {
    watcher.teardown()
  }
}

constructor (
   vm: Component,
   expOrFn: string | Function,
   cb: Function,
   options?: ?Object,
   isRenderWatcher?: boolean
 ) {
   this.vm = vm
   if (isRenderWatcher) {
     vm._watcher = this
   }
   vm._watchers.push(this)
   // options
   if (options) {
     this.deep = !!options.deep
     this.user = !!options.user
     this.lazy = !!options.lazy
     this.sync = !!options.sync
     this.before = options.before
   } else {
     this.deep = this.user = this.lazy = this.sync = false
   }
   this.cb = cb
   this.id = ++uid // uid for batching
   this.active = true
   this.dirty = this.lazy // for lazy watchers
   this.deps = []
   this.newDeps = []
   this.depIds = new Set()
   this.newDepIds = new Set()
   this.expression = process.env.NODE_ENV !== 'production'
     ? expOrFn.toString()
     : ''
   // parse expression for getter
   if (typeof expOrFn === 'function') {
     this.getter = expOrFn
   } else {
     this.getter = parsePath(expOrFn)
     if (!this.getter) {
       this.getter = noop
       process.env.NODE_ENV !== 'production' && warn(
         `Failed watching path: "${expOrFn}" ` +
         'Watcher only accepts simple dot-delimited paths. ' +
         'For full control, use a function instead.',
         vm
       )
     }
   }
   this.value = this.lazy
     ? undefined
     : this.get()
 }

export function parsePath (path: string): any {
  if (bailRE.test(path)) {
    return
  }
  const segments = path.split('.')
  return function (obj) {
    for (let i = 0; i < segments.length; i++) {
      if (!obj) return
      obj = obj[segments[i]]
    }
    return obj
  }
}

get () {
  debugger
  // 把当前的渲染watcher赋值给Dep.target
  pushTarget(this)
  let value
  const vm = this.vm
  try {
    // 执行在mountComponet中传入的updateComponent
    value = this.getter.call(vm, vm)
  } catch (e) {
    if (this.user) {
      handleError(e, vm, `getter for watcher "${this.expression}"`)
    } else {
      throw e
    }
  } finally {
    // "touch" every property so they are all tracked as
    // dependencies for deep watching
    debugger
    if (this.deep) {
      traverse(value)
    }
    popTarget()
    this.cleanupDeps()
  }
  return value
}

update () {
  /* istanbul ignore else */
  if (this.lazy) {
    this.dirty = true
  } else if (this.sync) {
    this.run()
  } else {
    queueWatcher(this)
  }
}

run () {
  if (this.active) {
    const value = this.get()
    if (
      value !== this.value ||
      // Deep watchers and watchers on Object/Arrays should fire even
      // when the value is the same, because the value may
      // have mutated.
      isObject(value) ||
      this.deep
    ) {
      // set new value
      const oldValue = this.value
      this.value = value
      if (this.user) {
        try {
          this.cb.call(this.vm, value, oldValue)
        } catch (e) {
          handleError(e, this.vm, `callback for watcher "${this.expression}"`)
        }
      } else {
        this.cb.call(this.vm, value, oldValue)
      }
    }
  }
}

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    // 响应式处理
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

const computedWatcherOptions = { lazy: true }

function initComputed (vm: Component, computed: Object) {
  const watchers = vm._computedWatchers = Object.create(null)
  // computed properties are just getters during SSR
  const isSSR = isServerRendering()

  for (const key in computed) {
    const userDef = computed[key]
    const getter = typeof userDef === 'function' ? userDef : userDef.get
    if (process.env.NODE_ENV !== 'production' && getter == null) {
      warn(
        `Getter is missing for computed property "${key}".`,
        vm
      )
    }

    if (!isSSR) {
      // create internal watcher for the computed property.
      watchers[key] = new Watcher(
        vm,
        getter || noop,
        noop,
        computedWatcherOptions
      )
    }

    // component-defined computed properties are already defined on the
    // component prototype. We only need to define computed properties defined
    // at instantiation here.
    if (!(key in vm)) {
      defineComputed(vm, key, userDef)
    } else if (process.env.NODE_ENV !== 'production') {
      if (key in vm.$data) {
        warn(`The computed property "${key}" is already defined in data.`, vm)
      } else if (vm.$options.props && key in vm.$options.props) {
        warn(`The computed property "${key}" is already defined as a prop.`, vm)
      }
    }
  }
}

constructor (
  vm: Component,
  expOrFn: string | Function,
  cb: Function,
  options?: ?Object,
  isRenderWatcher?: boolean
) {
  this.vm = vm
  if (isRenderWatcher) {
    vm._watcher = this
  }
  vm._watchers.push(this)
  // options
  if (options) {
    this.deep = !!options.deep
    this.user = !!options.user
    // lazy 为 true
    this.lazy = !!options.lazy
    this.sync = !!options.sync
    this.before = options.before
  } else {
    this.deep = this.user = this.lazy = this.sync = false
  }
  this.cb = cb
  this.id = ++uid // uid for batching
  this.active = true
  this.dirty = this.lazy // for lazy watchers
  this.deps = []
  this.newDeps = []
  this.depIds = new Set()
  this.newDepIds = new Set()
  this.expression = process.env.NODE_ENV !== 'production'
    ? expOrFn.toString()
    : ''
  // parse expression for getter
  if (typeof expOrFn === 'function') {
    this.getter = expOrFn
  } else {
    this.getter = parsePath(expOrFn)
    if (!this.getter) {
      this.getter = noop
      process.env.NODE_ENV !== 'production' && warn(
        `Failed watching path: "${expOrFn}" ` +
        'Watcher only accepts simple dot-delimited paths. ' +
        'For full control, use a function instead.',
        vm
      )
    }
  }
  this.value = this.lazy
    ? undefined
    : this.get()
}

// 继承组件定义
const Sub = function VueComponent (options) {
  // 执行Vue.prototype._init方法
  this._init(options)
}
// 继承父组件Vue的原型
Sub.prototype = Object.create(Super.prototype)
// 拦截重置构造函数
Sub.prototype.constructor = Sub

...省略

if (Sub.options.props) {
  initProps(Sub)
}
if (Sub.options.computed) {
  initComputed(Sub)
}