function Info() {
  const [name, setName] = useState('Topgrd')

  return (
    <div>
      <h2>{name}</h2>
      <input onChange={e => setName(e.target.value)} />
    </div>
  )
}

let state = [];
let setters = [];
let firstRun = true;
let cursor = 0;

function createSetter(cursor) {
  return function setterWithCursor(newVal) {
    state[cursor] = newVal;
  };
}

export function useState(initVal) {
  if (firstRun) {
    state.push(initVal);
    setters.push(createSetter(cursor));
    firstRun = false;
  }

  const setter = setters[cursor];
  const value = state[cursor];

  cursor++;
  return [value, setter];
}

export default () => {
  console.log('fafa');
};

export const val = 'sd';

export default () => {
  console.log('jaja');
};

const name = 'jack';
import('./mark').then(mark => mark());
import('./jack').then(jack => jack());

export default name;

(function(modules) {
  // webpackBootstrap
  // install a JSONP callback for chunk loading
  function webpackJsonpCallback(data) {}

  // The module cache
  var installedModules = {};

  // 用来存储加载过和加载中的 chunk
  // undefined = chunk not loaded, null = chunk preloaded/prefetched
  // Promise = chunk loading, 0 = chunk loaded
  var installedChunks = {
    main: 0,
  };
  // script path function
  function jsonpScriptSrc(chunkId) {
    return __webpack_require__.p + '' + chunkId + '.bundle.js';
  }
  // The require function
  function __webpack_require__(moduleId) {}
  // This file contains only the entry chunk.
  // The chunk loading function for additional chunks
  __webpack_require__.e = function requireEnsure(chunkId) {};

  // expose the modules object (__webpack_modules__)
  __webpack_require__.m = modules;

  // expose the module cache
  __webpack_require__.c = installedModules;

  // define getter function for harmony exports
  __webpack_require__.d = function(exports, name, getter) {
    if (!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
  };

  // define __esModule on exports
  __webpack_require__.r = function(exports) {
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    Object.defineProperty(exports, '__esModule', { value: true });
  };

  __webpack_require__.t = function(value, mode) {};

  // getDefaultExport function for compatibility with non-harmony modules
  __webpack_require__.n = function(module) {};

  // Object.prototype.hasOwnProperty.call
  __webpack_require__.o = function(object, property) {
    return Object.prototype.hasOwnProperty.call(object, property);
  };

  // __webpack_public_path__
  __webpack_require__.p = '';

  // on error function for async loading
  __webpack_require__.oe = function(err) {
    console.error(err);
    throw err;
  };

  var jsonpArray = (window['webpackJsonp'] = window['webpackJsonp'] || []);
  var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
  jsonpArray.push = webpackJsonpCallback;
  jsonpArray = jsonpArray.slice();
  for (var i = 0; i < jsonpArray.length; i++)
    webpackJsonpCallback(jsonpArray[i]);
  var parentJsonpFunction = oldJsonpFunction;

  // Load entry module and return exports
  return __webpack_require__((__webpack_require__.s = './src/index.js'));
})(
  /************************************************************************/
  {
    /***/ './src/index.js':
      /*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
      /*! exports provided: default */
      /***/ function(module, __webpack_exports__, __webpack_require__) {
        'use strict';
        eval(
          '__webpack_require__.r(__webpack_exports__);\nconst name = \'jack\';\n__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./mark */ "./src/mark.js")).then(mark => mark());\n\n/* harmony default export */ __webpack_exports__["default"] = (name);\n\n\n//# sourceURL=webpack:///./src/index.js?',
        );

        /***/
      },
  },
);

(window['webpackJsonp'] = window['webpackJsonp'] || []).push([
  [1],
  {
    /***/ './src/mark.js':
      /*!*********************!*\
  !*** ./src/mark.js ***!
  \*********************/
      /*! exports provided: val, default */
      /***/ function(module, __webpack_exports__, __webpack_require__) {
        'use strict';
        eval(
          '__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "val", function() { return val; });\nconst val = \'sd\'\n\n/* harmony default export */ __webpack_exports__["default"] = (() => {\n  console.log(\'jaja\')\n});\n\n\n//# sourceURL=webpack:///./src/mark.js?',
        );

        /***/
      },
  },
]);

// ... some code
var jsonpArray = (window['webpackJsonp'] = window['webpackJsonp'] || []);
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
jsonpArray.push = webpackJsonpCallback;
jsonpArray = jsonpArray.slice();
for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
var parentJsonpFunction = oldJsonpFunction;
return __webpack_require__((__webpack_require__.s = './src/index.js'));

__webpack_require__.r(__webpack_exports__);
const name = 'jack';
__webpack_require__
  .e(/*! import() */ 1)
  .then(__webpack_require__.bind(null, /*! ./mark */ './src/mark.js'))
  .then(mark => mark());
__webpack_require__
  .e(/*! import() */ 0)
  .then(__webpack_require__.bind(null, /*! ./jack */ './src/jack.js'))
  .then(jack => jack());
/* harmony default export */

__webpack_exports__['default'] = name;

__webpack_require__.e = function requireEnsure(chunkId) {
  var promises = [];

  // JSONP chunk loading for javascript

  var installedChunkData = installedChunks[chunkId];
  if (installedChunkData !== 0) {
    // 0 表示该chunk已加载过了

    // 如果 installedChunkData 是 promise，即为真，则表示模块正在加载中
    // push installedChunkData[2] 到 promises 数组
    if (installedChunkData) {
      promises.push(installedChunkData[2]);
    } else {
      // installedChunks[chunkId] 赋值为一个数组，前两项是 promise 的 resolve reject
      // installedChunkData = installedChunks[chunkId]
      var promise = new Promise(function(resolve, reject) {
        installedChunkData = installedChunks[chunkId] = [resolve, reject];
      });
      // installedChunkData[2]赋值为上面创建的promise
      promises.push((installedChunkData[2] = promise));

      // 通过创建 script 标签形式下载 chunk script
      var script = document.createElement('script');
      var onScriptComplete;

      script.charset = 'utf-8';
      script.timeout = 120;
      if (__webpack_require__.nc) {
        script.setAttribute('nonce', __webpack_require__.nc);
      }
      // jsonpScriptSrc 拼接 script 地址，webpack public path + chunkId + .bundle.js
      script.src = jsonpScriptSrc(chunkId);

      // create error before stack unwound to get useful stacktrace later
      var error = new Error();
      onScriptComplete = function(event) {
        // avoid mem leaks in IE.
        script.onerror = script.onload = null;
        clearTimeout(timeout);
        var chunk = installedChunks[chunkId];
        // 不为 0 表示下载出错
        if (chunk !== 0) {
          if (chunk) {
            var errorType =
              event && (event.type === 'load' ? 'missing' : event.type);
            var realSrc = event && event.target && event.target.src;
            error.message =
              'Loading chunk ' +
              chunkId +
              ' failed.\n(' +
              errorType +
              ': ' +
              realSrc +
              ')';
            error.name = 'ChunkLoadError';
            error.type = errorType;
            error.request = realSrc;
            chunk[1](error);
          }
          installedChunks[chunkId] = undefined;
        }
      };
      // 超时处理
      var timeout = setTimeout(function() {
        onScriptComplete({ type: 'timeout', target: script });
      }, 120000);
      script.onerror = script.onload = onScriptComplete;
      document.head.appendChild(script);
    }
  }
  // 使用 Promise.all 处理
  return Promise.all(promises);
};

function webpackJsonpCallback(data) {
  var chunkIds = data[0];
  var moreModules = data[1]; // 异步模块内容

  // add "moreModules" to the modules object,
  // then flag all "chunkIds" as loaded and fire callback
  var moduleId,
    chunkId,
    i = 0,
    resolves = [];
  for (; i < chunkIds.length; i++) {
    chunkId = chunkIds[i];
    if (installedChunks[chunkId]) {
      // installedChunks[chunkId][0] 之前是 __webpack_reuqire__.e 里赋值为 promise 的 resolve
      // 放入 resolves
      resolves.push(installedChunks[chunkId][0]);
    }
    // 赋值为 0 表示加载完成
    installedChunks[chunkId] = 0;
  }
  for (moduleId in moreModules) {
    if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
      // 同步到 modules 中
      modules[moduleId] = moreModules[moduleId];
    }
  }
  if (parentJsonpFunction) parentJsonpFunction(data);

  while (resolves.length) {
    resolves.shift()(); // => promise resolve()
  }
}

