Repository: ruanyf/webpack-demos
Branch: master
Commit: 3a4da6852c82
Files: 92
Total size: 2.8 MB
Directory structure:
gitextract_auj25cxs/
├── .gitignore
├── README.md
├── demo01/
│ ├── bundle.js
│ ├── index.html
│ ├── main.js
│ ├── package.json
│ └── webpack.config.js
├── demo02/
│ ├── bundle1.js
│ ├── bundle2.js
│ ├── index.html
│ ├── main1.js
│ ├── main2.js
│ ├── package.json
│ └── webpack.config.js
├── demo03/
│ ├── bundle.js
│ ├── index.html
│ ├── main.jsx
│ ├── package.json
│ └── webpack.config.js
├── demo04/
│ ├── app.css
│ ├── bundle.js
│ ├── index.html
│ ├── main.js
│ ├── package.json
│ └── webpack.config.js
├── demo05/
│ ├── bundle.js
│ ├── index.html
│ ├── main.js
│ ├── package.json
│ └── webpack.config.js
├── demo06/
│ ├── app.css
│ ├── bundle.js
│ ├── index.html
│ ├── main.jsx
│ ├── package.json
│ └── webpack.config.js
├── demo07/
│ ├── bundle.js
│ ├── index.html
│ ├── main.js
│ ├── package.json
│ └── webpack.config.js
├── demo08/
│ ├── bundle.js
│ ├── index.html
│ ├── main.js
│ ├── package.json
│ └── webpack.config.js
├── demo09/
│ ├── bundle.js
│ ├── index.html
│ ├── main.js
│ ├── package.json
│ └── webpack.config.js
├── demo10/
│ ├── 0.bundle.js
│ ├── a.js
│ ├── bundle.js
│ ├── index.html
│ ├── main.js
│ ├── package.json
│ └── webpack.config.js
├── demo11/
│ ├── 0.bundle.js
│ ├── a.js
│ ├── bundle.js
│ ├── index.html
│ ├── main.js
│ ├── package.json
│ └── webpack.config.js
├── demo12/
│ ├── bundle1.js
│ ├── bundle2.js
│ ├── index.html
│ ├── init.js
│ ├── main1.jsx
│ ├── main2.jsx
│ ├── package.json
│ └── webpack.config.js
├── demo13/
│ ├── bundle.js
│ ├── index.html
│ ├── main.js
│ ├── package.json
│ ├── vendor.js
│ └── webpack.config.js
├── demo14/
│ ├── bundle.js
│ ├── data.js
│ ├── index.html
│ ├── main.jsx
│ ├── package.json
│ └── webpack.config.js
├── demo15/
│ ├── app.css
│ ├── bundle.js
│ ├── index.html
│ ├── index.js
│ ├── package.json
│ └── webpack.config.js
└── package.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules
npm-debug.log
package-lock.json
================================================
FILE: README.md
================================================
This repo is a collection of simple demos of Webpack.
These demos are purposely written in a simple and clear style. You will find no difficulty in following them to learn the powerful tool.
## How to use
First, install [Webpack](https://www.npmjs.com/package/webpack) and [webpack-dev-server](https://www.npmjs.com/package/webpack-dev-server) globally.
```bash
$ npm i -g webpack webpack-dev-server
```
Then, clone the repo.
```bash
$ git clone https://github.com/ruanyf/webpack-demos.git
```
Install the dependencies.
```bash
$ cd webpack-demos
$ npm install
```
Now, play with the source files under the repo's demo* directories.
```bash
$ cd demo01
$ npm run dev
```
If the above command doesn't open your browser automatically, you have to visit http://127.0.0.1:8080 by yourself.
## Foreword: What is Webpack
Webpack is a front-end tool to build JavaScript module scripts for browsers.
It can be used similar to Browserify, and do much more.
```bash
$ browserify main.js > bundle.js
# be equivalent to
$ webpack main.js bundle.js
```
Webpack needs a configuration file called `webpack.config.js` which is just a CommonJS module.
```javascript
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
```
After having `webpack.config.js`, you can invoke Webpack without any arguments.
```bash
$ webpack
```
Some command-line options you should know.
- `webpack` – building for development
- `webpack -p` – building for production (minification)
- `webpack --watch` – for continuous incremental building
- `webpack -d` – including source maps
- `webpack --colors` – making building output pretty
You could customize `scripts` field in your package.json file as following.
```javascript
// package.json
{
// ...
"scripts": {
"dev": "webpack-dev-server --devtool eval --progress --colors",
"deploy": "NODE_ENV=production webpack -p"
},
// ...
}
```
## Index
1. [Entry file](#demo01-entry-file-source)
1. [Multiple entry files](#demo02-multiple-entry-files-source)
1. [Babel-loader](#demo03-babel-loader-source)
1. [CSS-loader](#demo04-css-loader-source)
1. [Image loader](#demo05-image-loader-source)
1. [CSS Module](#demo06-css-module-source)
1. [UglifyJs Plugin](#demo07-uglifyjs-plugin-source)
1. [HTML Webpack Plugin and Open Browser Webpack Plugin](#demo08-html-webpack-plugin-and-open-browser-webpack-plugin-source)
1. [Environment flags](#demo09-environment-flags-source)
1. [Code splitting](#demo10-code-splitting-source)
1. [Code splitting with bundle-loader](#demo11-code-splitting-with-bundle-loader-source)
1. [Common chunk](#demo12-common-chunk-source)
1. [Vendor chunk](#demo13-vendor-chunk-source)
1. [Exposing Global Variables](#demo14-exposing-global-variables-source)
1. [React router](#demo15-react-router-source)
## Demo01: Entry file ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo01))
Entry file is a file which Webpack reads to build `bundle.js`.
For example, `main.js` is an entry file.
```javascript
// main.js
document.write('Hello World
');
```
index.html
```html
```
Webpack follows `webpack.config.js` to build `bundle.js`.
```javascript
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
```
Launch the server, visit http://127.0.0.1:8080 .
```bash
$ cd demo01
$ npm run dev
```
## Demo02: Multiple entry files ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo02))
Multiple entry files are allowed. It is useful for a multi-page app which has different entry file for each page.
```javascript
// main1.js
document.write('Hello World
');
// main2.js
document.write('Hello Webpack
');
```
index.html
```html
```
webpack.config.js
```javascript
module.exports = {
entry: {
bundle1: './main1.js',
bundle2: './main2.js'
},
output: {
filename: '[name].js'
}
};
```
## Demo03: Babel-loader ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo03))
Loaders are preprocessors which transform a resource file of your app ([more info](https://webpack.js.org/concepts/loaders/)) before Webpack's building process.
For example, [Babel-loader](https://www.npmjs.com/package/babel-loader) can transform JSX/ES6 file into normal JS files，after which Webpack will begin to build these JS files. Webpack's official doc has a complete list of [loaders](https://webpack.js.org/loaders/).
`main.jsx` is a JSX file.
```javascript
// main.jsx
const React = require('react');
const ReactDOM = require('react-dom');
ReactDOM.render(
Hello, world!
,
document.querySelector('#wrapper')
);
```
index.html
```html
```
webpack.config.js
```javascript
module.exports = {
entry: './main.jsx',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
}
]
}
};
```
The above snippet uses `babel-loader` which needs Babel's preset plugins [babel-preset-es2015](https://www.npmjs.com/package/babel-preset-es2015) and [babel-preset-react](https://www.npmjs.com/package/babel-preset-react) to transpile ES6 and React.
## Demo04: CSS-loader ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo04))
Webpack allows you to include CSS in JS file, then preprocessed CSS file with [CSS-loader](https://github.com/webpack-contrib/css-loader).
main.js
```javascript
require('./app.css');
```
app.css
```css
body {
background-color: blue;
}
```
index.html
```html
Hello World
```
webpack.config.js
```javascript
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
]
}
};
```
Attention, you have to use two loaders to transform CSS file. First is [CSS-loader](https://www.npmjs.com/package/css-loader) to read CSS file, and another one is [Style-loader](https://www.npmjs.com/package/style-loader) to insert `
```
## Demo05: Image loader ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo05))
Webpack could also include images in JS files.
main.js
```javascript
var img1 = document.createElement("img");
img1.src = require("./small.png");
document.body.appendChild(img1);
var img2 = document.createElement("img");
img2.src = require("./big.png");
document.body.appendChild(img2);
```
index.html
```html
```
webpack.config.js
```javascript
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.(png|jpg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
};
```
[url-loader](https://www.npmjs.com/package/url-loader) transforms image files into `![]()
` tag. If the image size is smaller than 8192 bytes, it will be transformed into Data URL; otherwise, it will be transformed into normal URL.
After launching the server, `small.png` and `big.png` have the following URLs.
```html
```
## Demo06: CSS Module ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo06))
`css-loader?modules` (the query parameter modules) enables the [CSS Module](https://github.com/css-modules/css-modules) which gives a local scoped CSS to your JS module's CSS. You can switch it off with `:global(selector)` ([more info](https://css-modules.github.io/webpack-demo/)).
index.html
```html
Hello World
Hello Webpack
```
app.css
```css
/* local scope */
.h1 {
color:red;
}
/* global scope */
:global(.h2) {
color: blue;
}
```
main.jsx
```javascript
var React = require('react');
var ReactDOM = require('react-dom');
var style = require('./app.css');
ReactDOM.render(
Hello World
Hello Webpack
,
document.getElementById('example')
);
```
webpack.config.js
```javascript
module.exports = {
entry: './main.jsx',
output: {
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
};
```
Launch the server.
```bash
$ cd demo06
$ npm run dev
```
Visiting http://127.0.0.1:8080 , you'll find that only second `h1` is red, because its CSS is local scoped, and both `h2` is blue, because its CSS is global scoped.
## Demo07: UglifyJs Plugin ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo07))
Webpack has a plugin system to expand its functions. For example, [UglifyJs Plugin](https://webpack.js.org/plugins/uglifyjs-webpack-plugin/) will minify output(`bundle.js`) JS codes.
main.js
```javascript
var longVariableName = 'Hello';
longVariableName += ' World';
document.write('' + longVariableName + '
');
```
index.html
```html
```
webpack.config.js
```javascript
var webpack = require('webpack');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [
new UglifyJsPlugin()
]
};
```
After launching the server, `main.js` will be minified into following.
```javascript
var o="Hello";o+=" World",document.write(""+o+"
")
```
## Demo08: HTML Webpack Plugin and Open Browser Webpack Plugin ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo08))
This demo shows you how to load 3rd-party plugins.
[html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) could create `index.html` for you, and [open-browser-webpack-plugin](https://github.com/baldore/open-browser-webpack-plugin) could open a new browser tab when Webpack loads.
main.js
```javascript
document.write('Hello World
');
```
webpack.config.js
```javascript
var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [
new HtmlwebpackPlugin({
title: 'Webpack-demos',
filename: 'index.html'
}),
new OpenBrowserPlugin({
url: 'http://localhost:8080'
})
]
};
```
Launch the server.
```bash
$ cd demo08
$ npm run dev
```
Now you don't need to write `index.html` by hand and don't have to open browser by yourself. Webpack did all these things for you.
## Demo09: Environment flags ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo09))
You can enable some codes only in development environment with environment flags.
main.js
```javascript
document.write('Hello World
');
if (__DEV__) {
document.write(new Date());
}
```
index.html
```html
```
webpack.config.js
```javascript
var webpack = require('webpack');
var devFlagPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [devFlagPlugin]
};
```
Now pass environment variable into webpack. Opening `demo09/package.json`, you should find `scripts` field as following.
```javascript
// package.json
{
// ...
"scripts": {
"dev": "cross-env DEBUG=true webpack-dev-server --open",
},
// ...
}
```
Launch the server.
```javascript
$ cd demo09
$ npm run dev
```
## Demo10: Code splitting ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo10))
For big web apps, it’s not efficient to put all code into a single file. Webpack allows you to split a large JS file into several chunks. Especially, if some blocks of code are only required under some circumstances, these chunks could be loaded on demand.
Webpack uses `require.ensure` to define a split point ([official document](http://webpack.github.io/docs/code-splitting.html)).
```javascript
// main.js
require.ensure(['./a'], function (require) {
var content = require('./a');
document.open();
document.write('' + content + '
');
document.close();
});
```
`require.ensure` tells Webpack that `./a.js` should be separated from `bundle.js` and built into a single chunk file.
```javascript
// a.js
module.exports = 'Hello World';
```
Now Webpack takes care of the dependencies, output files and runtime stuff. You don't have to put any redundancy into your `index.html` and `webpack.config.js`.
```html
```
webpack.config.js
```javascript
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
```
Launch the server.
```bash
$ cd demo10
$ npm run dev
```
On the surface, you won't feel any differences. However, Webpack actually builds `main.js` and `a.js` into different chunks(`bundle.js` and `0.bundle.js`), and loads `0.bundle.js` from `bundle.js` when on demand.
## Demo11: Code splitting with bundle-loader ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo11))
Another way of code splitting is using [bundle-loader](https://www.npmjs.com/package/bundle-loader).
```javascript
// main.js
// Now a.js is requested, it will be bundled into another file
var load = require('bundle-loader!./a.js');
// To wait until a.js is available (and get the exports)
// you need to async wait for it.
load(function(file) {
document.open();
document.write('' + file + '
');
document.close();
});
```
`require('bundle-loader!./a.js')` tells Webpack to load `a.js` from another chunk.
Now Webpack will build `main.js` into `bundle.js`, and `a.js` into `0.bundle.js`.
## Demo12: Common chunk ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo12))
When multi scripts have common chunks, you can extract the common part into a separate file with [CommonsChunkPlugin](https://webpack.js.org/plugins/commons-chunk-plugin/), which is useful for browser caching and saving bandwidth.
```javascript
// main1.jsx
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
Hello World
,
document.getElementById('a')
);
// main2.jsx
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
Hello Webpack
,
document.getElementById('b')
);
```
index.html
```html
```
The above `commons.js` is the common chunk of `main1.jsx` and `main2.jsx`. As you can imagine, `commons.js` includes `react` and `react-dom`.
webpack.config.js
```javascript
var webpack = require('webpack');
module.exports = {
entry: {
bundle1: './main1.jsx',
bundle2: './main2.jsx'
},
output: {
filename: '[name].js'
},
module: {
rules:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "commons",
// (the commons chunk name)
filename: "commons.js",
// (the filename of the commons chunk)
})
]
}
```
## Demo13: Vendor chunk ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo13))
You can also extract the vendor libraries from a script into a separate file with CommonsChunkPlugin.
main.js
```javascript
var $ = require('jquery');
$('h1').text('Hello World');
```
index.html
```html
```
webpack.config.js
```javascript
var webpack = require('webpack');
module.exports = {
entry: {
app: './main.js',
vendor: ['jquery'],
},
output: {
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.js'
})
]
};
```
In above codes, `entry.vendor: ['jquery']` tells Webpack that `jquery` should be included in the common chunk `vendor.js`.
If you want a module available as a global variable in every module, such as making `$` and `jQuery` available in every module without writing `require("jquery")`. You should use `ProvidePlugin` ([Official doc](https://webpack.js.org/plugins/provide-plugin/)) which automatically loads modules instead of having to import or require them everywhere.
```javascript
// main.js
$('h1').text('Hello World');
// webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: {
app: './main.js'
},
output: {
filename: 'bundle.js'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
};
```
Of course, in this case, you should load `jquery.js` globally by yourself.
## Demo14: Exposing global variables ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo14))
If you want to use some global variables, and don't want to include them in the Webpack bundle, you can enable `externals` field in `webpack.config.js` ([official document](https://webpack.js.org/configuration/externals/)).
For example, we have a `data.js`.
```javascript
// data.js
var data = 'Hello World';
```
index.html
```html
```
Attention, Webpack will only build `bundle.js`, but not `data.js`.
We can expose `data` as a global variable.
```javascript
// webpack.config.js
module.exports = {
entry: './main.jsx',
output: {
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
]
},
externals: {
// require('data') is external and available
// on the global var data
'data': 'data'
}
};
```
Now, you require `data` as a module variable in your script. but it actually is a global variable.
```javascript
// main.jsx
var data = require('data');
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
{data}
,
document.body
);
```
You could also put `react` and `react-dom` into `externals`, which will greatly decrease the building time and building size of `bundle.js`.
## Demo15: React router ([source](https://github.com/ruanyf/webpack-demos/tree/master/demo15))
This demo uses webpack to build [React-router](https://github.com/rackt/react-router/blob/0.13.x/docs/guides/overview.md)'s official example.
Let's imagine a little app with a dashboard, inbox, and calendar.
```
+---------------------------------------------------------+
| +---------+ +-------+ +--------+ |
| |Dashboard| | Inbox | |Calendar| Logged in as Jane |
| +---------+ +-------+ +--------+ |
+---------------------------------------------------------+
| |
| Dashboard |
| |
| |
| +---------------------+ +----------------------+ |
| | | | | |
| | + + | +---------> | |
| | | | | | | |
| | | + | | +-------------> | |
| | | | + | | | | |
| | | | | | | | | |
| +-+---+----+-----+----+ +----------------------+ |
| |
+---------------------------------------------------------+
```
webpack.config.js
```javascript
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
]
}
};
```
index.js
```javascript
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
import './app.css';
class App extends React.Component {
render() {
return (
);
}
};
class Dashboard extends React.Component {
render() {
return (
);
}
};
class Inbox extends React.Component {
render() {
return (
);
}
};
class Calendar extends React.Component {
render() {
return (
);
}
};
render((
), document.querySelector('#app'));
```
index.html
```html
```
Launch the server.
```bash
$ cd demo15
$ npm run dev
```
## Useful links
- [Webpack docs](https://webpack.js.org/concepts/)
- [webpack-howto](https://github.com/petehunt/webpack-howto), by Pete Hunt
- [SurviveJS Webpack book](https://survivejs.com/webpack/introduction/), by Juho Vepsäläinen
- [Diving into Webpack](https://web-design-weekly.com/2014/09/24/diving-webpack/), by Web Design Weekly
- [Webpack and React is awesome](http://www.christianalfoni.com/articles/2014_12_13_Webpack-and-react-is-awesome), by Christian Alfoni
- [Browserify vs Webpack](https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9), by Cory House
## License
MIT
================================================
FILE: demo01/bundle.js
================================================
!function(e){function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var t={};r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},r.p="",r(r.s=0)}([function(e,r){document.write("Hello World
")}]);
================================================
FILE: demo01/index.html
================================================
================================================
FILE: demo01/main.js
================================================
document.write('Hello World
');
================================================
FILE: demo01/package.json
================================================
{
"name": "webpack-demo1",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --open",
"build": "webpack -p"
},
"license": "MIT"
}
================================================
FILE: demo01/webpack.config.js
================================================
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
================================================
FILE: demo02/bundle1.js
================================================
!function(e){function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var t={};r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},r.p="",r(r.s=0)}([function(e,r){document.write("Hello World
")}]);
================================================
FILE: demo02/bundle2.js
================================================
!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([,function(e,t){document.write("Hello Webpack
")}]);
================================================
FILE: demo02/index.html
================================================
================================================
FILE: demo02/main1.js
================================================
document.write('Hello World
');
================================================
FILE: demo02/main2.js
================================================
document.write('Hello Webpack
');
================================================
FILE: demo02/package.json
================================================
{
"name": "webpack-demo2",
"version": "1.0.0",
"scripts": {
"dev": "webpack-dev-server --open",
"build": "webpack -p"
},
"license": "MIT"
}
================================================
FILE: demo02/webpack.config.js
================================================
module.exports = {
entry: {
bundle1: './main1.js',
bundle2: './main2.js'
},
output: {
filename: '[name].js'
}
};
================================================
FILE: demo03/bundle.js
================================================
!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";e.exports=n(5)},function(e,t,n){"use strict";function r(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
var o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,i,u=r(e),c=1;cF.length&&F.push(e)}function d(e,t,n,o){var a=typeof e;"undefined"!==a&&"boolean"!==a||(e=null);var l=!1;if(null===e)l=!0;else switch(a){case"string":case"number":l=!0;break;case"object":switch(e.$$typeof){case w:case x:case E:case T:l=!0}}if(l)return n(o,e,""===t?"."+h(e,0):t),1;if(l=0,t=""===t?".":t+":",Array.isArray(e))for(var i=0;ithis.eventPool.length&&this.eventPool.push(e)}function V(e){e.eventPool=[],e.getPooled=z,e.release=j}function B(e,t,n,r){return H.call(this,e,t,n,r)}function K(e,t,n,r){return H.call(this,e,t,n,r)}function W(e,t){switch(e){case"topKeyUp":return-1!==dr.indexOf(t.keyCode);case"topKeyDown":return 229!==t.keyCode;case"topKeyPress":case"topMouseDown":case"topBlur":return!0;default:return!1}}function $(e){return e=e.detail,"object"==typeof e&&"data"in e?e.data:null}function q(e,t){switch(e){case"topCompositionEnd":return $(t);case"topKeyPress":return 32!==t.which?null:(xr=!0,kr);case"topTextInput":return e=t.data,e===kr&&xr?null:e;default:return null}}function Q(e,t){if(Er)return"topCompositionEnd"===e||!hr&&W(e,t)?(e=L(),sr._root=null,sr._startText=null,sr._fallbackText=null,Er=!1,e):null;switch(e){case"topPaste":return null;case"topKeyPress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1Vr.length&&Vr.push(e)}}}function Re(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n["ms"+e]="MS"+t,n["O"+e]="o"+t.toLowerCase(),n}function De(e){if(qr[e])return qr[e];if(!$r[e])return e;var t,n=$r[e];for(t in n)if(n.hasOwnProperty(t)&&t in Qr)return qr[e]=n[t];return""}function Fe(e){return Object.prototype.hasOwnProperty.call(e,Zr)||(e[Zr]=Xr++,Yr[e[Zr]]={}),Yr[e[Zr]]}function Ae(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function Le(e,t){var n=Ae(e);e=0;for(var r;n;){if(3===n.nodeType){if(r=e+n.textContent.length,e<=t&&r>=t)return{node:n,offset:t-e};e=r}e:{for(;n;){if(n.nextSibling){n=n.nextSibling;break e}n=n.parentNode}n=void 0}n=Ae(n)}}function Ue(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&"text"===e.type||"textarea"===t||"true"===e.contentEditable)}function He(e,t){if(oo||null==to||to!==En())return null;var n=to;return"selectionStart"in n&&Ue(n)?n={start:n.selectionStart,end:n.selectionEnd}:window.getSelection?(n=window.getSelection(),n={anchorNode:n.anchorNode,anchorOffset:n.anchorOffset,focusNode:n.focusNode,focusOffset:n.focusOffset}):n=void 0,ro&&Tn(ro,n)?null:(ro=n,e=H.getPooled(eo.select,no,e,t),e.type="select",e.target=to,D(e),e)}function ze(e,t,n,r){return H.call(this,e,t,n,r)}function je(e,t,n,r){return H.call(this,e,t,n,r)}function Ve(e,t,n,r){return H.call(this,e,t,n,r)}function Be(e){var t=e.keyCode;return"charCode"in e?0===(e=e.charCode)&&13===t&&(e=13):e=t,32<=e||13===e?e:0}function Ke(e,t,n,r){return H.call(this,e,t,n,r)}function We(e,t,n,r){return H.call(this,e,t,n,r)}function $e(e,t,n,r){return H.call(this,e,t,n,r)}function qe(e,t,n,r){return H.call(this,e,t,n,r)}function Qe(e,t,n,r){return H.call(this,e,t,n,r)}function Ge(e){0>po||(e.current=fo[po],fo[po]=null,po--)}function Ye(e,t){po++,fo[po]=e.current,e.current=t}function Xe(e){return Je(e)?go:ho.current}function Ze(e,t){var n=e.type.contextTypes;if(!n)return Pn;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var o,a={};for(o in n)a[o]=t[o];return r&&(e=e.stateNode,e.__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=a),a}function Je(e){return 2===e.tag&&null!=e.type.childContextTypes}function et(e){Je(e)&&(Ge(mo,e),Ge(ho,e))}function tt(e,t,n){null!=ho.cursor&&r("168"),Ye(ho,t,e),Ye(mo,n,e)}function nt(e,t){var n=e.stateNode,o=e.type.childContextTypes;if("function"!=typeof n.getChildContext)return t;n=n.getChildContext();for(var a in n)a in o||r("108",ke(e)||"Unknown",a);return kn({},t,n)}function rt(e){if(!Je(e))return!1;var t=e.stateNode;return t=t&&t.__reactInternalMemoizedMergedChildContext||Pn,go=ho.current,Ye(ho,t,e),Ye(mo,mo.current,e),!0}function ot(e,t){var n=e.stateNode;if(n||r("169"),t){var o=nt(e,go);n.__reactInternalMemoizedMergedChildContext=o,Ge(mo,e),Ge(ho,e),Ye(ho,o,e)}else Ge(mo,e);Ye(mo,t,e)}function at(e,t,n){this.tag=e,this.key=t,this.stateNode=this.type=null,this.sibling=this.child=this.return=null,this.index=0,this.memoizedState=this.updateQueue=this.memoizedProps=this.pendingProps=this.ref=null,this.internalContextTag=n,this.effectTag=0,this.lastEffect=this.firstEffect=this.nextEffect=null,this.expirationTime=0,this.alternate=null}function lt(e,t,n){var r=e.alternate;return null===r?(r=new at(e.tag,e.key,e.internalContextTag),r.type=e.type,r.stateNode=e.stateNode,r.alternate=e,e.alternate=r):(r.effectTag=0,r.nextEffect=null,r.firstEffect=null,r.lastEffect=null),r.expirationTime=n,r.pendingProps=t,r.child=e.child,r.memoizedProps=e.memoizedProps,r.memoizedState=e.memoizedState,r.updateQueue=e.updateQueue,r.sibling=e.sibling,r.index=e.index,r.ref=e.ref,r}function it(e,t,n){var o=void 0,a=e.type,l=e.key;return"function"==typeof a?(o=a.prototype&&a.prototype.isReactComponent?new at(2,l,t):new at(0,l,t),o.type=a,o.pendingProps=e.props):"string"==typeof a?(o=new at(5,l,t),o.type=a,o.pendingProps=e.props):"object"==typeof a&&null!==a&&"number"==typeof a.tag?(o=a,o.pendingProps=e.props):r("130",null==a?a:typeof a,""),o.expirationTime=n,o}function ut(e,t,n,r){return t=new at(10,r,t),t.pendingProps=e,t.expirationTime=n,t}function ct(e,t,n){return t=new at(6,null,t),t.pendingProps=e,t.expirationTime=n,t}function st(e,t,n){return t=new at(7,e.key,t),t.type=e.handler,t.pendingProps=e,t.expirationTime=n,t}function ft(e,t,n){return e=new at(9,null,t),e.expirationTime=n,e}function pt(e,t,n){return t=new at(4,e.key,t),t.pendingProps=e.children||[],t.expirationTime=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function dt(e){return function(t){try{return e(t)}catch(e){}}}function ht(e){if("undefined"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__)return!1;var t=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(t.isDisabled||!t.supportsFiber)return!0;try{var n=t.inject(e);yo=dt(function(e){return t.onCommitFiberRoot(n,e)}),vo=dt(function(e){return t.onCommitFiberUnmount(n,e)})}catch(e){}return!0}function mt(e){"function"==typeof yo&&yo(e)}function gt(e){"function"==typeof vo&&vo(e)}function yt(e){return{baseState:e,expirationTime:0,first:null,last:null,callbackList:null,hasForceUpdate:!1,isInitialized:!1}}function vt(e,t){null===e.last?e.first=e.last=t:(e.last.next=t,e.last=t),(0===e.expirationTime||e.expirationTime>t.expirationTime)&&(e.expirationTime=t.expirationTime)}function bt(e,t){var n=e.alternate,r=e.updateQueue;null===r&&(r=e.updateQueue=yt(null)),null!==n?null===(e=n.updateQueue)&&(e=n.updateQueue=yt(null)):e=null,e=e!==r?e:null,null===e?vt(r,t):null===r.last||null===e.last?(vt(r,t),vt(e,t)):(vt(r,t),e.last=t)}function Ct(e,t,n,r){return e=e.partialState,"function"==typeof e?e.call(t,n,r):e}function kt(e,t,n,r,o,a){null!==e&&e.updateQueue===n&&(n=t.updateQueue={baseState:n.baseState,expirationTime:n.expirationTime,first:n.first,last:n.last,isInitialized:n.isInitialized,callbackList:null,hasForceUpdate:!1}),n.expirationTime=0,n.isInitialized?e=n.baseState:(e=n.baseState=t.memoizedState,n.isInitialized=!0);for(var l=!0,i=n.first,u=!1;null!==i;){var c=i.expirationTime;if(c>a){var s=n.expirationTime;(0===s||s>c)&&(n.expirationTime=c),u||(u=!0,n.baseState=e)}else u||(n.first=i.next,null===n.first&&(n.last=null)),i.isReplace?(e=Ct(i,r,e,o),l=!0):(c=Ct(i,r,e,o))&&(e=l?kn({},e,c):kn(e,c),l=!1),i.isForced&&(n.hasForceUpdate=!0),null!==i.callback&&(c=n.callbackList,null===c&&(c=n.callbackList=[]),c.push(i));i=i.next}return null!==n.callbackList?t.effectTag|=32:null!==n.first||n.hasForceUpdate||(t.updateQueue=null),u||(n.baseState=e),e}function wt(e,t){var n=e.callbackList;if(null!==n)for(e.callbackList=null,e=0;ep?(d=f,f=null):d=f.sibling;var y=m(r,f,i[p],u);if(null===y){null===f&&(f=d);break}e&&f&&null===y.alternate&&t(r,f),a=l(y,a,p),null===s?c=y:s.sibling=y,s=y,f=d}if(p===i.length)return n(r,f),c;if(null===f){for(;pd?(y=p,p=null):y=p.sibling;var b=m(a,p,v.value,c);if(null===b){p||(p=y);break}e&&p&&null===b.alternate&&t(a,p),i=l(b,i,d),null===f?s=b:f.sibling=b,f=b,p=y}if(v.done)return n(a,p),s;if(null===p){for(;!v.done;d++,v=u.next())null!==(v=h(a,v.value,c))&&(i=l(v,i,d),null===f?s=v:f.sibling=v,f=v);return s}for(p=o(a,p);!v.done;d++,v=u.next())null!==(v=g(p,a,d,v.value,c))&&(e&&null!==v.alternate&&p.delete(null===v.key?d:v.key),i=l(v,i,d),null===f?s=v:f.sibling=v,f=v);return e&&p.forEach(function(e){return t(a,e)}),s}return function(e,o,l,u){"object"==typeof l&&null!==l&&l.type===Eo&&null===l.key&&(l=l.props.children);var c="object"==typeof l&&null!==l;if(c)switch(l.$$typeof){case Co:e:{var s=l.key;for(c=o;null!==c;){if(c.key===s){if(10===c.tag?l.type===Eo:c.type===l.type){n(e,c.sibling),o=a(c,l.type===Eo?l.props.children:l.props,u),o.ref=Tt(c,l),o.return=e,e=o;break e}n(e,c);break}t(e,c),c=c.sibling}l.type===Eo?(o=ut(l.props.children,e.internalContextTag,u,l.key),o.return=e,e=o):(u=it(l,e.internalContextTag,u),u.ref=Tt(o,l),u.return=e,e=u)}return i(e);case ko:e:{for(c=l.key;null!==o;){if(o.key===c){if(7===o.tag){n(e,o.sibling),o=a(o,l,u),o.return=e,e=o;break e}n(e,o);break}t(e,o),o=o.sibling}o=st(l,e.internalContextTag,u),o.return=e,e=o}return i(e);case wo:e:{if(null!==o){if(9===o.tag){n(e,o.sibling),o=a(o,null,u),o.type=l.value,o.return=e,e=o;break e}n(e,o)}o=ft(l,e.internalContextTag,u),o.type=l.value,o.return=e,e=o}return i(e);case xo:e:{for(c=l.key;null!==o;){if(o.key===c){if(4===o.tag&&o.stateNode.containerInfo===l.containerInfo&&o.stateNode.implementation===l.implementation){n(e,o.sibling),o=a(o,l.children||[],u),o.return=e,e=o;break e}n(e,o);break}t(e,o),o=o.sibling}o=pt(l,e.internalContextTag,u),o.return=e,e=o}return i(e)}if("string"==typeof l||"number"==typeof l)return l=""+l,null!==o&&6===o.tag?(n(e,o.sibling),o=a(o,l,u)):(n(e,o),o=ct(l,e.internalContextTag,u)),o.return=e,e=o,i(e);if(So(l))return y(e,o,l,u);if(Et(l))return v(e,o,l,u);if(c&&St(e,l),void 0===l)switch(e.tag){case 2:case 1:u=e.type,r("152",u.displayName||u.name||"Component")}return n(e,o)}}function Pt(e,t,n,o,a){function l(e,t,n){var r=t.expirationTime;t.child=null===e?Po(t,null,n,r):_o(t,e.child,n,r)}function i(e,t){var n=t.ref;null===n||e&&e.ref===n||(t.effectTag|=128)}function u(e,t,n,r){if(i(e,t),!n)return r&&ot(t,!1),s(e,t);n=t.stateNode,jr.current=t;var o=n.render();return t.effectTag|=1,l(e,t,o),t.memoizedState=n.state,t.memoizedProps=n.props,r&&ot(t,!0),t.child}function c(e){var t=e.stateNode;t.pendingContext?tt(e,t.pendingContext,t.pendingContext!==t.context):t.context&&tt(e,t.context,!1),g(e,t.containerInfo)}function s(e,t){if(null!==e&&t.child!==e.child&&r("153"),null!==t.child){e=t.child;var n=lt(e,e.pendingProps,e.expirationTime);for(t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,n=n.sibling=lt(e,e.pendingProps,e.expirationTime),n.return=t;n.sibling=null}return t.child}function f(e,t){switch(t.tag){case 3:c(t);break;case 2:rt(t);break;case 4:g(t,t.stateNode.containerInfo)}return null}var p=e.shouldSetTextContent,d=e.useSyncScheduling,h=e.shouldDeprioritizeSubtree,m=t.pushHostContext,g=t.pushHostContainer,y=n.enterHydrationState,v=n.resetHydrationState,b=n.tryToClaimNextHydratableInstance;e=xt(o,a,function(e,t){e.memoizedProps=t},function(e,t){e.memoizedState=t});var C=e.adoptClassInstance,k=e.constructClassInstance,w=e.mountClassInstance,x=e.updateClassInstance;return{beginWork:function(e,t,n){if(0===t.expirationTime||t.expirationTime>n)return f(e,t);switch(t.tag){case 0:null!==e&&r("155");var o=t.type,a=t.pendingProps,E=Xe(t);return E=Ze(t,E),o=o(a,E),t.effectTag|=1,"object"==typeof o&&null!==o&&"function"==typeof o.render?(t.tag=2,a=rt(t),C(t,o),w(t,n),t=u(e,t,!0,a)):(t.tag=1,l(e,t,o),t.memoizedProps=a,t=t.child),t;case 1:e:{if(a=t.type,n=t.pendingProps,o=t.memoizedProps,mo.current)null===n&&(n=o);else if(null===n||o===n){t=s(e,t);break e}o=Xe(t),o=Ze(t,o),a=a(n,o),t.effectTag|=1,l(e,t,a),t.memoizedProps=n,t=t.child}return t;case 2:return a=rt(t),o=void 0,null===e?t.stateNode?r("153"):(k(t,t.pendingProps),w(t,n),o=!0):o=x(e,t,n),u(e,t,o,a);case 3:return c(t),a=t.updateQueue,null!==a?(o=t.memoizedState,a=kt(e,t,a,null,null,n),o===a?(v(),t=s(e,t)):(o=a.element,E=t.stateNode,(null===e||null===e.child)&&E.hydrate&&y(t)?(t.effectTag|=2,t.child=Po(t,null,o,n)):(v(),l(e,t,o)),t.memoizedState=a,t=t.child)):(v(),t=s(e,t)),t;case 5:m(t),null===e&&b(t),a=t.type;var T=t.memoizedProps;return o=t.pendingProps,null===o&&null===(o=T)&&r("154"),E=null!==e?e.memoizedProps:null,mo.current||null!==o&&T!==o?(T=o.children,p(a,o)?T=null:E&&p(a,E)&&(t.effectTag|=16),i(e,t),2147483647!==n&&!d&&h(a,o)?(t.expirationTime=2147483647,t=null):(l(e,t,T),t.memoizedProps=o,t=t.child)):t=s(e,t),t;case 6:return null===e&&b(t),e=t.pendingProps,null===e&&(e=t.memoizedProps),t.memoizedProps=e,null;case 8:t.tag=7;case 7:return a=t.pendingProps,mo.current?null===a&&null===(a=e&&e.memoizedProps)&&r("154"):null!==a&&t.memoizedProps!==a||(a=t.memoizedProps),o=a.children,t.stateNode=null===e?Po(t,t.stateNode,o,n):_o(t,t.stateNode,o,n),t.memoizedProps=a,t.stateNode;case 9:return null;case 4:e:{if(g(t,t.stateNode.containerInfo),a=t.pendingProps,mo.current)null===a&&null==(a=e&&e.memoizedProps)&&r("154");else if(null===a||t.memoizedProps===a){t=s(e,t);break e}null===e?t.child=_o(t,null,a,n):l(e,t,a),t.memoizedProps=a,t=t.child}return t;case 10:e:{if(n=t.pendingProps,mo.current)null===n&&(n=t.memoizedProps);else if(null===n||t.memoizedProps===n){t=s(e,t);break e}l(e,t,n),t.memoizedProps=n,t=t.child}return t;default:r("156")}},beginFailedWork:function(e,t,n){switch(t.tag){case 2:rt(t);break;case 3:c(t);break;default:r("157")}return t.effectTag|=64,null===e?t.child=null:t.child!==e.child&&(t.child=e.child),0===t.expirationTime||t.expirationTime>n?f(e,t):(t.firstEffect=null,t.lastEffect=null,t.child=null===e?Po(t,null,null,n):_o(t,e.child,null,n),2===t.tag&&(e=t.stateNode,t.memoizedProps=e.props,t.memoizedState=e.state),t.child)}}}function Nt(e,t,n){function o(e){e.effectTag|=4}var a=e.createInstance,l=e.createTextInstance,i=e.appendInitialChild,u=e.finalizeInitialChildren,c=e.prepareUpdate,s=e.persistence,f=t.getRootHostContainer,p=t.popHostContext,d=t.getHostContext,h=t.popHostContainer,m=n.prepareToHydrateHostInstance,g=n.prepareToHydrateHostTextInstance,y=n.popHydrationState,v=void 0,b=void 0,C=void 0;return e.mutation?(v=function(){},b=function(e,t,n){(t.updateQueue=n)&&o(t)},C=function(e,t,n,r){n!==r&&o(t)}):r(s?"235":"236"),{completeWork:function(e,t,n){var s=t.pendingProps;switch(null===s?s=t.memoizedProps:2147483647===t.expirationTime&&2147483647!==n||(t.pendingProps=null),t.tag){case 1:return null;case 2:return et(t),null;case 3:return h(t),Ge(mo,t),Ge(ho,t),s=t.stateNode,s.pendingContext&&(s.context=s.pendingContext,s.pendingContext=null),null!==e&&null!==e.child||(y(t),t.effectTag&=-3),v(t),null;case 5:p(t),n=f();var k=t.type;if(null!==e&&null!=t.stateNode){var w=e.memoizedProps,x=t.stateNode,E=d();x=c(x,k,w,s,n,E),b(e,t,x,k,w,s,n),e.ref!==t.ref&&(t.effectTag|=128)}else{if(!s)return null===t.stateNode&&r("166"),null;if(e=d(),y(t))m(t,n,e)&&o(t);else{e=a(k,s,n,e,t);e:for(w=t.child;null!==w;){if(5===w.tag||6===w.tag)i(e,w.stateNode);else if(4!==w.tag&&null!==w.child){w.child.return=w,w=w.child;continue}if(w===t)break;for(;null===w.sibling;){if(null===w.return||w.return===t)break e;w=w.return}w.sibling.return=w.return,w=w.sibling}u(e,k,s,n)&&o(t),t.stateNode=e}null!==t.ref&&(t.effectTag|=128)}return null;case 6:if(e&&null!=t.stateNode)C(e,t,e.memoizedProps,s);else{if("string"!=typeof s)return null===t.stateNode&&r("166"),null;e=f(),n=d(),y(t)?g(t)&&o(t):t.stateNode=l(s,e,n,t)}return null;case 7:(s=t.memoizedProps)||r("165"),t.tag=8,k=[];e:for((w=t.stateNode)&&(w.return=t);null!==w;){if(5===w.tag||6===w.tag||4===w.tag)r("247");else if(9===w.tag)k.push(w.type);else if(null!==w.child){w.child.return=w,w=w.child;continue}for(;null===w.sibling;){if(null===w.return||w.return===t)break e;w=w.return}w.sibling.return=w.return,w=w.sibling}return w=s.handler,s=w(s.props,k),t.child=_o(t,null!==e?e.child:null,s,n),t.child;case 8:return t.tag=7,null;case 9:case 10:return null;case 4:return h(t),v(t),null;case 0:r("167");default:r("156")}}}}function Ot(e,t){function n(e){var n=e.ref;if(null!==n)try{n(null)}catch(n){t(e,n)}}function o(e){switch("function"==typeof gt&>(e),e.tag){case 2:n(e);var r=e.stateNode;if("function"==typeof r.componentWillUnmount)try{r.props=e.memoizedProps,r.state=e.memoizedState,r.componentWillUnmount()}catch(n){t(e,n)}break;case 5:n(e);break;case 7:a(e.stateNode);break;case 4:c&&i(e)}}function a(e){for(var t=e;;)if(o(t),null===t.child||c&&4===t.tag){if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return;t=t.return}t.sibling.return=t.return,t=t.sibling}else t.child.return=t,t=t.child}function l(e){return 5===e.tag||3===e.tag||4===e.tag}function i(e){for(var t=e,n=!1,l=void 0,i=void 0;;){if(!n){n=t.return;e:for(;;){switch(null===n&&r("160"),n.tag){case 5:l=n.stateNode,i=!1;break e;case 3:case 4:l=n.stateNode.containerInfo,i=!0;break e}n=n.return}n=!0}if(5===t.tag||6===t.tag)a(t),i?b(l,t.stateNode):v(l,t.stateNode);else if(4===t.tag?l=t.stateNode.containerInfo:o(t),null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return;t=t.return,4===t.tag&&(n=!1)}t.sibling.return=t.return,t=t.sibling}}var u=e.getPublicInstance,c=e.mutation;e=e.persistence,c||r(e?"235":"236");var s=c.commitMount,f=c.commitUpdate,p=c.resetTextContent,d=c.commitTextUpdate,h=c.appendChild,m=c.appendChildToContainer,g=c.insertBefore,y=c.insertInContainerBefore,v=c.removeChild,b=c.removeChildFromContainer;return{commitResetTextContent:function(e){p(e.stateNode)},commitPlacement:function(e){e:{for(var t=e.return;null!==t;){if(l(t)){var n=t;break e}t=t.return}r("160"),n=void 0}var o=t=void 0;switch(n.tag){case 5:t=n.stateNode,o=!1;break;case 3:case 4:t=n.stateNode.containerInfo,o=!0;break;default:r("161")}16&n.effectTag&&(p(t),n.effectTag&=-17);e:t:for(n=e;;){for(;null===n.sibling;){if(null===n.return||l(n.return)){n=null;break e}n=n.return}for(n.sibling.return=n.return,n=n.sibling;5!==n.tag&&6!==n.tag;){if(2&n.effectTag)continue t;if(null===n.child||4===n.tag)continue t;n.child.return=n,n=n.child}if(!(2&n.effectTag)){n=n.stateNode;break e}}for(var a=e;;){if(5===a.tag||6===a.tag)n?o?y(t,a.stateNode,n):g(t,a.stateNode,n):o?m(t,a.stateNode):h(t,a.stateNode);else if(4!==a.tag&&null!==a.child){a.child.return=a,a=a.child;continue}if(a===e)break;for(;null===a.sibling;){if(null===a.return||a.return===e)return;a=a.return}a.sibling.return=a.return,a=a.sibling}},commitDeletion:function(e){i(e),e.return=null,e.child=null,e.alternate&&(e.alternate.child=null,e.alternate.return=null)},commitWork:function(e,t){switch(t.tag){case 2:break;case 5:var n=t.stateNode;if(null!=n){var o=t.memoizedProps;e=null!==e?e.memoizedProps:o;var a=t.type,l=t.updateQueue;t.updateQueue=null,null!==l&&f(n,l,a,e,o,t)}break;case 6:null===t.stateNode&&r("162"),n=t.memoizedProps,d(t.stateNode,null!==e?e.memoizedProps:n,n);break;case 3:break;default:r("163")}},commitLifeCycles:function(e,t){switch(t.tag){case 2:var n=t.stateNode;if(4&t.effectTag)if(null===e)n.props=t.memoizedProps,n.state=t.memoizedState,n.componentDidMount();else{var o=e.memoizedProps;e=e.memoizedState,n.props=t.memoizedProps,n.state=t.memoizedState,n.componentDidUpdate(o,e)}t=t.updateQueue,null!==t&&wt(t,n);break;case 3:n=t.updateQueue,null!==n&&wt(n,null!==t.child?t.child.stateNode:null);break;case 5:n=t.stateNode,null===e&&4&t.effectTag&&s(n,t.type,t.memoizedProps,t);break;case 6:case 4:break;default:r("163")}},commitAttachRef:function(e){var t=e.ref;if(null!==t){var n=e.stateNode;switch(e.tag){case 5:t(u(n));break;default:t(n)}}},commitDetachRef:function(e){null!==(e=e.ref)&&e(null)}}}function It(e){function t(e){return e===No&&r("174"),e}var n=e.getChildHostContext,o=e.getRootHostContext,a={current:No},l={current:No},i={current:No};return{getHostContext:function(){return t(a.current)},getRootHostContainer:function(){return t(i.current)},popHostContainer:function(e){Ge(a,e),Ge(l,e),Ge(i,e)},popHostContext:function(e){l.current===e&&(Ge(a,e),Ge(l,e))},pushHostContainer:function(e,t){Ye(i,t,e),t=o(t),Ye(l,e,e),Ye(a,t,e)},pushHostContext:function(e){var r=t(i.current),o=t(a.current);r=n(o,e.type,r),o!==r&&(Ye(l,e,e),Ye(a,r,e))},resetHostContainer:function(){a.current=No,i.current=No}}}function Mt(e){function t(e,t){var n=new at(5,null,0);n.type="DELETED",n.stateNode=t,n.return=e,n.effectTag=8,null!==e.lastEffect?(e.lastEffect.nextEffect=n,e.lastEffect=n):e.firstEffect=e.lastEffect=n}function n(e,t){switch(e.tag){case 5:return null!==(t=l(t,e.type,e.pendingProps))&&(e.stateNode=t,!0);case 6:return null!==(t=i(t,e.pendingProps))&&(e.stateNode=t,!0);default:return!1}}function o(e){for(e=e.return;null!==e&&5!==e.tag&&3!==e.tag;)e=e.return;p=e}var a=e.shouldSetTextContent;if(!(e=e.hydration))return{enterHydrationState:function(){return!1},resetHydrationState:function(){},tryToClaimNextHydratableInstance:function(){},prepareToHydrateHostInstance:function(){r("175")},prepareToHydrateHostTextInstance:function(){r("176")},popHydrationState:function(){return!1}};var l=e.canHydrateInstance,i=e.canHydrateTextInstance,u=e.getNextHydratableSibling,c=e.getFirstHydratableChild,s=e.hydrateInstance,f=e.hydrateTextInstance,p=null,d=null,h=!1;return{enterHydrationState:function(e){return d=c(e.stateNode.containerInfo),p=e,h=!0},resetHydrationState:function(){d=p=null,h=!1},tryToClaimNextHydratableInstance:function(e){if(h){var r=d;if(r){if(!n(e,r)){if(!(r=u(r))||!n(e,r))return e.effectTag|=2,h=!1,void(p=e);t(p,d)}p=e,d=c(r)}else e.effectTag|=2,h=!1,p=e}},prepareToHydrateHostInstance:function(e,t,n){return t=s(e.stateNode,e.type,e.memoizedProps,t,n,e),e.updateQueue=t,null!==t},prepareToHydrateHostTextInstance:function(e){return f(e.stateNode,e.memoizedProps,e)},popHydrationState:function(e){if(e!==p)return!1;if(!h)return o(e),h=!0,!1;var n=e.type;if(5!==e.tag||"head"!==n&&"body"!==n&&!a(n,e.memoizedProps))for(n=d;n;)t(e,n),n=u(n);return o(e),d=p?u(e.stateNode):null,!0}}}function Rt(e){function t(e){ae=G=!0;var t=e.stateNode;if(t.current===e&&r("177"),t.isReadyForCommit=!1,jr.current=null,1l.expirationTime)&&(a=l.expirationTime),l=l.sibling;o.expirationTime=a}if(null!==t)return t;if(null!==n&&(null===n.firstEffect&&(n.firstEffect=e.firstEffect),null!==e.lastEffect&&(null!==n.lastEffect&&(n.lastEffect.nextEffect=e.firstEffect),n.lastEffect=e.lastEffect),1e))if(Z<=q)for(;null!==Y;)Y=c(Y)?a(Y):o(Y);else for(;null!==Y&&!w();)Y=c(Y)?a(Y):o(Y)}else if(!(0===Z||Z>e))if(Z<=q)for(;null!==Y;)Y=o(Y);else for(;null!==Y&&!w();)Y=o(Y)}function i(e,t){if(G&&r("243"),G=!0,e.isReadyForCommit=!1,e!==X||t!==Z||null===Y){for(;-1t)&&(e.expirationTime=t),null!==e.alternate&&(0===e.alternate.expirationTime||e.alternate.expirationTime>t)&&(e.alternate.expirationTime=t),null===e.return){if(3!==e.tag)break;var n=e.stateNode;!G&&n===X&&tCe&&r("185"),null===o.nextScheduledRoot)o.remainingExpirationTime=a,null===ue?(ie=ue=o,o.nextScheduledRoot=o):(ue=ue.nextScheduledRoot=o,ue.nextScheduledRoot=ie);else{var l=o.remainingExpirationTime;(0===l||ace)return;V(se)}var t=z()-$;ce=e,se=j(b,{timeout:10*(e-2)-t})}function v(){var e=0,t=null;if(null!==ue)for(var n=ue,o=ie;null!==o;){var a=o.remainingExpirationTime;if(0===a){if((null===n||null===ue)&&r("244"),o===o.nextScheduledRoot){ie=ue=o.nextScheduledRoot=null;break}if(o===ie)ie=a=o.nextScheduledRoot,ue.nextScheduledRoot=a,o.nextScheduledRoot=null;else{if(o===ue){ue=n,ue.nextScheduledRoot=ie,o.nextScheduledRoot=null;break}n.nextScheduledRoot=o.nextScheduledRoot,o.nextScheduledRoot=null}o=n.nextScheduledRoot}else{if((0===e||axe)&&(he=!0)}function x(e){null===pe&&r("246"),pe.remainingExpirationTime=0,me||(me=!0,ge=e)}var E=It(e),T=Mt(e),S=E.popHostContainer,_=E.popHostContext,P=E.resetHostContainer,N=Pt(e,E,T,d,p),O=N.beginWork,I=N.beginFailedWork,M=Nt(e,E,T).completeWork;E=Ot(e,u);var R=E.commitResetTextContent,D=E.commitPlacement,F=E.commitDeletion,A=E.commitWork,L=E.commitLifeCycles,U=E.commitAttachRef,H=E.commitDetachRef,z=e.now,j=e.scheduleDeferredCallback,V=e.cancelDeferredCallback,B=e.useSyncScheduling,K=e.prepareForCommit,W=e.resetAfterCommit,$=z(),q=2,Q=0,G=!1,Y=null,X=null,Z=0,J=null,ee=null,te=null,ne=null,re=null,oe=!1,ae=!1,le=!1,ie=null,ue=null,ce=0,se=-1,fe=!1,pe=null,de=0,he=!1,me=!1,ge=null,ye=null,ve=!1,be=!1,Ce=1e3,we=0,xe=1;return{computeAsyncExpiration:f,computeExpirationForFiber:p,scheduleWork:d,batchedUpdates:function(e,t){var n=ve;ve=!0;try{return e(t)}finally{(ve=n)||fe||C(1,null)}},unbatchedUpdates:function(e){if(ve&&!be){be=!0;try{return e()}finally{be=!1}}return e()},flushSync:function(e){var t=ve;ve=!0;try{e:{var n=Q;Q=1;try{var o=e();break e}finally{Q=n}o=void 0}return o}finally{ve=t,fe&&r("187"),C(1,null)}},deferredUpdates:function(e){var t=Q;Q=f();try{return e()}finally{Q=t}}}}function Dt(e){function t(e){return e=Se(e),null===e?null:e.stateNode}var n=e.getPublicInstance;e=Rt(e);var o=e.computeAsyncExpiration,a=e.computeExpirationForFiber,l=e.scheduleWork;return{createContainer:function(e,t){var n=new at(3,null,0);return e={current:n,containerInfo:e,pendingChildren:null,remainingExpirationTime:0,isReadyForCommit:!1,finishedWork:null,context:null,pendingContext:null,hydrate:t,nextScheduledRoot:null},n.stateNode=e},updateContainer:function(e,t,n,i){var u=t.current;if(n){n=n._reactInternalFiber;var c;e:{for(2===we(n)&&2===n.tag||r("170"),c=n;3!==c.tag;){if(Je(c)){c=c.stateNode.__reactInternalMemoizedMergedChildContext;break e}(c=c.return)||r("171")}c=c.stateNode.context}n=Je(n)?nt(n,c):c}else n=Pn;null===t.context?t.context=n:t.pendingContext=n,t=i,t=void 0===t?null:t,i=null!=e&&null!=e.type&&null!=e.type.prototype&&!0===e.type.prototype.unstable_isAsyncReactComponent?o():a(u),bt(u,{expirationTime:i,partialState:{element:e},callback:t,isReplace:!1,isForced:!1,nextCallback:null,next:null}),l(u,i)},batchedUpdates:e.batchedUpdates,unbatchedUpdates:e.unbatchedUpdates,deferredUpdates:e.deferredUpdates,flushSync:e.flushSync,getPublicRootInstance:function(e){if(e=e.current,!e.child)return null;switch(e.child.tag){case 5:return n(e.child.stateNode);default:return e.child.stateNode}},findHostInstance:t,findHostInstanceWithNoPortals:function(e){return e=_e(e),null===e?null:e.stateNode},injectIntoDevTools:function(e){var n=e.findFiberByHostInstance;return ht(kn({},e,{findHostInstanceByFiber:function(e){return t(e)},findFiberByHostInstance:function(e){return n?n(e):null}}))}}}function Ft(e,t,n){var r=3n||r.hasOverloadedBooleanValue&&!1===n?Ht(e,t):r.mustUseProperty?e[r.propertyName]=n:(t=r.attributeName,(o=r.attributeNamespace)?e.setAttributeNS(o,t,""+n):r.hasBooleanValue||r.hasOverloadedBooleanValue&&!0===n?e.setAttribute(t,""):e.setAttribute(t,""+n))}else Ut(e,t,a(t,n)?n:null)}function Ut(e,t,n){At(t)&&(null==n?e.removeAttribute(t):e.setAttribute(t,""+n))}function Ht(e,t){var n=l(t);n?(t=n.mutationMethod)?t(e,void 0):n.mustUseProperty?e[n.propertyName]=!n.hasBooleanValue&&"":e.removeAttribute(n.attributeName):e.removeAttribute(t)}function zt(e,t){var n=t.value,r=t.checked;return kn({type:void 0,step:void 0,min:void 0,max:void 0},t,{defaultChecked:void 0,defaultValue:void 0,value:null!=n?n:e._wrapperState.initialValue,checked:null!=r?r:e._wrapperState.initialChecked})}function jt(e,t){var n=t.defaultValue;e._wrapperState={initialChecked:null!=t.checked?t.checked:t.defaultChecked,initialValue:null!=t.value?t.value:n,controlled:"checkbox"===t.type||"radio"===t.type?null!=t.checked:null!=t.value}}function Vt(e,t){null!=(t=t.checked)&&Lt(e,"checked",t)}function Bt(e,t){Vt(e,t);var n=t.value;null!=n?0===n&&""===e.value?e.value="0":"number"===t.type?(t=parseFloat(e.value)||0,(n!=t||n==t&&e.value!=n)&&(e.value=""+n)):e.value!==""+n&&(e.value=""+n):(null==t.value&&null!=t.defaultValue&&e.defaultValue!==""+t.defaultValue&&(e.defaultValue=""+t.defaultValue),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked))}function Kt(e,t){switch(t.type){case"submit":case"reset":break;case"color":case"date":case"datetime":case"datetime-local":case"month":case"time":case"week":e.value="",e.value=e.defaultValue;break;default:e.value=e.value}t=e.name,""!==t&&(e.name=""),e.defaultChecked=!e.defaultChecked,e.defaultChecked=!e.defaultChecked,""!==t&&(e.name=t)}function Wt(e){var t="";return bn.Children.forEach(e,function(e){null==e||"string"!=typeof e&&"number"!=typeof e||(t+=e)}),t}function $t(e,t){return e=kn({children:void 0},t),(t=Wt(t.children))&&(e.children=t),e}function qt(e,t,n,r){if(e=e.options,t){t={};for(var o=0;o=t.length||r("93"),t=t[0]),n=""+t),null==n&&(n="")),e._wrapperState={initialValue:""+n}}function Xt(e,t){var n=t.value;null!=n&&(n=""+n,n!==e.value&&(e.value=n),null==t.defaultValue&&(e.defaultValue=n)),null!=t.defaultValue&&(e.defaultValue=t.defaultValue)}function Zt(e){var t=e.textContent;t===e._wrapperState.initialValue&&(e.value=t)}function Jt(e){switch(e){case"svg":return"http://www.w3.org/2000/svg";case"math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}function en(e,t){return null==e||"http://www.w3.org/1999/xhtml"===e?Jt(t):"http://www.w3.org/2000/svg"===e&&"foreignObject"===t?"http://www.w3.org/1999/xhtml":e}function tn(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}function nn(e,t){e=e.style;for(var n in t)if(t.hasOwnProperty(n)){var r=0===n.indexOf("--"),o=n,a=t[n];o=null==a||"boolean"==typeof a||""===a?"":r||"number"!=typeof a||0===a||Jo.hasOwnProperty(o)&&Jo[o]?(""+a).trim():a+"px","float"===n&&(n="cssFloat"),r?e.setProperty(n,o):e[n]=o}}function rn(e,t,n){t&&(ta[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML)&&r("137",e,n()),null!=t.dangerouslySetInnerHTML&&(null!=t.children&&r("60"),"object"==typeof t.dangerouslySetInnerHTML&&"__html"in t.dangerouslySetInnerHTML||r("61")),null!=t.style&&"object"!=typeof t.style&&r("62",n()))}function on(e,t){if(-1===e.indexOf("-"))return"string"==typeof t.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}function an(e,t){e=9===e.nodeType||11===e.nodeType?e:e.ownerDocument;var n=Fe(e);t=Yn[t];for(var r=0;r<\/script>",e=e.removeChild(e.firstChild)):e="string"==typeof t.is?n.createElement(e,{is:t.is}):n.createElement(e):e=n.createElementNS(r,e),e}function un(e,t){return(9===t.nodeType?t:t.ownerDocument).createTextNode(e)}function cn(e,t,n,r){var o=on(t,n);switch(t){case"iframe":case"object":Oe("topLoad","load",e);var a=n;break;case"video":case"audio":for(a in oa)oa.hasOwnProperty(a)&&Oe(a,oa[a],e);a=n;break;case"source":Oe("topError","error",e),a=n;break;case"img":case"image":Oe("topError","error",e),Oe("topLoad","load",e),a=n;break;case"form":Oe("topReset","reset",e),Oe("topSubmit","submit",e),a=n;break;case"details":Oe("topToggle","toggle",e),a=n;break;case"input":jt(e,n),a=zt(e,n),Oe("topInvalid","invalid",e),an(r,"onChange");break;case"option":a=$t(e,n);break;case"select":Qt(e,n),a=kn({},n,{value:void 0}),Oe("topInvalid","invalid",e),an(r,"onChange");break;case"textarea":Yt(e,n),a=Gt(e,n),Oe("topInvalid","invalid",e),an(r,"onChange");break;default:a=n}rn(t,a,ra);var l,i=a;for(l in i)if(i.hasOwnProperty(l)){var u=i[l];"style"===l?nn(e,u,ra):"dangerouslySetInnerHTML"===l?null!=(u=u?u.__html:void 0)&&Zo(e,u):"children"===l?"string"==typeof u?("textarea"!==t||""!==u)&&tn(e,u):"number"==typeof u&&tn(e,""+u):"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&(Gn.hasOwnProperty(l)?null!=u&&an(r,l):o?Ut(e,l,u):null!=u&&Lt(e,l,u))}switch(t){case"input":ae(e),Kt(e,n);break;case"textarea":ae(e),Zt(e,n);break;case"option":null!=n.value&&e.setAttribute("value",n.value);break;case"select":e.multiple=!!n.multiple,t=n.value,null!=t?qt(e,!!n.multiple,t,!1):null!=n.defaultValue&&qt(e,!!n.multiple,n.defaultValue,!0);break;default:"function"==typeof a.onClick&&(e.onclick=wn)}}function sn(e,t,n,r,o){var a=null;switch(t){case"input":n=zt(e,n),r=zt(e,r),a=[];break;case"option":n=$t(e,n),r=$t(e,r),a=[];break;case"select":n=kn({},n,{value:void 0}),r=kn({},r,{value:void 0}),a=[];break;case"textarea":n=Gt(e,n),r=Gt(e,r),a=[];break;default:"function"!=typeof n.onClick&&"function"==typeof r.onClick&&(e.onclick=wn)}rn(t,r,ra);var l,i;e=null;for(l in n)if(!r.hasOwnProperty(l)&&n.hasOwnProperty(l)&&null!=n[l])if("style"===l)for(i in t=n[l])t.hasOwnProperty(i)&&(e||(e={}),e[i]="");else"dangerouslySetInnerHTML"!==l&&"children"!==l&&"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&(Gn.hasOwnProperty(l)?a||(a=[]):(a=a||[]).push(l,null));for(l in r){var u=r[l];if(t=null!=n?n[l]:void 0,r.hasOwnProperty(l)&&u!==t&&(null!=u||null!=t))if("style"===l)if(t){for(i in t)!t.hasOwnProperty(i)||u&&u.hasOwnProperty(i)||(e||(e={}),e[i]="");for(i in u)u.hasOwnProperty(i)&&t[i]!==u[i]&&(e||(e={}),e[i]=u[i])}else e||(a||(a=[]),a.push(l,e)),e=u;else"dangerouslySetInnerHTML"===l?(u=u?u.__html:void 0,t=t?t.__html:void 0,null!=u&&t!==u&&(a=a||[]).push(l,""+u)):"children"===l?t===u||"string"!=typeof u&&"number"!=typeof u||(a=a||[]).push(l,""+u):"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&(Gn.hasOwnProperty(l)?(null!=u&&an(o,l),a||t===u||(a=[])):(a=a||[]).push(l,u))}return e&&(a=a||[]).push("style",e),a}function fn(e,t,n,r,o){"input"===n&&"radio"===o.type&&null!=o.name&&Vt(e,o),on(n,r),r=on(n,o);for(var a=0;a=u.hasBooleanValue+u.hasNumericValue+u.hasOverloadedBooleanValue||r("50",i),l.hasOwnProperty(i)&&(u.attributeName=l[i]),a.hasOwnProperty(i)&&(u.attributeNamespace=a[i]),e.hasOwnProperty(i)&&(u.mutationMethod=e[i]),In[i]=u}}},In={},Mn=On,Rn=Mn.MUST_USE_PROPERTY,Dn=Mn.HAS_BOOLEAN_VALUE,Fn=Mn.HAS_NUMERIC_VALUE,An=Mn.HAS_POSITIVE_NUMERIC_VALUE,Ln=Mn.HAS_OVERLOADED_BOOLEAN_VALUE,Un=Mn.HAS_STRING_BOOLEAN_VALUE,Hn={Properties:{allowFullScreen:Dn,async:Dn,autoFocus:Dn,autoPlay:Dn,capture:Ln,checked:Rn|Dn,cols:An,contentEditable:Un,controls:Dn,default:Dn,defer:Dn,disabled:Dn,download:Ln,draggable:Un,formNoValidate:Dn,hidden:Dn,loop:Dn,multiple:Rn|Dn,muted:Rn|Dn,noValidate:Dn,open:Dn,playsInline:Dn,readOnly:Dn,required:Dn,reversed:Dn,rows:An,rowSpan:Fn,scoped:Dn,seamless:Dn,selected:Rn|Dn,size:An,start:Fn,span:An,spellCheck:Un,style:0,tabIndex:0,itemScope:Dn,acceptCharset:0,className:0,htmlFor:0,httpEquiv:0,value:Un},DOMAttributeNames:{acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv"},DOMMutationMethods:{value:function(e,t){if(null==t)return e.removeAttribute("value");"number"!==e.type||!1===e.hasAttribute("value")?e.setAttribute("value",""+t):e.validity&&!e.validity.badInput&&e.ownerDocument.activeElement!==e&&e.setAttribute("value",""+t)}}},zn=Mn.HAS_STRING_BOOLEAN_VALUE,jn={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"},Vn={Properties:{autoReverse:zn,externalResourcesRequired:zn,preserveAlpha:zn},DOMAttributeNames:{autoReverse:"autoReverse",externalResourcesRequired:"externalResourcesRequired",preserveAlpha:"preserveAlpha"},DOMAttributeNamespaces:{xlinkActuate:jn.xlink,xlinkArcrole:jn.xlink,xlinkHref:jn.xlink,xlinkRole:jn.xlink,xlinkShow:jn.xlink,xlinkTitle:jn.xlink,xlinkType:jn.xlink,xmlBase:jn.xml,xmlLang:jn.xml,xmlSpace:jn.xml}},Bn=/[\-\:]([a-z])/g;"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode x-height xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xmlns:xlink xml:lang xml:space".split(" ").forEach(function(e){var t=e.replace(Bn,i);Vn.Properties[t]=0,Vn.DOMAttributeNames[t]=e}),Mn.injectDOMPropertyConfig(Hn),Mn.injectDOMPropertyConfig(Vn);var Kn={_caughtError:null,_hasCaughtError:!1,_rethrowError:null,_hasRethrowError:!1,injection:{injectErrorUtils:function(e){"function"!=typeof e.invokeGuardedCallback&&r("197"),u=e.invokeGuardedCallback}},invokeGuardedCallback:function(e,t,n,r,o,a,l,i,c){u.apply(Kn,arguments)},invokeGuardedCallbackAndCatchFirstError:function(e,t,n,r,o,a,l,i,u){if(Kn.invokeGuardedCallback.apply(this,arguments),Kn.hasCaughtError()){var c=Kn.clearCaughtError();Kn._hasRethrowError||(Kn._hasRethrowError=!0,Kn._rethrowError=c)}},rethrowCaughtError:function(){return c.apply(Kn,arguments)},hasCaughtError:function(){return Kn._hasCaughtError},clearCaughtError:function(){if(Kn._hasCaughtError){var e=Kn._caughtError;return Kn._caughtError=null,Kn._hasCaughtError=!1,e}r("198")}},Wn=null,$n={},qn=[],Qn={},Gn={},Yn={},Xn=Object.freeze({plugins:qn,eventNameDispatchConfigs:Qn,registrationNameModules:Gn,registrationNameDependencies:Yn,possibleRegistrationNames:null,injectEventPluginOrder:p,injectEventPluginsByName:d}),Zn=null,Jn=null,er=null,tr=null,nr={injectEventPluginOrder:p,injectEventPluginsByName:d},rr=Object.freeze({injection:nr,getListener:C,extractEvents:k,enqueueEvents:w,processEventQueue:x}),or=Math.random().toString(36).slice(2),ar="__reactInternalInstance$"+or,lr="__reactEventHandlers$"+or,ir=Object.freeze({precacheFiberNode:function(e,t){t[ar]=e},getClosestInstanceFromNode:E,getInstanceFromNode:function(e){return e=e[ar],!e||5!==e.tag&&6!==e.tag?null:e},getNodeFromInstance:T,getFiberCurrentPropsFromNode:S,updateFiberProps:function(e,t){e[lr]=t}}),ur=Object.freeze({accumulateTwoPhaseDispatches:D,accumulateTwoPhaseDispatchesSkipTarget:function(e){g(e,I)},accumulateEnterLeaveDispatches:F,accumulateDirectDispatches:function(e){g(e,R)}}),cr=null,sr={_root:null,_startText:null,_fallbackText:null},fr="dispatchConfig _targetInst nativeEvent isDefaultPrevented isPropagationStopped _dispatchListeners _dispatchInstances".split(" "),pr={type:null,target:null,currentTarget:wn.thatReturnsNull,eventPhase:null,bubbles:null,cancelable:null,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:null,isTrusted:null};kn(H.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=wn.thatReturnsTrue)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=wn.thatReturnsTrue)},persist:function(){this.isPersistent=wn.thatReturnsTrue},isPersistent:wn.thatReturnsFalse,destructor:function(){var e,t=this.constructor.Interface;for(e in t)this[e]=null;for(t=0;t=parseInt(yr.version(),10))}var vr,br=gr,Cr=Cn.canUseDOM&&(!hr||mr&&8=mr),kr=String.fromCharCode(32),wr={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["topCompositionEnd","topKeyPress","topTextInput","topPaste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"topBlur topCompositionEnd topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"topBlur topCompositionStart topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:"topBlur topCompositionUpdate topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")}},xr=!1,Er=!1,Tr={eventTypes:wr,extractEvents:function(e,t,n,r){var o;if(hr)e:{switch(e){case"topCompositionStart":var a=wr.compositionStart;break e;case"topCompositionEnd":a=wr.compositionEnd;break e;case"topCompositionUpdate":a=wr.compositionUpdate;break e}a=void 0}else Er?W(e,n)&&(a=wr.compositionEnd):"topKeyDown"===e&&229===n.keyCode&&(a=wr.compositionStart);return a?(Cr&&(Er||a!==wr.compositionStart?a===wr.compositionEnd&&Er&&(o=L()):(sr._root=r,sr._startText=U(),Er=!0)),a=B.getPooled(a,t,n,r),o?a.data=o:null!==(o=$(n))&&(a.data=o),D(a),o=a):o=null,(e=br?q(e,n):Q(e,n))?(t=K.getPooled(wr.beforeInput,t,n,r),t.data=e,D(t)):t=null,[o,t]}},Sr=null,_r=null,Pr=null,Nr={injectFiberControlledHostComponent:function(e){Sr=e}},Or=Object.freeze({injection:Nr,enqueueStateRestore:Y,restoreStateIfNeeded:X}),Ir=!1,Mr={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};Cn.canUseDOM&&(vr=document.implementation&&document.implementation.hasFeature&&!0!==document.implementation.hasFeature("",""));var Rr={change:{phasedRegistrationNames:{bubbled:"onChange",captured:"onChangeCapture"},dependencies:"topBlur topChange topClick topFocus topInput topKeyDown topKeyUp topSelectionChange".split(" ")}},Dr=null,Fr=null,Ar=!1;Cn.canUseDOM&&(Ar=ne("input")&&(!document.documentMode||9=document.documentMode,eo={select:{phasedRegistrationNames:{bubbled:"onSelect",captured:"onSelectCapture"},dependencies:"topBlur topContextMenu topFocus topKeyDown topKeyUp topMouseDown topMouseUp topSelectionChange".split(" ")}},to=null,no=null,ro=null,oo=!1,ao={eventTypes:eo,extractEvents:function(e,t,n,r){var o,a=r.window===r?r.document:9===r.nodeType?r:r.ownerDocument;if(!(o=!a)){e:{a=Fe(a),o=Yn.onSelect;for(var l=0;l=Vo-e){if(!(-1!==zo&&zo<=e))return void(jo||(jo=!0,requestAnimationFrame($o)));Lo.didTimeout=!0}else Lo.didTimeout=!1;zo=-1,e=Uo,Uo=null,null!==e&&e(Lo)}},!1);var $o=function(e){jo=!1;var t=e-Vo+Ko;tt&&(t=8),Ko=t"+t+"",t=Xo.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}}),Jo={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},ea=["Webkit","ms","Moz","O"];Object.keys(Jo).forEach(function(e){ea.forEach(function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),Jo[t]=Jo[e]})});var ta=kn({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0}),na=Yo.html,ra=wn.thatReturns(""),oa={topAbort:"abort",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topSeeked:"seeked",topSeeking:"seeking",topStalled:"stalled",topSuspend:"suspend",topTimeUpdate:"timeupdate",topVolumeChange:"volumechange",topWaiting:"waiting"},aa=Object.freeze({createElement:ln,createTextNode:un,setInitialProperties:cn,diffProperties:sn,updateProperties:fn,diffHydratedProperties:pn,diffHydratedText:dn,warnForUnmatchedText:function(){},warnForDeletedHydratableElement:function(){},warnForDeletedHydratableText:function(){},warnForInsertedHydratedElement:function(){},warnForInsertedHydratedText:function(){},restoreControlledState:function(e,t,n){switch(t){case"input":if(Bt(e,n),t=n.name,"radio"===n.type&&null!=t){for(n=e;n.parentNode;)n=n.parentNode;for(n=n.querySelectorAll("input[name="+JSON.stringify(""+t)+'][type="radio"]'),t=0;tr&&(o=r,r=e,e=o),o=Le(n,e);var a=Le(n,r);if(o&&a&&(1!==t.rangeCount||t.anchorNode!==o.node||t.anchorOffset!==o.offset||t.focusNode!==a.node||t.focusOffset!==a.offset)){var l=document.createRange();l.setStart(o.node,o.offset),t.removeAllRanges(),e>r?(t.addRange(l),t.extend(a.node,a.offset)):(l.setEnd(a.node,a.offset),t.addRange(l))}}for(t=[],e=n;e=e.parentNode;)1===e.nodeType&&t.push({element:e,left:e.scrollLeft,top:e.scrollTop});for(_n(n),n=0;n