if (a < 1) {
	console.log('haha');
}

if (a < 1) 
{
 console.log('haha');
}

var A = function A() {
  _classCallCheck(this, A);

  this.handleChange = function () {
    coneole.log();
  };
};


var B = function () {
  function B() {
    _classCallCheck(this, B);

    this.handleChange = this.handleChange.bind(this);
  }

  _createClass(B, [{
    key: "handleChange",
    value: function handleChange() {
      console.log();
    }
  }]);

  return B;
}();

class C {
    handleClick = (e) => {
        const id = e.target.value
        // do something
    }
    
    render() {
        const id = {this.state}
        return (<button value={id} onClick={this.handleClick}>提交</button>)
    }
}

function useState(initVal) {
  let _val = initVal;
  const state = _val;
  function setState(newVal) {
    _val = newVal;
  }

  return [state, setState];
}

const [count, setCount] = useState(0);

console.log(count);

setCount(2);

console.log(count);

function useState(initVal) {
  let _val = initVal;
  const state = () => _val;
  function setState(newVal) {
    _val = newVal;
  }

  return [state, setState];
}

const [count, setCount] = useState(0);

console.log(count());

setCount(2);

console.log(count());

// module pattern
const React = (function() {
  let hooks = []; // 存放所以使用的 hook
  let idx = 0; // hook 指针，来保证 hook 顺序的正常调用
  function useState(initVal) {
    const state = hooks[idx] || initVal;
    const _idx = idx; // _idx 确保 setState 修改的是同一个state 
    function setState(newVal) {
      hooks[_idx] = newVal;
    }

    idx++; // 如果再使用 useState, 指向 hook 数组的下一个

    return [state, setState];
  }

  function useEffect(callback, deps) {
    const oldDeps = hooks[idx];
    let hasChange = true;

    if (oldDeps) {
      hasChange = deps.some((dep, i) => !Object.is(dep, oldDeps[i]));
    }

    if (hasChange) callback();
    hooks[idx] = deps;
    idx++; // 如果再使用 useEffect, 指向 hook 数组的下一个
  }

  function render(Component) {
    const C = Component();
    C.render();
    idx = 0; // 每次 render 重置，确保 hooks 指针顺序
    return C;
  }

  return {
    Component,
    render,
    useState,
    useEffect
  };
})();

const { useState, useEffect, render } = React;

function Component() {
  const [count, setCount] = useState(0);
  const [type, setType] = useState("");

  useEffect(() => {
    console.log("jack");
  }, [count]);

  return {
    render: () => {
      document.body.innerHTML = "";
      const div = document.createElement("div");
      div.innerText = count;
      document.body.appendChild(div);
    },
    click: () => setCount(count + 1),
    type: () => setType("apple"),
    say: () => console.log(count, type)
  };
}

let App = render(Component);

setInterval(() => {
  App.click();
  App = render(Component); // 模拟 rerender
}, 1000);

class Parent {
  constructor() {
    this.name = 'tom';
    return { aa: 1 };
  }
}

class Child extends Parent {
  constructor() {
    super();
    this.name = 'sd';
  }
}

const child = new Child();

console.log(child);

var Parent = function Parent() {
  _classCallCheck(this, Parent);

  this.name = 'tom';
  return { aa: 1 };
};

var Child = (function(_Parent) {
  _inherits(Child, _Parent);

  function Child() {
    _classCallCheck(this, Child);

    var _this = _possibleConstructorReturn(
      this,
      (Child.__proto__ || Object.getPrototypeOf(Child)).call(this),
    );

    _this.name = 'jack';
    return _this;
  }

  return Child;
})(Parent);

var child = new Child();

function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError(
      "this hasn't been initialised - super() hasn't been called",
    );
  }
  return call && (typeof call === 'object' || typeof call === 'function')
    ? call
    : self;
}

export const val = 'sd';

export default () => {
  console.log('jaja');
};

import mark from './mark';

const name = 'jack';
mark();
export default name;

(function(modules) {
  // webpackBootstrap
  // The module cache
  var installedModules = {};

  // The require function
  function __webpack_require__(moduleId) {
    // Check if module is in cache
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // Create a new module (and put it into the cache)
    var module = (installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {},
    });

    // Execute the module function
    modules[moduleId].call(
      module.exports,
      module,
      module.exports,
      __webpack_require__,
    );

    // Flag the module as loaded
    module.l = true;

    // Return the exports of the module
    return module.exports;
  }

  // expose the modules object (__webpack_modules__)
  __webpack_require__.m = modules;

  // expose the module cache
  __webpack_require__.c = installedModules;

  // define getter function for harmony exports
  __webpack_require__.d = function(exports, name, getter) {
    if (!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
  };

  // define __esModule on exports
  __webpack_require__.r = function(exports) {
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    Object.defineProperty(exports, '__esModule', { value: true });
  };

  // create a fake namespace object
  // mode & 1: value is a module id, require it
  // mode & 2: merge all properties of value into the ns
  // mode & 4: return value when already ns object
  // mode & 8|1: behave like require
  __webpack_require__.t = function(value, mode) {
    if (mode & 1) value = __webpack_require__(value);
    if (mode & 8) return value;
    if (mode & 4 && typeof value === 'object' && value && value.__esModule)
      return value;
    var ns = Object.create(null);
    __webpack_require__.r(ns);
    Object.defineProperty(ns, 'default', { enumerable: true, value: value });
    if (mode & 2 && typeof value != 'string')
      for (var key in value)
        __webpack_require__.d(
          ns,
          key,
          function(key) {
            return value[key];
          }.bind(null, key),
        );
    return ns;
  };

  // getDefaultExport function for compatibility with non-harmony modules
  __webpack_require__.n = function(module) {
    var getter =
      module && module.__esModule
        ? function getDefault() {
            return module['default'];
          }
        : function getModuleExports() {
            return module;
          };
    __webpack_require__.d(getter, 'a', getter);
    return getter;
  };

  // Object.prototype.hasOwnProperty.call
  __webpack_require__.o = function(object, property) {
    return Object.prototype.hasOwnProperty.call(object, property);
  };

  // __webpack_public_path__
  __webpack_require__.p = '';

  // Load entry module and return exports
  return __webpack_require__((__webpack_require__.s = './src/index.js'));
})(
  /************************************************************************/
  {
    /***/ './src/index.js':
      /*!**********************!*\
      !*** ./src/index.js ***!
      \**********************/
      /*! exports provided: default */
      /***/ function(module, __webpack_exports__, __webpack_require__) {
        'use strict';
        eval(
          '__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mark__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./mark */ "./src/mark.js");\n\n\nconst name = \'jack\';\nObject(_mark__WEBPACK_IMPORTED_MODULE_0__["default"])();\n/* harmony default export */ __webpack_exports__["default"] = (name);\n\n\n//# sourceURL=webpack:///./src/index.js?',
        );

        /***/
      },

    /***/ './src/mark.js':
      /*!*********************!*\
      !*** ./src/mark.js ***!
      \*********************/
      /*! exports provided: default */
      /***/ function(module, __webpack_exports__, __webpack_require__) {
        'use strict';
        eval(
          '__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__["default"] = (() => {\n  console.log(\'jaja\')\n});\n\n\n//# sourceURL=webpack:///./src/mark.js?',
        );

        /***/
      },
  },
);

(function(modules) {
  // ...
})({
  '.src/index.js': function(module, __webpack_exports__, __webpack_require__) {
    'use strict';
    eval();
    // ...
    //...
  },
});

__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _mark__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
  /*! ./mark */ './src/mark.js',
);
const name = 'jack';
Object(_mark__WEBPACK_IMPORTED_MODULE_0__['default'])();
/* harmony default export */
__webpack_exports__['default'] = name;
//# sourceURL=webpack:///./src/index.js?

__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */
__webpack_require__.d(__webpack_exports__, 'val', function() {
  return val;
});
const val = 'sd';
/* harmony default export */
__webpack_exports__['default'] = () => {
  console.log('jaja');
};
//# sourceURL=webpack:///./src/mark.js?

// 内部定义的 module 缓存， 存放加载过的模块
var installedModules = {};
function __webpack_require__(moduleId) {
  // 如果加载过， 直接返回 installedModules里对应模块的 exports
  if (installedModules[moduleId]) {
    return installedModules[moduleId].exports;
  }
  // 没有加载过，则创建一个 moudle 变量
  var module = (installedModules[moduleId] = {
    i: moduleId, // i 代表 moduleId，也就是 './src/index.js'
    l: false, // l (loaded) 代表是否加载完毕
    exports: {}, // exports 后面导出的内容
  });

  // 执行 modules 里的方法，就是上面提到过的 立即执行函数传入的 ./src/index 对应的 value
  // function (module, __webpack_exports__, __webpack_require__) {...}
  modules[moduleId].call(
    module.exports,
    module,
    module.exports,
    __webpack_require__,
  );

  // 执行完毕，设置模块对应的 l 为 true
  module.l = true;

  // 返回 module.exports
  return module.exports;
}

// 在__webpack_exports__上定义 __esModule 为 true
__webpack_require__.r = function(exports) {
  if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
    Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  }
  Object.defineProperty(exports, '__esModule', { value: true });
};

__webpack_require__.d = function(exports, name, getter) {
  if (!__webpack_require__.o(exports, name)) {
    Object.defineProperty(exports, name, { enumerable: true, get: getter });
  }
};