[ { "path": ".github/workflows/node.js.yml", "content": "# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node\n# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions\n\nname: Node.js CI\n\non:\n push:\n branches: [main]\n pull_request:\n branches: [main]\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n node-version: [14.x, 16.x, 18.x]\n\n steps:\n - uses: actions/checkout@v2\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v1\n with:\n node-version: ${{ matrix.node-version }}\n - run: yarn install\n - run: yarn test\n - run: yarn run build\n" }, { "path": ".gitignore", "content": "node_modules\nlib\n*.log\nwebsite/src/flux/docs/\nwebsite/core/metadata.js\nflow/include\n" }, { "path": ".npmignore", "content": "src/\nMakefile\nFlux.js\nCONTRIBUTING.md\n.flowconfig\n" }, { "path": ".prettierrc", "content": "{\n \"bracketSameLine\": true,\n \"bracketSpacing\": false,\n \"printWidth\": 80,\n \"proseWrap\": \"never\",\n \"singleQuote\": true,\n \"trailingComma\": \"all\"\n}\n" }, { "path": ".watchmanconfig", "content": "{}\n" }, { "path": "CHANGELOG.md", "content": "# Changelog\n\n### 4.0.3\n\n- Upgraded `fbjs` to 3.0.1 which fixes [CVE-2021-27292](https://www.whitesourcesoftware.com/vulnerability-database/CVE-2021-27292)\n\n### 4.0.2\n\n- Added support for `UNSAFE_componentWillReceiveProps` lifecycle method\n\n### 4.0.1\n\n- Upgrade `fbemitter` dependency to 3.x\n\n### 4.0.0\n\n- Upgrade `fbjs` dependency to ^3.x\n- Upgrade for Babel 7 compatibility (#495) (thanks to @koba04)\n- Added React 17 as a peer dependency\n\n### 3.1.3\n\n- Added support for React 16\n\n### 3.1.2\n\n- No meaningful changes.\n\n### 3.1.1\n\n- No meaningful changes.\n\n### 3.1.0\n\n- `Dispatcher`: Methods `register` and `unregister` can once again be called in\n the middle of a dispatch.\n\n### 3.0.0\n\n- `FluxMapStore`: Removed. It added very little value over `FluxReduceStore`.\n- `FluxContainer`: Subscriptions are setup in constructor rather than\n `componentDidMount`\n- `FluxContainer`: Can create containers using stateless functional components\n- `FluxContainer`: Uses functional version of `setState`\n- `FluxMixin`: Subscriptions are setup in `componentWillMount` rather than\n `componentDidMount`\n- `Dispatcher`: Methods `register` and `unregister` can not be called in the\n middle of a dispatch\n- `React` added as peer dependency to `flux/utils`\n- Package `dist/FluxUtils.js` alongside `dist/Flux.js`\n\n_**Note**: This is marked as a breaking change due to the large number of small\nchanges in `FluxContainer`. Depending on how coupled code is to the timing of\n`componentWillMount`, `componentDidMount`, or setting state synchronously it is\npossible that there may be some breakages. Generally it should not be an issue._\n\n### 2.1.1\n\n- Publish `dist/` on npm\n\n### 2.1.0\n\n- Add flux-utils which include four main base classes: `Store`, `ReduceStore`,\n `MapStore`, `Container`\n- Add flux-utils example and documentation\n- Upgrade build script\n- Publish a minified version of `Flux` in `dist/`\n- Add flow types to `Dispatcher`\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Code of Conduct\n\nFacebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated.\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to Flux\nWe want to make contributing to this project as easy and transparent as\npossible.\n\n## Code of Conduct\nThe code of conduct is described in [`CODE_OF_CONDUCT.md`](CODE_OF_CONDUCT.md)\n\n## Pull Requests\nWe actively welcome your pull requests.\n\n1. Fork the repo and create your branch from `master`.\n2. If you've added code that should be tested, add tests\n3. If you've changed APIs, update the documentation.\n4. Ensure the test suite passes.\n5. Make sure your code lints.\n6. If you haven't already, complete the Contributor License Agreement (CLA).\n\n## Contributor License Agreement (CLA)\nIn order to accept your pull request, we need you to submit a CLA. You only need\nto do this once to work on any of Facebook's open source projects.\n\nComplete your CLA here: \n\n## Bugs\n\n### Where to Find Known Issues\n\nWe will be using GitHub Issues for our public bugs. We will keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.\n\n### Reporting New Issues\n\nThe best way to get your bug fixed is to provide a reduced test case. jsFiddle, jsBin, and other sites provide a way to give live examples. Those are especially helpful though may not work for `JSX`-based code.\n\n### Security Bugs\n\nFacebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe disclosure of security bugs. With that in mind, please do not file public issues; go through the process outlined on that page.\n\n### Code Conventions\n\n* Use semicolons `;`\n* Commas last `,`\n* 2 spaces for indentation (no tabs)\n* Prefer `'` over `\"`\n* `'use strict';`\n* 80 character line length\n* Write \"attractive\" code\n* Do not use the optional parameters of `setTimeout` and `setInterval`\n\n### Documentation\n\n* Do not wrap lines at 80 characters\n\n## License\n\nBy contributing to Flux, you agree that your contributions will be licensed under its BSD license.\n" }, { "path": "Gulpfile.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\nconst babel = require('gulp-babel');\nconst del = require('del');\nconst flatten = require('gulp-flatten');\nconst gulp = require('gulp');\nconst gulpUtil = require('gulp-util');\nconst header = require('gulp-header');\nconst rename = require('gulp-rename');\nconst webpackStream = require('webpack-stream');\n\nconst babelDefaultOptions = require('./scripts/babel/default-options');\n\nconst DEVELOPMENT_HEADER =\n ['/**', ' * Flux v<%= version %>', ' */'].join('\\n') + '\\n';\nconst PRODUCTION_HEADER =\n [\n '/**',\n ' * Flux v<%= version %>',\n ' *',\n ' * Copyright (c) Meta Platforms, Inc. and affiliates.',\n ' *',\n ' * This source code is licensed under the BSD-style license found in the',\n ' * LICENSE file in the root directory of this source tree. An additional grant',\n ' * of patent rights can be found in the PATENTS file in the same directory.',\n ' */',\n ].join('\\n') + '\\n';\n\nconst paths = {\n dist: './dist/',\n lib: 'lib',\n entry: './index.js',\n entryUtils: './utils.js',\n src: [\n 'src/**/*.js',\n '!src/**/__tests__/**/*.js',\n '!src/**/__mocks__/**/*.js',\n ],\n};\n\nconst buildDist = function (opts) {\n const webpackOpts = {\n debug: opts.debug,\n module: {\n loaders: [{test: /\\.js$/, loader: 'babel'}],\n },\n output: {\n filename: opts.output,\n libraryTarget: 'umd',\n library: opts.library,\n },\n plugins: [\n new webpackStream.webpack.DefinePlugin({\n 'process.env.NODE_ENV': JSON.stringify(\n opts.debug ? 'development' : 'production',\n ),\n }),\n ],\n };\n if (!opts.debug) {\n webpackOpts.plugins.push(\n new webpackStream.webpack.optimize.UglifyJsPlugin({\n compress: {\n hoist_vars: true,\n screw_ie8: true,\n warnings: false,\n },\n }),\n );\n }\n return webpackStream(webpackOpts, null, function (err, stats) {\n if (err) {\n throw new gulpUtil.PluginError('webpack', err);\n }\n if (stats.compilation.errors.length) {\n gulpUtil.log('webpack', '\\n' + stats.toString({colors: true}));\n }\n });\n};\n\ngulp.task('clean', function () {\n return del([paths.lib, 'Flux.js']);\n});\n\ngulp.task('lib', function () {\n return gulp\n .src(paths.src)\n .pipe(babel(babelDefaultOptions))\n .pipe(flatten())\n .pipe(gulp.dest(paths.lib));\n});\n\ngulp.task('flow', function () {\n return gulp\n .src(paths.src)\n .pipe(flatten())\n .pipe(rename({extname: '.js.flow'}))\n .pipe(gulp.dest(paths.lib));\n});\n\ngulp.task(\n 'dist',\n gulp.series('lib', function () {\n const distOpts = {\n debug: true,\n output: 'Flux.js',\n library: 'Flux',\n };\n return gulp\n .src(paths.entry)\n .pipe(buildDist(distOpts))\n .pipe(\n header(DEVELOPMENT_HEADER, {\n version: process.env.npm_package_version,\n }),\n )\n .pipe(gulp.dest(paths.dist));\n }),\n);\n\ngulp.task(\n 'dist:utils',\n gulp.series('lib', function () {\n const distOpts = {\n debug: true,\n output: 'FluxUtils.js',\n library: 'FluxUtils',\n };\n return gulp\n .src(paths.entryUtils)\n .pipe(buildDist(distOpts))\n .pipe(\n header(DEVELOPMENT_HEADER, {\n version: process.env.npm_package_version,\n }),\n )\n .pipe(gulp.dest(paths.dist));\n }),\n);\n\ngulp.task(\n 'dist:min',\n gulp.series('lib', function () {\n const distOpts = {\n debug: false,\n output: 'Flux.min.js',\n library: 'Flux',\n };\n return gulp\n .src(paths.entry)\n .pipe(buildDist(distOpts))\n .pipe(\n header(PRODUCTION_HEADER, {\n version: process.env.npm_package_version,\n }),\n )\n .pipe(gulp.dest(paths.dist));\n }),\n);\n\ngulp.task(\n 'dist:utils:min',\n gulp.series('lib', function () {\n const distOpts = {\n debug: false,\n output: 'FluxUtils.min.js',\n library: 'FluxUtils',\n };\n return gulp\n .src(paths.entryUtils)\n .pipe(buildDist(distOpts))\n .pipe(\n header(PRODUCTION_HEADER, {\n version: process.env.npm_package_version,\n }),\n )\n .pipe(gulp.dest(paths.dist));\n }),\n);\n\ngulp.task('build', gulp.series('lib', 'flow', 'dist', 'dist:utils'));\n\ngulp.task(\n 'publish',\n gulp.series(\n 'clean',\n 'flow',\n gulp.parallel('dist', 'dist:min', 'dist:utils', 'dist:utils:min'),\n ),\n);\n\ngulp.task('default', gulp.series('build'));\n" }, { "path": "LICENSE", "content": "BSD License\n\nFor Flux software\n\nCopyright (c) Facebook, Inc. and its affiliates.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n\n * Redistributions of source code must retain the above copyright notice, this\n list of conditions and the following disclaimer.\n\n * Redistributions in binary form must reproduce the above copyright notice,\n this list of conditions and the following disclaimer in the\n documentation and/or other materials provided with the distribution.\n\n * Neither the name Facebook nor the names of its contributors may be used to\n endorse or promote products derived from this software without specific\n prior written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n" }, { "path": "README.md", "content": "## ⚠️ The Flux project has been archived and no further changes will be made. We recommend using more sophisticated alternatives like [Redux](http://redux.js.org/), [MobX](https://mobx.js.org/), [Recoil](https://recoiljs.org/), [Zustand](https://github.com/pmndrs/zustand), or [Jotai](https://github.com/pmndrs/jotai).\n\n

\n \"logo\"\n

\n

\n Flux\n

\n

\n An application architecture for React utilizing a unidirectional data flow.
\n\n \n \"Licence\n \n \n \"Current\n \n

\n\n
\n\n\n\n## Getting Started\n\nStart by looking through the [guides and examples](./examples) on Github. For more resources and API docs check out [facebook.github.io/flux](https://facebookarchive.github.io/flux).\n\n## How Flux works\n\nFor more information on how Flux works check out the [Flux Concepts](./examples/flux-concepts) guide, or the [In Depth Overview](https://facebookarchive.github.io/flux/docs/in-depth-overview).\n\n## Requirements\n\nFlux is more of a pattern than a framework, and does not have any hard dependencies. However, we often use [EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter) as a basis for `Stores` and [React](https://github.com/facebook/react) for our `Views`. The one piece of Flux not readily available elsewhere is the `Dispatcher`. This module, along with some other utilities, is available here to complete your Flux toolbox.\n\n## Installing Flux\n\nFlux is available as a [npm module](https://www.npmjs.org/package/flux), so you can add it to your package.json file or run `npm install flux`. The dispatcher will be available as `Flux.Dispatcher` and can be required like this:\n\n```javascript\nconst Dispatcher = require('flux').Dispatcher;\n```\n\nTake a look at the [dispatcher API and some examples](https://facebookarchive.github.io/flux/docs/dispatcher).\n\n## Flux Utils\n\nWe have also provided some basic utility classes to help get you started with Flux. These base classes are a solid foundation for a simple Flux application, but they are **not** a feature-complete framework that will handle all use cases. There are many other great Flux frameworks out there if these utilities do not fulfill your needs.\n\n```js\nimport {ReduceStore} from 'flux/utils';\n\nclass CounterStore extends ReduceStore {\n getInitialState(): number {\n return 0;\n }\n\n reduce(state: number, action: Object): number {\n switch (action.type) {\n case 'increment':\n return state + 1;\n\n case 'square':\n return state * state;\n\n default:\n return state;\n }\n }\n}\n```\n\nCheck out the [examples](./examples) and [documentation](https://facebookarchive.github.io/flux/docs/flux-utils) for more information.\n\n## Building Flux from a Cloned Repo\n\nClone the repo and navigate into the resulting `flux` directory. Then run `npm install`.\n\nThis will run [Gulp](https://gulpjs.com/)-based build tasks automatically and produce the file Flux.js, which you can then require as a module.\n\nYou could then require the Dispatcher like so:\n\n```javascript\nconst Dispatcher = require('path/to/this/directory/Flux').Dispatcher;\n```\n\nThe build process also produces de-sugared versions of the `Dispatcher` and `invariant` modules in a `lib` directory, and you can require those modules directly, copying them into whatever directory is most convenient for you. The `flux-todomvc` and `flux-chat` example applications both do this.\n\n## License\n\nFlux is BSD-licensed. We also provide an additional patent grant.\n" }, { "path": "bower.json", "content": "{\n \"name\": \"flux\",\n \"description\": \"An application architecture based on a unidirectional data flow\",\n \"version\": \"2.1.1\",\n \"main\": \"dist/Flux.js\",\n \"license\": \"https://github.com/facebook/flux/blob/master/LICENSE\",\n \"homepage\": \"https://facebook.github.io/flux/\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/facebook/flux.git\"\n },\n \"authors\": [\n \"Facebook\",\n \"Jing Chen \",\n \"Bill Fisher \",\n \"Paul O'Shannessy \"\n ],\n \"keywords\": [\n \"flux\",\n \"dispatcher\",\n \"react\",\n \"facebook\"\n ],\n \"ignore\": [\n \"**/.*\",\n \"node_modules\",\n \"bower_components\",\n \"test\",\n \"tests\",\n \"docs\",\n \"examples\",\n \"src\",\n \"lib\",\n \"website\",\n \"CONTRIBUTING.md\",\n \"Gulpfile.js\",\n \"index.js\",\n \"package.json\"\n ]\n}\n" }, { "path": "dist/Flux.js", "content": "/**\n * Flux v4.0.4\n */\n(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Flux\"] = factory();\n\telse\n\t\troot[\"Flux\"] = factory();\n})(this, function() {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n\n\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\n\t * Copyright (c) Meta Platforms, Inc. and affiliates.\n\t * All rights reserved.\n\t *\n\t * This source code is licensed under the BSD-style license found in the\n\t * LICENSE file in the root directory of this source tree. An additional grant\n\t * of patent rights can be found in the PATENTS file in the same directory.\n\t */\n\n\tmodule.exports.Dispatcher = __webpack_require__(1);\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\n\t * Copyright (c) Meta Platforms, Inc. and affiliates.\n\t * All rights reserved.\n\t *\n\t * This source code is licensed under the BSD-style license found in the\n\t * LICENSE file in the root directory of this source tree. An additional grant\n\t * of patent rights can be found in the PATENTS file in the same directory.\n\t *\n\t * @providesModule Dispatcher\n\t * \n\t * @preventMunge\n\t */\n\n\t'use strict';\n\n\tfunction _defineProperty(obj, key, value) {\n\t key = _toPropertyKey(key);\n\t if (key in obj) {\n\t Object.defineProperty(obj, key, {\n\t value: value,\n\t enumerable: true,\n\t configurable: true,\n\t writable: true\n\t });\n\t } else {\n\t obj[key] = value;\n\t }\n\t return obj;\n\t}\n\tfunction _toPropertyKey(arg) {\n\t var key = _toPrimitive(arg, \"string\");\n\t return typeof key === \"symbol\" ? key : String(key);\n\t}\n\tfunction _toPrimitive(input, hint) {\n\t if (typeof input !== \"object\" || input === null) return input;\n\t var prim = input[Symbol.toPrimitive];\n\t if (prim !== undefined) {\n\t var res = prim.call(input, hint || \"default\");\n\t if (typeof res !== \"object\") return res;\n\t throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n\t }\n\t return (hint === \"string\" ? String : Number)(input);\n\t}\n\tvar invariant = __webpack_require__(2);\n\tvar _prefix = 'ID_';\n\n\t/**\n\t * Dispatcher is used to broadcast payloads to registered callbacks. This is\n\t * different from generic pub-sub systems in two ways:\n\t *\n\t * 1) Callbacks are not subscribed to particular events. Every payload is\n\t * dispatched to every registered callback.\n\t * 2) Callbacks can be deferred in whole or part until other callbacks have\n\t * been executed.\n\t *\n\t * For example, consider this hypothetical flight destination form, which\n\t * selects a default city when a country is selected:\n\t *\n\t * var flightDispatcher = new Dispatcher();\n\t *\n\t * // Keeps track of which country is selected\n\t * var CountryStore = {country: null};\n\t *\n\t * // Keeps track of which city is selected\n\t * var CityStore = {city: null};\n\t *\n\t * // Keeps track of the base flight price of the selected city\n\t * var FlightPriceStore = {price: null}\n\t *\n\t * When a user changes the selected city, we dispatch the payload:\n\t *\n\t * flightDispatcher.dispatch({\n\t * actionType: 'city-update',\n\t * selectedCity: 'paris'\n\t * });\n\t *\n\t * This payload is digested by `CityStore`:\n\t *\n\t * flightDispatcher.register(function(payload) {\n\t * if (payload.actionType === 'city-update') {\n\t * CityStore.city = payload.selectedCity;\n\t * }\n\t * });\n\t *\n\t * When the user selects a country, we dispatch the payload:\n\t *\n\t * flightDispatcher.dispatch({\n\t * actionType: 'country-update',\n\t * selectedCountry: 'australia'\n\t * });\n\t *\n\t * This payload is digested by both stores:\n\t *\n\t * CountryStore.dispatchToken = flightDispatcher.register(function(payload) {\n\t * if (payload.actionType === 'country-update') {\n\t * CountryStore.country = payload.selectedCountry;\n\t * }\n\t * });\n\t *\n\t * When the callback to update `CountryStore` is registered, we save a reference\n\t * to the returned token. Using this token with `waitFor()`, we can guarantee\n\t * that `CountryStore` is updated before the callback that updates `CityStore`\n\t * needs to query its data.\n\t *\n\t * CityStore.dispatchToken = flightDispatcher.register(function(payload) {\n\t * if (payload.actionType === 'country-update') {\n\t * // `CountryStore.country` may not be updated.\n\t * flightDispatcher.waitFor([CountryStore.dispatchToken]);\n\t * // `CountryStore.country` is now guaranteed to be updated.\n\t *\n\t * // Select the default city for the new country\n\t * CityStore.city = getDefaultCityForCountry(CountryStore.country);\n\t * }\n\t * });\n\t *\n\t * The usage of `waitFor()` can be chained, for example:\n\t *\n\t * FlightPriceStore.dispatchToken =\n\t * flightDispatcher.register(function(payload) {\n\t * switch (payload.actionType) {\n\t * case 'country-update':\n\t * case 'city-update':\n\t * flightDispatcher.waitFor([CityStore.dispatchToken]);\n\t * FlightPriceStore.price =\n\t * getFlightPriceStore(CountryStore.country, CityStore.city);\n\t * break;\n\t * }\n\t * });\n\t *\n\t * The `country-update` payload will be guaranteed to invoke the stores'\n\t * registered callbacks in order: `CountryStore`, `CityStore`, then\n\t * `FlightPriceStore`.\n\t */\n\tvar Dispatcher = /*#__PURE__*/function () {\n\t function Dispatcher() {\n\t _defineProperty(this, \"_callbacks\", void 0);\n\t _defineProperty(this, \"_isDispatching\", void 0);\n\t _defineProperty(this, \"_isHandled\", void 0);\n\t _defineProperty(this, \"_isPending\", void 0);\n\t _defineProperty(this, \"_lastID\", void 0);\n\t _defineProperty(this, \"_pendingPayload\", void 0);\n\t this._callbacks = {};\n\t this._isDispatching = false;\n\t this._isHandled = {};\n\t this._isPending = {};\n\t this._lastID = 1;\n\t }\n\n\t /**\n\t * Registers a callback to be invoked with every dispatched payload. Returns\n\t * a token that can be used with `waitFor()`.\n\t */\n\t var _proto = Dispatcher.prototype;\n\t _proto.register = function register(callback) {\n\t var id = _prefix + this._lastID++;\n\t this._callbacks[id] = callback;\n\t return id;\n\t }\n\n\t /**\n\t * Removes a callback based on its token.\n\t */;\n\t _proto.unregister = function unregister(id) {\n\t !this._callbacks[id] ? true ? invariant(false, 'Dispatcher.unregister(...): `%s` does not map to a registered callback.', id) : invariant(false) : void 0;\n\t delete this._callbacks[id];\n\t }\n\n\t /**\n\t * Waits for the callbacks specified to be invoked before continuing execution\n\t * of the current callback. This method should only be used by a callback in\n\t * response to a dispatched payload.\n\t */;\n\t _proto.waitFor = function waitFor(ids) {\n\t !this._isDispatching ? true ? invariant(false, 'Dispatcher.waitFor(...): Must be invoked while dispatching.') : invariant(false) : void 0;\n\t for (var ii = 0; ii < ids.length; ii++) {\n\t var id = ids[ii];\n\t if (this._isPending[id]) {\n\t !this._isHandled[id] ? true ? invariant(false, 'Dispatcher.waitFor(...): Circular dependency detected while ' + 'waiting for `%s`.', id) : invariant(false) : void 0;\n\t continue;\n\t }\n\t !this._callbacks[id] ? true ? invariant(false, 'Dispatcher.waitFor(...): `%s` does not map to a registered callback.', id) : invariant(false) : void 0;\n\t this._invokeCallback(id);\n\t }\n\t }\n\n\t /**\n\t * Dispatches a payload to all registered callbacks.\n\t */;\n\t _proto.dispatch = function dispatch(payload) {\n\t !!this._isDispatching ? true ? invariant(false, 'Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.') : invariant(false) : void 0;\n\t this._startDispatching(payload);\n\t try {\n\t for (var id in this._callbacks) {\n\t if (this._isPending[id]) {\n\t continue;\n\t }\n\t this._invokeCallback(id);\n\t }\n\t } finally {\n\t this._stopDispatching();\n\t }\n\t }\n\n\t /**\n\t * Is this Dispatcher currently dispatching.\n\t */;\n\t _proto.isDispatching = function isDispatching() {\n\t return this._isDispatching;\n\t }\n\n\t /**\n\t * Call the callback stored with the given id. Also do some internal\n\t * bookkeeping.\n\t *\n\t * @internal\n\t */;\n\t _proto._invokeCallback = function _invokeCallback(id) {\n\t this._isPending[id] = true;\n\t this._callbacks[id](this._pendingPayload);\n\t this._isHandled[id] = true;\n\t }\n\n\t /**\n\t * Set up bookkeeping needed when dispatching.\n\t *\n\t * @internal\n\t */;\n\t _proto._startDispatching = function _startDispatching(payload) {\n\t for (var id in this._callbacks) {\n\t this._isPending[id] = false;\n\t this._isHandled[id] = false;\n\t }\n\t this._pendingPayload = payload;\n\t this._isDispatching = true;\n\t }\n\n\t /**\n\t * Clear bookkeeping used for dispatching.\n\t *\n\t * @internal\n\t */;\n\t _proto._stopDispatching = function _stopDispatching() {\n\t delete this._pendingPayload;\n\t this._isDispatching = false;\n\t };\n\t return Dispatcher;\n\t}();\n\tmodule.exports = Dispatcher;\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\n\t * Copyright (c) 2013-present, Facebook, Inc.\n\t *\n\t * This source code is licensed under the MIT license found in the\n\t * LICENSE file in the root directory of this source tree.\n\t *\n\t * \n\t */\n\t'use strict';\n\n\tvar validateFormat = true ? function (format) {\n\t if (format === undefined) {\n\t throw new Error('invariant(...): Second argument must be a string.');\n\t }\n\t} : function (format) {};\n\t/**\n\t * Use invariant() to assert state which your program assumes to be true.\n\t *\n\t * Provide sprintf-style format (only %s is supported) and arguments to provide\n\t * information about what broke and what you were expecting.\n\t *\n\t * The invariant message will be stripped in production, but the invariant will\n\t * remain to ensure logic does not differ in production.\n\t */\n\n\tfunction invariant(condition, format) {\n\t for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {\n\t args[_key - 2] = arguments[_key];\n\t }\n\t validateFormat(format);\n\t if (!condition) {\n\t var error;\n\t if (format === undefined) {\n\t error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');\n\t } else {\n\t var argIndex = 0;\n\t error = new Error(format.replace(/%s/g, function () {\n\t return String(args[argIndex++]);\n\t }));\n\t error.name = 'Invariant Violation';\n\t }\n\t error.framesToPop = 1; // Skip invariant's own stack frame.\n\n\t throw error;\n\t }\n\t}\n\tmodule.exports = invariant;\n\n/***/ })\n/******/ ])\n});\n;" }, { "path": "dist/FluxUtils.js", "content": "/**\n * Flux v4.0.4\n */\n(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"FluxUtils\"] = factory();\n\telse\n\t\troot[\"FluxUtils\"] = factory();\n})(this, function() {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n\n\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\n\t * Copyright (c) Meta Platforms, Inc. and affiliates.\n\t * All rights reserved.\n\t *\n\t * This source code is licensed under the BSD-style license found in the\n\t * LICENSE file in the root directory of this source tree. An additional grant\n\t * of patent rights can be found in the PATENTS file in the same directory.\n\t */\n\n\tmodule.exports.Container = __webpack_require__(1);\n\tmodule.exports.Mixin = __webpack_require__(9);\n\tmodule.exports.ReduceStore = __webpack_require__(10);\n\tmodule.exports.Store = __webpack_require__(11);\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\n\t * Copyright (c) Meta Platforms, Inc. and affiliates.\n\t * All rights reserved.\n\t *\n\t * This source code is licensed under the BSD-style license found in the\n\t * LICENSE file in the root directory of this source tree. An additional grant\n\t * of patent rights can be found in the PATENTS file in the same directory.\n\t *\n\t * @providesModule FluxContainer\n\t * \n\t */\n\n\t'use strict';\n\n\tfunction _assertThisInitialized(self) {\n\t if (self === void 0) {\n\t throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n\t }\n\t return self;\n\t}\n\tfunction _inheritsLoose(subClass, superClass) {\n\t subClass.prototype = Object.create(superClass.prototype);\n\t subClass.prototype.constructor = subClass;\n\t _setPrototypeOf(subClass, superClass);\n\t}\n\tfunction _setPrototypeOf(o, p) {\n\t _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {\n\t o.__proto__ = p;\n\t return o;\n\t };\n\t return _setPrototypeOf(o, p);\n\t}\n\tfunction ownKeys(object, enumerableOnly) {\n\t var keys = Object.keys(object);\n\t if (Object.getOwnPropertySymbols) {\n\t var symbols = Object.getOwnPropertySymbols(object);\n\t enumerableOnly && (symbols = symbols.filter(function (sym) {\n\t return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n\t })), keys.push.apply(keys, symbols);\n\t }\n\t return keys;\n\t}\n\tfunction _objectSpread(target) {\n\t for (var i = 1; i < arguments.length; i++) {\n\t var source = null != arguments[i] ? arguments[i] : {};\n\t i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n\t _defineProperty(target, key, source[key]);\n\t }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n\t Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n\t });\n\t }\n\t return target;\n\t}\n\tfunction _defineProperty(obj, key, value) {\n\t key = _toPropertyKey(key);\n\t if (key in obj) {\n\t Object.defineProperty(obj, key, {\n\t value: value,\n\t enumerable: true,\n\t configurable: true,\n\t writable: true\n\t });\n\t } else {\n\t obj[key] = value;\n\t }\n\t return obj;\n\t}\n\tfunction _toPropertyKey(arg) {\n\t var key = _toPrimitive(arg, \"string\");\n\t return typeof key === \"symbol\" ? key : String(key);\n\t}\n\tfunction _toPrimitive(input, hint) {\n\t if (typeof input !== \"object\" || input === null) return input;\n\t var prim = input[Symbol.toPrimitive];\n\t if (prim !== undefined) {\n\t var res = prim.call(input, hint || \"default\");\n\t if (typeof res !== \"object\") return res;\n\t throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n\t }\n\t return (hint === \"string\" ? String : Number)(input);\n\t}\n\tvar FluxContainerSubscriptions = __webpack_require__(2);\n\tvar React = __webpack_require__(5);\n\tvar invariant = __webpack_require__(4);\n\tvar shallowEqual = __webpack_require__(8);\n\tvar Component = React.Component;\n\tvar DEFAULT_OPTIONS = {\n\t pure: true,\n\t withProps: false,\n\t withContext: false\n\t};\n\n\t/**\n\t * A FluxContainer is used to subscribe a react component to multiple stores.\n\t * The stores that are used must be returned from a static `getStores()` method.\n\t *\n\t * The component receives information from the stores via state. The state\n\t * is generated using a static `calculateState()` method that each container\n\t * must implement. A simple container may look like:\n\t *\n\t * class FooContainer extends Component {\n\t * static getStores() {\n\t * return [FooStore];\n\t * }\n\t *\n\t * static calculateState() {\n\t * return {\n\t * foo: FooStore.getState(),\n\t * };\n\t * }\n\t *\n\t * render() {\n\t * return ;\n\t * }\n\t * }\n\t *\n\t * module.exports = FluxContainer.create(FooContainer);\n\t *\n\t * Flux container also supports some other, more advanced use cases. If you need\n\t * to base your state off of props as well:\n\t *\n\t * class FooContainer extends Component {\n\t * ...\n\t *\n\t * static calculateState(prevState, props) {\n\t * return {\n\t * foo: FooStore.getSpecificFoo(props.id),\n\t * };\n\t * }\n\t *\n\t * ...\n\t * }\n\t *\n\t * module.exports = FluxContainer.create(FooContainer, {withProps: true});\n\t *\n\t * Or if your stores are passed through your props:\n\t *\n\t * class FooContainer extends Component {\n\t * ...\n\t *\n\t * static getStores(props) {\n\t * const {BarStore, FooStore} = props.stores;\n\t * return [BarStore, FooStore];\n\t * }\n\t *\n\t * static calculateState(prevState, props) {\n\t * const {BarStore, FooStore} = props.stores;\n\t * return {\n\t * bar: BarStore.getState(),\n\t * foo: FooStore.getState(),\n\t * };\n\t * }\n\t *\n\t * ...\n\t * }\n\t *\n\t * module.exports = FluxContainer.create(FooContainer, {withProps: true});\n\t */\n\tfunction create(Base, options) {\n\t enforceInterface(Base);\n\n\t // Construct the options using default, override with user values as necessary.\n\t var realOptions = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS), options || {});\n\t var getState = function getState(state, maybeProps, maybeContext) {\n\t var props = realOptions.withProps ? maybeProps : undefined;\n\t var context = realOptions.withContext ? maybeContext : undefined;\n\t return Base.calculateState(state, props, context);\n\t };\n\t var getStores = function getStores(maybeProps, maybeContext) {\n\t var props = realOptions.withProps ? maybeProps : undefined;\n\t var context = realOptions.withContext ? maybeContext : undefined;\n\t return Base.getStores(props, context);\n\t };\n\n\t // Build the container class.\n\t var ContainerClass = /*#__PURE__*/function (_Base) {\n\t _inheritsLoose(ContainerClass, _Base);\n\t function ContainerClass(props, context) {\n\t var _this;\n\t _this = _Base.call(this, props, context) || this;\n\t _defineProperty(_assertThisInitialized(_this), \"_fluxContainerSubscriptions\", void 0);\n\t _this._fluxContainerSubscriptions = new FluxContainerSubscriptions();\n\t _this._fluxContainerSubscriptions.setStores(getStores(props, context));\n\t _this._fluxContainerSubscriptions.addListener(function () {\n\t _this.setState(function (prevState, currentProps) {\n\t return getState(prevState, currentProps, context);\n\t });\n\t });\n\t var calculatedState = getState(undefined, props, context);\n\t _this.state = _objectSpread(_objectSpread({}, _this.state || {}), calculatedState);\n\t return _this;\n\t }\n\t var _proto = ContainerClass.prototype;\n\t _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps, nextContext) {\n\t if (_Base.prototype.UNSAFE_componentWillReceiveProps) {\n\t _Base.prototype.UNSAFE_componentWillReceiveProps.call(this, nextProps, nextContext);\n\t }\n\t if (_Base.prototype.componentWillReceiveProps) {\n\t _Base.prototype.componentWillReceiveProps.call(this, nextProps, nextContext);\n\t }\n\t if (realOptions.withProps || realOptions.withContext) {\n\t // Update both stores and state.\n\t this._fluxContainerSubscriptions.setStores(getStores(nextProps, nextContext));\n\t this.setState(function (prevState) {\n\t return getState(prevState, nextProps, nextContext);\n\t });\n\t }\n\t };\n\t _proto.componentWillUnmount = function componentWillUnmount() {\n\t if (_Base.prototype.componentWillUnmount) {\n\t _Base.prototype.componentWillUnmount.call(this);\n\t }\n\t this._fluxContainerSubscriptions.reset();\n\t };\n\t return ContainerClass;\n\t }(Base); // Make sure we override shouldComponentUpdate only if the pure option is\n\t // specified. We can't override this above because we don't want to override\n\t // the default behavior on accident. Super works weird with react ES6 classes.\n\t var container = realOptions.pure ? createPureComponent(ContainerClass) : ContainerClass;\n\n\t // Update the name of the container before returning\n\t var componentName = Base.displayName || Base.name;\n\t container.displayName = 'FluxContainer(' + componentName + ')';\n\t return container;\n\t}\n\tfunction createPureComponent(BaseComponent) {\n\t var PureComponent = /*#__PURE__*/function (_BaseComponent) {\n\t _inheritsLoose(PureComponent, _BaseComponent);\n\t function PureComponent() {\n\t return _BaseComponent.apply(this, arguments) || this;\n\t }\n\t var _proto2 = PureComponent.prototype;\n\t _proto2.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {\n\t return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);\n\t };\n\t return PureComponent;\n\t }(BaseComponent);\n\t return PureComponent;\n\t}\n\tfunction enforceInterface(o) {\n\t !o.getStores ? true ? invariant(false, 'Components that use FluxContainer must implement `static getStores()`') : invariant(false) : void 0;\n\t !o.calculateState ? true ? invariant(false, 'Components that use FluxContainer must implement `static calculateState()`') : invariant(false) : void 0;\n\t}\n\n\t/**\n\t * This is a way to connect stores to a functional stateless view. Here's a\n\t * simple example:\n\t *\n\t * // FooView.js\n\t *\n\t * function FooView(props) {\n\t * return
{props.value}
;\n\t * }\n\t *\n\t * module.exports = FooView;\n\t *\n\t *\n\t * // FooContainer.js\n\t *\n\t * function getStores() {\n\t * return [FooStore];\n\t * }\n\t *\n\t * function calculateState() {\n\t * return {\n\t * value: FooStore.getState();\n\t * };\n\t * }\n\t *\n\t * module.exports = FluxContainer.createFunctional(\n\t * FooView,\n\t * getStores,\n\t * calculateState,\n\t * );\n\t *\n\t */\n\tfunction createFunctional(viewFn, _getStores, _calculateState, options) {\n\t var FunctionalContainer = /*#__PURE__*/function (_Component) {\n\t _inheritsLoose(FunctionalContainer, _Component);\n\t function FunctionalContainer() {\n\t var _this2;\n\t for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n\t args[_key] = arguments[_key];\n\t }\n\t _this2 = _Component.call.apply(_Component, [this].concat(args)) || this;\n\t _defineProperty(_assertThisInitialized(_this2), \"state\", void 0);\n\t return _this2;\n\t }\n\t FunctionalContainer.getStores = function getStores(props, context) {\n\t return _getStores(props, context);\n\t };\n\t FunctionalContainer.calculateState = function calculateState(prevState, props, context) {\n\t return _calculateState(prevState, props, context);\n\t };\n\t var _proto3 = FunctionalContainer.prototype;\n\t _proto3.render = function render() {\n\t return viewFn(this.state);\n\t };\n\t return FunctionalContainer;\n\t }(Component); // Update the name of the component before creating the container.\n\t var viewFnName = viewFn.displayName || viewFn.name || 'FunctionalContainer';\n\t FunctionalContainer.displayName = viewFnName;\n\t return create(FunctionalContainer, options);\n\t}\n\tmodule.exports = {\n\t create: create,\n\t createFunctional: createFunctional\n\t};\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\n\t * Copyright (c) Meta Platforms, Inc. and affiliates. All rights reserved.\n\t *\n\t * This source code is licensed under the BSD-style license found in the\n\t * LICENSE file in the root directory of this source tree. An additional grant\n\t * of patent rights can be found in the PATENTS file in the same directory.\n\t *\n\t * @providesModule FluxContainerSubscriptions\n\t * \n\t */\n\n\t'use strict';\n\n\tfunction _defineProperty(obj, key, value) {\n\t key = _toPropertyKey(key);\n\t if (key in obj) {\n\t Object.defineProperty(obj, key, {\n\t value: value,\n\t enumerable: true,\n\t configurable: true,\n\t writable: true\n\t });\n\t } else {\n\t obj[key] = value;\n\t }\n\t return obj;\n\t}\n\tfunction _toPropertyKey(arg) {\n\t var key = _toPrimitive(arg, \"string\");\n\t return typeof key === \"symbol\" ? key : String(key);\n\t}\n\tfunction _toPrimitive(input, hint) {\n\t if (typeof input !== \"object\" || input === null) return input;\n\t var prim = input[Symbol.toPrimitive];\n\t if (prim !== undefined) {\n\t var res = prim.call(input, hint || \"default\");\n\t if (typeof res !== \"object\") return res;\n\t throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n\t }\n\t return (hint === \"string\" ? String : Number)(input);\n\t}\n\tvar FluxStoreGroup = __webpack_require__(3);\n\tfunction shallowArrayEqual(a, b) {\n\t if (a === b) {\n\t return true;\n\t }\n\t if (a.length !== b.length) {\n\t return false;\n\t }\n\t for (var i = 0; i < a.length; i++) {\n\t if (a[i] !== b[i]) {\n\t return false;\n\t }\n\t }\n\t return true;\n\t}\n\tvar FluxContainerSubscriptions = /*#__PURE__*/function () {\n\t function FluxContainerSubscriptions() {\n\t _defineProperty(this, \"_callbacks\", void 0);\n\t _defineProperty(this, \"_storeGroup\", void 0);\n\t _defineProperty(this, \"_stores\", void 0);\n\t _defineProperty(this, \"_tokens\", void 0);\n\t this._callbacks = [];\n\t }\n\t var _proto = FluxContainerSubscriptions.prototype;\n\t _proto.setStores = function setStores(stores) {\n\t var _this = this;\n\t if (this._stores && shallowArrayEqual(this._stores, stores)) {\n\t return;\n\t }\n\t this._stores = stores;\n\t this._resetTokens();\n\t this._resetStoreGroup();\n\t var changed = false;\n\t var changedStores = [];\n\t if (true) {\n\t // Keep track of the stores that changed for debugging purposes only\n\t this._tokens = stores.map(function (store) {\n\t return store.addListener(function () {\n\t changed = true;\n\t changedStores.push(store);\n\t });\n\t });\n\t } else {\n\t var setChanged = function setChanged() {\n\t changed = true;\n\t };\n\t this._tokens = stores.map(function (store) {\n\t return store.addListener(setChanged);\n\t });\n\t }\n\t var callCallbacks = function callCallbacks() {\n\t if (changed) {\n\t _this._callbacks.forEach(function (fn) {\n\t return fn();\n\t });\n\t changed = false;\n\t if (true) {\n\t // Uncomment this to print the stores that changed.\n\t // console.log(changedStores);\n\t changedStores = [];\n\t }\n\t }\n\t };\n\t this._storeGroup = new FluxStoreGroup(stores, callCallbacks);\n\t };\n\t _proto.addListener = function addListener(fn) {\n\t this._callbacks.push(fn);\n\t };\n\t _proto.reset = function reset() {\n\t this._resetTokens();\n\t this._resetStoreGroup();\n\t this._resetCallbacks();\n\t this._resetStores();\n\t };\n\t _proto._resetTokens = function _resetTokens() {\n\t if (this._tokens) {\n\t this._tokens.forEach(function (token) {\n\t return token.remove();\n\t });\n\t this._tokens = null;\n\t }\n\t };\n\t _proto._resetStoreGroup = function _resetStoreGroup() {\n\t if (this._storeGroup) {\n\t this._storeGroup.release();\n\t this._storeGroup = null;\n\t }\n\t };\n\t _proto._resetStores = function _resetStores() {\n\t this._stores = null;\n\t };\n\t _proto._resetCallbacks = function _resetCallbacks() {\n\t this._callbacks = [];\n\t };\n\t return FluxContainerSubscriptions;\n\t}();\n\tmodule.exports = FluxContainerSubscriptions;\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\n\t * Copyright (c) Meta Platforms, Inc. and affiliates.\n\t * All rights reserved.\n\t *\n\t * This source code is licensed under the BSD-style license found in the\n\t * LICENSE file in the root directory of this source tree. An additional grant\n\t * of patent rights can be found in the PATENTS file in the same directory.\n\t *\n\t * @providesModule FluxStoreGroup\n\t * \n\t */\n\n\t'use strict';\n\n\tfunction _createForOfIteratorHelper(o, allowArrayLike) {\n\t var it = typeof Symbol !== \"undefined\" && o[Symbol.iterator] || o[\"@@iterator\"];\n\t if (!it) {\n\t if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") {\n\t if (it) o = it;\n\t var i = 0;\n\t var F = function F() {};\n\t return {\n\t s: F,\n\t n: function n() {\n\t if (i >= o.length) return {\n\t done: true\n\t };\n\t return {\n\t done: false,\n\t value: o[i++]\n\t };\n\t },\n\t e: function e(_e) {\n\t throw _e;\n\t },\n\t f: F\n\t };\n\t }\n\t throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n\t }\n\t var normalCompletion = true,\n\t didErr = false,\n\t err;\n\t return {\n\t s: function s() {\n\t it = it.call(o);\n\t },\n\t n: function n() {\n\t var step = it.next();\n\t normalCompletion = step.done;\n\t return step;\n\t },\n\t e: function e(_e2) {\n\t didErr = true;\n\t err = _e2;\n\t },\n\t f: function f() {\n\t try {\n\t if (!normalCompletion && it[\"return\"] != null) it[\"return\"]();\n\t } finally {\n\t if (didErr) throw err;\n\t }\n\t }\n\t };\n\t}\n\tfunction _unsupportedIterableToArray(o, minLen) {\n\t if (!o) return;\n\t if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n\t var n = Object.prototype.toString.call(o).slice(8, -1);\n\t if (n === \"Object\" && o.constructor) n = o.constructor.name;\n\t if (n === \"Map\" || n === \"Set\") return Array.from(o);\n\t if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n\t}\n\tfunction _arrayLikeToArray(arr, len) {\n\t if (len == null || len > arr.length) len = arr.length;\n\t for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n\t return arr2;\n\t}\n\tfunction _defineProperty(obj, key, value) {\n\t key = _toPropertyKey(key);\n\t if (key in obj) {\n\t Object.defineProperty(obj, key, {\n\t value: value,\n\t enumerable: true,\n\t configurable: true,\n\t writable: true\n\t });\n\t } else {\n\t obj[key] = value;\n\t }\n\t return obj;\n\t}\n\tfunction _toPropertyKey(arg) {\n\t var key = _toPrimitive(arg, \"string\");\n\t return typeof key === \"symbol\" ? key : String(key);\n\t}\n\tfunction _toPrimitive(input, hint) {\n\t if (typeof input !== \"object\" || input === null) return input;\n\t var prim = input[Symbol.toPrimitive];\n\t if (prim !== undefined) {\n\t var res = prim.call(input, hint || \"default\");\n\t if (typeof res !== \"object\") return res;\n\t throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n\t }\n\t return (hint === \"string\" ? String : Number)(input);\n\t}\n\tvar invariant = __webpack_require__(4);\n\t/**\n\t * FluxStoreGroup allows you to execute a callback on every dispatch after\n\t * waiting for each of the given stores.\n\t */\n\tvar FluxStoreGroup = /*#__PURE__*/function () {\n\t function FluxStoreGroup(stores, callback) {\n\t var _this = this;\n\t _defineProperty(this, \"_dispatcher\", void 0);\n\t _defineProperty(this, \"_dispatchToken\", void 0);\n\t this._dispatcher = _getUniformDispatcher(stores);\n\n\t // Precompute store tokens.\n\t var storeTokens = stores.map(function (store) {\n\t return store.getDispatchToken();\n\t });\n\n\t // Register with the dispatcher.\n\t this._dispatchToken = this._dispatcher.register(function (payload) {\n\t _this._dispatcher.waitFor(storeTokens);\n\t callback();\n\t });\n\t }\n\t var _proto = FluxStoreGroup.prototype;\n\t _proto.release = function release() {\n\t this._dispatcher.unregister(this._dispatchToken);\n\t };\n\t return FluxStoreGroup;\n\t}();\n\tfunction _getUniformDispatcher(stores) {\n\t !(stores && stores.length) ? true ? invariant(false, 'Must provide at least one store to FluxStoreGroup') : invariant(false) : void 0;\n\t var dispatcher = stores[0].getDispatcher();\n\t if (true) {\n\t var _iterator = _createForOfIteratorHelper(stores),\n\t _step;\n\t try {\n\t for (_iterator.s(); !(_step = _iterator.n()).done;) {\n\t var store = _step.value;\n\t !(store.getDispatcher() === dispatcher) ? true ? invariant(false, 'All stores in a FluxStoreGroup must use the same dispatcher') : invariant(false) : void 0;\n\t }\n\t } catch (err) {\n\t _iterator.e(err);\n\t } finally {\n\t _iterator.f();\n\t }\n\t }\n\t return dispatcher;\n\t}\n\tmodule.exports = FluxStoreGroup;\n\n/***/ }),\n/* 4 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\n\t * Copyright (c) 2013-present, Facebook, Inc.\n\t *\n\t * This source code is licensed under the MIT license found in the\n\t * LICENSE file in the root directory of this source tree.\n\t *\n\t * \n\t */\n\t'use strict';\n\n\tvar validateFormat = true ? function (format) {\n\t if (format === undefined) {\n\t throw new Error('invariant(...): Second argument must be a string.');\n\t }\n\t} : function (format) {};\n\t/**\n\t * Use invariant() to assert state which your program assumes to be true.\n\t *\n\t * Provide sprintf-style format (only %s is supported) and arguments to provide\n\t * information about what broke and what you were expecting.\n\t *\n\t * The invariant message will be stripped in production, but the invariant will\n\t * remain to ensure logic does not differ in production.\n\t */\n\n\tfunction invariant(condition, format) {\n\t for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {\n\t args[_key - 2] = arguments[_key];\n\t }\n\t validateFormat(format);\n\t if (!condition) {\n\t var error;\n\t if (format === undefined) {\n\t error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');\n\t } else {\n\t var argIndex = 0;\n\t error = new Error(format.replace(/%s/g, function () {\n\t return String(args[argIndex++]);\n\t }));\n\t error.name = 'Invariant Violation';\n\t }\n\t error.framesToPop = 1; // Skip invariant's own stack frame.\n\n\t throw error;\n\t }\n\t}\n\tmodule.exports = invariant;\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\n\tif (false) {\n\t module.exports = require('./cjs/react.production.min.js');\n\t} else {\n\t module.exports = __webpack_require__(6);\n\t}\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/** @license React v17.0.2\n\t * react.development.js\n\t *\n\t * Copyright (c) Facebook, Inc. and its affiliates.\n\t *\n\t * This source code is licensed under the MIT license found in the\n\t * LICENSE file in the root directory of this source tree.\n\t */\n\n\t'use strict';\n\n\tif (true) {\n\t (function () {\n\t 'use strict';\n\n\t var _assign = __webpack_require__(7);\n\n\t // TODO: this is special because it gets imported during build.\n\t var ReactVersion = '17.0.2';\n\n\t // ATTENTION\n\t // When adding new symbols to this file,\n\t // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'\n\t // The Symbol used to tag the ReactElement-like types. If there is no native Symbol\n\t // nor polyfill, then a plain number is used for performance.\n\t var REACT_ELEMENT_TYPE = 0xeac7;\n\t var REACT_PORTAL_TYPE = 0xeaca;\n\t exports.Fragment = 0xeacb;\n\t exports.StrictMode = 0xeacc;\n\t exports.Profiler = 0xead2;\n\t var REACT_PROVIDER_TYPE = 0xeacd;\n\t var REACT_CONTEXT_TYPE = 0xeace;\n\t var REACT_FORWARD_REF_TYPE = 0xead0;\n\t exports.Suspense = 0xead1;\n\t var REACT_SUSPENSE_LIST_TYPE = 0xead8;\n\t var REACT_MEMO_TYPE = 0xead3;\n\t var REACT_LAZY_TYPE = 0xead4;\n\t var REACT_BLOCK_TYPE = 0xead9;\n\t var REACT_SERVER_BLOCK_TYPE = 0xeada;\n\t var REACT_FUNDAMENTAL_TYPE = 0xead5;\n\t var REACT_SCOPE_TYPE = 0xead7;\n\t var REACT_OPAQUE_ID_TYPE = 0xeae0;\n\t var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;\n\t var REACT_OFFSCREEN_TYPE = 0xeae2;\n\t var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;\n\t if (typeof Symbol === 'function' && Symbol.for) {\n\t var symbolFor = Symbol.for;\n\t REACT_ELEMENT_TYPE = symbolFor('react.element');\n\t REACT_PORTAL_TYPE = symbolFor('react.portal');\n\t exports.Fragment = symbolFor('react.fragment');\n\t exports.StrictMode = symbolFor('react.strict_mode');\n\t exports.Profiler = symbolFor('react.profiler');\n\t REACT_PROVIDER_TYPE = symbolFor('react.provider');\n\t REACT_CONTEXT_TYPE = symbolFor('react.context');\n\t REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');\n\t exports.Suspense = symbolFor('react.suspense');\n\t REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');\n\t REACT_MEMO_TYPE = symbolFor('react.memo');\n\t REACT_LAZY_TYPE = symbolFor('react.lazy');\n\t REACT_BLOCK_TYPE = symbolFor('react.block');\n\t REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');\n\t REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');\n\t REACT_SCOPE_TYPE = symbolFor('react.scope');\n\t REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');\n\t REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');\n\t REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');\n\t REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');\n\t }\n\t var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;\n\t var FAUX_ITERATOR_SYMBOL = '@@iterator';\n\t function getIteratorFn(maybeIterable) {\n\t if (maybeIterable === null || typeof maybeIterable !== 'object') {\n\t return null;\n\t }\n\t var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];\n\t if (typeof maybeIterator === 'function') {\n\t return maybeIterator;\n\t }\n\t return null;\n\t }\n\n\t /**\n\t * Keeps track of the current dispatcher.\n\t */\n\t var ReactCurrentDispatcher = {\n\t /**\n\t * @internal\n\t * @type {ReactComponent}\n\t */\n\t current: null\n\t };\n\n\t /**\n\t * Keeps track of the current batch's configuration such as how long an update\n\t * should suspend for if it needs to.\n\t */\n\t var ReactCurrentBatchConfig = {\n\t transition: 0\n\t };\n\n\t /**\n\t * Keeps track of the current owner.\n\t *\n\t * The current owner is the component who should own any components that are\n\t * currently being constructed.\n\t */\n\t var ReactCurrentOwner = {\n\t /**\n\t * @internal\n\t * @type {ReactComponent}\n\t */\n\t current: null\n\t };\n\t var ReactDebugCurrentFrame = {};\n\t var currentExtraStackFrame = null;\n\t function setExtraStackFrame(stack) {\n\t {\n\t currentExtraStackFrame = stack;\n\t }\n\t }\n\t {\n\t ReactDebugCurrentFrame.setExtraStackFrame = function (stack) {\n\t {\n\t currentExtraStackFrame = stack;\n\t }\n\t }; // Stack implementation injected by the current renderer.\n\n\t ReactDebugCurrentFrame.getCurrentStack = null;\n\t ReactDebugCurrentFrame.getStackAddendum = function () {\n\t var stack = ''; // Add an extra top frame while an element is being validated\n\n\t if (currentExtraStackFrame) {\n\t stack += currentExtraStackFrame;\n\t } // Delegate to the injected renderer-specific implementation\n\n\t var impl = ReactDebugCurrentFrame.getCurrentStack;\n\t if (impl) {\n\t stack += impl() || '';\n\t }\n\t return stack;\n\t };\n\t }\n\n\t /**\n\t * Used by act() to track whether you're inside an act() scope.\n\t */\n\t var IsSomeRendererActing = {\n\t current: false\n\t };\n\t var ReactSharedInternals = {\n\t ReactCurrentDispatcher: ReactCurrentDispatcher,\n\t ReactCurrentBatchConfig: ReactCurrentBatchConfig,\n\t ReactCurrentOwner: ReactCurrentOwner,\n\t IsSomeRendererActing: IsSomeRendererActing,\n\t // Used by renderers to avoid bundling object-assign twice in UMD bundles:\n\t assign: _assign\n\t };\n\t {\n\t ReactSharedInternals.ReactDebugCurrentFrame = ReactDebugCurrentFrame;\n\t }\n\n\t // by calls to these methods by a Babel plugin.\n\t //\n\t // In PROD (or in packages without access to React internals),\n\t // they are left as they are instead.\n\n\t function warn(format) {\n\t {\n\t for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n\t args[_key - 1] = arguments[_key];\n\t }\n\t printWarning('warn', format, args);\n\t }\n\t }\n\t function error(format) {\n\t {\n\t for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n\t args[_key2 - 1] = arguments[_key2];\n\t }\n\t printWarning('error', format, args);\n\t }\n\t }\n\t function printWarning(level, format, args) {\n\t // When changing this logic, you might want to also\n\t // update consoleWithStackDev.www.js as well.\n\t {\n\t var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;\n\t var stack = ReactDebugCurrentFrame.getStackAddendum();\n\t if (stack !== '') {\n\t format += '%s';\n\t args = args.concat([stack]);\n\t }\n\t var argsWithFormat = args.map(function (item) {\n\t return '' + item;\n\t }); // Careful: RN currently depends on this prefix\n\n\t argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it\n\t // breaks IE9: https://github.com/facebook/react/issues/13610\n\t // eslint-disable-next-line react-internal/no-production-logging\n\n\t Function.prototype.apply.call(console[level], console, argsWithFormat);\n\t }\n\t }\n\t var didWarnStateUpdateForUnmountedComponent = {};\n\t function warnNoop(publicInstance, callerName) {\n\t {\n\t var _constructor = publicInstance.constructor;\n\t var componentName = _constructor && (_constructor.displayName || _constructor.name) || 'ReactClass';\n\t var warningKey = componentName + \".\" + callerName;\n\t if (didWarnStateUpdateForUnmountedComponent[warningKey]) {\n\t return;\n\t }\n\t error(\"Can't call %s on a component that is not yet mounted. \" + 'This is a no-op, but it might indicate a bug in your application. ' + 'Instead, assign to `this.state` directly or define a `state = {};` ' + 'class property with the desired state in the %s component.', callerName, componentName);\n\t didWarnStateUpdateForUnmountedComponent[warningKey] = true;\n\t }\n\t }\n\t /**\n\t * This is the abstract API for an update queue.\n\t */\n\n\t var ReactNoopUpdateQueue = {\n\t /**\n\t * Checks whether or not this composite component is mounted.\n\t * @param {ReactClass} publicInstance The instance we want to test.\n\t * @return {boolean} True if mounted, false otherwise.\n\t * @protected\n\t * @final\n\t */\n\t isMounted: function (publicInstance) {\n\t return false;\n\t },\n\t /**\n\t * Forces an update. This should only be invoked when it is known with\n\t * certainty that we are **not** in a DOM transaction.\n\t *\n\t * You may want to call this when you know that some deeper aspect of the\n\t * component's state has changed but `setState` was not called.\n\t *\n\t * This will not invoke `shouldComponentUpdate`, but it will invoke\n\t * `componentWillUpdate` and `componentDidUpdate`.\n\t *\n\t * @param {ReactClass} publicInstance The instance that should rerender.\n\t * @param {?function} callback Called after component is updated.\n\t * @param {?string} callerName name of the calling function in the public API.\n\t * @internal\n\t */\n\t enqueueForceUpdate: function (publicInstance, callback, callerName) {\n\t warnNoop(publicInstance, 'forceUpdate');\n\t },\n\t /**\n\t * Replaces all of the state. Always use this or `setState` to mutate state.\n\t * You should treat `this.state` as immutable.\n\t *\n\t * There is no guarantee that `this.state` will be immediately updated, so\n\t * accessing `this.state` after calling this method may return the old value.\n\t *\n\t * @param {ReactClass} publicInstance The instance that should rerender.\n\t * @param {object} completeState Next state.\n\t * @param {?function} callback Called after component is updated.\n\t * @param {?string} callerName name of the calling function in the public API.\n\t * @internal\n\t */\n\t enqueueReplaceState: function (publicInstance, completeState, callback, callerName) {\n\t warnNoop(publicInstance, 'replaceState');\n\t },\n\t /**\n\t * Sets a subset of the state. This only exists because _pendingState is\n\t * internal. This provides a merging strategy that is not available to deep\n\t * properties which is confusing. TODO: Expose pendingState or don't use it\n\t * during the merge.\n\t *\n\t * @param {ReactClass} publicInstance The instance that should rerender.\n\t * @param {object} partialState Next partial state to be merged with state.\n\t * @param {?function} callback Called after component is updated.\n\t * @param {?string} Name of the calling function in the public API.\n\t * @internal\n\t */\n\t enqueueSetState: function (publicInstance, partialState, callback, callerName) {\n\t warnNoop(publicInstance, 'setState');\n\t }\n\t };\n\t var emptyObject = {};\n\t {\n\t Object.freeze(emptyObject);\n\t }\n\t /**\n\t * Base class helpers for the updating state of a component.\n\t */\n\n\t function Component(props, context, updater) {\n\t this.props = props;\n\t this.context = context; // If a component has string refs, we will assign a different object later.\n\n\t this.refs = emptyObject; // We initialize the default updater but the real one gets injected by the\n\t // renderer.\n\n\t this.updater = updater || ReactNoopUpdateQueue;\n\t }\n\t Component.prototype.isReactComponent = {};\n\t /**\n\t * Sets a subset of the state. Always use this to mutate\n\t * state. You should treat `this.state` as immutable.\n\t *\n\t * There is no guarantee that `this.state` will be immediately updated, so\n\t * accessing `this.state` after calling this method may return the old value.\n\t *\n\t * There is no guarantee that calls to `setState` will run synchronously,\n\t * as they may eventually be batched together. You can provide an optional\n\t * callback that will be executed when the call to setState is actually\n\t * completed.\n\t *\n\t * When a function is provided to setState, it will be called at some point in\n\t * the future (not synchronously). It will be called with the up to date\n\t * component arguments (state, props, context). These values can be different\n\t * from this.* because your function may be called after receiveProps but before\n\t * shouldComponentUpdate, and this new state, props, and context will not yet be\n\t * assigned to this.\n\t *\n\t * @param {object|function} partialState Next partial state or function to\n\t * produce next partial state to be merged with current state.\n\t * @param {?function} callback Called after state is updated.\n\t * @final\n\t * @protected\n\t */\n\n\t Component.prototype.setState = function (partialState, callback) {\n\t if (!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)) {\n\t {\n\t throw Error(\"setState(...): takes an object of state variables to update or a function which returns an object of state variables.\");\n\t }\n\t }\n\t this.updater.enqueueSetState(this, partialState, callback, 'setState');\n\t };\n\t /**\n\t * Forces an update. This should only be invoked when it is known with\n\t * certainty that we are **not** in a DOM transaction.\n\t *\n\t * You may want to call this when you know that some deeper aspect of the\n\t * component's state has changed but `setState` was not called.\n\t *\n\t * This will not invoke `shouldComponentUpdate`, but it will invoke\n\t * `componentWillUpdate` and `componentDidUpdate`.\n\t *\n\t * @param {?function} callback Called after update is complete.\n\t * @final\n\t * @protected\n\t */\n\n\t Component.prototype.forceUpdate = function (callback) {\n\t this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');\n\t };\n\t /**\n\t * Deprecated APIs. These APIs used to exist on classic React classes but since\n\t * we would like to deprecate them, we're not going to move them over to this\n\t * modern base class. Instead, we define a getter that warns if it's accessed.\n\t */\n\n\t {\n\t var deprecatedAPIs = {\n\t isMounted: ['isMounted', 'Instead, make sure to clean up subscriptions and pending requests in ' + 'componentWillUnmount to prevent memory leaks.'],\n\t replaceState: ['replaceState', 'Refactor your code to use setState instead (see ' + 'https://github.com/facebook/react/issues/3236).']\n\t };\n\t var defineDeprecationWarning = function (methodName, info) {\n\t Object.defineProperty(Component.prototype, methodName, {\n\t get: function () {\n\t warn('%s(...) is deprecated in plain JavaScript React classes. %s', info[0], info[1]);\n\t return undefined;\n\t }\n\t });\n\t };\n\t for (var fnName in deprecatedAPIs) {\n\t if (deprecatedAPIs.hasOwnProperty(fnName)) {\n\t defineDeprecationWarning(fnName, deprecatedAPIs[fnName]);\n\t }\n\t }\n\t }\n\t function ComponentDummy() {}\n\t ComponentDummy.prototype = Component.prototype;\n\t /**\n\t * Convenience component with default shallow equality check for sCU.\n\t */\n\n\t function PureComponent(props, context, updater) {\n\t this.props = props;\n\t this.context = context; // If a component has string refs, we will assign a different object later.\n\n\t this.refs = emptyObject;\n\t this.updater = updater || ReactNoopUpdateQueue;\n\t }\n\t var pureComponentPrototype = PureComponent.prototype = new ComponentDummy();\n\t pureComponentPrototype.constructor = PureComponent; // Avoid an extra prototype jump for these methods.\n\n\t _assign(pureComponentPrototype, Component.prototype);\n\t pureComponentPrototype.isPureReactComponent = true;\n\n\t // an immutable object with a single mutable value\n\t function createRef() {\n\t var refObject = {\n\t current: null\n\t };\n\t {\n\t Object.seal(refObject);\n\t }\n\t return refObject;\n\t }\n\t function getWrappedName(outerType, innerType, wrapperName) {\n\t var functionName = innerType.displayName || innerType.name || '';\n\t return outerType.displayName || (functionName !== '' ? wrapperName + \"(\" + functionName + \")\" : wrapperName);\n\t }\n\t function getContextName(type) {\n\t return type.displayName || 'Context';\n\t }\n\t function getComponentName(type) {\n\t if (type == null) {\n\t // Host root, text node or just invalid type.\n\t return null;\n\t }\n\t {\n\t if (typeof type.tag === 'number') {\n\t error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');\n\t }\n\t }\n\t if (typeof type === 'function') {\n\t return type.displayName || type.name || null;\n\t }\n\t if (typeof type === 'string') {\n\t return type;\n\t }\n\t switch (type) {\n\t case exports.Fragment:\n\t return 'Fragment';\n\t case REACT_PORTAL_TYPE:\n\t return 'Portal';\n\t case exports.Profiler:\n\t return 'Profiler';\n\t case exports.StrictMode:\n\t return 'StrictMode';\n\t case exports.Suspense:\n\t return 'Suspense';\n\t case REACT_SUSPENSE_LIST_TYPE:\n\t return 'SuspenseList';\n\t }\n\t if (typeof type === 'object') {\n\t switch (type.$$typeof) {\n\t case REACT_CONTEXT_TYPE:\n\t var context = type;\n\t return getContextName(context) + '.Consumer';\n\t case REACT_PROVIDER_TYPE:\n\t var provider = type;\n\t return getContextName(provider._context) + '.Provider';\n\t case REACT_FORWARD_REF_TYPE:\n\t return getWrappedName(type, type.render, 'ForwardRef');\n\t case REACT_MEMO_TYPE:\n\t return getComponentName(type.type);\n\t case REACT_BLOCK_TYPE:\n\t return getComponentName(type._render);\n\t case REACT_LAZY_TYPE:\n\t {\n\t var lazyComponent = type;\n\t var payload = lazyComponent._payload;\n\t var init = lazyComponent._init;\n\t try {\n\t return getComponentName(init(payload));\n\t } catch (x) {\n\t return null;\n\t }\n\t }\n\t }\n\t }\n\t return null;\n\t }\n\t var hasOwnProperty = Object.prototype.hasOwnProperty;\n\t var RESERVED_PROPS = {\n\t key: true,\n\t ref: true,\n\t __self: true,\n\t __source: true\n\t };\n\t var specialPropKeyWarningShown, specialPropRefWarningShown, didWarnAboutStringRefs;\n\t {\n\t didWarnAboutStringRefs = {};\n\t }\n\t function hasValidRef(config) {\n\t {\n\t if (hasOwnProperty.call(config, 'ref')) {\n\t var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;\n\t if (getter && getter.isReactWarning) {\n\t return false;\n\t }\n\t }\n\t }\n\t return config.ref !== undefined;\n\t }\n\t function hasValidKey(config) {\n\t {\n\t if (hasOwnProperty.call(config, 'key')) {\n\t var getter = Object.getOwnPropertyDescriptor(config, 'key').get;\n\t if (getter && getter.isReactWarning) {\n\t return false;\n\t }\n\t }\n\t }\n\t return config.key !== undefined;\n\t }\n\t function defineKeyPropWarningGetter(props, displayName) {\n\t var warnAboutAccessingKey = function () {\n\t {\n\t if (!specialPropKeyWarningShown) {\n\t specialPropKeyWarningShown = true;\n\t error('%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);\n\t }\n\t }\n\t };\n\t warnAboutAccessingKey.isReactWarning = true;\n\t Object.defineProperty(props, 'key', {\n\t get: warnAboutAccessingKey,\n\t configurable: true\n\t });\n\t }\n\t function defineRefPropWarningGetter(props, displayName) {\n\t var warnAboutAccessingRef = function () {\n\t {\n\t if (!specialPropRefWarningShown) {\n\t specialPropRefWarningShown = true;\n\t error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);\n\t }\n\t }\n\t };\n\t warnAboutAccessingRef.isReactWarning = true;\n\t Object.defineProperty(props, 'ref', {\n\t get: warnAboutAccessingRef,\n\t configurable: true\n\t });\n\t }\n\t function warnIfStringRefCannotBeAutoConverted(config) {\n\t {\n\t if (typeof config.ref === 'string' && ReactCurrentOwner.current && config.__self && ReactCurrentOwner.current.stateNode !== config.__self) {\n\t var componentName = getComponentName(ReactCurrentOwner.current.type);\n\t if (!didWarnAboutStringRefs[componentName]) {\n\t error('Component \"%s\" contains the string ref \"%s\". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', componentName, config.ref);\n\t didWarnAboutStringRefs[componentName] = true;\n\t }\n\t }\n\t }\n\t }\n\t /**\n\t * Factory method to create a new React element. This no longer adheres to\n\t * the class pattern, so do not use new to call it. Also, instanceof check\n\t * will not work. Instead test $$typeof field against Symbol.for('react.element') to check\n\t * if something is a React Element.\n\t *\n\t * @param {*} type\n\t * @param {*} props\n\t * @param {*} key\n\t * @param {string|object} ref\n\t * @param {*} owner\n\t * @param {*} self A *temporary* helper to detect places where `this` is\n\t * different from the `owner` when React.createElement is called, so that we\n\t * can warn. We want to get rid of owner and replace string `ref`s with arrow\n\t * functions, and as long as `this` and owner are the same, there will be no\n\t * change in behavior.\n\t * @param {*} source An annotation object (added by a transpiler or otherwise)\n\t * indicating filename, line number, and/or other information.\n\t * @internal\n\t */\n\n\t var ReactElement = function (type, key, ref, self, source, owner, props) {\n\t var element = {\n\t // This tag allows us to uniquely identify this as a React Element\n\t $$typeof: REACT_ELEMENT_TYPE,\n\t // Built-in properties that belong on the element\n\t type: type,\n\t key: key,\n\t ref: ref,\n\t props: props,\n\t // Record the component responsible for creating this element.\n\t _owner: owner\n\t };\n\t {\n\t // The validation flag is currently mutative. We put it on\n\t // an external backing store so that we can freeze the whole object.\n\t // This can be replaced with a WeakMap once they are implemented in\n\t // commonly used development environments.\n\t element._store = {}; // To make comparing ReactElements easier for testing purposes, we make\n\t // the validation flag non-enumerable (where possible, which should\n\t // include every environment we run tests in), so the test framework\n\t // ignores it.\n\n\t Object.defineProperty(element._store, 'validated', {\n\t configurable: false,\n\t enumerable: false,\n\t writable: true,\n\t value: false\n\t }); // self and source are DEV only properties.\n\n\t Object.defineProperty(element, '_self', {\n\t configurable: false,\n\t enumerable: false,\n\t writable: false,\n\t value: self\n\t }); // Two elements created in two different places should be considered\n\t // equal for testing purposes and therefore we hide it from enumeration.\n\n\t Object.defineProperty(element, '_source', {\n\t configurable: false,\n\t enumerable: false,\n\t writable: false,\n\t value: source\n\t });\n\t if (Object.freeze) {\n\t Object.freeze(element.props);\n\t Object.freeze(element);\n\t }\n\t }\n\t return element;\n\t };\n\t /**\n\t * Create and return a new ReactElement of the given type.\n\t * See https://reactjs.org/docs/react-api.html#createelement\n\t */\n\n\t function createElement(type, config, children) {\n\t var propName; // Reserved names are extracted\n\n\t var props = {};\n\t var key = null;\n\t var ref = null;\n\t var self = null;\n\t var source = null;\n\t if (config != null) {\n\t if (hasValidRef(config)) {\n\t ref = config.ref;\n\t {\n\t warnIfStringRefCannotBeAutoConverted(config);\n\t }\n\t }\n\t if (hasValidKey(config)) {\n\t key = '' + config.key;\n\t }\n\t self = config.__self === undefined ? null : config.__self;\n\t source = config.__source === undefined ? null : config.__source; // Remaining properties are added to a new props object\n\n\t for (propName in config) {\n\t if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {\n\t props[propName] = config[propName];\n\t }\n\t }\n\t } // Children can be more than one argument, and those are transferred onto\n\t // the newly allocated props object.\n\n\t var childrenLength = arguments.length - 2;\n\t if (childrenLength === 1) {\n\t props.children = children;\n\t } else if (childrenLength > 1) {\n\t var childArray = Array(childrenLength);\n\t for (var i = 0; i < childrenLength; i++) {\n\t childArray[i] = arguments[i + 2];\n\t }\n\t {\n\t if (Object.freeze) {\n\t Object.freeze(childArray);\n\t }\n\t }\n\t props.children = childArray;\n\t } // Resolve default props\n\n\t if (type && type.defaultProps) {\n\t var defaultProps = type.defaultProps;\n\t for (propName in defaultProps) {\n\t if (props[propName] === undefined) {\n\t props[propName] = defaultProps[propName];\n\t }\n\t }\n\t }\n\t {\n\t if (key || ref) {\n\t var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;\n\t if (key) {\n\t defineKeyPropWarningGetter(props, displayName);\n\t }\n\t if (ref) {\n\t defineRefPropWarningGetter(props, displayName);\n\t }\n\t }\n\t }\n\t return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);\n\t }\n\t function cloneAndReplaceKey(oldElement, newKey) {\n\t var newElement = ReactElement(oldElement.type, newKey, oldElement.ref, oldElement._self, oldElement._source, oldElement._owner, oldElement.props);\n\t return newElement;\n\t }\n\t /**\n\t * Clone and return a new ReactElement using element as the starting point.\n\t * See https://reactjs.org/docs/react-api.html#cloneelement\n\t */\n\n\t function cloneElement(element, config, children) {\n\t if (!!(element === null || element === undefined)) {\n\t {\n\t throw Error(\"React.cloneElement(...): The argument must be a React element, but you passed \" + element + \".\");\n\t }\n\t }\n\t var propName; // Original props are copied\n\n\t var props = _assign({}, element.props); // Reserved names are extracted\n\n\t var key = element.key;\n\t var ref = element.ref; // Self is preserved since the owner is preserved.\n\n\t var self = element._self; // Source is preserved since cloneElement is unlikely to be targeted by a\n\t // transpiler, and the original source is probably a better indicator of the\n\t // true owner.\n\n\t var source = element._source; // Owner will be preserved, unless ref is overridden\n\n\t var owner = element._owner;\n\t if (config != null) {\n\t if (hasValidRef(config)) {\n\t // Silently steal the ref from the parent.\n\t ref = config.ref;\n\t owner = ReactCurrentOwner.current;\n\t }\n\t if (hasValidKey(config)) {\n\t key = '' + config.key;\n\t } // Remaining properties override existing props\n\n\t var defaultProps;\n\t if (element.type && element.type.defaultProps) {\n\t defaultProps = element.type.defaultProps;\n\t }\n\t for (propName in config) {\n\t if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {\n\t if (config[propName] === undefined && defaultProps !== undefined) {\n\t // Resolve default props\n\t props[propName] = defaultProps[propName];\n\t } else {\n\t props[propName] = config[propName];\n\t }\n\t }\n\t }\n\t } // Children can be more than one argument, and those are transferred onto\n\t // the newly allocated props object.\n\n\t var childrenLength = arguments.length - 2;\n\t if (childrenLength === 1) {\n\t props.children = children;\n\t } else if (childrenLength > 1) {\n\t var childArray = Array(childrenLength);\n\t for (var i = 0; i < childrenLength; i++) {\n\t childArray[i] = arguments[i + 2];\n\t }\n\t props.children = childArray;\n\t }\n\t return ReactElement(element.type, key, ref, self, source, owner, props);\n\t }\n\t /**\n\t * Verifies the object is a ReactElement.\n\t * See https://reactjs.org/docs/react-api.html#isvalidelement\n\t * @param {?object} object\n\t * @return {boolean} True if `object` is a ReactElement.\n\t * @final\n\t */\n\n\t function isValidElement(object) {\n\t return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;\n\t }\n\t var SEPARATOR = '.';\n\t var SUBSEPARATOR = ':';\n\t /**\n\t * Escape and wrap key so it is safe to use as a reactid\n\t *\n\t * @param {string} key to be escaped.\n\t * @return {string} the escaped key.\n\t */\n\n\t function escape(key) {\n\t var escapeRegex = /[=:]/g;\n\t var escaperLookup = {\n\t '=': '=0',\n\t ':': '=2'\n\t };\n\t var escapedString = key.replace(escapeRegex, function (match) {\n\t return escaperLookup[match];\n\t });\n\t return '$' + escapedString;\n\t }\n\t /**\n\t * TODO: Test that a single child and an array with one item have the same key\n\t * pattern.\n\t */\n\n\t var didWarnAboutMaps = false;\n\t var userProvidedKeyEscapeRegex = /\\/+/g;\n\t function escapeUserProvidedKey(text) {\n\t return text.replace(userProvidedKeyEscapeRegex, '$&/');\n\t }\n\t /**\n\t * Generate a key string that identifies a element within a set.\n\t *\n\t * @param {*} element A element that could contain a manual key.\n\t * @param {number} index Index that is used if a manual key is not provided.\n\t * @return {string}\n\t */\n\n\t function getElementKey(element, index) {\n\t // Do some typechecking here since we call this blindly. We want to ensure\n\t // that we don't block potential future ES APIs.\n\t if (typeof element === 'object' && element !== null && element.key != null) {\n\t // Explicit key\n\t return escape('' + element.key);\n\t } // Implicit key determined by the index in the set\n\n\t return index.toString(36);\n\t }\n\t function mapIntoArray(children, array, escapedPrefix, nameSoFar, callback) {\n\t var type = typeof children;\n\t if (type === 'undefined' || type === 'boolean') {\n\t // All of the above are perceived as null.\n\t children = null;\n\t }\n\t var invokeCallback = false;\n\t if (children === null) {\n\t invokeCallback = true;\n\t } else {\n\t switch (type) {\n\t case 'string':\n\t case 'number':\n\t invokeCallback = true;\n\t break;\n\t case 'object':\n\t switch (children.$$typeof) {\n\t case REACT_ELEMENT_TYPE:\n\t case REACT_PORTAL_TYPE:\n\t invokeCallback = true;\n\t }\n\t }\n\t }\n\t if (invokeCallback) {\n\t var _child = children;\n\t var mappedChild = callback(_child); // If it's the only child, treat the name as if it was wrapped in an array\n\t // so that it's consistent if the number of children grows:\n\n\t var childKey = nameSoFar === '' ? SEPARATOR + getElementKey(_child, 0) : nameSoFar;\n\t if (Array.isArray(mappedChild)) {\n\t var escapedChildKey = '';\n\t if (childKey != null) {\n\t escapedChildKey = escapeUserProvidedKey(childKey) + '/';\n\t }\n\t mapIntoArray(mappedChild, array, escapedChildKey, '', function (c) {\n\t return c;\n\t });\n\t } else if (mappedChild != null) {\n\t if (isValidElement(mappedChild)) {\n\t mappedChild = cloneAndReplaceKey(mappedChild,\n\t // Keep both the (mapped) and old keys if they differ, just as\n\t // traverseAllChildren used to do for objects as children\n\t escapedPrefix + (\n\t // $FlowFixMe Flow incorrectly thinks React.Portal doesn't have a key\n\t mappedChild.key && (!_child || _child.key !== mappedChild.key) ?\n\t // $FlowFixMe Flow incorrectly thinks existing element's key can be a number\n\t escapeUserProvidedKey('' + mappedChild.key) + '/' : '') + childKey);\n\t }\n\t array.push(mappedChild);\n\t }\n\t return 1;\n\t }\n\t var child;\n\t var nextName;\n\t var subtreeCount = 0; // Count of children found in the current subtree.\n\n\t var nextNamePrefix = nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;\n\t if (Array.isArray(children)) {\n\t for (var i = 0; i < children.length; i++) {\n\t child = children[i];\n\t nextName = nextNamePrefix + getElementKey(child, i);\n\t subtreeCount += mapIntoArray(child, array, escapedPrefix, nextName, callback);\n\t }\n\t } else {\n\t var iteratorFn = getIteratorFn(children);\n\t if (typeof iteratorFn === 'function') {\n\t var iterableChildren = children;\n\t {\n\t // Warn about using Maps as children\n\t if (iteratorFn === iterableChildren.entries) {\n\t if (!didWarnAboutMaps) {\n\t warn('Using Maps as children is not supported. ' + 'Use an array of keyed ReactElements instead.');\n\t }\n\t didWarnAboutMaps = true;\n\t }\n\t }\n\t var iterator = iteratorFn.call(iterableChildren);\n\t var step;\n\t var ii = 0;\n\t while (!(step = iterator.next()).done) {\n\t child = step.value;\n\t nextName = nextNamePrefix + getElementKey(child, ii++);\n\t subtreeCount += mapIntoArray(child, array, escapedPrefix, nextName, callback);\n\t }\n\t } else if (type === 'object') {\n\t var childrenString = '' + children;\n\t {\n\t {\n\t throw Error(\"Objects are not valid as a React child (found: \" + (childrenString === '[object Object]' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString) + \"). If you meant to render a collection of children, use an array instead.\");\n\t }\n\t }\n\t }\n\t }\n\t return subtreeCount;\n\t }\n\n\t /**\n\t * Maps children that are typically specified as `props.children`.\n\t *\n\t * See https://reactjs.org/docs/react-api.html#reactchildrenmap\n\t *\n\t * The provided mapFunction(child, index) will be called for each\n\t * leaf child.\n\t *\n\t * @param {?*} children Children tree container.\n\t * @param {function(*, int)} func The map function.\n\t * @param {*} context Context for mapFunction.\n\t * @return {object} Object containing the ordered map of results.\n\t */\n\t function mapChildren(children, func, context) {\n\t if (children == null) {\n\t return children;\n\t }\n\t var result = [];\n\t var count = 0;\n\t mapIntoArray(children, result, '', '', function (child) {\n\t return func.call(context, child, count++);\n\t });\n\t return result;\n\t }\n\t /**\n\t * Count the number of children that are typically specified as\n\t * `props.children`.\n\t *\n\t * See https://reactjs.org/docs/react-api.html#reactchildrencount\n\t *\n\t * @param {?*} children Children tree container.\n\t * @return {number} The number of children.\n\t */\n\n\t function countChildren(children) {\n\t var n = 0;\n\t mapChildren(children, function () {\n\t n++; // Don't return anything\n\t });\n\n\t return n;\n\t }\n\n\t /**\n\t * Iterates through children that are typically specified as `props.children`.\n\t *\n\t * See https://reactjs.org/docs/react-api.html#reactchildrenforeach\n\t *\n\t * The provided forEachFunc(child, index) will be called for each\n\t * leaf child.\n\t *\n\t * @param {?*} children Children tree container.\n\t * @param {function(*, int)} forEachFunc\n\t * @param {*} forEachContext Context for forEachContext.\n\t */\n\t function forEachChildren(children, forEachFunc, forEachContext) {\n\t mapChildren(children, function () {\n\t forEachFunc.apply(this, arguments); // Don't return anything.\n\t }, forEachContext);\n\t }\n\t /**\n\t * Flatten a children object (typically specified as `props.children`) and\n\t * return an array with appropriately re-keyed children.\n\t *\n\t * See https://reactjs.org/docs/react-api.html#reactchildrentoarray\n\t */\n\n\t function toArray(children) {\n\t return mapChildren(children, function (child) {\n\t return child;\n\t }) || [];\n\t }\n\t /**\n\t * Returns the first child in a collection of children and verifies that there\n\t * is only one child in the collection.\n\t *\n\t * See https://reactjs.org/docs/react-api.html#reactchildrenonly\n\t *\n\t * The current implementation of this function assumes that a single child gets\n\t * passed without a wrapper, but the purpose of this helper function is to\n\t * abstract away the particular structure of children.\n\t *\n\t * @param {?object} children Child collection structure.\n\t * @return {ReactElement} The first and only `ReactElement` contained in the\n\t * structure.\n\t */\n\n\t function onlyChild(children) {\n\t if (!isValidElement(children)) {\n\t {\n\t throw Error(\"React.Children.only expected to receive a single React element child.\");\n\t }\n\t }\n\t return children;\n\t }\n\t function createContext(defaultValue, calculateChangedBits) {\n\t if (calculateChangedBits === undefined) {\n\t calculateChangedBits = null;\n\t } else {\n\t {\n\t if (calculateChangedBits !== null && typeof calculateChangedBits !== 'function') {\n\t error('createContext: Expected the optional second argument to be a ' + 'function. Instead received: %s', calculateChangedBits);\n\t }\n\t }\n\t }\n\t var context = {\n\t $$typeof: REACT_CONTEXT_TYPE,\n\t _calculateChangedBits: calculateChangedBits,\n\t // As a workaround to support multiple concurrent renderers, we categorize\n\t // some renderers as primary and others as secondary. We only expect\n\t // there to be two concurrent renderers at most: React Native (primary) and\n\t // Fabric (secondary); React DOM (primary) and React ART (secondary).\n\t // Secondary renderers store their context values on separate fields.\n\t _currentValue: defaultValue,\n\t _currentValue2: defaultValue,\n\t // Used to track how many concurrent renderers this context currently\n\t // supports within in a single renderer. Such as parallel server rendering.\n\t _threadCount: 0,\n\t // These are circular\n\t Provider: null,\n\t Consumer: null\n\t };\n\t context.Provider = {\n\t $$typeof: REACT_PROVIDER_TYPE,\n\t _context: context\n\t };\n\t var hasWarnedAboutUsingNestedContextConsumers = false;\n\t var hasWarnedAboutUsingConsumerProvider = false;\n\t var hasWarnedAboutDisplayNameOnConsumer = false;\n\t {\n\t // A separate object, but proxies back to the original context object for\n\t // backwards compatibility. It has a different $$typeof, so we can properly\n\t // warn for the incorrect usage of Context as a Consumer.\n\t var Consumer = {\n\t $$typeof: REACT_CONTEXT_TYPE,\n\t _context: context,\n\t _calculateChangedBits: context._calculateChangedBits\n\t }; // $FlowFixMe: Flow complains about not setting a value, which is intentional here\n\n\t Object.defineProperties(Consumer, {\n\t Provider: {\n\t get: function () {\n\t if (!hasWarnedAboutUsingConsumerProvider) {\n\t hasWarnedAboutUsingConsumerProvider = true;\n\t error('Rendering is not supported and will be removed in ' + 'a future major release. Did you mean to render instead?');\n\t }\n\t return context.Provider;\n\t },\n\t set: function (_Provider) {\n\t context.Provider = _Provider;\n\t }\n\t },\n\t _currentValue: {\n\t get: function () {\n\t return context._currentValue;\n\t },\n\t set: function (_currentValue) {\n\t context._currentValue = _currentValue;\n\t }\n\t },\n\t _currentValue2: {\n\t get: function () {\n\t return context._currentValue2;\n\t },\n\t set: function (_currentValue2) {\n\t context._currentValue2 = _currentValue2;\n\t }\n\t },\n\t _threadCount: {\n\t get: function () {\n\t return context._threadCount;\n\t },\n\t set: function (_threadCount) {\n\t context._threadCount = _threadCount;\n\t }\n\t },\n\t Consumer: {\n\t get: function () {\n\t if (!hasWarnedAboutUsingNestedContextConsumers) {\n\t hasWarnedAboutUsingNestedContextConsumers = true;\n\t error('Rendering is not supported and will be removed in ' + 'a future major release. Did you mean to render instead?');\n\t }\n\t return context.Consumer;\n\t }\n\t },\n\t displayName: {\n\t get: function () {\n\t return context.displayName;\n\t },\n\t set: function (displayName) {\n\t if (!hasWarnedAboutDisplayNameOnConsumer) {\n\t warn('Setting `displayName` on Context.Consumer has no effect. ' + \"You should set it directly on the context with Context.displayName = '%s'.\", displayName);\n\t hasWarnedAboutDisplayNameOnConsumer = true;\n\t }\n\t }\n\t }\n\t }); // $FlowFixMe: Flow complains about missing properties because it doesn't understand defineProperty\n\n\t context.Consumer = Consumer;\n\t }\n\t {\n\t context._currentRenderer = null;\n\t context._currentRenderer2 = null;\n\t }\n\t return context;\n\t }\n\t var Uninitialized = -1;\n\t var Pending = 0;\n\t var Resolved = 1;\n\t var Rejected = 2;\n\t function lazyInitializer(payload) {\n\t if (payload._status === Uninitialized) {\n\t var ctor = payload._result;\n\t var thenable = ctor(); // Transition to the next state.\n\n\t var pending = payload;\n\t pending._status = Pending;\n\t pending._result = thenable;\n\t thenable.then(function (moduleObject) {\n\t if (payload._status === Pending) {\n\t var defaultExport = moduleObject.default;\n\t {\n\t if (defaultExport === undefined) {\n\t error('lazy: Expected the result of a dynamic import() call. ' + 'Instead received: %s\\n\\nYour code should look like: \\n ' +\n\t // Break up imports to avoid accidentally parsing them as dependencies.\n\t 'const MyComponent = lazy(() => imp' + \"ort('./MyComponent'))\", moduleObject);\n\t }\n\t } // Transition to the next state.\n\n\t var resolved = payload;\n\t resolved._status = Resolved;\n\t resolved._result = defaultExport;\n\t }\n\t }, function (error) {\n\t if (payload._status === Pending) {\n\t // Transition to the next state.\n\t var rejected = payload;\n\t rejected._status = Rejected;\n\t rejected._result = error;\n\t }\n\t });\n\t }\n\t if (payload._status === Resolved) {\n\t return payload._result;\n\t } else {\n\t throw payload._result;\n\t }\n\t }\n\t function lazy(ctor) {\n\t var payload = {\n\t // We use these fields to store the result.\n\t _status: -1,\n\t _result: ctor\n\t };\n\t var lazyType = {\n\t $$typeof: REACT_LAZY_TYPE,\n\t _payload: payload,\n\t _init: lazyInitializer\n\t };\n\t {\n\t // In production, this would just set it on the object.\n\t var defaultProps;\n\t var propTypes; // $FlowFixMe\n\n\t Object.defineProperties(lazyType, {\n\t defaultProps: {\n\t configurable: true,\n\t get: function () {\n\t return defaultProps;\n\t },\n\t set: function (newDefaultProps) {\n\t error('React.lazy(...): It is not supported to assign `defaultProps` to ' + 'a lazy component import. Either specify them where the component ' + 'is defined, or create a wrapping component around it.');\n\t defaultProps = newDefaultProps; // Match production behavior more closely:\n\t // $FlowFixMe\n\n\t Object.defineProperty(lazyType, 'defaultProps', {\n\t enumerable: true\n\t });\n\t }\n\t },\n\t propTypes: {\n\t configurable: true,\n\t get: function () {\n\t return propTypes;\n\t },\n\t set: function (newPropTypes) {\n\t error('React.lazy(...): It is not supported to assign `propTypes` to ' + 'a lazy component import. Either specify them where the component ' + 'is defined, or create a wrapping component around it.');\n\t propTypes = newPropTypes; // Match production behavior more closely:\n\t // $FlowFixMe\n\n\t Object.defineProperty(lazyType, 'propTypes', {\n\t enumerable: true\n\t });\n\t }\n\t }\n\t });\n\t }\n\t return lazyType;\n\t }\n\t function forwardRef(render) {\n\t {\n\t if (render != null && render.$$typeof === REACT_MEMO_TYPE) {\n\t error('forwardRef requires a render function but received a `memo` ' + 'component. Instead of forwardRef(memo(...)), use ' + 'memo(forwardRef(...)).');\n\t } else if (typeof render !== 'function') {\n\t error('forwardRef requires a render function but was given %s.', render === null ? 'null' : typeof render);\n\t } else {\n\t if (render.length !== 0 && render.length !== 2) {\n\t error('forwardRef render functions accept exactly two parameters: props and ref. %s', render.length === 1 ? 'Did you forget to use the ref parameter?' : 'Any additional parameter will be undefined.');\n\t }\n\t }\n\t if (render != null) {\n\t if (render.defaultProps != null || render.propTypes != null) {\n\t error('forwardRef render functions do not support propTypes or defaultProps. ' + 'Did you accidentally pass a React component?');\n\t }\n\t }\n\t }\n\t var elementType = {\n\t $$typeof: REACT_FORWARD_REF_TYPE,\n\t render: render\n\t };\n\t {\n\t var ownName;\n\t Object.defineProperty(elementType, 'displayName', {\n\t enumerable: false,\n\t configurable: true,\n\t get: function () {\n\t return ownName;\n\t },\n\t set: function (name) {\n\t ownName = name;\n\t if (render.displayName == null) {\n\t render.displayName = name;\n\t }\n\t }\n\t });\n\t }\n\t return elementType;\n\t }\n\n\t // Filter certain DOM attributes (e.g. src, href) if their values are empty strings.\n\n\t var enableScopeAPI = false; // Experimental Create Event Handle API.\n\n\t function isValidElementType(type) {\n\t if (typeof type === 'string' || typeof type === 'function') {\n\t return true;\n\t } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).\n\n\t if (type === exports.Fragment || type === exports.Profiler || type === REACT_DEBUG_TRACING_MODE_TYPE || type === exports.StrictMode || type === exports.Suspense || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI) {\n\t return true;\n\t }\n\t if (typeof type === 'object' && type !== null) {\n\t if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {\n\t return true;\n\t }\n\t }\n\t return false;\n\t }\n\t function memo(type, compare) {\n\t {\n\t if (!isValidElementType(type)) {\n\t error('memo: The first argument must be a component. Instead ' + 'received: %s', type === null ? 'null' : typeof type);\n\t }\n\t }\n\t var elementType = {\n\t $$typeof: REACT_MEMO_TYPE,\n\t type: type,\n\t compare: compare === undefined ? null : compare\n\t };\n\t {\n\t var ownName;\n\t Object.defineProperty(elementType, 'displayName', {\n\t enumerable: false,\n\t configurable: true,\n\t get: function () {\n\t return ownName;\n\t },\n\t set: function (name) {\n\t ownName = name;\n\t if (type.displayName == null) {\n\t type.displayName = name;\n\t }\n\t }\n\t });\n\t }\n\t return elementType;\n\t }\n\t function resolveDispatcher() {\n\t var dispatcher = ReactCurrentDispatcher.current;\n\t if (!(dispatcher !== null)) {\n\t {\n\t throw Error(\"Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\\n1. You might have mismatching versions of React and the renderer (such as React DOM)\\n2. You might be breaking the Rules of Hooks\\n3. You might have more than one copy of React in the same app\\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.\");\n\t }\n\t }\n\t return dispatcher;\n\t }\n\t function useContext(Context, unstable_observedBits) {\n\t var dispatcher = resolveDispatcher();\n\t {\n\t if (unstable_observedBits !== undefined) {\n\t error('useContext() second argument is reserved for future ' + 'use in React. Passing it is not supported. ' + 'You passed: %s.%s', unstable_observedBits, typeof unstable_observedBits === 'number' && Array.isArray(arguments[2]) ? '\\n\\nDid you call array.map(useContext)? ' + 'Calling Hooks inside a loop is not supported. ' + 'Learn more at https://reactjs.org/link/rules-of-hooks' : '');\n\t } // TODO: add a more generic warning for invalid values.\n\n\t if (Context._context !== undefined) {\n\t var realContext = Context._context; // Don't deduplicate because this legitimately causes bugs\n\t // and nobody should be using this in existing code.\n\n\t if (realContext.Consumer === Context) {\n\t error('Calling useContext(Context.Consumer) is not supported, may cause bugs, and will be ' + 'removed in a future major release. Did you mean to call useContext(Context) instead?');\n\t } else if (realContext.Provider === Context) {\n\t error('Calling useContext(Context.Provider) is not supported. ' + 'Did you mean to call useContext(Context) instead?');\n\t }\n\t }\n\t }\n\t return dispatcher.useContext(Context, unstable_observedBits);\n\t }\n\t function useState(initialState) {\n\t var dispatcher = resolveDispatcher();\n\t return dispatcher.useState(initialState);\n\t }\n\t function useReducer(reducer, initialArg, init) {\n\t var dispatcher = resolveDispatcher();\n\t return dispatcher.useReducer(reducer, initialArg, init);\n\t }\n\t function useRef(initialValue) {\n\t var dispatcher = resolveDispatcher();\n\t return dispatcher.useRef(initialValue);\n\t }\n\t function useEffect(create, deps) {\n\t var dispatcher = resolveDispatcher();\n\t return dispatcher.useEffect(create, deps);\n\t }\n\t function useLayoutEffect(create, deps) {\n\t var dispatcher = resolveDispatcher();\n\t return dispatcher.useLayoutEffect(create, deps);\n\t }\n\t function useCallback(callback, deps) {\n\t var dispatcher = resolveDispatcher();\n\t return dispatcher.useCallback(callback, deps);\n\t }\n\t function useMemo(create, deps) {\n\t var dispatcher = resolveDispatcher();\n\t return dispatcher.useMemo(create, deps);\n\t }\n\t function useImperativeHandle(ref, create, deps) {\n\t var dispatcher = resolveDispatcher();\n\t return dispatcher.useImperativeHandle(ref, create, deps);\n\t }\n\t function useDebugValue(value, formatterFn) {\n\t {\n\t var dispatcher = resolveDispatcher();\n\t return dispatcher.useDebugValue(value, formatterFn);\n\t }\n\t }\n\n\t // Helpers to patch console.logs to avoid logging during side-effect free\n\t // replaying on render function. This currently only patches the object\n\t // lazily which won't cover if the log function was extracted eagerly.\n\t // We could also eagerly patch the method.\n\t var disabledDepth = 0;\n\t var prevLog;\n\t var prevInfo;\n\t var prevWarn;\n\t var prevError;\n\t var prevGroup;\n\t var prevGroupCollapsed;\n\t var prevGroupEnd;\n\t function disabledLog() {}\n\t disabledLog.__reactDisabledLog = true;\n\t function disableLogs() {\n\t {\n\t if (disabledDepth === 0) {\n\t /* eslint-disable react-internal/no-production-logging */\n\t prevLog = console.log;\n\t prevInfo = console.info;\n\t prevWarn = console.warn;\n\t prevError = console.error;\n\t prevGroup = console.group;\n\t prevGroupCollapsed = console.groupCollapsed;\n\t prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099\n\n\t var props = {\n\t configurable: true,\n\t enumerable: true,\n\t value: disabledLog,\n\t writable: true\n\t }; // $FlowFixMe Flow thinks console is immutable.\n\n\t Object.defineProperties(console, {\n\t info: props,\n\t log: props,\n\t warn: props,\n\t error: props,\n\t group: props,\n\t groupCollapsed: props,\n\t groupEnd: props\n\t });\n\t /* eslint-enable react-internal/no-production-logging */\n\t }\n\n\t disabledDepth++;\n\t }\n\t }\n\t function reenableLogs() {\n\t {\n\t disabledDepth--;\n\t if (disabledDepth === 0) {\n\t /* eslint-disable react-internal/no-production-logging */\n\t var props = {\n\t configurable: true,\n\t enumerable: true,\n\t writable: true\n\t }; // $FlowFixMe Flow thinks console is immutable.\n\n\t Object.defineProperties(console, {\n\t log: _assign({}, props, {\n\t value: prevLog\n\t }),\n\t info: _assign({}, props, {\n\t value: prevInfo\n\t }),\n\t warn: _assign({}, props, {\n\t value: prevWarn\n\t }),\n\t error: _assign({}, props, {\n\t value: prevError\n\t }),\n\t group: _assign({}, props, {\n\t value: prevGroup\n\t }),\n\t groupCollapsed: _assign({}, props, {\n\t value: prevGroupCollapsed\n\t }),\n\t groupEnd: _assign({}, props, {\n\t value: prevGroupEnd\n\t })\n\t });\n\t /* eslint-enable react-internal/no-production-logging */\n\t }\n\n\t if (disabledDepth < 0) {\n\t error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.');\n\t }\n\t }\n\t }\n\t var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher;\n\t var prefix;\n\t function describeBuiltInComponentFrame(name, source, ownerFn) {\n\t {\n\t if (prefix === undefined) {\n\t // Extract the VM specific prefix used by each line.\n\t try {\n\t throw Error();\n\t } catch (x) {\n\t var match = x.stack.trim().match(/\\n( *(at )?)/);\n\t prefix = match && match[1] || '';\n\t }\n\t } // We use the prefix to ensure our stacks line up with native stack frames.\n\n\t return '\\n' + prefix + name;\n\t }\n\t }\n\t var reentry = false;\n\t var componentFrameCache;\n\t {\n\t var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;\n\t componentFrameCache = new PossiblyWeakMap();\n\t }\n\t function describeNativeComponentFrame(fn, construct) {\n\t // If something asked for a stack inside a fake render, it should get ignored.\n\t if (!fn || reentry) {\n\t return '';\n\t }\n\t {\n\t var frame = componentFrameCache.get(fn);\n\t if (frame !== undefined) {\n\t return frame;\n\t }\n\t }\n\t var control;\n\t reentry = true;\n\t var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined.\n\n\t Error.prepareStackTrace = undefined;\n\t var previousDispatcher;\n\t {\n\t previousDispatcher = ReactCurrentDispatcher$1.current; // Set the dispatcher in DEV because this might be call in the render function\n\t // for warnings.\n\n\t ReactCurrentDispatcher$1.current = null;\n\t disableLogs();\n\t }\n\t try {\n\t // This should throw.\n\t if (construct) {\n\t // Something should be setting the props in the constructor.\n\t var Fake = function () {\n\t throw Error();\n\t }; // $FlowFixMe\n\n\t Object.defineProperty(Fake.prototype, 'props', {\n\t set: function () {\n\t // We use a throwing setter instead of frozen or non-writable props\n\t // because that won't throw in a non-strict mode function.\n\t throw Error();\n\t }\n\t });\n\t if (typeof Reflect === 'object' && Reflect.construct) {\n\t // We construct a different control for this case to include any extra\n\t // frames added by the construct call.\n\t try {\n\t Reflect.construct(Fake, []);\n\t } catch (x) {\n\t control = x;\n\t }\n\t Reflect.construct(fn, [], Fake);\n\t } else {\n\t try {\n\t Fake.call();\n\t } catch (x) {\n\t control = x;\n\t }\n\t fn.call(Fake.prototype);\n\t }\n\t } else {\n\t try {\n\t throw Error();\n\t } catch (x) {\n\t control = x;\n\t }\n\t fn();\n\t }\n\t } catch (sample) {\n\t // This is inlined manually because closure doesn't do it for us.\n\t if (sample && control && typeof sample.stack === 'string') {\n\t // This extracts the first frame from the sample that isn't also in the control.\n\t // Skipping one frame that we assume is the frame that calls the two.\n\t var sampleLines = sample.stack.split('\\n');\n\t var controlLines = control.stack.split('\\n');\n\t var s = sampleLines.length - 1;\n\t var c = controlLines.length - 1;\n\t while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {\n\t // We expect at least one stack frame to be shared.\n\t // Typically this will be the root most one. However, stack frames may be\n\t // cut off due to maximum stack limits. In this case, one maybe cut off\n\t // earlier than the other. We assume that the sample is longer or the same\n\t // and there for cut off earlier. So we should find the root most frame in\n\t // the sample somewhere in the control.\n\t c--;\n\t }\n\t for (; s >= 1 && c >= 0; s--, c--) {\n\t // Next we find the first one that isn't the same which should be the\n\t // frame that called our sample function and the control.\n\t if (sampleLines[s] !== controlLines[c]) {\n\t // In V8, the first line is describing the message but other VMs don't.\n\t // If we're about to return the first line, and the control is also on the same\n\t // line, that's a pretty good indicator that our sample threw at same line as\n\t // the control. I.e. before we entered the sample frame. So we ignore this result.\n\t // This can happen if you passed a class to function component, or non-function.\n\t if (s !== 1 || c !== 1) {\n\t do {\n\t s--;\n\t c--; // We may still have similar intermediate frames from the construct call.\n\t // The next one that isn't the same should be our match though.\n\n\t if (c < 0 || sampleLines[s] !== controlLines[c]) {\n\t // V8 adds a \"new\" prefix for native classes. Let's remove it to make it prettier.\n\t var _frame = '\\n' + sampleLines[s].replace(' at new ', ' at ');\n\t {\n\t if (typeof fn === 'function') {\n\t componentFrameCache.set(fn, _frame);\n\t }\n\t } // Return the line we found.\n\n\t return _frame;\n\t }\n\t } while (s >= 1 && c >= 0);\n\t }\n\t break;\n\t }\n\t }\n\t }\n\t } finally {\n\t reentry = false;\n\t {\n\t ReactCurrentDispatcher$1.current = previousDispatcher;\n\t reenableLogs();\n\t }\n\t Error.prepareStackTrace = previousPrepareStackTrace;\n\t } // Fallback to just using the name if we couldn't make it throw.\n\n\t var name = fn ? fn.displayName || fn.name : '';\n\t var syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';\n\t {\n\t if (typeof fn === 'function') {\n\t componentFrameCache.set(fn, syntheticFrame);\n\t }\n\t }\n\t return syntheticFrame;\n\t }\n\t function describeFunctionComponentFrame(fn, source, ownerFn) {\n\t {\n\t return describeNativeComponentFrame(fn, false);\n\t }\n\t }\n\t function shouldConstruct(Component) {\n\t var prototype = Component.prototype;\n\t return !!(prototype && prototype.isReactComponent);\n\t }\n\t function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {\n\t if (type == null) {\n\t return '';\n\t }\n\t if (typeof type === 'function') {\n\t {\n\t return describeNativeComponentFrame(type, shouldConstruct(type));\n\t }\n\t }\n\t if (typeof type === 'string') {\n\t return describeBuiltInComponentFrame(type);\n\t }\n\t switch (type) {\n\t case exports.Suspense:\n\t return describeBuiltInComponentFrame('Suspense');\n\t case REACT_SUSPENSE_LIST_TYPE:\n\t return describeBuiltInComponentFrame('SuspenseList');\n\t }\n\t if (typeof type === 'object') {\n\t switch (type.$$typeof) {\n\t case REACT_FORWARD_REF_TYPE:\n\t return describeFunctionComponentFrame(type.render);\n\t case REACT_MEMO_TYPE:\n\t // Memo may contain any component type so we recursively resolve it.\n\t return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);\n\t case REACT_BLOCK_TYPE:\n\t return describeFunctionComponentFrame(type._render);\n\t case REACT_LAZY_TYPE:\n\t {\n\t var lazyComponent = type;\n\t var payload = lazyComponent._payload;\n\t var init = lazyComponent._init;\n\t try {\n\t // Lazy may contain any component type so we recursively resolve it.\n\t return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn);\n\t } catch (x) {}\n\t }\n\t }\n\t }\n\t return '';\n\t }\n\t var loggedTypeFailures = {};\n\t var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;\n\t function setCurrentlyValidatingElement(element) {\n\t {\n\t if (element) {\n\t var owner = element._owner;\n\t var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);\n\t ReactDebugCurrentFrame$1.setExtraStackFrame(stack);\n\t } else {\n\t ReactDebugCurrentFrame$1.setExtraStackFrame(null);\n\t }\n\t }\n\t }\n\t function checkPropTypes(typeSpecs, values, location, componentName, element) {\n\t {\n\t // $FlowFixMe This is okay but Flow doesn't know it.\n\t var has = Function.call.bind(Object.prototype.hasOwnProperty);\n\t for (var typeSpecName in typeSpecs) {\n\t if (has(typeSpecs, typeSpecName)) {\n\t var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to\n\t // fail the render phase where it didn't fail before. So we log it.\n\t // After these have been cleaned up, we'll let them throw.\n\n\t try {\n\t // This is intentionally an invariant that gets caught. It's the same\n\t // behavior as without this statement except with a better message.\n\t if (typeof typeSpecs[typeSpecName] !== 'function') {\n\t var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');\n\t err.name = 'Invariant Violation';\n\t throw err;\n\t }\n\t error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');\n\t } catch (ex) {\n\t error$1 = ex;\n\t }\n\t if (error$1 && !(error$1 instanceof Error)) {\n\t setCurrentlyValidatingElement(element);\n\t error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);\n\t setCurrentlyValidatingElement(null);\n\t }\n\t if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {\n\t // Only monitor this failure once because there tends to be a lot of the\n\t // same error.\n\t loggedTypeFailures[error$1.message] = true;\n\t setCurrentlyValidatingElement(element);\n\t error('Failed %s type: %s', location, error$1.message);\n\t setCurrentlyValidatingElement(null);\n\t }\n\t }\n\t }\n\t }\n\t }\n\t function setCurrentlyValidatingElement$1(element) {\n\t {\n\t if (element) {\n\t var owner = element._owner;\n\t var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);\n\t setExtraStackFrame(stack);\n\t } else {\n\t setExtraStackFrame(null);\n\t }\n\t }\n\t }\n\t var propTypesMisspellWarningShown;\n\t {\n\t propTypesMisspellWarningShown = false;\n\t }\n\t function getDeclarationErrorAddendum() {\n\t if (ReactCurrentOwner.current) {\n\t var name = getComponentName(ReactCurrentOwner.current.type);\n\t if (name) {\n\t return '\\n\\nCheck the render method of `' + name + '`.';\n\t }\n\t }\n\t return '';\n\t }\n\t function getSourceInfoErrorAddendum(source) {\n\t if (source !== undefined) {\n\t var fileName = source.fileName.replace(/^.*[\\\\\\/]/, '');\n\t var lineNumber = source.lineNumber;\n\t return '\\n\\nCheck your code at ' + fileName + ':' + lineNumber + '.';\n\t }\n\t return '';\n\t }\n\t function getSourceInfoErrorAddendumForProps(elementProps) {\n\t if (elementProps !== null && elementProps !== undefined) {\n\t return getSourceInfoErrorAddendum(elementProps.__source);\n\t }\n\t return '';\n\t }\n\t /**\n\t * Warn if there's no key explicitly set on dynamic arrays of children or\n\t * object keys are not valid. This allows us to keep track of children between\n\t * updates.\n\t */\n\n\t var ownerHasKeyUseWarning = {};\n\t function getCurrentComponentErrorInfo(parentType) {\n\t var info = getDeclarationErrorAddendum();\n\t if (!info) {\n\t var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;\n\t if (parentName) {\n\t info = \"\\n\\nCheck the top-level render call using <\" + parentName + \">.\";\n\t }\n\t }\n\t return info;\n\t }\n\t /**\n\t * Warn if the element doesn't have an explicit key assigned to it.\n\t * This element is in an array. The array could grow and shrink or be\n\t * reordered. All children that haven't already been validated are required to\n\t * have a \"key\" property assigned to it. Error statuses are cached so a warning\n\t * will only be shown once.\n\t *\n\t * @internal\n\t * @param {ReactElement} element Element that requires a key.\n\t * @param {*} parentType element's parent's type.\n\t */\n\n\t function validateExplicitKey(element, parentType) {\n\t if (!element._store || element._store.validated || element.key != null) {\n\t return;\n\t }\n\t element._store.validated = true;\n\t var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);\n\t if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {\n\t return;\n\t }\n\t ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a\n\t // property, it may be the creator of the child that's responsible for\n\t // assigning it a key.\n\n\t var childOwner = '';\n\t if (element && element._owner && element._owner !== ReactCurrentOwner.current) {\n\t // Give the component that originally created this child.\n\t childOwner = \" It was passed a child from \" + getComponentName(element._owner.type) + \".\";\n\t }\n\t {\n\t setCurrentlyValidatingElement$1(element);\n\t error('Each child in a list should have a unique \"key\" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);\n\t setCurrentlyValidatingElement$1(null);\n\t }\n\t }\n\t /**\n\t * Ensure that every element either is passed in a static location, in an\n\t * array with an explicit keys property defined, or in an object literal\n\t * with valid key property.\n\t *\n\t * @internal\n\t * @param {ReactNode} node Statically passed child of any type.\n\t * @param {*} parentType node's parent's type.\n\t */\n\n\t function validateChildKeys(node, parentType) {\n\t if (typeof node !== 'object') {\n\t return;\n\t }\n\t if (Array.isArray(node)) {\n\t for (var i = 0; i < node.length; i++) {\n\t var child = node[i];\n\t if (isValidElement(child)) {\n\t validateExplicitKey(child, parentType);\n\t }\n\t }\n\t } else if (isValidElement(node)) {\n\t // This element was passed in a valid location.\n\t if (node._store) {\n\t node._store.validated = true;\n\t }\n\t } else if (node) {\n\t var iteratorFn = getIteratorFn(node);\n\t if (typeof iteratorFn === 'function') {\n\t // Entry iterators used to provide implicit keys,\n\t // but now we print a separate warning for them later.\n\t if (iteratorFn !== node.entries) {\n\t var iterator = iteratorFn.call(node);\n\t var step;\n\t while (!(step = iterator.next()).done) {\n\t if (isValidElement(step.value)) {\n\t validateExplicitKey(step.value, parentType);\n\t }\n\t }\n\t }\n\t }\n\t }\n\t }\n\t /**\n\t * Given an element, validate that its props follow the propTypes definition,\n\t * provided by the type.\n\t *\n\t * @param {ReactElement} element\n\t */\n\n\t function validatePropTypes(element) {\n\t {\n\t var type = element.type;\n\t if (type === null || type === undefined || typeof type === 'string') {\n\t return;\n\t }\n\t var propTypes;\n\t if (typeof type === 'function') {\n\t propTypes = type.propTypes;\n\t } else if (typeof type === 'object' && (type.$$typeof === REACT_FORWARD_REF_TYPE ||\n\t // Note: Memo only checks outer props here.\n\t // Inner props are checked in the reconciler.\n\t type.$$typeof === REACT_MEMO_TYPE)) {\n\t propTypes = type.propTypes;\n\t } else {\n\t return;\n\t }\n\t if (propTypes) {\n\t // Intentionally inside to avoid triggering lazy initializers:\n\t var name = getComponentName(type);\n\t checkPropTypes(propTypes, element.props, 'prop', name, element);\n\t } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {\n\t propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:\n\n\t var _name = getComponentName(type);\n\t error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');\n\t }\n\t if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {\n\t error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');\n\t }\n\t }\n\t }\n\t /**\n\t * Given a fragment, validate that it can only be provided with fragment props\n\t * @param {ReactElement} fragment\n\t */\n\n\t function validateFragmentProps(fragment) {\n\t {\n\t var keys = Object.keys(fragment.props);\n\t for (var i = 0; i < keys.length; i++) {\n\t var key = keys[i];\n\t if (key !== 'children' && key !== 'key') {\n\t setCurrentlyValidatingElement$1(fragment);\n\t error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);\n\t setCurrentlyValidatingElement$1(null);\n\t break;\n\t }\n\t }\n\t if (fragment.ref !== null) {\n\t setCurrentlyValidatingElement$1(fragment);\n\t error('Invalid attribute `ref` supplied to `React.Fragment`.');\n\t setCurrentlyValidatingElement$1(null);\n\t }\n\t }\n\t }\n\t function createElementWithValidation(type, props, children) {\n\t var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to\n\t // succeed and there will likely be errors in render.\n\n\t if (!validType) {\n\t var info = '';\n\t if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {\n\t info += ' You likely forgot to export your component from the file ' + \"it's defined in, or you might have mixed up default and named imports.\";\n\t }\n\t var sourceInfo = getSourceInfoErrorAddendumForProps(props);\n\t if (sourceInfo) {\n\t info += sourceInfo;\n\t } else {\n\t info += getDeclarationErrorAddendum();\n\t }\n\t var typeString;\n\t if (type === null) {\n\t typeString = 'null';\n\t } else if (Array.isArray(type)) {\n\t typeString = 'array';\n\t } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {\n\t typeString = \"<\" + (getComponentName(type.type) || 'Unknown') + \" />\";\n\t info = ' Did you accidentally export a JSX literal instead of a component?';\n\t } else {\n\t typeString = typeof type;\n\t }\n\t {\n\t error('React.createElement: type is invalid -- expected a string (for ' + 'built-in components) or a class/function (for composite ' + 'components) but got: %s.%s', typeString, info);\n\t }\n\t }\n\t var element = createElement.apply(this, arguments); // The result can be nullish if a mock or a custom function is used.\n\t // TODO: Drop this when these are no longer allowed as the type argument.\n\n\t if (element == null) {\n\t return element;\n\t } // Skip key warning if the type isn't valid since our key validation logic\n\t // doesn't expect a non-string/function type and can throw confusing errors.\n\t // We don't want exception behavior to differ between dev and prod.\n\t // (Rendering will throw with a helpful message and as soon as the type is\n\t // fixed, the key warnings will appear.)\n\n\t if (validType) {\n\t for (var i = 2; i < arguments.length; i++) {\n\t validateChildKeys(arguments[i], type);\n\t }\n\t }\n\t if (type === exports.Fragment) {\n\t validateFragmentProps(element);\n\t } else {\n\t validatePropTypes(element);\n\t }\n\t return element;\n\t }\n\t var didWarnAboutDeprecatedCreateFactory = false;\n\t function createFactoryWithValidation(type) {\n\t var validatedFactory = createElementWithValidation.bind(null, type);\n\t validatedFactory.type = type;\n\t {\n\t if (!didWarnAboutDeprecatedCreateFactory) {\n\t didWarnAboutDeprecatedCreateFactory = true;\n\t warn('React.createFactory() is deprecated and will be removed in ' + 'a future major release. Consider using JSX ' + 'or use React.createElement() directly instead.');\n\t } // Legacy hook: remove it\n\n\t Object.defineProperty(validatedFactory, 'type', {\n\t enumerable: false,\n\t get: function () {\n\t warn('Factory.type is deprecated. Access the class directly ' + 'before passing it to createFactory.');\n\t Object.defineProperty(this, 'type', {\n\t value: type\n\t });\n\t return type;\n\t }\n\t });\n\t }\n\t return validatedFactory;\n\t }\n\t function cloneElementWithValidation(element, props, children) {\n\t var newElement = cloneElement.apply(this, arguments);\n\t for (var i = 2; i < arguments.length; i++) {\n\t validateChildKeys(arguments[i], newElement.type);\n\t }\n\t validatePropTypes(newElement);\n\t return newElement;\n\t }\n\t {\n\t try {\n\t var frozenObject = Object.freeze({});\n\t /* eslint-disable no-new */\n\n\t new Map([[frozenObject, null]]);\n\t new Set([frozenObject]);\n\t /* eslint-enable no-new */\n\t } catch (e) {}\n\t }\n\t var createElement$1 = createElementWithValidation;\n\t var cloneElement$1 = cloneElementWithValidation;\n\t var createFactory = createFactoryWithValidation;\n\t var Children = {\n\t map: mapChildren,\n\t forEach: forEachChildren,\n\t count: countChildren,\n\t toArray: toArray,\n\t only: onlyChild\n\t };\n\t exports.Children = Children;\n\t exports.Component = Component;\n\t exports.PureComponent = PureComponent;\n\t exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactSharedInternals;\n\t exports.cloneElement = cloneElement$1;\n\t exports.createContext = createContext;\n\t exports.createElement = createElement$1;\n\t exports.createFactory = createFactory;\n\t exports.createRef = createRef;\n\t exports.forwardRef = forwardRef;\n\t exports.isValidElement = isValidElement;\n\t exports.lazy = lazy;\n\t exports.memo = memo;\n\t exports.useCallback = useCallback;\n\t exports.useContext = useContext;\n\t exports.useDebugValue = useDebugValue;\n\t exports.useEffect = useEffect;\n\t exports.useImperativeHandle = useImperativeHandle;\n\t exports.useLayoutEffect = useLayoutEffect;\n\t exports.useMemo = useMemo;\n\t exports.useReducer = useReducer;\n\t exports.useRef = useRef;\n\t exports.useState = useState;\n\t exports.version = ReactVersion;\n\t })();\n\t}\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports) {\n\n\t/*\n\tobject-assign\n\t(c) Sindre Sorhus\n\t@license MIT\n\t*/\n\n\t'use strict';\n\n\t/* eslint-disable no-unused-vars */\n\tvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\n\tvar hasOwnProperty = Object.prototype.hasOwnProperty;\n\tvar propIsEnumerable = Object.prototype.propertyIsEnumerable;\n\tfunction toObject(val) {\n\t if (val === null || val === undefined) {\n\t throw new TypeError('Object.assign cannot be called with null or undefined');\n\t }\n\t return Object(val);\n\t}\n\tfunction shouldUseNative() {\n\t try {\n\t if (!Object.assign) {\n\t return false;\n\t }\n\n\t // Detect buggy property enumeration order in older V8 versions.\n\n\t // https://bugs.chromium.org/p/v8/issues/detail?id=4118\n\t var test1 = new String('abc'); // eslint-disable-line no-new-wrappers\n\t test1[5] = 'de';\n\t if (Object.getOwnPropertyNames(test1)[0] === '5') {\n\t return false;\n\t }\n\n\t // https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t var test2 = {};\n\t for (var i = 0; i < 10; i++) {\n\t test2['_' + String.fromCharCode(i)] = i;\n\t }\n\t var order2 = Object.getOwnPropertyNames(test2).map(function (n) {\n\t return test2[n];\n\t });\n\t if (order2.join('') !== '0123456789') {\n\t return false;\n\t }\n\n\t // https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t var test3 = {};\n\t 'abcdefghijklmnopqrst'.split('').forEach(function (letter) {\n\t test3[letter] = letter;\n\t });\n\t if (Object.keys(Object.assign({}, test3)).join('') !== 'abcdefghijklmnopqrst') {\n\t return false;\n\t }\n\t return true;\n\t } catch (err) {\n\t // We don't expect any of the above to throw, but better to be safe.\n\t return false;\n\t }\n\t}\n\tmodule.exports = shouldUseNative() ? Object.assign : function (target, source) {\n\t var from;\n\t var to = toObject(target);\n\t var symbols;\n\t for (var s = 1; s < arguments.length; s++) {\n\t from = Object(arguments[s]);\n\t for (var key in from) {\n\t if (hasOwnProperty.call(from, key)) {\n\t to[key] = from[key];\n\t }\n\t }\n\t if (getOwnPropertySymbols) {\n\t symbols = getOwnPropertySymbols(from);\n\t for (var i = 0; i < symbols.length; i++) {\n\t if (propIsEnumerable.call(from, symbols[i])) {\n\t to[symbols[i]] = from[symbols[i]];\n\t }\n\t }\n\t }\n\t }\n\t return to;\n\t};\n\n/***/ }),\n/* 8 */\n/***/ (function(module, exports) {\n\n\t/**\n\t * Copyright (c) 2013-present, Facebook, Inc.\n\t *\n\t * This source code is licensed under the MIT license found in the\n\t * LICENSE file in the root directory of this source tree.\n\t *\n\t * @typechecks\n\t * \n\t */\n\n\t/*eslint-disable no-self-compare */\n\t'use strict';\n\n\tvar hasOwnProperty = Object.prototype.hasOwnProperty;\n\t/**\n\t * inlined Object.is polyfill to avoid requiring consumers ship their own\n\t * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is\n\t */\n\n\tfunction is(x, y) {\n\t // SameValue algorithm\n\t if (x === y) {\n\t // Steps 1-5, 7-10\n\t // Steps 6.b-6.e: +0 != -0\n\t // Added the nonzero y check to make Flow happy, but it is redundant\n\t return x !== 0 || y !== 0 || 1 / x === 1 / y;\n\t } else {\n\t // Step 6.a: NaN == NaN\n\t return x !== x && y !== y;\n\t }\n\t}\n\t/**\n\t * Performs equality by iterating through keys on an object and returning false\n\t * when any key has values which are not strictly equal between the arguments.\n\t * Returns true when the values of all keys are strictly equal.\n\t */\n\n\tfunction shallowEqual(objA, objB) {\n\t if (is(objA, objB)) {\n\t return true;\n\t }\n\t if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {\n\t return false;\n\t }\n\t var keysA = Object.keys(objA);\n\t var keysB = Object.keys(objB);\n\t if (keysA.length !== keysB.length) {\n\t return false;\n\t } // Test for A's keys different from B.\n\n\t for (var i = 0; i < keysA.length; i++) {\n\t if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {\n\t return false;\n\t }\n\t }\n\t return true;\n\t}\n\tmodule.exports = shallowEqual;\n\n/***/ }),\n/* 9 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\n\t * Copyright (c) Meta Platforms, Inc. and affiliates. All rights reserved.\n\t *\n\t * This source code is licensed under the BSD-style license found in the\n\t * LICENSE file in the root directory of this source tree. An additional grant\n\t * of patent rights can be found in the PATENTS file in the same directory.\n\t *\n\t * @providesModule FluxMixinLegacy\n\t * \n\t */\n\n\t'use strict';\n\n\tfunction _createForOfIteratorHelper(o, allowArrayLike) {\n\t var it = typeof Symbol !== \"undefined\" && o[Symbol.iterator] || o[\"@@iterator\"];\n\t if (!it) {\n\t if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") {\n\t if (it) o = it;\n\t var i = 0;\n\t var F = function F() {};\n\t return {\n\t s: F,\n\t n: function n() {\n\t if (i >= o.length) return {\n\t done: true\n\t };\n\t return {\n\t done: false,\n\t value: o[i++]\n\t };\n\t },\n\t e: function e(_e) {\n\t throw _e;\n\t },\n\t f: F\n\t };\n\t }\n\t throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n\t }\n\t var normalCompletion = true,\n\t didErr = false,\n\t err;\n\t return {\n\t s: function s() {\n\t it = it.call(o);\n\t },\n\t n: function n() {\n\t var step = it.next();\n\t normalCompletion = step.done;\n\t return step;\n\t },\n\t e: function e(_e2) {\n\t didErr = true;\n\t err = _e2;\n\t },\n\t f: function f() {\n\t try {\n\t if (!normalCompletion && it[\"return\"] != null) it[\"return\"]();\n\t } finally {\n\t if (didErr) throw err;\n\t }\n\t }\n\t };\n\t}\n\tfunction _unsupportedIterableToArray(o, minLen) {\n\t if (!o) return;\n\t if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n\t var n = Object.prototype.toString.call(o).slice(8, -1);\n\t if (n === \"Object\" && o.constructor) n = o.constructor.name;\n\t if (n === \"Map\" || n === \"Set\") return Array.from(o);\n\t if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n\t}\n\tfunction _arrayLikeToArray(arr, len) {\n\t if (len == null || len > arr.length) len = arr.length;\n\t for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n\t return arr2;\n\t}\n\tvar FluxStoreGroup = __webpack_require__(3);\n\tvar invariant = __webpack_require__(4);\n\t/**\n\t * `FluxContainer` should be preferred over this mixin, but it requires using\n\t * react with classes. So this mixin is provided where it is not yet possible\n\t * to convert a container to be a class.\n\t *\n\t * This mixin should be used for React components that have state based purely\n\t * on stores. `this.props` will not be available inside of `calculateState()`.\n\t *\n\t * This mixin will only `setState` not replace it, so you should always return\n\t * every key in your state unless you know what you are doing. Consider this:\n\t *\n\t * var Foo = React.createClass({\n\t * mixins: [\n\t * FluxMixinLegacy([FooStore])\n\t * ],\n\t *\n\t * statics: {\n\t * calculateState(prevState) {\n\t * if (!prevState) {\n\t * return {\n\t * foo: FooStore.getFoo(),\n\t * };\n\t * }\n\t *\n\t * return {\n\t * bar: FooStore.getBar(),\n\t * };\n\t * }\n\t * },\n\t * });\n\t *\n\t * On the second calculateState when prevState is not null, the state will be\n\t * updated to contain the previous foo AND the bar that was just returned. Only\n\t * returning bar will not delete foo.\n\t *\n\t */\n\tfunction FluxMixinLegacy(stores) {\n\t var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {\n\t withProps: false\n\t };\n\t stores = stores.filter(function (store) {\n\t return !!store;\n\t });\n\t return {\n\t getInitialState: function getInitialState() {\n\t enforceInterface(this);\n\t return options.withProps ? this.constructor.calculateState(null, this.props) : this.constructor.calculateState(null, undefined);\n\t },\n\t componentWillMount: function componentWillMount() {\n\t var _this = this;\n\t // This tracks when any store has changed and we may need to update.\n\t var changed = false;\n\t var setChanged = function setChanged() {\n\t changed = true;\n\t };\n\n\t // This adds subscriptions to stores. When a store changes all we do is\n\t // set changed to true.\n\t this._fluxMixinSubscriptions = stores.map(function (store) {\n\t return store.addListener(setChanged);\n\t });\n\n\t // This callback is called after the dispatch of the relevant stores. If\n\t // any have reported a change we update the state, then reset changed.\n\t var callback = function callback() {\n\t if (changed) {\n\t _this.setState(function (prevState) {\n\t return options.withProps ? _this.constructor.calculateState(prevState, _this.props) : _this.constructor.calculateState(prevState, undefined);\n\t });\n\t }\n\t changed = false;\n\t };\n\t this._fluxMixinStoreGroup = new FluxStoreGroup(stores, callback);\n\t },\n\t componentWillUnmount: function componentWillUnmount() {\n\t this._fluxMixinStoreGroup.release();\n\t var _iterator = _createForOfIteratorHelper(this._fluxMixinSubscriptions),\n\t _step;\n\t try {\n\t for (_iterator.s(); !(_step = _iterator.n()).done;) {\n\t var subscription = _step.value;\n\t subscription.remove();\n\t }\n\t } catch (err) {\n\t _iterator.e(err);\n\t } finally {\n\t _iterator.f();\n\t }\n\t this._fluxMixinSubscriptions = [];\n\t }\n\t };\n\t}\n\tfunction enforceInterface(o) {\n\t !o.constructor.calculateState ? true ? invariant(false, 'Components that use FluxMixinLegacy must implement ' + '`calculateState()` on the statics object') : invariant(false) : void 0;\n\t}\n\tmodule.exports = FluxMixinLegacy;\n\n/***/ }),\n/* 10 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\n\t * Copyright (c) Meta Platforms, Inc. and affiliates. All rights reserved.\n\t *\n\t * This source code is licensed under the BSD-style license found in the\n\t * LICENSE file in the root directory of this source tree. An additional grant\n\t * of patent rights can be found in the PATENTS file in the same directory.\n\t *\n\t * @providesModule FluxReduceStore\n\t * \n\t */\n\n\t'use strict';\n\n\tfunction _assertThisInitialized(self) {\n\t if (self === void 0) {\n\t throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n\t }\n\t return self;\n\t}\n\tfunction _inheritsLoose(subClass, superClass) {\n\t subClass.prototype = Object.create(superClass.prototype);\n\t subClass.prototype.constructor = subClass;\n\t _setPrototypeOf(subClass, superClass);\n\t}\n\tfunction _setPrototypeOf(o, p) {\n\t _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {\n\t o.__proto__ = p;\n\t return o;\n\t };\n\t return _setPrototypeOf(o, p);\n\t}\n\tfunction _defineProperty(obj, key, value) {\n\t key = _toPropertyKey(key);\n\t if (key in obj) {\n\t Object.defineProperty(obj, key, {\n\t value: value,\n\t enumerable: true,\n\t configurable: true,\n\t writable: true\n\t });\n\t } else {\n\t obj[key] = value;\n\t }\n\t return obj;\n\t}\n\tfunction _toPropertyKey(arg) {\n\t var key = _toPrimitive(arg, \"string\");\n\t return typeof key === \"symbol\" ? key : String(key);\n\t}\n\tfunction _toPrimitive(input, hint) {\n\t if (typeof input !== \"object\" || input === null) return input;\n\t var prim = input[Symbol.toPrimitive];\n\t if (prim !== undefined) {\n\t var res = prim.call(input, hint || \"default\");\n\t if (typeof res !== \"object\") return res;\n\t throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n\t }\n\t return (hint === \"string\" ? String : Number)(input);\n\t}\n\tvar FluxStore = __webpack_require__(11);\n\tvar abstractMethod = __webpack_require__(18);\n\tvar invariant = __webpack_require__(4);\n\n\t/**\n\t * This is the basic building block of a Flux application. All of your stores\n\t * should extend this class.\n\t *\n\t * class CounterStore extends FluxReduceStore {\n\t * getInitialState(): number {\n\t * return 1;\n\t * }\n\t *\n\t * reduce(state: number, action: Object): number {\n\t * switch(action.type) {\n\t * case: 'add':\n\t * return state + action.value;\n\t * case: 'double':\n\t * return state * 2;\n\t * default:\n\t * return state;\n\t * }\n\t * }\n\t * }\n\t */\n\tvar FluxReduceStore = /*#__PURE__*/function (_FluxStore) {\n\t _inheritsLoose(FluxReduceStore, _FluxStore);\n\t function FluxReduceStore(dispatcher) {\n\t var _this;\n\t _this = _FluxStore.call(this, dispatcher) || this;\n\t _defineProperty(_assertThisInitialized(_this), \"_state\", void 0);\n\t _this._state = _this.getInitialState();\n\t return _this;\n\t }\n\n\t /**\n\t * Getter that exposes the entire state of this store. If your state is not\n\t * immutable you should override this and not expose _state directly.\n\t */\n\t var _proto = FluxReduceStore.prototype;\n\t _proto.getState = function getState() {\n\t return this._state;\n\t }\n\n\t /**\n\t * Constructs the initial state for this store. This is called once during\n\t * construction of the store.\n\t */;\n\t _proto.getInitialState = function getInitialState() {\n\t return abstractMethod('FluxReduceStore', 'getInitialState');\n\t }\n\n\t /**\n\t * Used to reduce a stream of actions coming from the dispatcher into a\n\t * single state object.\n\t */;\n\t _proto.reduce = function reduce(state, action) {\n\t return abstractMethod('FluxReduceStore', 'reduce');\n\t }\n\n\t /**\n\t * Checks if two versions of state are the same. You do not need to override\n\t * this if your state is immutable.\n\t */;\n\t _proto.areEqual = function areEqual(one, two) {\n\t return one === two;\n\t };\n\t _proto.__invokeOnDispatch = function __invokeOnDispatch(action) {\n\t this.__changed = false;\n\n\t // Reduce the stream of incoming actions to state, update when necessary.\n\t var startingState = this._state;\n\t var endingState = this.reduce(startingState, action);\n\n\t // This means your ending state should never be undefined.\n\t !(endingState !== undefined) ? true ? invariant(false, '%s returned undefined from reduce(...), did you forget to return ' + 'state in the default case? (use null if this was intentional)', this.constructor.name) : invariant(false) : void 0;\n\t if (!this.areEqual(startingState, endingState)) {\n\t this._state = endingState;\n\n\t // `__emitChange()` sets `this.__changed` to true and then the actual\n\t // change will be fired from the emitter at the end of the dispatch, this\n\t // is required in order to support methods like `hasChanged()`\n\t this.__emitChange();\n\t }\n\t if (this.__changed) {\n\t this.__emitter.emit(this.__changeEvent);\n\t }\n\t };\n\t return FluxReduceStore;\n\t}(FluxStore);\n\tmodule.exports = FluxReduceStore;\n\n/***/ }),\n/* 11 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\n\t * Copyright (c) Meta Platforms, Inc. and affiliates. All rights reserved.\n\t *\n\t * This source code is licensed under the BSD-style license found in the\n\t * LICENSE file in the root directory of this source tree. An additional grant\n\t * of patent rights can be found in the PATENTS file in the same directory.\n\t *\n\t * @providesModule FluxStore\n\t * \n\t */\n\n\t'use strict';\n\n\tfunction _defineProperty(obj, key, value) {\n\t key = _toPropertyKey(key);\n\t if (key in obj) {\n\t Object.defineProperty(obj, key, {\n\t value: value,\n\t enumerable: true,\n\t configurable: true,\n\t writable: true\n\t });\n\t } else {\n\t obj[key] = value;\n\t }\n\t return obj;\n\t}\n\tfunction _toPropertyKey(arg) {\n\t var key = _toPrimitive(arg, \"string\");\n\t return typeof key === \"symbol\" ? key : String(key);\n\t}\n\tfunction _toPrimitive(input, hint) {\n\t if (typeof input !== \"object\" || input === null) return input;\n\t var prim = input[Symbol.toPrimitive];\n\t if (prim !== undefined) {\n\t var res = prim.call(input, hint || \"default\");\n\t if (typeof res !== \"object\") return res;\n\t throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n\t }\n\t return (hint === \"string\" ? String : Number)(input);\n\t}\n\tvar _require = __webpack_require__(12),\n\t EventEmitter = _require.EventEmitter;\n\tvar invariant = __webpack_require__(4);\n\n\t/**\n\t * This class represents the most basic functionality for a FluxStore. Do not\n\t * extend this store directly; instead extend FluxReduceStore when creating a\n\t * new store.\n\t */\n\tvar FluxStore = /*#__PURE__*/function () {\n\t // private\n\n\t // protected, available to subclasses\n\n\t function FluxStore(dispatcher) {\n\t var _this = this;\n\t _defineProperty(this, \"_dispatchToken\", void 0);\n\t _defineProperty(this, \"__changed\", void 0);\n\t _defineProperty(this, \"__changeEvent\", void 0);\n\t _defineProperty(this, \"__className\", void 0);\n\t _defineProperty(this, \"__dispatcher\", void 0);\n\t _defineProperty(this, \"__emitter\", void 0);\n\t this.__className = this.constructor.name;\n\t this.__changed = false;\n\t this.__changeEvent = 'change';\n\t this.__dispatcher = dispatcher;\n\t this.__emitter = new EventEmitter();\n\t this._dispatchToken = dispatcher.register(function (payload) {\n\t _this.__invokeOnDispatch(payload);\n\t });\n\t }\n\t var _proto = FluxStore.prototype;\n\t _proto.addListener = function addListener(callback) {\n\t return this.__emitter.addListener(this.__changeEvent, callback);\n\t };\n\t _proto.getDispatcher = function getDispatcher() {\n\t return this.__dispatcher;\n\t }\n\n\t /**\n\t * This exposes a unique string to identify each store's registered callback.\n\t * This is used with the dispatcher's waitFor method to declaratively depend\n\t * on other stores updating themselves first.\n\t */;\n\t _proto.getDispatchToken = function getDispatchToken() {\n\t return this._dispatchToken;\n\t }\n\n\t /**\n\t * Returns whether the store has changed during the most recent dispatch.\n\t */;\n\t _proto.hasChanged = function hasChanged() {\n\t !this.__dispatcher.isDispatching() ? true ? invariant(false, '%s.hasChanged(): Must be invoked while dispatching.', this.__className) : invariant(false) : void 0;\n\t return this.__changed;\n\t };\n\t _proto.__emitChange = function __emitChange() {\n\t !this.__dispatcher.isDispatching() ? true ? invariant(false, '%s.__emitChange(): Must be invoked while dispatching.', this.__className) : invariant(false) : void 0;\n\t this.__changed = true;\n\t }\n\n\t /**\n\t * This method encapsulates all logic for invoking __onDispatch. It should\n\t * be used for things like catching changes and emitting them after the\n\t * subclass has handled a payload.\n\t */;\n\t _proto.__invokeOnDispatch = function __invokeOnDispatch(payload) {\n\t this.__changed = false;\n\t this.__onDispatch(payload);\n\t if (this.__changed) {\n\t this.__emitter.emit(this.__changeEvent);\n\t }\n\t }\n\n\t /**\n\t * The callback that will be registered with the dispatcher during\n\t * instantiation. Subclasses must override this method. This callback is the\n\t * only way the store receives new data.\n\t */;\n\t _proto.__onDispatch = function __onDispatch(payload) {\n\t true ? true ? invariant(false, '%s has not overridden FluxStore.__onDispatch(), which is required', this.__className) : invariant(false) : void 0;\n\t };\n\t return FluxStore;\n\t}();\n\tmodule.exports = FluxStore;\n\n/***/ }),\n/* 12 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\r\n\t * Copyright (c) 2014-present, Facebook, Inc.\r\n\t * All rights reserved.\r\n\t *\r\n\t * This source code is licensed under the BSD-style license found in the\r\n\t * LICENSE file in the root directory of this source tree. An additional grant\r\n\t * of patent rights can be found in the PATENTS file in the same directory.\r\n\t */\n\n\tvar fbemitter = {\n\t EventEmitter: __webpack_require__(13),\n\t EmitterSubscription: __webpack_require__(14)\n\t};\n\tmodule.exports = fbemitter;\n\n/***/ }),\n/* 13 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\n\t/**\r\n\t * Copyright (c) 2014-present, Facebook, Inc.\r\n\t * All rights reserved.\r\n\t *\r\n\t * This source code is licensed under the BSD-style license found in the\r\n\t * LICENSE file in the root directory of this source tree. An additional grant\r\n\t * of patent rights can be found in the PATENTS file in the same directory.\r\n\t *\r\n\t * @providesModule BaseEventEmitter\r\n\t * @typechecks\r\n\t */\n\tvar EmitterSubscription = __webpack_require__(14);\n\tvar EventSubscriptionVendor = __webpack_require__(16);\n\tvar invariant = __webpack_require__(4);\n\tvar emptyFunction = __webpack_require__(17);\n\t/**\r\n\t * @class BaseEventEmitter\r\n\t * @description\r\n\t * An EventEmitter is responsible for managing a set of listeners and publishing\r\n\t * events to them when it is told that such events happened. In addition to the\r\n\t * data for the given event it also sends a event control object which allows\r\n\t * the listeners/handlers to prevent the default behavior of the given event.\r\n\t *\r\n\t * The emitter is designed to be generic enough to support all the different\r\n\t * contexts in which one might want to emit events. It is a simple multicast\r\n\t * mechanism on top of which extra functionality can be composed. For example, a\r\n\t * more advanced emitter may use an EventHolder and EventFactory.\r\n\t */\n\n\tvar BaseEventEmitter = /*#__PURE__*/function () {\n\t /**\r\n\t * @constructor\r\n\t */\n\t function BaseEventEmitter() {\n\t this._subscriber = new EventSubscriptionVendor();\n\t this._currentSubscription = null;\n\t }\n\t /**\r\n\t * Adds a listener to be invoked when events of the specified type are\r\n\t * emitted. An optional calling context may be provided. The data arguments\r\n\t * emitted will be passed to the listener function.\r\n\t *\r\n\t * TODO: Annotate the listener arg's type. This is tricky because listeners\r\n\t * can be invoked with varargs.\r\n\t *\r\n\t * @param {string} eventType - Name of the event to listen to\r\n\t * @param {function} listener - Function to invoke when the specified event is\r\n\t * emitted\r\n\t * @param {*} context - Optional context object to use when invoking the\r\n\t * listener\r\n\t */\n\n\t var _proto = BaseEventEmitter.prototype;\n\t _proto.addListener = function addListener(eventType, listener, context) {\n\t return this._subscriber.addSubscription(eventType, new EmitterSubscription(this._subscriber, listener, context));\n\t }\n\t /**\r\n\t * Similar to addListener, except that the listener is removed after it is\r\n\t * invoked once.\r\n\t *\r\n\t * @param {string} eventType - Name of the event to listen to\r\n\t * @param {function} listener - Function to invoke only once when the\r\n\t * specified event is emitted\r\n\t * @param {*} context - Optional context object to use when invoking the\r\n\t * listener\r\n\t */;\n\n\t _proto.once = function once(eventType, listener, context) {\n\t var emitter = this;\n\t return this.addListener(eventType, function () {\n\t emitter.removeCurrentListener();\n\t listener.apply(context, arguments);\n\t });\n\t }\n\t /**\r\n\t * Removes all of the registered listeners, including those registered as\r\n\t * listener maps.\r\n\t *\r\n\t * @param {?string} eventType - Optional name of the event whose registered\r\n\t * listeners to remove\r\n\t */;\n\n\t _proto.removeAllListeners = function removeAllListeners(eventType) {\n\t this._subscriber.removeAllSubscriptions(eventType);\n\t }\n\t /**\r\n\t * Provides an API that can be called during an eventing cycle to remove the\r\n\t * last listener that was invoked. This allows a developer to provide an event\r\n\t * object that can remove the listener (or listener map) during the\r\n\t * invocation.\r\n\t *\r\n\t * If it is called when not inside of an emitting cycle it will throw.\r\n\t *\r\n\t * @throws {Error} When called not during an eventing cycle\r\n\t *\r\n\t * @example\r\n\t * var subscription = emitter.addListenerMap({\r\n\t * someEvent: function(data, event) {\r\n\t * console.log(data);\r\n\t * emitter.removeCurrentListener();\r\n\t * }\r\n\t * });\r\n\t *\r\n\t * emitter.emit('someEvent', 'abc'); // logs 'abc'\r\n\t * emitter.emit('someEvent', 'def'); // does not log anything\r\n\t */;\n\n\t _proto.removeCurrentListener = function removeCurrentListener() {\n\t !!!this._currentSubscription ? true ? invariant(false, 'Not in an emitting cycle; there is no current subscription') : invariant(false) : void 0;\n\t this._subscriber.removeSubscription(this._currentSubscription);\n\t }\n\t /**\r\n\t * Returns an array of listeners that are currently registered for the given\r\n\t * event.\r\n\t *\r\n\t * @param {string} eventType - Name of the event to query\r\n\t * @return {array}\r\n\t */;\n\n\t _proto.listeners = function listeners(eventType) /* TODO: Array */\n\t {\n\t var subscriptions = this._subscriber.getSubscriptionsForType(eventType);\n\t return subscriptions ? subscriptions.filter(emptyFunction.thatReturnsTrue).map(function (subscription) {\n\t return subscription.listener;\n\t }) : [];\n\t }\n\t /**\r\n\t * Emits an event of the given type with the given data. All handlers of that\r\n\t * particular type will be notified.\r\n\t *\r\n\t * @param {string} eventType - Name of the event to emit\r\n\t * @param {*} Arbitrary arguments to be passed to each registered listener\r\n\t *\r\n\t * @example\r\n\t * emitter.addListener('someEvent', function(message) {\r\n\t * console.log(message);\r\n\t * });\r\n\t *\r\n\t * emitter.emit('someEvent', 'abc'); // logs 'abc'\r\n\t */;\n\n\t _proto.emit = function emit(eventType) {\n\t var subscriptions = this._subscriber.getSubscriptionsForType(eventType);\n\t if (subscriptions) {\n\t var keys = Object.keys(subscriptions);\n\t for (var ii = 0; ii < keys.length; ii++) {\n\t var key = keys[ii];\n\t var subscription = subscriptions[key]; // The subscription may have been removed during this event loop.\n\n\t if (subscription) {\n\t this._currentSubscription = subscription;\n\t this.__emitToSubscription.apply(this, [subscription].concat(Array.prototype.slice.call(arguments)));\n\t }\n\t }\n\t this._currentSubscription = null;\n\t }\n\t }\n\t /**\r\n\t * Provides a hook to override how the emitter emits an event to a specific\r\n\t * subscription. This allows you to set up logging and error boundaries\r\n\t * specific to your environment.\r\n\t *\r\n\t * @param {EmitterSubscription} subscription\r\n\t * @param {string} eventType\r\n\t * @param {*} Arbitrary arguments to be passed to each registered listener\r\n\t */;\n\n\t _proto.__emitToSubscription = function __emitToSubscription(subscription, eventType) {\n\t var args = Array.prototype.slice.call(arguments, 2);\n\t subscription.listener.apply(subscription.context, args);\n\t };\n\t return BaseEventEmitter;\n\t}();\n\tmodule.exports = BaseEventEmitter;\n\n/***/ }),\n/* 14 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\r\n\t * Copyright (c) 2014-present, Facebook, Inc.\r\n\t * All rights reserved.\r\n\t *\r\n\t * This source code is licensed under the BSD-style license found in the\r\n\t * LICENSE file in the root directory of this source tree. An additional grant\r\n\t * of patent rights can be found in the PATENTS file in the same directory.\r\n\t *\r\n\t * @providesModule EmitterSubscription\r\n\t * @typechecks\r\n\t */\n\t'use strict';\n\n\tfunction _inheritsLoose(subClass, superClass) {\n\t subClass.prototype = Object.create(superClass.prototype);\n\t subClass.prototype.constructor = subClass;\n\t subClass.__proto__ = superClass;\n\t}\n\tvar EventSubscription = __webpack_require__(15);\n\t/**\r\n\t * EmitterSubscription represents a subscription with listener and context data.\r\n\t */\n\n\tvar EmitterSubscription = /*#__PURE__*/function (_EventSubscription) {\n\t _inheritsLoose(EmitterSubscription, _EventSubscription);\n\n\t /**\r\n\t * @param {EventSubscriptionVendor} subscriber - The subscriber that controls\r\n\t * this subscription\r\n\t * @param {function} listener - Function to invoke when the specified event is\r\n\t * emitted\r\n\t * @param {*} context - Optional context object to use when invoking the\r\n\t * listener\r\n\t */\n\t function EmitterSubscription(subscriber, listener, context) {\n\t var _this;\n\t _this = _EventSubscription.call(this, subscriber) || this;\n\t _this.listener = listener;\n\t _this.context = context;\n\t return _this;\n\t }\n\t return EmitterSubscription;\n\t}(EventSubscription);\n\tmodule.exports = EmitterSubscription;\n\n/***/ }),\n/* 15 */\n/***/ (function(module, exports) {\n\n\t/**\r\n\t * Copyright (c) 2014-present, Facebook, Inc.\r\n\t * All rights reserved.\r\n\t *\r\n\t * This source code is licensed under the BSD-style license found in the\r\n\t * LICENSE file in the root directory of this source tree. An additional grant\r\n\t * of patent rights can be found in the PATENTS file in the same directory.\r\n\t *\r\n\t * @providesModule EventSubscription\r\n\t * @typechecks\r\n\t */\n\t'use strict';\n\n\t/**\r\n\t * EventSubscription represents a subscription to a particular event. It can\r\n\t * remove its own subscription.\r\n\t */\n\tvar EventSubscription = /*#__PURE__*/function () {\n\t /**\r\n\t * @param {EventSubscriptionVendor} subscriber the subscriber that controls\r\n\t * this subscription.\r\n\t */\n\t function EventSubscription(subscriber) {\n\t this.subscriber = subscriber;\n\t }\n\t /**\r\n\t * Removes this subscription from the subscriber that controls it.\r\n\t */\n\n\t var _proto = EventSubscription.prototype;\n\t _proto.remove = function remove() {\n\t if (this.subscriber) {\n\t this.subscriber.removeSubscription(this);\n\t this.subscriber = null;\n\t }\n\t };\n\t return EventSubscription;\n\t}();\n\tmodule.exports = EventSubscription;\n\n/***/ }),\n/* 16 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\r\n\t * Copyright (c) 2014-present, Facebook, Inc.\r\n\t * All rights reserved.\r\n\t *\r\n\t * This source code is licensed under the BSD-style license found in the\r\n\t * LICENSE file in the root directory of this source tree. An additional grant\r\n\t * of patent rights can be found in the PATENTS file in the same directory.\r\n\t *\r\n\t * @providesModule EventSubscriptionVendor\r\n\t * @typechecks\r\n\t */\n\t'use strict';\n\n\tvar invariant = __webpack_require__(4);\n\t/**\r\n\t * EventSubscriptionVendor stores a set of EventSubscriptions that are\r\n\t * subscribed to a particular event type.\r\n\t */\n\n\tvar EventSubscriptionVendor = /*#__PURE__*/function () {\n\t function EventSubscriptionVendor() {\n\t this._subscriptionsForType = {};\n\t this._currentSubscription = null;\n\t }\n\t /**\r\n\t * Adds a subscription keyed by an event type.\r\n\t *\r\n\t * @param {string} eventType\r\n\t * @param {EventSubscription} subscription\r\n\t */\n\n\t var _proto = EventSubscriptionVendor.prototype;\n\t _proto.addSubscription = function addSubscription(eventType, subscription) {\n\t !(subscription.subscriber === this) ? true ? invariant(false, 'The subscriber of the subscription is incorrectly set.') : invariant(false) : void 0;\n\t if (!this._subscriptionsForType[eventType]) {\n\t this._subscriptionsForType[eventType] = [];\n\t }\n\t var key = this._subscriptionsForType[eventType].length;\n\t this._subscriptionsForType[eventType].push(subscription);\n\t subscription.eventType = eventType;\n\t subscription.key = key;\n\t return subscription;\n\t }\n\t /**\r\n\t * Removes a bulk set of the subscriptions.\r\n\t *\r\n\t * @param {?string} eventType - Optional name of the event type whose\r\n\t * registered supscriptions to remove, if null remove all subscriptions.\r\n\t */;\n\n\t _proto.removeAllSubscriptions = function removeAllSubscriptions(eventType) {\n\t if (eventType === undefined) {\n\t this._subscriptionsForType = {};\n\t } else {\n\t delete this._subscriptionsForType[eventType];\n\t }\n\t }\n\t /**\r\n\t * Removes a specific subscription. Instead of calling this function, call\r\n\t * `subscription.remove()` directly.\r\n\t *\r\n\t * @param {object} subscription\r\n\t */;\n\n\t _proto.removeSubscription = function removeSubscription(subscription) {\n\t var eventType = subscription.eventType;\n\t var key = subscription.key;\n\t var subscriptionsForType = this._subscriptionsForType[eventType];\n\t if (subscriptionsForType) {\n\t delete subscriptionsForType[key];\n\t }\n\t }\n\t /**\r\n\t * Returns the array of subscriptions that are currently registered for the\r\n\t * given event type.\r\n\t *\r\n\t * Note: This array can be potentially sparse as subscriptions are deleted\r\n\t * from it when they are removed.\r\n\t *\r\n\t * TODO: This returns a nullable array. wat?\r\n\t *\r\n\t * @param {string} eventType\r\n\t * @return {?array}\r\n\t */;\n\n\t _proto.getSubscriptionsForType = function getSubscriptionsForType(eventType) {\n\t return this._subscriptionsForType[eventType];\n\t };\n\t return EventSubscriptionVendor;\n\t}();\n\tmodule.exports = EventSubscriptionVendor;\n\n/***/ }),\n/* 17 */\n/***/ (function(module, exports) {\n\n\t\"use strict\";\n\n\t/**\n\t * Copyright (c) 2013-present, Facebook, Inc.\n\t *\n\t * This source code is licensed under the MIT license found in the\n\t * LICENSE file in the root directory of this source tree.\n\t *\n\t * \n\t */\n\tfunction makeEmptyFunction(arg) {\n\t return function () {\n\t return arg;\n\t };\n\t}\n\t/**\n\t * This function accepts and discards inputs; it has no side effects. This is\n\t * primarily useful idiomatically for overridable function endpoints which\n\t * always need to be callable, since JS lacks a null-call idiom ala Cocoa.\n\t */\n\n\tvar emptyFunction = function emptyFunction() {};\n\temptyFunction.thatReturns = makeEmptyFunction;\n\temptyFunction.thatReturnsFalse = makeEmptyFunction(false);\n\temptyFunction.thatReturnsTrue = makeEmptyFunction(true);\n\temptyFunction.thatReturnsNull = makeEmptyFunction(null);\n\temptyFunction.thatReturnsThis = function () {\n\t return this;\n\t};\n\temptyFunction.thatReturnsArgument = function (arg) {\n\t return arg;\n\t};\n\tmodule.exports = emptyFunction;\n\n/***/ }),\n/* 18 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\n\t * Copyright (c) Meta Platforms, Inc. and affiliates.\n\t * All rights reserved.\n\t *\n\t * This source code is licensed under the BSD-style license found in the\n\t * LICENSE file in the root directory of this source tree. An additional grant\n\t * of patent rights can be found in the PATENTS file in the same directory.\n\t *\n\t * @providesModule abstractMethod\n\t * \n\t */\n\n\t'use strict';\n\n\tvar invariant = __webpack_require__(4);\n\tfunction abstractMethod(className, methodName) {\n\t true ? true ? invariant(false, 'Subclasses of %s must override %s() with their own implementation.', className, methodName) : invariant(false) : void 0;\n\t}\n\tmodule.exports = abstractMethod;\n\n/***/ })\n/******/ ])\n});\n;" }, { "path": "docs/Dispatcher.ko-KR.md", "content": "---\nid: dispatcher-ko-KR\ntitle: Dispatcher\n---\n\nDispatcher는 등록된 callback에 데이터를 중계할 때 사용된다. 일반적인 pub-sub 시스템과는 다음 두 항목이 다르다:\n\n- 콜백은 이벤트를 개별적으로 구독하지 않는다. 모든 데이터 변동은 등록된 모든 콜백에 전달된다.\n- 콜백이 실행될 때 콜백의 전체나 일부를 중단할 수 있다.\n\n소스 코드를 보려면 [Dispatcher.js](https://github.com/facebookarchive/flux/blob/master/src/Dispatcher.js)에서 확인할 수 있다.\n\n## API\n\n- **`register(function callback): string`** 모든 데이터 변동이 있을 때 실행될 콜백을 등록한다. `waitFor()`에서 사용 가능한 토큰을 반환한다.\n\n- **`unregister(string id): void`** 토큰으로 콜백을 제거한다.\n\n- **`waitFor(array ids): void`** 현재 실행한 콜백이 진행되기 전에 특정 콜백을 지연하게 한다. 데이터 변동에 응답하는 콜백에만 사용해야 한다.\n\n- **`dispatch(object payload): void`** 등록된 모든 콜백에 데이터를 전달한다.\n\n- **`isDispatching(): boolean`** 이 Dispatcher가 지금 데이터를 전달하고 있는지 확인한다.\n\n## 예시\n\n가상의 비행 목적지 양식에서 국가를 선택했을 때 기본 도시를 선택하는 예를 보자:\n\n```js\nvar flightDispatcher = new Dispatcher();\n\n// 어떤 국가를 선택했는지 계속 추적한다\nvar CountryStore = {country: null};\n\n// 어느 도시를 선택했는지 계속 추적한다\nvar CityStore = {city: null};\n\n// 선택된 도시의 기본 항공료를 계속 추적한다\nvar FlightPriceStore = {price: null};\n```\n\n사용자가 선택한 도시를 변경하면 데이터를 전달한다:\n\n```js\nflightDispatcher.dispatch({\n actionType: 'city-update',\n selectedCity: 'paris',\n});\n```\n\n이 데이터 변동은 `CityStore`가 소화한다:\n\n```js\nflightDispatcher.register(function (payload) {\n if (payload.actionType === 'city-update') {\n CityStore.city = payload.selectedCity;\n }\n});\n```\n\n사용자가 국가를 선택하면 데이터를 전달한다:\n\n```js\nflightDispatcher.dispatch({\n actionType: 'country-update',\n selectedCountry: 'australia',\n});\n```\n\n이 데이터는 두 store에 의해 소화된다:\n\n```js\nCountryStore.dispatchToken = flightDispatcher.register(function (payload) {\n if (payload.actionType === 'country-update') {\n CountryStore.country = payload.selectedCountry;\n }\n});\n```\n\n`CountryStore`가 등록한 콜백을 업데이트 할 때 반환되는 토큰을 참조값으로 저장했다. 이 토큰은 `waitFor()` 에서 사용할 수 있고 `CityStore`가 갱신하는 것보다 먼저 `CountryStore`를 갱신하도록 보장할 수 있다.\n\n```js\nCityStore.dispatchToken = flightDispatcher.register(function (payload) {\n if (payload.actionType === 'country-update') {\n // `CountryStore.country`는 업데이트 되지 않는다\n flightDispatcher.waitFor([CountryStore.dispatchToken]);\n // `CountryStore.country`는 업데이트가 될 수 있음이 보장되었다\n\n // 새로운 국가의 기본 도시를 선택한다\n CityStore.city = getDefaultCityForCountry(CountryStore.country);\n }\n});\n```\n\n`waitFor()`는 다음과 같이 묶을 수 있다:\n\n```js\nFlightPriceStore.dispatchToken = flightDispatcher.register(function (payload) {\n switch (payload.actionType) {\n case 'country-update':\n case 'city-update':\n flightDispatcher.waitFor([CityStore.dispatchToken]);\n FlightPriceStore.price = getFlightPriceStore(\n CountryStore.country,\n CityStore.city,\n );\n break;\n }\n});\n```\n\n`country-update`는 콜백이 등록된 순서 즉 `CountryStore`, `CityStore`, `FlightPriceStore` 순서로 실행되도록 보장된다.\n" }, { "path": "docs/Dispatcher.md", "content": "---\nid: dispatcher\ntitle: Dispatcher\n---\n\nDispatcher is used to broadcast payloads to registered callbacks. This is different from generic pub-sub systems in two ways:\n\n- Callbacks are not subscribed to particular events. Every payload is dispatched to every registered callback.\n- Callbacks can be deferred in whole or part until other callbacks have been executed.\n\nCheck out [Dispatcher.js](https://github.com/facebookarchive/flux/blob/master/src/Dispatcher.js) for the source code.\n\n## API\n\n- **`register(function callback): string`** Registers a callback to be invoked with every dispatched payload. Returns a token that can be used with `waitFor()`.\n\n- **`unregister(string id): void`** Removes a callback based on its token.\n\n- **`waitFor(array ids): void`** Waits for the callbacks specified to be invoked before continuing execution of the current callback. This method should only be used by a callback in response to a dispatched payload.\n\n- **`dispatch(object payload): void`** Dispatches a payload to all registered callbacks.\n\n- **`isDispatching(): boolean`** Is this Dispatcher currently dispatching.\n\n## Example\n\nFor example, consider this hypothetical flight destination form, which selects a default city when a country is selected:\n\n```js\nvar flightDispatcher = new Dispatcher();\n\n// Keeps track of which country is selected\nvar CountryStore = {country: null};\n\n// Keeps track of which city is selected\nvar CityStore = {city: null};\n\n// Keeps track of the base flight price of the selected city\nvar FlightPriceStore = {price: null};\n```\n\nWhen a user changes the selected city, we dispatch the payload:\n\n```js\nflightDispatcher.dispatch({\n actionType: 'city-update',\n selectedCity: 'paris',\n});\n```\n\nThis payload is digested by `CityStore`:\n\n```js\nflightDispatcher.register(function (payload) {\n if (payload.actionType === 'city-update') {\n CityStore.city = payload.selectedCity;\n }\n});\n```\n\nWhen the user selects a country, we dispatch the payload:\n\n```js\nflightDispatcher.dispatch({\n actionType: 'country-update',\n selectedCountry: 'australia',\n});\n```\n\nThis payload is digested by both stores:\n\n```js\nCountryStore.dispatchToken = flightDispatcher.register(function (payload) {\n if (payload.actionType === 'country-update') {\n CountryStore.country = payload.selectedCountry;\n }\n});\n```\n\nWhen the callback to update `CountryStore` is registered, we save a reference to the returned token. Using this token with `waitFor()`, we can guarantee that `CountryStore` is updated before the callback that updates `CityStore` needs to query its data.\n\n```js\nCityStore.dispatchToken = flightDispatcher.register(function (payload) {\n if (payload.actionType === 'country-update') {\n // `CountryStore.country` may not be updated.\n flightDispatcher.waitFor([CountryStore.dispatchToken]);\n // `CountryStore.country` is now guaranteed to be updated.\n\n // Select the default city for the new country\n CityStore.city = getDefaultCityForCountry(CountryStore.country);\n }\n});\n```\n\nThe usage of `waitFor()` can be chained, for example:\n\n```js\nFlightPriceStore.dispatchToken = flightDispatcher.register(function (payload) {\n switch (payload.actionType) {\n case 'country-update':\n case 'city-update':\n flightDispatcher.waitFor([CityStore.dispatchToken]);\n FlightPriceStore.price = getFlightPriceStore(\n CountryStore.country,\n CityStore.city,\n );\n break;\n }\n});\n```\n\nThe `country-update` payload will be guaranteed to invoke the stores' registered callbacks in order: `CountryStore`, `CityStore`, then `FlightPriceStore`.\n" }, { "path": "docs/Flux-Utils.md", "content": "---\nid: flux-utils\ntitle: Flux Utils\n---\n\nFlux Utils is a set of basic utility classes to help get you started with Flux. These base classes are a solid foundation for a simple Flux application, but they are **not** a feature-complete framework that will handle all use cases. There are many other great Flux frameworks out there if these utilities do not fulfill your needs.\n\n## Usage\n\nThere are three main classes exposed in Flux Utils:\n\n1. `Store`\n1. `ReduceStore`\n1. `Container`\n\nThese base classes can be imported from `flux/utils` like this:\n\n```js\nimport {ReduceStore} from 'flux/utils';\n\nclass CounterStore extends ReduceStore {\n getInitialState(): number {\n return 0;\n }\n\n reduce(state: number, action: Object): number {\n switch (action.type) {\n case 'increment':\n return state + 1;\n\n case 'square':\n return state * state;\n\n default:\n return state;\n }\n }\n}\n```\n\n## Best practices\n\nThere are some best practices we try to follow when using these classes:\n\n### Stores\n\n- Cache data\n- Expose public getters to access data (never have public setters)\n- Respond to specific actions from the dispatcher\n- Always emit a change when their data changes\n- Only emit changes during a dispatch\n\n### Actions\n\nDescribe a user's action, are not setters. (e.g. `select-page` not `set-page-id`)\n\n### Containers\n\n- Are React components that control a view\n- Primary job is to gather information from stores and save it in their state\n- Have no `props` and no UI logic\n\n### Views\n\n- Are React components that are controlled by a container\n- Have all of the UI and rendering logic\n- Receive all information and callbacks as props\n\n## API\n\n### `Store`\n\n#### `constructor(dispatcher: Dispatcher)`\n\nConstructs and registers an instance of this store with the given dispatcher.\n\n#### `addListener(callback: Function): {remove: Function}`\n\nAdds a listener to the store, when the store changes the given callback will be called. A token is returned that can be used to remove the listener. Calling the `remove()` function on the returned token will remove the listener.\n\n#### `getDispatcher(): Dispatcher`\n\nReturns the dispatcher this store is registered with.\n\n#### `getDispatchToken(): DispatchToken`\n\nReturns the dispatch token that the dispatcher recognizes this store by. Can be used to `waitFor()` this store.\n\n#### `hasChanged(): boolean`\n\nAsk if a store has changed during the current dispatch. Can only be invoked while dispatching. This can be used for constructing derived stores that depend on data from other stores.\n\n#### `__emitChange(): void`\n\nEmit an event notifying all listeners that this store has changed. This can only be invoked when dispatching. Changes are de-duplicated and resolved at the end of this store's `__onDispatch` function.\n\n#### `onDispatch(payload: Object): void`\n\nSubclasses must override this method. This is how the store receives actions from the dispatcher. All state mutation logic must be done during this method.\n\n---\n\n### `ReduceStore`\n\nThis class extends the base `Store`.\n\n#### `getState(): T`\n\nGetter that exposes the entire state of this store. If your state is not immutable you should override this and not expose state directly.\n\n#### `getInitialState(): T`\n\nConstructs the initial state for this store. This is called once during construction of the store.\n\n#### `reduce(state: T, action: Object): T`\n\nReduces the current state, and an action to the new state of this store. All subclasses must implement this method. This method should be pure and have no side-effects.\n\n#### `areEqual(one: T, two: T): boolean`\n\nChecks if two versions of state are the same. You do not need to override this if your state is immutable.\n\n#### Doesn't Need to Emit a Change\n\nNote that any store that extends `ReduceStore` does not need to manually emit changes in `reduce()` (you still can if you want to though). The state is compared before and after each dispatch and changes are emitted automatically. If you need to control this behavior (perhaps because your state is mutable) override `areEqual()`.\n\n---\n\n### `Container`\n\n#### `create(base: ReactClass, options: ?Object): ReactClass`\n\nCreate is used to transform a react class into a container that updates its state when relevant stores change. The provided base class must have static methods `getStores()` and `calculateState()`.\n\n```js\nimport {Component} from 'react';\nimport {Container} from 'flux/utils';\n\nclass CounterContainer extends Component {\n static getStores() {\n return [CounterStore];\n }\n\n static calculateState(prevState) {\n return {\n counter: CounterStore.getState(),\n };\n }\n\n render() {\n return ;\n }\n}\n\nconst container = Container.create(CounterContainer);\n```\n\nAdditional options may be provided when creating your container in order to control certain behaviors.\n\n- **Containers are pure** - By default containers are pure, meaning they will not re-render when their props and state do not change (as determined by `shallowEquals()`). To disable this behavior pass options `{pure: false}` as the second argument to `create()`.\n\n- **Containers cannot access props** - By default containers are not able to access any props. This is both for performance reasons, and to ensure that containers are re-usable and props do not have to be threaded throughout a component tree. There are some valid situations in which you need to determine your state based on both props and a store's state. In those situations pass options `{withProps: true}` as the second argument to `create()`. This will expose the components props as the second argument to `calculateState()`.\n\nIf you are unable to utilize react classes most of this functionality is also mirrored in a mixin. `import {Mixin} from 'flux/utils';`\n\n## Using Flux with React Hooks\n\nReact 16.8 introduced [Hooks](https://reactjs.org/docs/hooks-intro.html). Much of the functionality of Flux and Flux Utils can be reproduced using [useContext](https://reactjs.org/docs/hooks-reference.html#usecontext) & [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer).\n\n## Existing Projects with `Store`/`ReduceStore`\n\nIf you have existing projects that need to continue using Flux Util's Stores, you can use the [flux-hooks](https://github.com/Fieldscope/flux-hooks) package. Access the store using useFluxStore which provides an API similar to [Container](#container)'s calculateState.\n" }, { "path": "docs/In-Depth-Overview.md", "content": "---\nid: in-depth-overview\ntitle: In-Depth Overview\n---\n\nFlux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.\n\n
\n \n
\n\nFlux applications have three major parts: the dispatcher, the stores, and the views (React components). These should not be confused with Model-View-Controller. Controllers do exist in a Flux application, but they are controller-views — views often found at the top of the hierarchy that retrieve data from the stores and pass this data down to their children. Additionally, action creators — dispatcher helper methods — are used to support a semantic API that describes all changes that are possible in the application. It can be useful to think of them as a fourth part of the Flux update cycle.\n\nFlux eschews MVC in favor of a unidirectional data flow. When a user interacts with a React view, the view propagates an action through a central dispatcher, to the various stores that hold the application's data and business logic, which updates all of the views that are affected. This works especially well with React's declarative programming style, which allows the store to send updates without specifying how to transition views between states.\n\nWe originally set out to deal correctly with derived data: for example, we wanted to show an unread count for message threads while another view showed a list of threads, with the unread ones highlighted. This was difficult to handle with MVC — marking a single thread as read would update the thread model, and then also need to update the unread count model. These dependencies and cascading updates often occur in a large MVC application, leading to a tangled weave of data flow and unpredictable results.\n\nControl is inverted with stores: the stores accept updates and reconcile them as appropriate, rather than depending on something external to update its data in a consistent way. Nothing outside the store has any insight into how it manages the data for its domain, helping to keep a clear separation of concerns. Stores have no direct setter methods like `setAsRead()`, but instead have only a single way of getting new data into their self-contained world — the callback they register with the dispatcher.\n\n## Structure and Data Flow\n\nData in a Flux application flows in a single direction:\n\n
\n \"Unidirectional\n
\n\nA unidirectional data flow is central to the Flux pattern, and the above diagram should be **the primary mental model for the Flux programmer**. The dispatcher, stores and views are independent nodes with distinct inputs and outputs. The actions are simple objects containing the new data and an identifying _type_ property.\n\nThe views may cause a new action to be propagated through the system in response to user interactions:\n\n
\n \"data\n
\n\nAll data flows through the dispatcher as a central hub. Actions are provided to the dispatcher in an _action creator_ method, and most often originate from user interactions with the views. The dispatcher then invokes the callbacks that the stores have registered with it, dispatching actions to all stores. Within their registered callbacks, stores respond to whichever actions are relevant to the state they maintain. The stores then emit a _change_ event to alert the controller-views that a change to the data layer has occurred. Controller-views listen for these events and retrieve data from the stores in an event handler. The controller-views call their own `setState()` method, causing a re-rendering of themselves and all of their descendants in the component tree.\n\n
\n \"varying\n
\n\nThis structure allows us to reason easily about our application in a way that is reminiscent of _functional reactive programming_, or more specifically _data-flow programming_ or _flow-based programming_, where data flows through the application in a single direction — there are no two-way bindings. Application state is maintained only in the stores, allowing the different parts of the application to remain highly decoupled. Where dependencies do occur between stores, they are kept in a strict hierarchy, with synchronous updates managed by the dispatcher.\n\nWe found that two-way data bindings led to cascading updates, where changing one object led to another object changing, which could also trigger more updates. As applications grew, these cascading updates made it very difficult to predict what would change as the result of one user interaction. When updates can only change data within a single round, the system as a whole becomes more predictable.\n\nLet's look at the various parts of Flux up close. A good place to start is the dispatcher.\n\n### A Single Dispatcher\n\nThe dispatcher is the central hub that manages all data flow in a Flux application. It is essentially a registry of callbacks into the stores and has no real intelligence of its own — it is a simple mechanism for distributing the actions to the stores. Each store registers itself and provides a callback. When an action creator provides the dispatcher with a new action, all stores in the application receive the action via the callbacks in the registry.\n\nAs an application grows, the dispatcher becomes more vital, as it can be used to manage dependencies between the stores by invoking the registered callbacks in a specific order. Stores can declaratively wait for other stores to finish updating, and then update themselves accordingly.\n\nThe same dispatcher that Facebook uses in production is available through [npm](https://www.npmjs.com/package/flux), [Bower](http://bower.io/), or [GitHub](https://github.com/facebookarchive/flux).\n\n### Stores\n\nStores contain the application state and logic. Their role is somewhat similar to a model in a traditional MVC, but they manage the state of many objects — they do not represent a single record of data like ORM models do. Nor are they the same as Backbone's collections. More than simply managing a collection of ORM-style objects, stores manage the application state for a particular **domain** within the application.\n\nFor example, Facebook's [Lookback Video Editor](https://facebook.com/lookback/edit) utilized a TimeStore that kept track of the playback time position and the playback state. On the other hand, the same application's ImageStore kept track of a collection of images. The TodoStore in our [TodoMVC example](https://github.com/facebookarchive/flux/tree/master/examples/flux-todomvc/) is similar in that it manages a collection of to-do items. A store exhibits characteristics of both a collection of models and a singleton model of a logical domain.\n\nAs mentioned above, a store registers itself with the dispatcher and provides it with a callback. This callback receives the action as a parameter. Within the store's registered callback, a switch statement based on the action's type is used to interpret the action and to provide the proper hooks into the store's internal methods. This allows an action to result in an update to the state of the store, via the dispatcher. After the stores are updated, they broadcast an event declaring that their state has changed, so the views may query the new state and update themselves.\n\n### Views and Controller-Views\n\nReact provides the kind of composable and freely re-renderable views we need for the view layer. Close to the top of the nested view hierarchy, a special kind of view listens for events that are broadcast by the stores that it depends on. We call this a controller-view, as it provides the glue code to get the data from the stores and to pass this data down the chain of its descendants. We might have one of these controller-views governing any significant section of the page.\n\nWhen it receives the event from the store, it first requests the new data it needs via the stores' public getter methods. It then calls its own `setState()` or `forceUpdate()` methods, causing its `render()` method and the `render()` method of all its descendants to run.\n\nWe often pass the entire state of the store down the chain of views in a single object, allowing different descendants to use what they need. In addition to keeping the controller-like behavior at the top of the hierarchy, and thus keeping our descendant views as functionally pure as possible, passing down the entire state of the store in a single object also has the effect of reducing the number of props we need to manage.\n\nOccasionally we may need to add additional controller-views deeper in the hierarchy to keep components simple. This might help us to better encapsulate a section of the hierarchy related to a specific data domain. Be aware, however, that controller-views deeper in the hierarchy can violate the singular flow of data by introducing a new, potentially conflicting entry point for the data flow. In making the decision of whether to add a deep controller-view, balance the gain of simpler components against the complexity of multiple data updates flowing into the hierarchy at different points. These multiple data updates can lead to odd effects, with React's render method getting invoked repeatedly by updates from different controller-views, potentially increasing the difficulty of debugging.\n\n### Actions\n\nThe dispatcher exposes a method that allows us to trigger a dispatch to the stores, and to include a payload of data, which we call an action. The action's creation may be wrapped into a semantic helper method which sends the action to the dispatcher. For example, we may want to change the text of a to-do item in a to-do list application. We would create an action with a function signature like `updateText(todoId, newText)` in our `TodoActions` module. This method may be invoked from within our views' event handlers, so we can call it in response to a user interaction. This action creator method also adds a _type_ to the action, so that when the action is interpreted in the store, it can respond appropriately. In our example, this type might be named something like `TODO_UPDATE_TEXT`.\n\nActions may also come from other places, such as the server. This happens, for example, during data initialization. It may also happen when the server returns an error code or when the server has updates to provide to the application.\n\n### What About that Dispatcher?\n\nAs mentioned earlier, the dispatcher is also able to manage dependencies between stores. This functionality is available through the `waitFor()` method within the Dispatcher class. We did not need to use this method within the extremely simple [TodoMVC application](https://github.com/facebookarchive/flux/tree/master/examples/flux-todomvc/), but it becomes vital in a larger, more complex application.\n\nWithin the TodoStore's registered callback we could explicitly wait for any dependencies to first update before moving forward:\n\n```javascript\ncase 'TODO_CREATE':\n Dispatcher.waitFor([\n PrependedTextStore.dispatchToken,\n YetAnotherStore.dispatchToken\n ]);\n\n TodoStore.create(PrependedTextStore.getText() + ' ' + action.text);\n break;\n```\n\n`waitFor()` accepts a single argument which is an array of dispatcher registry indexes, often called _dispatch tokens_. Thus the store that is invoking `waitFor()` can depend on the state of another store to inform how it should update its own state.\n\nA dispatch token is returned by `register()` when registering callbacks for the Dispatcher:\n\n```javascript\nPrependedTextStore.dispatchToken = Dispatcher.register(function (payload) {\n // ...\n});\n```\n\nFor more on `waitFor()`, actions, action creators and the dispatcher, please see [Flux: Actions and the Dispatcher](https://legacy.reactjs.org/blog/2014/07/30/flux-actions-and-the-dispatcher.html).\n" }, { "path": "docs/Overview.ko-KR.md", "content": "---\nid: overview-ko-KR\ntitle: 개요\nlayout: docs\ncategory: Quick Start\nnext: dispatcher-ko-KR\nlang: ko-KR\n---\n\nFlux는 Facebook에서 클라이언트-사이드 웹 애플리케이션을 만드는 데 사용하는 애플리케이션 아키텍처다. 단방향 데이터 흐름을 활용해 뷰 컴포넌트를 구성하는 React를 보완하는 역할을 한다. 이전까지의 프레임워크와는 달리 패턴과 같은 모습을 하고 있으므로 수많은 새로운 코드를 작성할 필요 없이 바로 Flux를 이용해 사용할 수 있다.\n\n
\n \n
\n\nFlux 애플리케이션은 다음 핵심적인 세 가지 부분으로 구성되어 있다: Dispatcher, Stores, Views(React 컴포넌트). Model-View-Controller와 혼동해서는 안 된다. Controller도 물론 Flux 애플리케이션에 존재하지만, 위계의 최상위에서 controller-views - views 관계로 존재하고 있다. 이 controller-views는 stores에서 데이터를 가져와 그 데이터를 자식에게 보내는 역할을 한다. 덧붙여 dispatcher를 돕는 action creator 메소드는 이 애플리케이션에서 가능한 모든 변화를 표현하는 유의적 API를 지원하는 데 사용된다. Flux 업데이트 주기의 4번째 부분이라고 생각하면 유용하다.\n\nFlux는 MVC와 다르게 단방향으로 데이터가 흐른다. React view에서 사용자가 상호작용을 할 때, 그 view는 중앙의 dispatcher를 통해 action을 전파하게 된다. 애플리케이션의 데이터와 비즈니스 로직을 가지고 있는 store는 action이 전파되면 이 action에 영향이 있는 모든 view를 갱신한다. 이 방식은 특히 React의 선언형 프로그래밍 스타일 즉, view가 어떤 방식으로 갱신해야 하는지 일일이 작성하지 않고서도 데이터를 변경할 수 있는 형태에서 편리하다.\n\n이 프로젝트는 파생되는 데이터를 올바르게 다루기 위해 시작되었다. 예를 들면 현재 뷰에서 읽지 않은 메시지가 강조되어 있으면서도 읽지 않은 메시지 수를 상단 바에 표시하고 싶었다. 이런 부분은 MVC에서 다루기 어려운데, 메시지를 읽기 위한 단일 스레드에서 메시지 스레드 모델을 갱신해야 하고 동시에 읽지 않은 메시지 수 모델을 갱신 해야 하기 때문이다. 대형 MVC 애플리케이션에서 종종 나타나는 데이터 간의 의존성과 연쇄적인 갱신은 뒤얽힌 데이터 흐름을 만들고 예측할 수 없는 결과로 이끌게 된다.\n\nFlux는 store를 이용해 제어를 뒤집었다. 일관성을 유지한다는 명목으로 외부의 갱신에 의존하는 방식과 달리 Store는 갱신을 받아들이고 적절하게 조화한다. Store 바깥에 아무것도 두지 않는 방식으로 데이터의 도메인을 관리해야 할 필요가 없어져 외부의 갱신에 따른 문제를 명확하게 분리할 수 있도록 돕는다. Store는 독립적인 세계를 가지고 있어 `setAsRead()`와 같은 직접적인 setter 메소드가 없는 대신 dispatcher에 등록한 콜백을 통해 데이터를 받게 된다.\n\n## 구조와 데이터 흐름\n\n

\nFlux 애플리케이션에서의 데이터는 단방향으로 흐른다:\n

\n\n
\n \"Flux에서의\n
\n\n단방향 데이터 흐름은 Flux 패턴의 핵심인데 위 다이어그램은 **Flux 프로그래머를 위한 제일의 멘탈 모델**이 된다. dispatcher, store와 view는 독립적인 노드로 입력과 출력이 완전히 구분된다. action은 새로운 데이터를 포함하고 있는 간단한 객체로 _type_ 프로퍼티로 구분할 수 있다.\n\n

\nview는 사용자의 상호작용에 응답하기 위해 새로운 action을 만들어 시스템에 전파한다:\n

\n\n
\n \"사용자\n
\n\n

\n모든 데이터는 중앙 허브인 dispatcher를 통해 흐른다. action은 dispatcher에게 action creator 메소드를 제공하는데 대부분의 action은 view에서의 사용자 상호작용에서 발생한다. dispatcher는 store를 등록하기 위한 콜백을 실행한 이후에 action을 모든 store로 전달한다. store는 등록된 콜백을 활용해 관리하고 있는 상태 중 어떤 액션이라도 관련이 있다면 전달해준다. store는 change 이벤트를 controller-views에게 알려주고 그 결과로 데이터 계층에서의 변화가 일어난다. Controller-views는 이 이벤트를 듣고 있다가 이벤트 핸들러가 있는 store에서 데이터를 다시 가져온다. controller-views는 자신의 setState() 메소드를 호출하고 컴포넌트 트리에 속해 있는 자식 노드 모두를 다시 렌더링하게 한다.\n

\n\n
\n \"flux\n
\n\nAction creator는 라이브러리에서 제공하는 도움 메소드로 메소드 파라미터에서 action을 생성하고 *type*을 설정하거나 dispatcher에게 제공하는 역할을 한다.\n\n모든 action은 store가 dispatcher에 등록해둔 callback을 통해 모든 store에 전송된다.\n\naction에 대한 응답으로 store가 스스로 갱신을 한 다음에는 자신이 변경되었다고 모두에게 알린다.\n\ncontroller-view라고 불리는 특별한 view가 변경 이벤트를 듣고 새로운 데이터를 store에서 가져온 후 모든 트리에 있는 자식 view에게 새로운 데이터를 제공한다.\n\n이 구조는 함수형 반응 프로그래밍을 다시 재현하는 것을 쉽게 만들거나 데이터-흐름 프로그래밍, 흐름 기반 프로그래밍을 만드는데 쉽도록 돕는다. 애플리케이션에 흐르는 데이터 흐름이 양방향 바인딩이 아닌 단방향으로 흐르기 때문이다. 애플리케이션의 상태는 store에 의해서 관리되고 애플리케이션의 다른 부분과는 완전히 분리된 상태로 남는다. 두 store 사이에 의존성이 나타나도 둘은 엄격하게 위계가 관리되어 dispatcher에 의해 동기적으로 변경되는 방법으로 관리된다.\n\n이와 같은 구조는 우리의 애플리케이션이 *함수형 반응 프로그래밍(functional reactive programming)*이나 더 세부적으로 _데이터-흐름 프로그래밍(data-flow programming)_ 또는 *흐름 기반 프로그래밍(Flow-based programming)*을 연상하게 한다는 사실을 쉽게 떠올리게 한다. 즉 데이터의 흐름이 양방향 바인딩이 아닌 단일 방향으로 흐른다. 애플리케이션의 상태는 store에 의해 관리를 해서 애플리케이션의 다른 부분들과 결합도를 극히 낮춘 상태로 유지될 수 있다. store의 사이에서 의존성이 생긴다고 해도 dispachter에 의해 엄격한 위계가 유지되어 동기적으로 갱신되는 방식으로 관리된다.\n\n양방향 데이터 바인딩은 연속적인 갱신이 발생하고 객체 하나의 변경이 다른 객체를 변경하게 되어 실제 필요한 업데이트보다 더 많은 분량을 실행하게 된다. 애플리케이션의 규모가 커지면 데이터의 연속적인 갱신이 되는 상황에서는 사용자 상호작용의 결과가 어떤 변화를 만드는지 예측하는데 어려워진다. 갱신으로 인한 데이터 변경이 단 한 차례만 이뤄진다면 전체 시스템은 좀 더 예측 가능하게 된다.\n\nFlux의 다양한 부분을 확인할 예정인데 dispatcher부터 살펴보자.\n\n### 단일 dispatcher\n\ndispatcher는 Flux 애플리케이션의 중앙 허브로 모든 데이터의 흐름을 관리한다. 본질적으로 store의 콜백을 등록하는 데 쓰이고 action을 store에 배분해주는 간단한 작동 방식으로 그 자체가 특별하게 똑똑한 것은 아니다. 각각의 store를 직접 등록하고 콜백을 제공한다. action creator가 새로운 action이 있다고 dispatcher에게 알려주면 애플리케이션에 있는 모든 store는 해당 action을 앞서 등록한 callback으로 전달받는다.\n\n애플리케이션의 규모가 커지게 되면 dispachter의 역할은 더욱 필수적이다. 바로 store 간에 의존성을 특정적인 순서로 callback을 실행하는 과정으로 관리하기 때문이다. Store는 다른 store의 업데이트가 끝날 때까지 선언적으로 기다릴 수 있고 끝나는 순서에 따라 스스로 갱신된다.\n\nFacebook이 실제로 사용하는 dispatcher는 [npm](https://www.npmjs.com/package/flux), [Bower](http://bower.io/), 또는 [GitHub](https://github.com/facebookarchive/flux)에서 확인할 수 있다.\n\n### Stores\n\nStore는 애플리케이션의 상태와 로직을 포함하고 있다. store의 역할은 전통적인 MVC의 모델과 비슷하지만 많은 객체의 상태를 관리할 수 있는데 ORM 모델이 하는 것처럼 단일 레코드의 데이터를 표현하는 것도 아니고 Backbone의 컬렉션과도 다르다. store는 단순히 ORM 스타일의 객체 컬렉션을 관리하는 것을 넘어 애플리케이션 내의 개별적인 **도메인**에서 애플리케이션의 상태를 관리한다.\n\n예를 들면, Facebook의 [돌아보기 편집기](https://facebook.com/lookback/edit) 에서 지속해서 재생된 시간과 플레이어 상태를 지속해서 추적하기 위해 TimeStore를 활용한다. 같은 애플리케이션에서 ImageStore는 이미지 콜랙션을 지속해서 추적한다. [TodoMVC 예제](https://github.com/facebookarchive/flux/tree/master/examples/flux-todomvc/)의 TodoStore도 비슷하게 할 일 항목의 콜랙션을 관리한다. store는 두 모델 컬렉션의 특징을 보여주는 것과 동시에 싱글턴 모델의 논리적 도메인으로 역할을 한다.\n\n위에서 언급한 것과 같이 store는 자신을 dispatcher에 등록하고 callback을 제공한다. 이 callback은 action을 파라미터로 받는다. store의 등록된 callback의 내부에서는 switch문을 사용한 action 타입을 활용해서 action을 해석하고 store 내부 메소드에 적절하게 연결될 수 있는 훅을 제공한다. 여기서 결과적으로 action은 disaptcher를 통해 store의 상태를 갱신한다. store가 업데이트된 후, 상태가 변경되었다는 이벤트를 중계하는 과정으로 view에게 새로운 상태를 보내주고 view 스스로 업데이트하게 한다.\n\n### Views와 Controller-Views\n\nReact는 조화롭고 자유로운 형태로 다시 렌더링 할 수 있는 view를 view 레이어로 제공한다. 복잡한 view 위계의 상위를 살펴보면 store에 의해 이벤트를 중계할 수 있는 특별한 종류의 view가 있다. 이 view를 controller-view라고 부르는데 store에서 데이터를 얻을 수 있는 glue 코드를 제공하고 데이터를 위계대로 자식들에게 전달하도록 돕는다. 페이지의 광범위한 영역을 관리하는 contoller-view를 가지게 된다.\n\nstore에게 이벤트를 받으면 store의 퍼블릭 getter 메소드를 통해 새로 필요한 데이터를 처음으로 요청하게 된다. 그 과정에서 `setState()` 또는 `forceUpdate()` 메소드를 호출하게 되고 그 호출 과정에서 자체의 `render()` 메소드와 하위 모든 자식의 `render()` 메소드를 실행한다.\n\n전체적인 store의 상태를 단일 객체로 만들어 하위에 있는 view에 전달하게 되는데 다른 자식들도 필요한 부분이라면 데이터를 사용할 수 있도록 한다. 또한, controller-view는 위계의 최상위에서 마치 controller와 같은 역할을 지속해서 수행해 하위에 있는 view가 가능한 한 순수하게, 함수적으로 유지될 수 있도록 한다. 또한, store의 전체 상태를 단일 객체로 흘려보내는데 이 방식은 관리해야 하는 프로퍼티 수를 줄이는 효과도 있다.\n\n때때로 컴포넌트의 단순함을 유지하기 위해 위계 깊은 곳에서 contoller-views가 추가로 필요할 때가 있다. 중간에 contoller-views를 넣으면 특정 데이터 도메인에 관계된 위계 영역을 감싸서 독립적으로 만드는데(encapsulate) 도움이 된다. 하지만 조심해야 한다. 위계 내에서 만든 controller-view는 단일의 데이터 흐름과 상충해 잠재적으로 새로운 데이터 흐름의 시작점에서 충돌할 수 있다.\n\n내부에 controller-view를 추가하는 것을 결정할 때에는 여러 데이터 업데이트의 흐름이 위계와 다른 방향으로 흐르지 않도록 고려해 단순함의 균형을 유지해야 한다. 여러 데이터가 업데이트되면 이상한 효과를 만들어 React의 렌더링 메소드가 다른 controller-view에 의해 반복적으로 실행돼서 디버깅의 어려움을 가중할 가능성이 있다. 내부 controller-view를 만드는 것을 결정할 때, 데이터를 갱신하기 위해 위계에서 여러 방향으로 흐르는 복잡성에 반해 단순한 컴포넌트의 이점에서 균형을 찾아야 한다. 여러 방향으로의 데이터 갱신은 이상한 효과를 만들 수 있다. 특히 React의 렌더 메소드는 여러 controller-view를 갱신하기 위해 반복적으로 실행되어버려 디버깅의 어려움을 가중할 수도 있다.\n\n### Actions\n\ndispatcher는 action을 호출해 데이터를 불러오고 store로 전달할 수 있도록 메소드를 제공한다. action의 생성은 dispatcher로 action을 보낼 때 의미 있는 헬퍼 메소드로 포개진다. 할 일 목록 애플리케이션에서 할 일 아이템의 문구를 변경하고 싶다고 가정하자. `updateText(todoId, newText)`와 같은 함수 시그니처를 이용해 `TodoActions` 모듈 내에 action을 만든다. 이 메소드는 view의 이벤트 핸들러로부터 호출되어 실행할 수 있고 그 결과로 사용자 상호작용에 응답할 수 있게 된다. 이 action creator 메소드는 *type*을 추가할 수 있다. 이 type을 이용해 action이 store에서 해석될 수 있도록, 적절한 응답이 가능하도록 한다. 예시에서와같이 `TODO_UPDATE_TEXT`와 같은 이름의 타입을 사용한다.\n\naction은 서버와 같은 다른 장소에서 올 수 있다. 예를 들면 data를 초기화할 때 이런 과정이 발생할 수 있다. 또한, 서버에서 에러 코드를 반환하거나 애플리케이션이 제공된 후에 업데이트가 있을 때 나타날 수 있다.\n\n### Dispatcher에 대해서\n\n앞서 언급한 것처럼 disaptcher는 store 간의 의존성을 관리할 수 있다. 이 기능은 dispatcher 클래스에 포함된 `waitFor()` 메소드를 통해 가능하다. [TodoMVC](https://github.com/facebookarchive/flux/tree/master/examples/flux-todomvc/)는 극단적으로 단순해서 이 메소드를 사용할 필요가 없지만 복잡한 대형 애플리케이션에서는 생명과도 같다.\n\nTodoStore에 등록된 callback은 명시적으로 기다려 코드가 진행되는 동안 다른 의존성이 먼저 업데이트되도록 기다린다:\n\n```javascript\ncase 'TODO_CREATE':\n Dispatcher.waitFor([\n PrependedTextStore.dispatchToken,\n YetAnotherStore.dispatchToken\n ]);\n\n TodoStore.create(PrependedTextStore.getText() + ' ' + action.text);\n break;\n```\n\n`waitFor()`는 단일 인수만 받는데 disaptcher에 등록된 인덱스를 배열로 받는다. 이 인덱스를 대개 *dispatch token*이라 부른다. 그러므로 `waitForm()`을 호출하는 store는 다른 store의 상태에 따라 어떤 방식으로 자신의 상태를 갱신할 수 있는지 알 수 있게 된다.\n\ndispatch token은 `register()` 메소드에서 반환하는데 이 메소드는 callback을 dispatcher에 등록할 때 사용된다:\n\n```javascript\nPrependedTextStore.dispatchToken = Dispatcher.register(function (payload) {\n // ...\n});\n```\n\n`waitFor()`, actions, action creator와 dispatcher에 대해서는 다음 [Flux 액션과 Dispatcher](https://legacy.reactjs.org/blog/2014/07/30/flux-actions-and-the-dispatcher.html)를 참고하자.\n" }, { "path": "docs/Overview.md", "content": "---\nid: overview\ntitle: Overview\nlayout: docs\ncategory: Quick Start\nnext: in-depth-overview\n---\n\nIn order to get started check out the [overview and guides](https://github.com/facebookarchive/flux/tree/master/examples) maintained on GitHub, or continue on to the in-depth overview, which explores in more detail how the pieces of the Flux architecture work together.\n\n> Note: The in-depth overview was formerly the normal overview landing page but was replaced with the more terse and up-to-date guides on GitHub that are linked above.\n" }, { "path": "docs/Related-Libraries.md", "content": "---\nid: related-libraries\ntitle: Related Libraries\n---\n\n### React – User Interfaces\n\nIf any JavaScript project has taken the front end ecosystem by storm in recent years, that would be [React](https://reactjs.org). React is a library built and open-sourced by the smart people at Facebook. In React, developers write components for their web interface and compose them together.\n\nReact brings about many radical ideas and encourages developers to [rethink best practices](https://www.youtube.com/watch?v=DgVS-zXgMTk). For many years, web developers were taught that it was a good practice to write HTML, JavaScript and CSS separately. React does the exact opposite, and encourages that you write your HTML and [CSS in your JavaScript](https://speakerdeck.com/vjeux/react-css-in-js) instead. This sounds like a crazy idea at first, but after trying it out, it actually isn't as weird as it sounds initially. Reason being the front end development scene is shifting towards a paradigm of component-based development. The features of React:\n\n- **Declarative** - You describe what you want to see in your view and not how to achieve it. In the jQuery days, developers would have to come up with a series of steps to manipulate the DOM to get from one app state to the next. In React, you simply change the state within the component and the view will update itself according to the state. It is also easy to determine how the component will look like just by looking at the markup in the `render()` method.\n\n- **Functional** - The view is a pure function of `props` and `state`. In most cases, a React component is defined by `props` (external parameters) and `state` (internal data). For the same `props` and `state`, the same view is produced. Pure functions are easy to test, and the same goes for functional components. Testing in React is made easy because a component's interfaces are well-defined and you can test the component by supplying different `props` and `state` to it and comparing the rendered output.\n\n- **Maintainable** - Writing your view in a component-based fashion encourages reusability. We find that defining a component's `propTypes` make React code self-documenting as the reader can know clearly what is needed to use that component. Lastly, your view and logic is self-contained within the component, and should not be affected nor affect other components. That makes it easy to shift components around during large-scale refactoring, as long as the same `props` are supplied to the component.\n\n- **High Performance** - You might have heard that React uses a virtual DOM (not to be confused with [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)) and it re-renders everything when there is a change in state. Why is there a need for a virtual DOM? While modern JavaScript engines are fast, reading from and writing to the DOM is slow. React keeps a lightweight virtual representation of the DOM in memory. Re-rendering everything is a misleading term. In React it actually refers to re-rendering the in-memory representation of the DOM, not the actual DOM itself. When there's a change in the underlying data of the component, a new virtual representation is created, and compared against the previous representation. The difference (minimal set of changes required) is then patched to the real browser DOM.\n\n- **Ease of Learning** - Learning React is pretty simple. The React API surface is relatively small compared to [this](https://angular.io/docs/ts/latest/api/); there are only a few APIs to learn and they do not change often. The React community is one of the largest, and along with that comes a vibrant ecosystem of tools, open-sourced UI components, and a ton of great resources online to get you started on learning React.\n\n- **Developer Experience** - There are a number of tools that improves the development experience with React. [React Developer Tools](https://github.com/facebook/react-devtools) is a browser extension that allows you to inspect your component, view and manipulate its `props` and `state`. [Hot reloading](https://github.com/gaearon/react-hot-loader) with webpack allows you to view changes to your code in your browser, without you having to refresh the browser. Front end development involves a lot of tweaking code, saving and then refreshing the browser. Hot reloading helps you by eliminating the last step. When there are library updates, Facebook provides [codemod scripts](https://github.com/reactjs/react-codemod) to help you migrate your code to the new APIs. This makes the upgrading process relatively pain-free. Kudos to the Facebook team for their dedication in making the development experience with React great.\n\n### Immutable.js – Immutable Data\n\n[Immutable.js](https://immutable-js.github.io/immutable-js/) is a library for creating immutable data structures. Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data presents a mutative API which does not update the data in-place, but instead always yields new updated data.\n\n### Jest – Unit Testing\n\n[Jest](http://jestjs.io/) is a testing library by Facebook that aims to make the process of testing pain-free. As with Facebook projects, it provides a great development experience out of the box. Tests can be run in parallel resulting in shorter duration. During watch mode, by default, only the tests for the changed files are run. One cool feature is \"Snapshot Testing\". Jest can save the generated output of your React component and Redux state and save it as serialized files, so you wouldn't have to manually come up with the expected output yourself. Jest also comes with built-in mocking, assertion and test coverage. One library to rule them all!\n\n### Redux - Alternative State Management\n\nAs Flux is not a framework per se, developers have tried to come up with many implementations of the Flux pattern. Eventually, a clear winner emerged, which was [Redux](http://redux.js.org/). Redux combines the ideas from Flux, [Command pattern](https://www.wikiwand.com/en/Command_pattern) and [Elm architecture](https://guide.elm-lang.org/architecture/) and is the de facto state management library developers use with React these days. Its core concepts are:\n\n- App **state** is described by a single plain old JavaScript object (POJO).\n- Dispatch an **action** (also a POJO) to modify the state.\n- **Reducer** is a pure function that takes in current state and action to produce a new state.\n\nThe concepts sound simple, but they are really powerful as they enable apps to:\n\n- Have their state rendered on the server, booted up on the client.\n- Trace, log and backtrack changes in the whole app.\n- Implement undo/redo functionality easily.\n\nThe creator of Redux, [Dan Abramov](https://github.com/gaearon), has taken great care in writing up detailed documentation for Redux, along with creating comprehensive video tutorials for learning [basic](https://egghead.io/courses/getting-started-with-redux) and [advanced](https://egghead.io/courses/building-react-applications-with-idiomatic-redux) Redux. They are extremely helpful resources for learning Redux.\n" }, { "path": "docs/Videos.ko-KR.md", "content": "---\nid: videos-ko-KR\ntitle: 비디오\n---\n\n### Rethinking Web App Development at Facebook - Facebook F8 Conference 2014\n\n
\n \n
\n\n### React and Flux: Building Applications with a Unidirectional Data Flow - Forward JS 2014\n\n
\n \n
\n\nFacebook 엔지니어 [Bill Fisher](http://twitter.com/fisherwebdev)와 [Jing Chen](http://twitter.com/jingc)이 Flux와 React에 대해서, 이 애플리케이션 아키텍처를 단일 데이터 흐름과 함께 어떻게 사용해 많은 코드를 깔끔하게 만들었는지에 대한 영상이다.\n\n### React and Flux - HTML5DevConf 2014\n\n
\n \n
\n\n[Bill Fisher](http://twitter.com/fisherwebdev)가 MVC 패턴과 Flux가 어떻게 다른지에 대해 설명하고 웹 애플리케이션을 더 빠르고 관리하기 편한 코드로 깔끔하게 정리할 수 있었는가에 대한 영상이다.\n" }, { "path": "docs/Videos.md", "content": "---\nid: videos\ntitle: Videos\n---\n\n### Rethinking Web App Development at Facebook - Facebook F8 Conference 2014\n\n
\n \n
\n\n### React and Flux: Building Applications with a Unidirectional Data Flow - Forward JS 2014\n\n
\n \n
\n\nFacebook engineers [Bill Fisher](http://twitter.com/fisherwebdev) and [Jing Chen](http://twitter.com/jingc) talk about Flux and React, and how using an application architecture with a unidirectional data flow cleans up a lot of their code.\n\n### React and Flux - HTML5DevConf 2014\n\n
\n \n
\n\n[Bill Fisher](http://twitter.com/fisherwebdev) discusses how Flux is different from MVC patterns, and how it can clean up web applications to make them faster and more maintainable with cleaner code.\n" }, { "path": "examples/README.md", "content": "# Examples\n\nThis directory contains examples that should help get you started with Flux. They are listed in the order you should complete them.\n\n## [./flux-concepts](./flux-concepts) - Basic concepts (no code)\n\nThese are the important high-level concepts and principles you should know about when writing applications that use Flux.\n\n## [./flux-todomvc](./flux-todomvc) - Start coding here\n\nThis example is where you should start. It walks you through creating the classic [TodoMVC](http://todomvc.com/) application using a simple Flux implementation.\n\n## [./flux-jest](./flux-jest) - Unit Testing Stores\n\nBeing able to unit test stores is critical. This example shows you how to write tests for the TodoMVC stores we created in an earlier example.\n\n## [./flux-flow](./flux-flow) - Static typing\n\nThis is a very simple example that highlights how to set up Flux and [Flow](https://flowtype.org/) in the same project. Flow is a static-type checking tool that will help catch errors in your code statically. It complements Flux well since it supports refining the action based on a type string.\n\n## [./flux-logging](./flux-logging) - Add logging to Flux apps\n\nTaking advantage of the fact that a store gets every action makes it easy to add logging to a Flux application. Check out this quick example where we add a logger store to the TodoMVC app we created in an earlier example.\n\n## [./flux-jest-container](./flux-jest-container) - Unit Testing Containers\n\nTesting the container logic that connects stores to views can be tricky. This example shows you how to create some utilities to help mock out store data in order to write these kinds of tests effectively.\n\n## [./flux-async](./flux-async) - Flux with async requests\n\nThis is an advanced example. It pulls a lot of the concepts from previous examples into a single application. This implements TodoMVC where the data is persisted and requested through a simple server. The server simulates delays and errors. In the example we will handle things like optimistic updates, loading states, and failing API requests.\n" }, { "path": "examples/flux-async/.babelrc", "content": "{\n \"presets\": [\"es2015\"],\n \"plugins\": [\n \"syntax-async-functions\",\n \"syntax-class-properties\",\n \"syntax-flow\",\n \"syntax-jsx\",\n \"syntax-object-rest-spread\",\n \"syntax-trailing-function-commas\",\n \"transform-class-properties\",\n \"transform-flow-strip-types\",\n \"transform-object-rest-spread\",\n \"transform-react-jsx\",\n \"transform-regenerator\",\n \"transform-runtime\"\n ]\n}\n" }, { "path": "examples/flux-async/.flowconfig", "content": "[ignore]\n\n.*/node_modules/.*\n\n[libs]\n\nflow\n\n[options]\n\nsuppress_comment=\\\\(.\\\\|\\n\\\\)*\\\\$FlowExpectedError\nexperimental.const_params=true\n" }, { "path": "examples/flux-async/.gitignore", "content": "bundle.js\ndata.json\nlib\n" }, { "path": "examples/flux-async/README.md", "content": "# flux-async\n\nThis is an advanced example. It pulls a lot of the concepts from previous examples into a single application. This implements TodoMVC where the data is persisted and requested through a simple server. The server simulates delays and errors. In the example we will handle things like optimistic updates, loading states, and failing API requests.\n\n# Disclaimer\n\nThis is just one way to handle asynchronous actions. It is not the only way, and may not be the best way. This is simply how we deal with asynchronous actions most commonly at Facebook.\n\n# Usage\n\n```bash\ncd path/to/flux-async\nnpm install\n\n# builds client code when it changes (npm run build to build just once)\nnpm run watch\n\n# starts server, code is at ./server/app.js\nnpm run start\n\n# this will run flow and make sure there are no type errors in the code\nflow\n\n# navigate to: http://localhost:3000/home/ to use the todo application\n```\n\n# Code Concepts\n\n## DataManager\n\nIn this example we introduce DataManagers. This is how to communicate with a server in Flux. A DataManager translates input arguments into an action. The resulting action should always be dispatched asynchronously. This allows time for an API request in before dispatching the action.\n\nDataManagers should only be called from stores.\n\n## LoadObject\n\n`LoadObject`s are immutable objects that represent a piece of data that has to be requested from the server. It can have any combination of: `value`, `error`, and `operation`. We can represent many things, some examples:\n\nA piece of data we just requested: (`null`, `null`, `'LOADING'`)\n\nData that has had an error: (`null`, `Invalid Request`, `'NONE'`)\n\nData that we are retrying: (`null`, `'Invalid Request'`, `'LOADING'`)\n\nNormal piece of data: (`'Some data'`, `null`, `'NONE'`)\n\nData that we are updating: (`'Some data'`, `null`, `'UPDATING'`)\n\nAnd many others states your data might be in. There are also several supporting objects to `LoadObject`.\n\n### LoadObjectMap\n\n`LoadObjectMap` is an immutable map that has `LoadObject` values. When a key is requested that does not exist instead of returning null it will return an empty `LoadObject`, this helps prevent the need for null-checking when we can use `LoadObject`'s to represent the absence of a value. Additionally on construction you can provide a function that will be called with keys that are requested that do not yet have a value. This makes it easy to figure out when to load data from the server. Generally you dispatch an action with the missing keys so that a store will start loading them.\n\n### LoadObjectState\n\n`LoadObjectState` provides similar functionality to `LoadObjectMap` but for when your state is a single `LoadObject`.\n\n## FakeID\n\nID's are always created on the server, so in order to optimistically update we need a service to generate some fake IDs. We just use a really simple utility that also has a mechanism for testing if IDs are fake. Without this it would be hard to provide optimistic updates and properly correlate responses with data that we are already rendering.\n\n## ListStore\n\nList stores are a kind of store responsible for keeping track of a list of IDs. They only store IDs. They should never store lists of the objects themselves, that should always be in another store that keeps track of a map of those objects. This separates the concerns of simply loading the object data, and figuring out in which order it should render, dealing with sorting, filtering, etc. This makes it possible for the ordering to change without having to re-render views that use the unchanged data.\n\n## Flow actions\n\nInstead of using action-creators we dispatch our actions manually. This only works because we have strongly typed every possible action in `TodoActions`. This means that Flow will have an error if we ever try to dispatch something that is invalid. This also allows us to refine actions in our reduce functions and make sure we are accessing valid properties based on what kind of action we are dealing with.\n" }, { "path": "examples/flux-async/flow/flux-utils.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\nimport type {Dispatcher} from 'flux';\nimport type React from 'react';\n\ntype DispatchToken = string;\n\ntype ContainerOptions = {\n pure?: ?boolean,\n withProps?: ?boolean,\n withContext?: ?boolean,\n};\n\ndeclare module 'flux/utils' {\n declare class Store {\n constructor(dispatcher: Dispatcher): void;\n addListener(callback: (eventType?: string) => void): {remove: () => void};\n getDispatcher(): Dispatcher;\n getDispatchToken(): DispatchToken;\n hasChanged(): boolean;\n }\n\n declare class ReduceStore extends Store {\n getState(): TState;\n getInitialState(): TState;\n reduce(state: TState, action: TPayload): TState;\n areEqual(one: TState, two: TState): boolean;\n }\n\n // This isn't really a class, just a simple object. Not sure how to put that\n // in declare module.\n declare class Container {\n static create(\n base: React.Element,\n options?: ?ContainerOptions,\n ): React.Class;\n\n static createFunctional(\n viewFn: (props: State) => React.Element,\n getStores: (props?: ?Props, context?: any) => Array>,\n calculateState: (\n prevState?: ?State,\n props?: ?Props,\n context?: any,\n ) => State,\n options?: ContainerOptions,\n ): React.Class;\n }\n}\n" }, { "path": "examples/flux-async/flow/flux.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\ntype DispatchToken = string;\n\ndeclare module 'flux' {\n declare class Dispatcher {\n register(callback: (payload: TPayload) => void): DispatchToken;\n unregister(id: DispatchToken): void;\n waitFor(ids: Array): void;\n dispatch(payload: TPayload): void;\n isDispatching(): boolean;\n }\n}\n" }, { "path": "examples/flux-async/flow/immutable.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n// Not sure why this is necessary, but here we directly alias the\n// flow typedefs inside of immutable to the module \"immutable\".\n\nimport type Immutable from 'immutable/dist/immutable.js.flow';\n\ndeclare module 'immutable' {\n declare var exports: Immutable;\n}\n" }, { "path": "examples/flux-async/flow/misc.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n// Don't really care about these modules.\n\ndeclare module 'xhr' {\n declare var exports: any;\n}\n\ndeclare module 'classnames' {\n declare var exports: any;\n}\n" }, { "path": "examples/flux-async/index.html", "content": "\n\n \n \n Flux • TodoMVC\n \n \n \n
\n \n \n \n\n" }, { "path": "examples/flux-async/package.json", "content": "{\n \"name\": \"flux-todomvc\",\n \"version\": \"1.0.0\",\n \"description\": \"Basic shell application for the Flux architecture\",\n \"repository\": \"https://github.com/facebook/flux\",\n \"author\": \"Kyle Davis\",\n \"main\": \"bundle.js\",\n \"scripts\": {\n \"build\": \"webpack ./src/root.js ./bundle.js\",\n \"watch\": \"webpack ./src/root.js ./bundle.js --watch\",\n \"start\": \"node ./server/app.js\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"dependencies\": {\n \"classnames\": \"^2.2.3\",\n \"escape-html\": \"^1.0.3\",\n \"express\": \"^4.14.0\",\n \"flux\": \"../../.\",\n \"immutable\": \"^3.8.0\",\n \"react\": \"^15.0.2\",\n \"react-dom\": \"^15.0.1\",\n \"xhr\": \"^2.2.2\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.7.6\",\n \"babel-loader\": \"^6.2.4\",\n \"babel-plugin-syntax-async-functions\": \"^6.5.0\",\n \"babel-plugin-syntax-class-properties\": \"^6.13.0\",\n \"babel-plugin-syntax-flow\": \"^6.5.0\",\n \"babel-plugin-syntax-jsx\": \"^6.5.0\",\n \"babel-plugin-syntax-object-rest-spread\": \"^6.5.0\",\n \"babel-plugin-syntax-trailing-function-commas\": \"^6.5.0\",\n \"babel-plugin-transform-class-properties\": \"^6.11.5\",\n \"babel-plugin-transform-flow-strip-types\": \"^6.5.0\",\n \"babel-plugin-transform-object-rest-spread\": \"^6.6.5\",\n \"babel-plugin-transform-react-jsx\": \"^6.7.5\",\n \"babel-plugin-transform-regenerator\": \"^6.5.2\",\n \"babel-plugin-transform-runtime\": \"^6.5.2\",\n \"babel-preset-es2015\": \"^6.5.0\",\n \"webpack\": \"^1.13.0\"\n }\n}\n" }, { "path": "examples/flux-async/server/app.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nconst escape = require('escape-html');\nconst express = require('express');\nconst fs = require('fs');\nconst path = require('path');\n\n// We simulate an error a percentage of the time, this helps show how our app\n// is robust to network errors.\nconst ERROR_PCT = 25.0;\n\n// The port is hard coded in the client too. If you change it make sure to\n// update it there as well.\nconst PORT = 3000;\n\n// We will just save everything in a simple json file. Not very efficient, but\n// this is just an example :)\nconst DATA_FILE = path.join(__dirname, 'data.json');\n\nconst app = express();\n\napp.use('/home', express.static('.'));\n\n// Add a random delay to all requests. Set SHOULD_DELAY to false for a more\n// responsive server, or play around with the delay RANGE.\nconst SHOULD_DELAY = true;\nconst RANGE = [250, 2000];\napp.use((req, res, next) => {\n if (SHOULD_DELAY) {\n const delay = Math.random() * (RANGE[1] - RANGE[0]) + RANGE[0];\n const start = Date.now();\n while (Date.now() - start < delay) {}\n }\n next();\n});\n\n/**\n * Set up some help when you navigate to locahost:3000.\n */\napp.get('/', (req, res) => {\n res.send(`
\n\nTo view the todo app go to http://localhost:${PORT}/home.\n\n==========\n\nGET /ids\n  Description:\n    Gets a list of all known todo ids.\n\n  Query Params:\n    None\n\n  Response:\n    (list): ids of all todos\n\nGET /todo\n  Description:\n    This is a way to request data for a single todo.\n\n  Query Params:\n    id (string): the id to get data for\n\n  Response:\n    (Todo): todo for given id\n\nGET /todos\n  Description:\n    This is a way to request data for multiple todos.\n\n  Query Params:\n    ids (list): the ids to get data for\n\n  Response:\n    (list): todos for given ids\n\nPOST /todo/create\n  Description:\n    Creates a new todo. The ID will be created on the server. Text is the only\n    input. All todos start out with complete being false.\n\n  Query Params:\n    text (string): text content for the new todo\n\n  Response:\n    (Todo): the created todo\n\nPOST /todos/create\n  Description:\n    Creates many new todos. The IDs will be created on the server. Text is the\n    only input. All todos start out with complete being false.\n\n  Query Params:\n    texts (list): text content for the new todos\n\n  Response:\n    (list): the created todos\n\nPOST /todo/update\n  Description:\n    Updates a single todo. The todo must already exist.\n\n  Query Params:\n    id (string): the id to update\n    text (string): the new text value\n    complete (bool): the new complete value\n\n  Response:\n    (Todo): the updated todo\n\nPOST /todos/update\n  Description:\n    Updates multiple todos. The todos must already exist. All of the following\n    lists must be the same size and in the same order.\n\n  Query Params:\n    ids (list): the ids to update\n    texts (list): the new text values\n    completes (list): the new complete values\n\n  Response:\n    (list): the updated todos\n\nPOST /todo/delete\n  Description:\n    Deletes a single todo. The todo must already exist.\n\n  Query Params:\n    id (string): the id to delete\n\n  Response:\n    (none): no response, just check the status code\n\nPOST /todos/delete\n  Description:\n    Deletes multiple todos. The todos must already exist.\n\n  Query Params:\n    ids (list): the ids to delete\n\n  Response:\n    (none): no response, just check the status code\n\n
`);\n});\n\napp.get('/ids', (req, res) => {\n res.status(200).send(Object.keys(getTodos()));\n});\n\napp.get('/todo', (req, res) => {\n const rawID = req.query.id;\n if (rawID == null) {\n missing(res, 'id');\n return;\n }\n const id = JSON.parse(rawID);\n\n const todos = getTodos();\n if (todos[id] == null) {\n missingID(res, id);\n return;\n }\n\n res.status(200).send(todos[id]);\n});\n\napp.get('/todos', (req, res) => {\n const rawIDs = req.query.ids;\n if (rawIDs == null) {\n missing(res, 'ids');\n return;\n }\n\n const ids = JSON.parse(rawIDs);\n if (!unique(ids)) {\n res.status(400).send('ids contains duplicates');\n return;\n }\n const todos = getTodos();\n const result = [];\n for (const id of ids) {\n if (todos[id] == null) {\n missingID(res, id);\n return;\n }\n result.push(todos[id]);\n }\n\n res.status(200).send(result);\n});\n\napp.post('/todo/create', (req, res) => {\n if (randomError(res)) {\n return;\n }\n\n const rawText = req.query.text;\n if (rawText == null) {\n missing(res, 'text');\n return;\n }\n const text = JSON.parse(rawText);\n\n const newTodo = {\n id: nextID(),\n text: String(text),\n complete: false,\n };\n\n const todos = getTodos();\n todos[newTodo.id] = newTodo;\n setTodos(todos);\n\n res.status(200).send(newTodo);\n});\n\napp.post('/todos/create', (req, res) => {\n if (randomError(res)) {\n return;\n }\n\n const rawTexts = req.query.texts;\n if (rawTexts == null) {\n missing(res, 'texts');\n return;\n }\n\n const texts = JSON.parse(rawTexts);\n const newTodos = [];\n for (const text of texts) {\n newTodos.push({\n id: nextID(),\n text: String(text),\n complete: false,\n });\n }\n\n const todos = getTodos();\n for (const newTodo of newTodos) {\n todos[newTodo.id] = newTodo;\n }\n setTodos(todos);\n\n res.status(200).send(newTodos);\n});\n\napp.post('/todo/update', (req, res) => {\n if (randomError(res)) {\n return;\n }\n\n const rawID = req.query.id;\n if (rawID == null) {\n missing(res, 'id');\n return;\n }\n const id = JSON.parse(rawID);\n\n const rawText = req.query.text;\n if (rawText == null) {\n missing(res, 'text');\n return;\n }\n const text = JSON.parse(rawText);\n\n const rawComplete = req.query.complete;\n if (rawComplete == null) {\n missing(res, 'complete');\n return;\n }\n const complete = JSON.parse(rawComplete);\n\n const todos = getTodos();\n if (todos[id] == null) {\n missingID(res, id);\n return;\n }\n\n todos[id].text = String(text);\n todos[id].complete = Boolean(complete);\n setTodos(todos);\n\n res.status(200).send(todos[id]);\n});\n\napp.post('/todos/update', (req, res) => {\n if (randomError(res)) {\n return;\n }\n\n const rawIDs = req.query.ids;\n const rawTexts = req.query.texts;\n const rawCompletes = req.query.completes;\n if (rawIDs == null) {\n missing(res, 'ids');\n return;\n }\n if (rawTexts == null) {\n missing(res, 'texts');\n return;\n }\n if (rawCompletes == null) {\n missing(res, 'completes');\n return;\n }\n const ids = JSON.parse(rawIDs);\n if (!unique(ids)) {\n res.status(400).send('ids contains duplicates');\n return;\n }\n const texts = JSON.parse(rawTexts);\n const completes = JSON.parse(rawCompletes);\n if (ids.length !== texts.length) {\n res.status(400).send('The number of ids does not match number of texts.');\n return;\n }\n if (ids.length !== completes.length) {\n res\n .status(400)\n .send('The number of ids does not match number of completes.');\n return;\n }\n\n const results = [];\n const todos = getTodos();\n for (let i = 0; i < ids.length; i++) {\n const id = ids[i];\n const text = texts[i];\n const complete = completes[i];\n if (todos[id] == null) {\n missingID(res, id);\n return;\n }\n todos[id].text = String(text);\n todos[id].complete = Boolean(complete);\n results.push(todos[id]);\n }\n\n setTodos(todos);\n res.status(200).send(results);\n});\n\napp.post('/todo/delete', (req, res) => {\n if (randomError(res)) {\n return;\n }\n\n const rawID = req.query.id;\n if (rawID == null) {\n missing(res, 'id');\n return;\n }\n const id = JSON.parse(rawID);\n\n const todos = getTodos();\n if (todos[id] == null) {\n missingID(res, id);\n return;\n }\n\n delete todos[id];\n setTodos(todos);\n res.status(200).send();\n});\n\napp.post('/todos/delete', (req, res) => {\n if (randomError(res)) {\n return;\n }\n\n const rawIDs = req.query.ids;\n if (rawIDs == null) {\n missing(res, 'ids');\n return;\n }\n\n const ids = JSON.parse(rawIDs);\n if (!unique(ids)) {\n res.status(400).send('ids contains duplicates');\n return;\n }\n\n const todos = getTodos();\n for (let id of ids) {\n if (todos[id] == null) {\n missingID(res, id);\n return;\n }\n delete todos[id];\n }\n\n setTodos(todos);\n res.status(200).send();\n});\n\n/**\n * Start listening on port 3000\n */\napp.listen(PORT, () => {\n console.log(`Example app listening on port ${PORT}!`);\n});\n\n///// Some helper functions /////\n\nfunction randomError(res) {\n if (Math.random() * 100 <= ERROR_PCT) {\n res\n .status(400)\n .send('A random error occurred. Adjust frequency of these in app.js.');\n return true;\n }\n return false;\n}\n\nfunction unique(arr) {\n const set = new Set(arr);\n return set.size === arr.length;\n}\n\nfunction missing(res, field) {\n res.status(400).send(`Missing required query param: ${escape(field)}.`);\n}\n\nfunction missingID(res, id) {\n res.status(404).send(`Todo not found for ID: ${escape(id)}.`);\n}\n\nfunction getTodos() {\n try {\n return JSON.parse(fs.readFileSync(DATA_FILE, 'utf8'));\n } catch (e) {\n return {};\n }\n}\n\nfunction setTodos(todos) {\n fs.writeFileSync(DATA_FILE, JSON.stringify(todos, null, 2), 'utf8');\n}\n\nlet max = null;\nfunction nextID() {\n if (max == null) {\n max = 0;\n Object.keys(getTodos()).forEach((key) => {\n if (/^id_[1-9]\\d*$/.test(key)) {\n const idPart = key.split('_')[1];\n max = Math.max(max, Number(idPart));\n } else {\n throw new Error(\n `Invalid id \"${key}\" found, ids must look like id_`,\n );\n }\n });\n }\n return 'id_' + ++max;\n}\n" }, { "path": "examples/flux-async/src/TodoActions.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport type Todo from './records/Todo';\n\nexport type Action =\n // UI Actions for updating the draft.\n | {\n type: 'draft/set',\n value: string,\n }\n\n // Dealing with todo ids.\n | {\n type: 'ids/start-load',\n }\n | {\n type: 'ids/loaded',\n ids: Array,\n }\n | {\n type: 'ids/load-error',\n error: Error,\n }\n\n // Creating todos.\n | {\n type: 'todo/start-create',\n value: string,\n fakeID: string,\n }\n | {\n type: 'todo/created',\n todo: Todo,\n fakeID: string,\n }\n | {\n type: 'todo/create-error',\n error: Error,\n fakeID: string,\n }\n\n // Deleting todos.\n | {\n type: 'todos/start-delete',\n ids: Array,\n }\n | {\n type: 'todos/deleted',\n ids: Array,\n }\n | {\n type: 'todos/delete-error',\n error: Error,\n ids: Array,\n }\n\n // Reading todos.\n | {\n type: 'todos/start-load',\n ids: Array,\n }\n | {\n type: 'todos/loaded',\n todos: Array,\n }\n | {\n type: 'todos/load-error',\n ids: Array,\n error: Error,\n }\n\n // Updating todos.\n | {\n type: 'todos/start-update',\n ids: Array,\n texts: Array,\n completes: Array,\n }\n | {\n type: 'todos/updated',\n todos: Array,\n }\n | {\n type: 'todos/update-error',\n originalTodos: Array,\n error: Error,\n };\n" }, { "path": "examples/flux-async/src/TodoDispatcher.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport type {Action} from './TodoActions';\n\nimport {Dispatcher} from 'flux';\n\nconst dispatcher: Dispatcher = new Dispatcher();\n\nexport default dispatcher;\n" }, { "path": "examples/flux-async/src/containers/AppContainer.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport AppView from '../views/AppView';\nimport {Container} from 'flux/utils';\nimport FakeID from '../utils/FakeID';\nimport Todo from '../records/Todo';\nimport TodoDispatcher from '../TodoDispatcher';\nimport TodoDraftStore from '../stores/TodoDraftStore';\nimport TodoListStore from '../stores/TodoListStore';\nimport TodoStore from '../stores/TodoStore';\n\nfunction getStores() {\n return [TodoDraftStore, TodoListStore, TodoStore];\n}\n\nfunction getState() {\n const todos = TodoStore.getState();\n const ids = TodoListStore.getState();\n\n // Figure out which ids are being deleted.\n const deletedIDs = new Set();\n todos.forEach((lo, id) => {\n if (lo.isDeleting()) {\n deletedIDs.add(id);\n }\n });\n\n return {\n draft: TodoDraftStore.getState(),\n\n // Then optimistically remove todos that are being deleted.\n ids: ids.map((list) => list.filter((id) => !deletedIDs.has(id))),\n todos: todos.filter((_, id) => !deletedIDs.has(id)),\n\n onDelete,\n onDraftCreate,\n onDraftSet,\n onRetry,\n onUpdateTodos,\n };\n}\n\nfunction onDelete(ids: Array) {\n TodoDispatcher.dispatch({\n type: 'todos/start-delete',\n ids,\n });\n}\n\nfunction onDraftCreate(value: string) {\n if (value && value.trim()) {\n TodoDispatcher.dispatch({\n type: 'todo/start-create',\n fakeID: FakeID.next(),\n value,\n });\n }\n}\n\nfunction onDraftSet(value: string) {\n TodoDispatcher.dispatch({\n type: 'draft/set',\n value,\n });\n}\n\nfunction onRetry(todo: Todo) {\n if (FakeID.isFake(todo.id)) {\n // If it's a fakeID we had an error creating it, try again.\n TodoDispatcher.dispatch({\n type: 'todo/start-create',\n value: todo.text,\n fakeID: todo.id,\n });\n } else {\n // If it's a real ID we had an error loading it, try again.\n TodoDispatcher.dispatch({\n type: 'todos/start-load',\n ids: [todo.id],\n });\n }\n}\n\nfunction onUpdateTodos(todos: Array) {\n TodoDispatcher.dispatch({\n type: 'todos/start-update',\n ids: todos.map((todo) => todo.id),\n texts: todos.map((todo) => todo.text),\n completes: todos.map((todo) => todo.complete),\n });\n}\n\nexport default Container.createFunctional(AppView, getStores, getState);\n" }, { "path": "examples/flux-async/src/data_managers/TodoAPI.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\nimport xhr from 'xhr';\n\n// The port is hard coded in the server too. If you change it make sure to\n// update it there as well.\n\nconst PORT = 3000;\nconst PREFIX = 'http://localhost:' + PORT;\n\ntype TodoObject = {\n id: string,\n text: string,\n complete: boolean,\n};\n\n// Using some flow trickery we can strongly type our requests! We don't verify\n// this at runtime though, so it's not actually sound. But we're all good if\n// we trust the API implementation :)\ndeclare class TodoAPI {\n static get(uri: '/ids'): Promise>;\n\n static get(uri: '/todo', data: {id: string}): Promise;\n\n static get(\n uri: '/todos',\n data: {ids: Array},\n ): Promise>;\n\n static post(uri: '/todo/create', data: {text: string}): Promise;\n\n static post(\n uri: '/todos/create',\n data: {texts: Array},\n ): Promise>;\n\n static post(\n uri: '/todo/update',\n data: {id: string, text: string, complete: boolean},\n ): Promise;\n\n static post(\n uri: '/todos/update',\n data: {ids: Array, texts: Array, completes: Array},\n ): Promise>;\n\n static post(uri: '/todo/delete', data: {id: string}): Promise;\n\n static post(uri: '/todos/delete', data: {ids: Array}): Promise;\n}\n\n// $FlowExpectedError: Intentional rebinding of variable.\nconst TodoAPI = {\n get(uri, data) {\n return promiseXHR('get', uri, data);\n },\n\n post(uri, data) {\n return promiseXHR('post', uri, data);\n },\n};\n\n/**\n * This is a simple wrapper around XHR that let's us use promises. Not very\n * advanced but works with our server's API.\n */\nfunction promiseXHR(method: 'get' | 'post', uri, data) {\n const query = [];\n if (data) {\n Object.keys(data).forEach((key) => {\n query.push(key + '=' + JSON.stringify(data[key]));\n });\n }\n const suffix = query.length > 0 ? '?' + query.join('&') : '';\n return new Promise((resolve, reject) => {\n xhr[method](PREFIX + uri + suffix, (err, res, body) => {\n if (err) {\n reject(err);\n return;\n }\n if (res.statusCode !== 200) {\n reject(new Error('[status: ' + res.statusCode + '] ' + res.body));\n return;\n }\n\n // It's fine if the body is empty.\n if (body == null) {\n resolve(undefined);\n }\n\n // Not okay if the body isn't a string though.\n if (typeof body !== 'string') {\n reject(new Error('Responses from server must be JSON strings.'));\n }\n\n try {\n resolve(JSON.parse(body));\n } catch (e) {\n reject(new Error('Responses from server must be JSON strings.'));\n }\n });\n });\n}\n\nexport default TodoAPI;\n" }, { "path": "examples/flux-async/src/data_managers/TodoDataManager.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport Todo from '../records/Todo';\nimport TodoAPI from './TodoAPI';\nimport TodoDispatcher from '../TodoDispatcher';\n\nconst TodoDataManager = {\n create(text: string, fakeID: string) {\n TodoAPI.post('/todo/create', {text})\n .then((rawTodo) => {\n TodoDispatcher.dispatch({\n type: 'todo/created',\n todo: new Todo(rawTodo),\n fakeID,\n });\n })\n .catch((error) => {\n TodoDispatcher.dispatch({\n type: 'todo/create-error',\n error,\n fakeID,\n });\n });\n },\n\n deleteTodos(ids: Array) {\n TodoAPI.post('/todos/delete', {ids})\n .then(() => {\n TodoDispatcher.dispatch({\n type: 'todos/deleted',\n ids,\n });\n })\n .catch((error) => {\n TodoDispatcher.dispatch({\n type: 'todos/delete-error',\n error,\n ids,\n });\n });\n },\n\n updateTodos(\n ids: Array,\n texts: Array,\n completes: Array,\n originalTodos: Array,\n ) {\n TodoAPI.post('/todos/update', {ids, texts, completes})\n .then((rawTodos) => {\n TodoDispatcher.dispatch({\n type: 'todos/updated',\n todos: rawTodos.map((rawTodo) => new Todo(rawTodo)),\n });\n })\n .catch((error) => {\n TodoDispatcher.dispatch({\n type: 'todos/update-error',\n originalTodos,\n error,\n });\n });\n },\n\n loadIDs() {\n TodoAPI.get('/ids')\n .then((ids) => {\n TodoDispatcher.dispatch({\n type: 'ids/loaded',\n ids,\n });\n })\n .catch((error) => {\n TodoDispatcher.dispatch({\n type: 'ids/load-error',\n error,\n });\n });\n },\n\n loadTodos(ids: Array) {\n TodoAPI.get('/todos', {ids})\n .then((rawTodos) => {\n TodoDispatcher.dispatch({\n type: 'todos/loaded',\n todos: rawTodos.map((rawTodo) => new Todo(rawTodo)),\n });\n })\n .catch((error) => {\n TodoDispatcher.dispatch({\n type: 'todos/load-error',\n ids,\n error,\n });\n });\n },\n};\n\nexport default TodoDataManager;\n" }, { "path": "examples/flux-async/src/load_object/LoadObject.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\ntype LoadObjectOperation =\n | 'NONE'\n | 'CREATING'\n | 'LOADING'\n | 'UPDATING'\n | 'DELETING';\n\n/**\n * A secret key that is used to prevent direct construction of these objects,\n * this is effectively used to ensure that the constructor is private.\n */\nconst SECRET = 'SECRET_' + Math.random();\n\n/**\n * Immutable Load Object. This is an immutable object that represents a\n * particular point in time for a request. Some examples:\n *\n * Render spinners while loading:\n *\n * if (loadObject.isLoading()) {\n * return ;\n * }\n * return
...
;\n *\n * Render errors with an error:\n *\n * if (loadObject.hasError()) {\n * return ;\n * }\n * return
...
;\n *\n * Render normally when there's a value:\n *\n * return
{loadObject.getValue().text}
;\n *\n */\nclass LoadObject {\n _operation: LoadObjectOperation;\n _value: ?V;\n _error: ?Error;\n _hasValue: boolean;\n\n /**\n * Private construtor, never call this outside of this class.\n */\n constructor(\n secret: string,\n operation: LoadObjectOperation,\n value: ?V,\n error: ?Error,\n hasValue: boolean,\n ) {\n if (secret !== SECRET) {\n throw new Error(\n 'Construct LoadObjects using static methods such as ' +\n 'LoadObject.loading(), LoadObject.empty()',\n );\n }\n this._operation = operation;\n this._value = value;\n this._error = error;\n this._hasValue = hasValue;\n }\n\n // Convenient getters\n\n getOperation(): LoadObjectOperation {\n return this._operation;\n }\n\n getValue(): ?V {\n return this._value;\n }\n\n getValueEnforcing(): V {\n if (!this.hasValue()) {\n throw new Error('Expected load object to have a value set.');\n }\n // We check hasValue and cast rather than checking if value is null so that\n // it's possible to have \"null\" values that are set.\n return (this._value: any);\n }\n\n getError(): ?Error {\n return this._error;\n }\n\n getErrorEnforcing(): Error {\n if (!this._error) {\n throw new Error('Expected load object to have an error set.');\n }\n return this._error;\n }\n\n hasOperation(): boolean {\n return this._operation !== 'NONE';\n }\n\n hasValue(): boolean {\n return this._hasValue;\n }\n\n hasError(): boolean {\n return !!this._error;\n }\n\n isEmpty(): boolean {\n return !this.hasValue() && !this.hasOperation() && !this.hasError();\n }\n\n // Convenient setters\n\n setOperation(operation: LoadObjectOperation): LoadObject {\n if (this._operation === operation) {\n return this;\n }\n return new LoadObject(\n SECRET,\n operation,\n this._value,\n this._error,\n this._hasValue,\n );\n }\n\n setValue(value: V): LoadObject {\n if (this._value === value && this._hasValue === true) {\n return this;\n }\n return new LoadObject(SECRET, this._operation, value, this._error, true);\n }\n\n setError(error: Error): LoadObject {\n if (this._error === error) {\n return this;\n }\n return new LoadObject(\n SECRET,\n this._operation,\n this._value,\n error,\n this._hasValue,\n );\n }\n\n removeOperation(): LoadObject {\n if (this._operation === 'NONE') {\n return this;\n }\n return new LoadObject(\n SECRET,\n 'NONE',\n this._value,\n this._error,\n this._hasValue,\n );\n }\n\n removeValue(): LoadObject {\n if (this._value === undefined && this._hasValue === false) {\n return this;\n }\n return new LoadObject(\n SECRET,\n this._operation,\n undefined,\n this._error,\n false,\n );\n }\n\n removeError(): LoadObject {\n if (this._error === undefined) {\n return this;\n }\n return new LoadObject(\n SECRET,\n this._operation,\n this._value,\n undefined,\n this._hasValue,\n );\n }\n\n map(fn: (value: V) => V): LoadObject {\n if (!this.hasValue()) {\n return this;\n }\n return this.setValue(fn(this.getValueEnforcing()));\n }\n\n // Provide some helper methods to check specific operations\n\n isDone(): boolean {\n return !this.hasOperation();\n }\n\n isCreating(): boolean {\n return this.getOperation() === 'CREATING';\n }\n\n isLoading(): boolean {\n return this.getOperation() === 'LOADING';\n }\n\n isUpdating(): boolean {\n return this.getOperation() === 'UPDATING';\n }\n\n isDeleting(): boolean {\n return this.getOperation() === 'DELETING';\n }\n\n // Provide some helpers for mutating the operations\n\n done(): LoadObject {\n return this.removeOperation();\n }\n\n creating(): LoadObject {\n return this.setOperation('CREATING');\n }\n\n loading(): LoadObject {\n return this.setOperation('LOADING');\n }\n\n updating(): LoadObject {\n return this.setOperation('UPDATING');\n }\n\n deleting(): LoadObject {\n return this.setOperation('DELETING');\n }\n\n // Static helpers for creating LoadObjects\n\n static empty(): LoadObject {\n return new LoadObject(SECRET, 'NONE', undefined, undefined, false);\n }\n\n static creating(): LoadObject {\n return new LoadObject(SECRET, 'CREATING', undefined, undefined, false);\n }\n\n static loading(): LoadObject {\n return new LoadObject(SECRET, 'LOADING', undefined, undefined, false);\n }\n\n static updating(): LoadObject {\n return new LoadObject(SECRET, 'UPDATING', undefined, undefined, false);\n }\n\n static deleting(): LoadObject {\n return new LoadObject(SECRET, 'DELETING', undefined, undefined, false);\n }\n\n static withError(error: Error): LoadObject {\n return new LoadObject(SECRET, 'NONE', undefined, error, false);\n }\n\n static withValue(value: V): LoadObject {\n return new LoadObject(SECRET, 'NONE', value, undefined, true);\n }\n}\n\nexport default LoadObject;\n" }, { "path": "examples/flux-async/src/load_object/LoadObjectMap.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport Immutable from 'immutable';\nimport LoadObject from './LoadObject';\n\n/**\n * LoadObjectMap is a structure that mimics Immutable.Map where the values are\n * LoadObjects. It has a few features that make working with LoadObjects easier.\n *\n * - `get()` always returns a value, if the value is not found in the\n * underlying map an empty load object is returned, and...\n * - all keys that are requested in the same frame that do not exist in the\n * underlying map will be passed to the `loadAll()` function given to the\n * constructor of the map. This allows them to then be \"loaded\".\n *\n * There is some important timing issues to be aware of regarding `loadAll()`.\n *\n * - `loadAll()` is called in the frame AFTER calls to `get()` that has a\n * cache miss.\n * - `loadAll()` must SYNCHRONOUSLY change all of the given keys to a state\n * in the cache such that they will no longer be considered a cache miss.\n * Generally this means setting them to loading. Dispatching an action is\n * synchronous and generally what should be done in `loadAll()`.\n */\nclass LoadObjectMap {\n _data: Immutable.Map>;\n _loadAll: (key: Set) => void;\n _shouldLoad: (lo: LoadObject) => boolean;\n\n // Mutable state on this map so we don't accidently load something many times.\n _preventLoadsForThisFrame: Set;\n _clearPreventLoadsForThisFrame: mixed;\n\n constructor(\n loadAll: (keys: Set) => void,\n shouldLoad?: (lo: LoadObject) => boolean,\n ) {\n this._data = Immutable.Map();\n this._loadAll = loadAll;\n this._shouldLoad = shouldLoad || ((lo) => lo.isEmpty());\n this._preventLoadsForThisFrame = new Set();\n this._clearPreventLoadsForThisFrame = null;\n }\n\n // Some trickery so that we always return a load object, and call the provided\n // load function when appropriate.\n get(key: K): LoadObject {\n const lo = this._data.has(key) ? this._data.get(key) : LoadObject.empty();\n if (!this._preventLoadsForThisFrame.has(key) && this._shouldLoad(lo)) {\n // This must be done asynchronously to avoid nested dispatches.\n this._preventLoadsForThisFrame.add(key);\n if (!this._clearPreventLoadsForThisFrame) {\n this._clearPreventLoadsForThisFrame = setTimeout(() => {\n this._loadAll(this._preventLoadsForThisFrame);\n this._preventLoadsForThisFrame = new Set();\n this._clearPreventLoadsForThisFrame = null;\n }, 0);\n }\n }\n return lo;\n }\n\n getKeys(): Array {\n return Array.from(this._data.keys());\n }\n\n getValues(): Array> {\n return Array.from(this._data.values());\n }\n\n every(fn: (lo: LoadObject, key: K) => boolean): boolean {\n return this._data.every(fn);\n }\n\n some(fn: (lo: LoadObject, key: K) => boolean): boolean {\n return this._data.some(fn);\n }\n\n forEach(fn: (lo: LoadObject, key: K) => any): void {\n this._data.forEach(fn);\n }\n\n get size(): number {\n return this._data.size;\n }\n\n ////////// A selection of mutation functions found on Immutable.Map //////////\n\n delete(key: K): LoadObjectMap {\n return this._mutate(() => this._data.delete(key));\n }\n\n set(key: K, lo: LoadObject): LoadObjectMap {\n return this._mutate(() => this._data.set(key, lo));\n }\n\n merge(map: Iterable<[K, LoadObject]>): LoadObjectMap {\n return this._mutate(() => this._data.merge(map));\n }\n\n filter(fn: (lo: LoadObject, key: K) => boolean): LoadObjectMap {\n return this._mutate(() => this._data.filter(fn));\n }\n\n update(\n key: K,\n fn: (lo: LoadObject) => LoadObject,\n ): LoadObjectMap {\n return this._mutate(() => this._data.update(key, fn));\n }\n\n _mutate(fn: () => Immutable.Map>): LoadObjectMap {\n const nextData = fn();\n if (nextData === this._data) {\n return this;\n }\n const nextThis = new LoadObjectMap(this._loadAll, this._shouldLoad);\n nextThis._data = nextData;\n return nextThis;\n }\n}\n\nexport default LoadObjectMap;\n" }, { "path": "examples/flux-async/src/load_object/LoadObjectState.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport LoadObject from './LoadObject';\n\n/**\n * This helps work with state that can be represented by a single load object.\n * Similar to LoadObjectMap.\n */\nclass LoadObjectState {\n _data: LoadObject;\n _load: () => void;\n _shouldLoad: (lo: LoadObject) => boolean;\n\n _preventLoadsForThisFrame: boolean;\n _clearPreventLoadsForThisFrame: mixed;\n\n constructor(load: () => void, shouldLoad?: (lo: LoadObject) => boolean) {\n this._data = LoadObject.empty();\n this._load = load;\n this._shouldLoad = shouldLoad || ((lo) => lo.isEmpty());\n this._preventLoadsForThisFrame = false;\n this._clearPreventLoadsForThisFrame = null;\n }\n\n getLoadObject(): LoadObject {\n if (!this._preventLoadsForThisFrame && this._shouldLoad(this._data)) {\n this._preventLoadsForThisFrame = true;\n this._clearPreventLoadsForThisFrame = setTimeout(() => {\n this._load();\n this._preventLoadsForThisFrame = false;\n this._clearPreventLoadsForThisFrame = null;\n }, 0);\n }\n return this._data;\n }\n\n setLoadObject(lo: LoadObject): LoadObjectState {\n if (lo === this._data) {\n return this;\n }\n const next = new LoadObjectState(this._load, this._shouldLoad);\n next._data = lo;\n return next;\n }\n\n map(fn: (value: V) => V): LoadObjectState {\n const lo = this.getLoadObject().map(fn);\n if (lo === this._data) {\n return this;\n }\n const next = new LoadObjectState(this._load, this._shouldLoad);\n next._data = lo;\n return next;\n }\n}\n\nexport default LoadObjectState;\n" }, { "path": "examples/flux-async/src/records/Todo.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport Immutable from 'immutable';\n\ndeclare class Todo {\n id: string;\n complete: boolean;\n text: string;\n\n constructor(data: {\n id: string,\n complete: boolean,\n text: string,\n }): void;\n\n set(key: 'id', value: string): Todo;\n set(key: 'complete', value: boolean): Todo;\n set(key: 'text', value: string): Todo;\n}\n\n// $FlowExpectedError: Intentional rebinding for flow.\nconst Todo = Immutable.Record({\n id: '',\n complete: false,\n text: '',\n});\n\nexport default Todo;\n" }, { "path": "examples/flux-async/src/root.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport AppContainer from './containers/AppContainer';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport TodoLoggerStore from './stores/TodoLoggerStore';\n\nReactDOM.render(, document.getElementById('todoapp'));\n" }, { "path": "examples/flux-async/src/stores/TodoDraftStore.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport type {Action} from '../TodoActions';\n\nimport {ReduceStore} from 'flux/utils';\nimport TodoDataManager from '../data_managers/TodoDataManager';\nimport TodoDispatcher from '../TodoDispatcher';\n\ntype State = string;\n\nclass TodoDraftStore extends ReduceStore {\n constructor() {\n super(TodoDispatcher);\n }\n\n getInitialState(): State {\n return '';\n }\n\n reduce(state: State, action: Action): State {\n switch (action.type) {\n case 'todo/start-create':\n return '';\n\n case 'draft/set':\n return action.value;\n\n default:\n return state;\n }\n }\n}\n\nexport default new TodoDraftStore();\n" }, { "path": "examples/flux-async/src/stores/TodoListStore.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport type {Action} from '../TodoActions';\n\nimport FakeID from '../utils/FakeID';\nimport Immutable from 'immutable';\nimport LoadObject from '../load_object/LoadObject';\nimport LoadObjectState from '../load_object/LoadObjectState';\nimport {ReduceStore} from 'flux/utils';\nimport TodoDataManager from '../data_managers/TodoDataManager';\nimport TodoDispatcher from '../TodoDispatcher';\n\ntype State = LoadObjectState>;\n\nclass TodoListStore extends ReduceStore {\n constructor() {\n super(TodoDispatcher);\n }\n\n getInitialState(): State {\n return new LoadObjectState(() =>\n TodoDispatcher.dispatch({\n type: 'ids/start-load',\n }),\n );\n }\n\n reduce(state: State, action: Action): State {\n switch (action.type) {\n ///// Loading /////\n\n case 'ids/start-load':\n TodoDataManager.loadIDs();\n return state.setLoadObject(LoadObject.loading());\n\n case 'ids/loaded':\n return state.setLoadObject(\n LoadObject.withValue(Immutable.List(action.ids)),\n );\n\n case 'ids/load-error':\n return state.setLoadObject(LoadObject.withError(action.error));\n\n ///// Creating /////\n\n case 'todo/start-create':\n return state.map((list) =>\n list.contains(action.fakeID) ? list : list.push(action.fakeID),\n );\n\n case 'todo/created':\n // This replaces the fake ID we added optimistically with the real id.\n return state.map((list) =>\n list.map((id) => (id === action.fakeID ? action.todo.id : id)),\n );\n\n case 'todo/create-error':\n // We don't need to remove the id on an error. It will be updated to\n // have an error and the user can explicitly remove it.\n return state;\n\n ///// Deleting /////\n\n case 'todos/start-delete':\n // Optimistically remove any fake ids.\n const fakeIDs = action.ids.filter((id) => FakeID.isFake(id));\n const fakeIDSet = new Set(fakeIDs);\n return state.map((list) => list.filter((id) => !fakeIDSet.has(id)));\n\n case 'todos/deleted':\n const idSet = new Set(action.ids);\n return state.map((list) => list.filter((id) => !idSet.has(id)));\n\n case 'todo/delete-error':\n // No need to remove any ids when the delete fails, user will have to\n // retry in order to delete the items.\n return state;\n\n default:\n return state;\n }\n }\n}\n\nexport default new TodoListStore();\n" }, { "path": "examples/flux-async/src/stores/TodoLoggerStore.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport type {Action} from '../TodoActions';\n\nimport {ReduceStore} from 'flux/utils';\nimport TodoDispatcher from '../TodoDispatcher';\n\nconst DEBUG = false;\n\nfunction log(action: Action): void {\n if (DEBUG) {\n console.info(action);\n }\n}\n\nclass TodoLoggerStore extends ReduceStore {\n constructor() {\n super(TodoDispatcher);\n }\n\n getInitialState(): null {\n return null;\n }\n\n reduce(state: null, action: Action): null {\n log(action);\n return state;\n }\n}\n\nexport default new TodoLoggerStore();\n" }, { "path": "examples/flux-async/src/stores/TodoStore.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport type {Action} from '../TodoActions';\n\nimport FakeID from '../utils/FakeID';\nimport Immutable from 'immutable';\nimport LoadObject from '../load_object/LoadObject';\nimport LoadObjectMap from '../load_object/LoadObjectMap';\nimport {ReduceStore} from 'flux/utils';\nimport TodoDataManager from '../data_managers/TodoDataManager';\nimport TodoDispatcher from '../TodoDispatcher';\nimport Todo from '../records/Todo';\n\ntype State = LoadObjectMap;\n\nclass TodoStore extends ReduceStore {\n constructor() {\n super(TodoDispatcher);\n }\n\n getInitialState(): State {\n return new LoadObjectMap((keys) =>\n TodoDispatcher.dispatch({\n type: 'todos/start-load',\n ids: Array.from(keys),\n }),\n );\n }\n\n reduce(state: State, action: Action): State {\n switch (action.type) {\n ///// Creating /////\n\n case 'todo/start-create':\n TodoDataManager.create(action.value, action.fakeID);\n // Optimistically create the todo with the fakeID.\n return state.set(\n action.fakeID,\n LoadObject.creating().setValue(\n new Todo({\n id: action.fakeID,\n text: action.value,\n complete: false,\n }),\n ),\n );\n\n case 'todo/created':\n // Replace the optimistic todo with the real data.\n return state\n .delete(action.fakeID)\n .set(action.todo.id, LoadObject.withValue(action.todo));\n\n case 'todo/create-error':\n // Clear the operation and save the error when there is one.\n return state.update(action.fakeID, (lo) =>\n lo.setError(action.error).done(),\n );\n\n ///// Loading /////\n\n case 'todos/start-load':\n TodoDataManager.loadTodos(action.ids);\n return state.merge(action.ids.map((id) => [id, LoadObject.loading()]));\n\n case 'todos/loaded':\n return state.merge(\n action.todos.map((todo) => [todo.id, LoadObject.withValue(todo)]),\n );\n\n case 'todos/load-error':\n return state.merge(\n action.ids.map((id) => [id, LoadObject.withError(action.error)]),\n );\n\n ///// Updating /////\n\n case 'todos/start-update': {\n let nextState = state;\n // We need to save the original todos so we know what to revert to\n // in case of a failure.\n const originalTodos = [];\n action.ids.forEach((id, i) => {\n const todoLo = state.get(id);\n if (!todoLo.hasValue()) {\n return;\n }\n originalTodos.push(todoLo.getValueEnforcing());\n nextState = nextState.update(id, (lo) =>\n lo.updating().map((todo) => {\n return todo\n .set('text', action.texts[i])\n .set('complete', action.completes[i]);\n }),\n );\n });\n TodoDataManager.updateTodos(\n action.ids,\n action.texts,\n action.completes,\n originalTodos,\n );\n return nextState;\n }\n\n case 'todos/updated':\n return state.merge(\n action.todos.map((todo) => [todo.id, LoadObject.withValue(todo)]),\n );\n\n case 'todos/update-error':\n return state.merge(\n action.originalTodos.map((todo) => [\n todo.id,\n LoadObject.withValue(todo).setError(action.error),\n ]),\n );\n\n ///// Deleting /////\n\n case 'todos/start-delete': {\n let nextState = state;\n const realIDs = [];\n action.ids.forEach((id) => {\n if (FakeID.isFake(id)) {\n nextState = nextState.delete(id);\n } else {\n realIDs.push(id);\n nextState = nextState.update(id, (lo) => lo.deleting());\n }\n });\n TodoDataManager.deleteTodos(realIDs);\n return nextState;\n }\n\n case 'todos/deleted':\n const idSet = new Set(action.ids);\n return state.filter((_, id) => !idSet.has(id));\n\n case 'todos/delete-error': {\n let nextState = state;\n action.ids.forEach((id) => {\n nextState = nextState.update(id, (lo) =>\n lo.setError(action.error).done(),\n );\n });\n return nextState;\n }\n\n default:\n return state;\n }\n }\n}\n\nexport default new TodoStore();\n" }, { "path": "examples/flux-async/src/utils/FakeID.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\n// We include some randomness so that it's not easy to create these id's through\n// some other module. This should be the only place for testing fake ids.\nconst RANDOM_INT = Math.round(Math.random() * 10000);\nconst PREFIX = 'FAKE_' + RANDOM_INT + '_';\n\nlet count = 0;\n\n/**\n * This generated fake ids we can use to optimistically update the UI.\n */\nconst FakeID = {\n next(): string {\n return PREFIX + ++count;\n },\n\n isFake(id: string): boolean {\n return id.startsWith(PREFIX);\n },\n};\n\nexport default FakeID;\n" }, { "path": "examples/flux-async/src/views/AppView.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport type Immutable from 'immutable';\nimport type LoadObject from '../load_object/LoadObject';\nimport type LoadObjectMap from '../load_object/LoadObjectMap';\nimport type LoadObjectState from '../load_object/LoadObjectState';\nimport type Todo from '../records/Todo';\n\nimport FakeID from '../utils/FakeID';\nimport React from 'react';\n\nimport classnames from 'classnames';\n\ntype AppViewProps = {\n draft: string,\n ids: LoadObjectState>,\n todos: LoadObjectMap,\n\n onDelete: (ids: Array) => void,\n onDraftCreate: (value: string) => void,\n onDraftSet: (value: string) => void,\n onRetry: (todo: Todo) => void,\n onUpdateTodos: (todos: Array) => void,\n};\n\nfunction AppView(props: AppViewProps): ?React.Element<*> {\n return (\n
\n
\n
\n
\n
\n );\n}\n\ntype HeaderProps = {\n draft: string,\n\n onDraftCreate: (value: string) => void,\n onDraftSet: (value: string) => void,\n};\n\nfunction Header(props: HeaderProps): ?React.Element<*> {\n return (\n
\n

todos

\n \n
\n );\n}\n\ntype MainProps = {\n ids: LoadObjectState>,\n todos: LoadObjectMap,\n\n onDelete: (ids: Array) => void,\n onRetry: (todo: Todo) => void,\n onUpdateTodos: (todos: Array) => void,\n};\n\nfunction Main(props: MainProps): ?React.Element<*> {\n const {ids, todos, onDelete, onRetry, onUpdateTodos} = props;\n\n if (!ids.getLoadObject().hasValue()) {\n return null;\n }\n\n const list = ids.getLoadObject().getValueEnforcing();\n if (list.size === 0) {\n return null;\n }\n\n const areAllComplete = list.every((id) => {\n const todoLo = todos.get(id);\n return !todoLo.hasValue() || todoLo.getValueEnforcing().complete;\n });\n\n const onToggleAll = () => {\n const toUpdate = todos\n .filter((lo) => lo.hasValue() && lo.isDone())\n .getValues()\n .map((lo) => lo.getValueEnforcing())\n .filter((todo) => (areAllComplete ? todo.complete : !todo.complete))\n .map((todo) => todo.set('complete', !todo.complete));\n onUpdateTodos(toUpdate);\n };\n\n const listItems = [];\n list.forEach((id, i) => {\n listItems.push(\n ,\n );\n });\n\n return (\n
\n \n \n
    {listItems.reverse()}
\n
\n );\n}\n\ntype FooterProps = {\n todos: LoadObjectMap,\n\n onDelete: (ids: Array) => void,\n};\n\nfunction Footer(props: FooterProps): ?React.Element<*> {\n const todos = props.todos\n .filter((lo) => lo.hasValue())\n .getValues()\n .map((lo) => lo.getValueEnforcing());\n\n if (todos.length === 0) {\n return null;\n }\n\n const remaining = todos.filter((todo) => !todo.complete).length;\n const completed = todos.length - remaining;\n const phrase = remaining === 1 ? ' item left' : ' items left';\n\n let clearCompletedButton = null;\n if (completed > 0) {\n const completedIDs = todos\n .filter((todo) => todo.complete)\n .map((todo) => todo.id);\n clearCompletedButton = (\n \n );\n }\n\n return (\n
\n \n {remaining}\n {phrase}\n \n {clearCompletedButton}\n
\n );\n}\n\ntype NewTodoProps = {\n draft: string,\n\n onDraftCreate: (value: string) => void,\n onDraftSet: (value: string) => void,\n};\n\nconst ENTER_KEY_CODE = 13;\nfunction NewTodo(props: NewTodoProps): ?React.Element<*> {\n const create = () => props.onDraftCreate(props.draft);\n const onBlur = () => create();\n const onChange = (event) => props.onDraftSet(event.target.value);\n const onKeyDown = (event) => {\n if (event.keyCode === ENTER_KEY_CODE) {\n create();\n }\n };\n return (\n \n );\n}\n\ntype TodoItemProps = {\n todoLo: LoadObject,\n\n onDelete: (ids: Array) => void,\n onRetry: (todo: Todo) => void,\n onUpdateTodos: (todos: Array) => void,\n};\n\nfunction TodoItem(props: TodoItemProps): ?React.Element<*> {\n const {todoLo, onDelete, onRetry, onUpdateTodos} = props;\n\n if (!todoLo.hasValue()) {\n return (\n \n
\n \n
\n \n );\n }\n\n const todo = todoLo.getValueEnforcing();\n\n let boundOnToggle = () => {};\n let buttons = null;\n if (todoLo.isDone()) {\n // Can only toggle real todos.\n if (!FakeID.isFake(todo.id)) {\n boundOnToggle = () =>\n onUpdateTodos([todo.set('complete', !todo.complete)]);\n }\n buttons = (\n
\n
\n );\n }\n\n return (\n \n
\n \n \n {buttons}\n
\n \n );\n}\n\nexport default AppView;\n" }, { "path": "examples/flux-async/todomvc-common/.bower.json", "content": "{\n \"name\": \"todomvc-common\",\n \"version\": \"0.1.9\",\n \"homepage\": \"https://github.com/tastejs/todomvc-common\",\n \"_release\": \"0.1.9\",\n \"_resolution\": {\n \"type\": \"version\",\n \"tag\": \"v0.1.9\",\n \"commit\": \"7dd61b0ebf56c020e719a69444442cc7ae7242ff\"\n },\n \"_source\": \"git://github.com/tastejs/todomvc-common.git\",\n \"_target\": \"~0.1.4\",\n \"_originalSource\": \"todomvc-common\"\n}\n" }, { "path": "examples/flux-async/todomvc-common/base.css", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nhtml,\nbody {\n\tmargin: 0;\n\tpadding: 0;\n}\n\nbutton {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tbackground: none;\n\tfont-size: 100%;\n\tvertical-align: baseline;\n\tfont-family: inherit;\n\tcolor: inherit;\n\t-webkit-appearance: none;\n\t-ms-appearance: none;\n\t-o-appearance: none;\n\tappearance: none;\n}\n\nbody {\n\tfont: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tline-height: 1.4em;\n\tbackground: #eaeaea url('bg.png');\n\tcolor: #4d4d4d;\n\twidth: 550px;\n\tmargin: 0 auto;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-font-smoothing: antialiased;\n\t-ms-font-smoothing: antialiased;\n\t-o-font-smoothing: antialiased;\n\tfont-smoothing: antialiased;\n}\n\nbutton,\ninput[type=\"checkbox\"] {\n outline: none;\n}\n\n#todoapp {\n\tbackground: #fff;\n\tbackground: rgba(255, 255, 255, 0.9);\n\tmargin: 130px 0 40px 0;\n\tborder: 1px solid #ccc;\n\tposition: relative;\n\tborder-top-left-radius: 2px;\n\tborder-top-right-radius: 2px;\n\tbox-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),\n\t\t\t\t0 25px 50px 0 rgba(0, 0, 0, 0.15);\n}\n\n#todoapp:before {\n\tcontent: '';\n\tborder-left: 1px solid #f5d6d6;\n\tborder-right: 1px solid #f5d6d6;\n\twidth: 2px;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 40px;\n\theight: 100%;\n}\n\n#todoapp input::-webkit-input-placeholder {\n\tfont-style: italic;\n}\n\n#todoapp input::-moz-placeholder {\n\tfont-style: italic;\n\tcolor: #a9a9a9;\n}\n\n#todoapp h1 {\n\tposition: absolute;\n\ttop: -120px;\n\twidth: 100%;\n\tfont-size: 70px;\n\tfont-weight: bold;\n\ttext-align: center;\n\tcolor: #b3b3b3;\n\tcolor: rgba(255, 255, 255, 0.3);\n\ttext-shadow: -1px -1px rgba(0, 0, 0, 0.2);\n\t-webkit-text-rendering: optimizeLegibility;\n\t-moz-text-rendering: optimizeLegibility;\n\t-ms-text-rendering: optimizeLegibility;\n\t-o-text-rendering: optimizeLegibility;\n\ttext-rendering: optimizeLegibility;\n}\n\n#header {\n\tpadding-top: 15px;\n\tborder-radius: inherit;\n}\n\n#header:before {\n\tcontent: '';\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tleft: 0;\n\theight: 15px;\n\tz-index: 2;\n\tborder-bottom: 1px solid #6c615c;\n\tbackground: #8d7d77;\n\tbackground: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));\n\tbackground: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));\n\tbackground: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));\n\tfilter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');\n\tborder-top-left-radius: 1px;\n\tborder-top-right-radius: 1px;\n}\n\n#new-todo,\n.edit {\n\tposition: relative;\n\tmargin: 0;\n\twidth: 100%;\n\tfont-size: 24px;\n\tfont-family: inherit;\n\tline-height: 1.4em;\n\tborder: 0;\n\toutline: none;\n\tcolor: inherit;\n\tpadding: 6px;\n\tborder: 1px solid #999;\n\tbox-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);\n\t-moz-box-sizing: border-box;\n\t-ms-box-sizing: border-box;\n\t-o-box-sizing: border-box;\n\tbox-sizing: border-box;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-font-smoothing: antialiased;\n\t-ms-font-smoothing: antialiased;\n\t-o-font-smoothing: antialiased;\n\tfont-smoothing: antialiased;\n}\n\n#new-todo {\n\tpadding: 16px 16px 16px 60px;\n\tborder: none;\n\tbackground: rgba(0, 0, 0, 0.02);\n\tz-index: 2;\n\tbox-shadow: none;\n}\n\n#main {\n\tposition: relative;\n\tz-index: 2;\n\tborder-top: 1px dotted #adadad;\n}\n\nlabel[for='toggle-all'] {\n\tdisplay: none;\n}\n\n#toggle-all {\n\tposition: absolute;\n\ttop: -42px;\n\tleft: -4px;\n\twidth: 40px;\n\ttext-align: center;\n\t/* Mobile Safari */\n\tborder: none;\n}\n\n#toggle-all:before {\n\tcontent: '»';\n\tfont-size: 28px;\n\tcolor: #d9d9d9;\n\tpadding: 0 25px 7px;\n}\n\n#toggle-all:checked:before {\n\tcolor: #737373;\n}\n\n#todo-list {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n}\n\n#todo-list li {\n\tposition: relative;\n\tfont-size: 24px;\n\tborder-bottom: 1px dotted #ccc;\n}\n\n#todo-list li:last-child {\n\tborder-bottom: none;\n}\n\n#todo-list li.editing {\n\tborder-bottom: none;\n\tpadding: 0;\n}\n\n#todo-list li.editing .edit {\n\tdisplay: block;\n\twidth: 506px;\n\tpadding: 13px 17px 12px 17px;\n\tmargin: 0 0 0 43px;\n}\n\n#todo-list li.editing .view {\n\tdisplay: none;\n}\n\n#todo-list li .toggle {\n\ttext-align: center;\n\twidth: 40px;\n\t/* auto, since non-WebKit browsers doesn't support input styling */\n\theight: auto;\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tmargin: auto 0;\n\t/* Mobile Safari */\n\tborder: none;\n\t-webkit-appearance: none;\n\t-ms-appearance: none;\n\t-o-appearance: none;\n\tappearance: none;\n}\n\n#todo-list li .toggle:after {\n\tcontent: '✔';\n\t/* 40 + a couple of pixels visual adjustment */\n\tline-height: 43px;\n\tfont-size: 20px;\n\tcolor: #d9d9d9;\n\ttext-shadow: 0 -1px 0 #bfbfbf;\n}\n\n#todo-list li .toggle:checked:after {\n\tcolor: #85ada7;\n\ttext-shadow: 0 1px 0 #669991;\n\tbottom: 1px;\n\tposition: relative;\n}\n\n#todo-list li label {\n\twhite-space: pre;\n\tword-break: break-word;\n\tpadding: 15px 60px 15px 15px;\n\tmargin-left: 45px;\n\tdisplay: block;\n\tline-height: 1.2;\n\t-webkit-transition: color 0.4s;\n\ttransition: color 0.4s;\n}\n\n#todo-list li.hasError {\n\tbackground-color: rgba(218, 99, 93, 0.1);\n}\n\n#todo-list li.completed label {\n\tcolor: #a9a9a9;\n\ttext-decoration: line-through;\n}\n\n#todo-list li .retry {\n\tdisplay: none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 50px;\n\tbottom: 0;\n\twidth: 40px;\n\theight: 40px;\n\tmargin: auto 0;\n\tfont-size: 22px;\n\tcolor: #b4dfb5;\n\t-webkit-transition: all 0.2s;\n\ttransition: all 0.2s;\n}\n\n#todo-list li .retry:hover {\n\ttext-shadow: 0 0 1px #ccc,\n\t\t\t\t 0 0 10px rgba(180, 223, 181, 0.8);\n\t-webkit-transform: scale(1.3);\n\t-ms-transform: scale(1.3);\n\ttransform: scale(1.3);\n}\n\n#todo-list li .retry:after {\n\tcontent: '↺';\n}\n\n#todo-list li:hover .retry {\n\tdisplay: inline-block;\n}\n\n#todo-list li .destroy {\n\tdisplay: none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 10px;\n\tbottom: 2px;\n\twidth: 40px;\n\theight: 40px;\n\tmargin: auto 0;\n\tfont-size: 22px;\n\tcolor: #a88a8a;\n\t-webkit-transition: all 0.2s;\n\ttransition: all 0.2s;\n}\n\n#todo-list li .destroy:hover {\n\ttext-shadow: 0 0 1px #333,\n\t\t\t\t 0 0 10px rgba(199, 107, 107, 0.8);\n\t-webkit-transform: scale(1.3);\n\t-ms-transform: scale(1.3);\n\ttransform: scale(1.3);\n}\n\n#todo-list li .destroy:after {\n\tcontent: '×';\n}\n\n#todo-list li:hover .destroy {\n\tdisplay: inline-block;\n}\n\n#todo-list li .edit {\n\tdisplay: none;\n}\n\n#todo-list li.editing:last-child {\n\tmargin-bottom: -1px;\n}\n\n#footer {\n\tcolor: #777;\n\tpadding: 0 15px;\n\tposition: absolute;\n\tright: 0;\n\tbottom: -31px;\n\tleft: 0;\n\theight: 20px;\n\tz-index: 1;\n\ttext-align: center;\n}\n\n#footer:before {\n\tcontent: '';\n\tposition: absolute;\n\tright: 0;\n\tbottom: 31px;\n\tleft: 0;\n\theight: 50px;\n\tz-index: -1;\n\tbox-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),\n\t\t\t\t0 6px 0 -3px rgba(255, 255, 255, 0.8),\n\t\t\t\t0 7px 1px -3px rgba(0, 0, 0, 0.3),\n\t\t\t\t0 43px 0 -6px rgba(255, 255, 255, 0.8),\n\t\t\t\t0 44px 2px -6px rgba(0, 0, 0, 0.2);\n}\n\n#todo-count {\n\tfloat: left;\n\ttext-align: left;\n}\n\n#filters {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tposition: absolute;\n\tright: 0;\n\tleft: 0;\n}\n\n#filters li {\n\tdisplay: inline;\n}\n\n#filters li a {\n\tcolor: #83756f;\n\tmargin: 2px;\n\ttext-decoration: none;\n}\n\n#filters li a.selected {\n\tfont-weight: bold;\n}\n\n#clear-completed {\n\tfloat: right;\n\tposition: relative;\n\tline-height: 20px;\n\ttext-decoration: none;\n\tbackground: rgba(0, 0, 0, 0.1);\n\tfont-size: 11px;\n\tpadding: 0 10px;\n\tborder-radius: 3px;\n\tbox-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);\n}\n\n#clear-completed:hover {\n\tbackground: rgba(0, 0, 0, 0.15);\n\tbox-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);\n}\n\n#info {\n\tmargin: 65px auto 0;\n\tcolor: #a6a6a6;\n\tfont-size: 12px;\n\ttext-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);\n\ttext-align: center;\n}\n\n#info a {\n\tcolor: inherit;\n}\n\n.shimmer {\n\tcolor: rgba(255, 255, 255, 0.1);\n\n\tbackground: -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #999));\n background: -moz-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #999));\n background: gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #999));\n\n\t-webkit-background-size: 125px 100%;\n -moz-background-size: 125px 100%;\n background-size: 125px 100%;\n\n\t-webkit-background-clip: text;\n -moz-background-clip: text;\n background-clip: text;\n\n\t-webkit-animation-name: shimmer;\n -moz-animation-name: shimmer;\n animation-name: shimmer;\n\n\t-webkit-animation-duration: 5s;\n -moz-animation-duration: 5s;\n animation-duration: 5s;\n\n\t-webkit-animation-iteration-count: infinite;\n -moz-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n\n\tbackground-repeat: no-repeat\n\tbackground-position: 0 0\n\tbackground-color: #222\n}\n\n@keyframes shimmer {\n\t0% { background-position: top left; }\n\t100% { background-position: top right; }\n}\n\n/*\n\tHack to remove background from Mobile Safari.\n\tCan't use it globally since it destroys checkboxes in Firefox and Opera\n*/\n\n@media screen and (-webkit-min-device-pixel-ratio:0) {\n\t#toggle-all,\n\t#todo-list li .toggle {\n\t\tbackground: none;\n\t}\n\n\t#todo-list li .toggle {\n\t\theight: 40px;\n\t}\n\n\t#toggle-all {\n\t\ttop: -56px;\n\t\tleft: -15px;\n\t\twidth: 65px;\n\t\theight: 41px;\n\t\t-webkit-transform: rotate(90deg);\n\t\t-ms-transform: rotate(90deg);\n\t\ttransform: rotate(90deg);\n\t\t-webkit-appearance: none;\n\t\tappearance: none;\n\t}\n}\n\n.hidden {\n\tdisplay: none;\n}\n\nhr {\n\tmargin: 20px 0;\n\tborder: 0;\n\tborder-top: 1px dashed #C5C5C5;\n\tborder-bottom: 1px dashed #F7F7F7;\n}\n\n.learn a {\n\tfont-weight: normal;\n\ttext-decoration: none;\n\tcolor: #b83f45;\n}\n\n.learn a:hover {\n\ttext-decoration: underline;\n\tcolor: #787e7e;\n}\n\n.learn h3,\n.learn h4,\n.learn h5 {\n\tmargin: 10px 0;\n\tfont-weight: 500;\n\tline-height: 1.2;\n\tcolor: #000;\n}\n\n.learn h3 {\n\tfont-size: 24px;\n}\n\n.learn h4 {\n\tfont-size: 18px;\n}\n\n.learn h5 {\n\tmargin-bottom: 0;\n\tfont-size: 14px;\n}\n\n.learn ul {\n\tpadding: 0;\n\tmargin: 0 0 30px 25px;\n}\n\n.learn li {\n\tline-height: 20px;\n}\n\n.learn p {\n\tfont-size: 15px;\n\tfont-weight: 300;\n\tline-height: 1.3;\n\tmargin-top: 0;\n\tmargin-bottom: 0;\n}\n\n.quote {\n\tborder: none;\n\tmargin: 20px 0 60px 0;\n}\n\n.quote p {\n\tfont-style: italic;\n}\n\n.quote p:before {\n\tcontent: '“';\n\tfont-size: 50px;\n\topacity: .15;\n\tposition: absolute;\n\ttop: -20px;\n\tleft: 3px;\n}\n\n.quote p:after {\n\tcontent: '”';\n\tfont-size: 50px;\n\topacity: .15;\n\tposition: absolute;\n\tbottom: -42px;\n\tright: 3px;\n}\n\n.quote footer {\n\tposition: absolute;\n\tbottom: -40px;\n\tright: 0;\n}\n\n.quote footer img {\n\tborder-radius: 3px;\n}\n\n.quote footer a {\n\tmargin-left: 5px;\n\tvertical-align: middle;\n}\n\n.speech-bubble {\n\tposition: relative;\n\tpadding: 10px;\n\tbackground: rgba(0, 0, 0, .04);\n\tborder-radius: 5px;\n}\n\n.speech-bubble:after {\n\tcontent: '';\n\tposition: absolute;\n\ttop: 100%;\n\tright: 30px;\n\tborder: 13px solid transparent;\n\tborder-top-color: rgba(0, 0, 0, .04);\n}\n\n.learn-bar > .learn {\n\tposition: absolute;\n\twidth: 272px;\n\ttop: 8px;\n\tleft: -300px;\n\tpadding: 10px;\n\tborder-radius: 5px;\n\tbackground-color: rgba(255, 255, 255, .6);\n\t-webkit-transition-property: left;\n\ttransition-property: left;\n\t-webkit-transition-duration: 500ms;\n\ttransition-duration: 500ms;\n}\n\n@media (min-width: 899px) {\n\t.learn-bar {\n\t\twidth: auto;\n\t\tmargin: 0 0 0 300px;\n\t}\n\n\t.learn-bar > .learn {\n\t\tleft: 8px;\n\t}\n\n\t.learn-bar #todoapp {\n\t\twidth: 550px;\n\t\tmargin: 130px auto 40px auto;\n\t}\n}\n" }, { "path": "examples/flux-async/todomvc-common/bower.json", "content": "{\n \"name\": \"todomvc-common\",\n \"version\": \"0.1.9\"\n}\n" }, { "path": "examples/flux-async/todomvc-common/readme.md", "content": "# todomvc-common\n\n> Bower component for some common utilities we use in every app\n\n## License\n\nMIT\n" }, { "path": "examples/flux-async/webpack.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nmodule.exports = {\n module: {\n loaders: [{test: /\\.js$/, exclude: /node_modules/, loader: 'babel-loader'}],\n },\n};\n" }, { "path": "examples/flux-concepts/README.md", "content": "# flux-concepts\n\nThese are the important high-level concepts and principles you should know about when writing applications that use Flux.\n\n## Overview\n\nFlux is a pattern for managing data flow in your application. The most important concept is that data flows in one direction. As we go through this guide we'll talk about the different pieces of a Flux application and show how they form unidirectional cycles that data can flow through.\n\n## Flux Parts\n\n- Dispatcher\n- Store\n- Action\n- View\n\n## Dispatcher\n\nThe dispatcher receives actions and dispatches them to stores that have registered with the dispatcher. **Every store will receive every action.** There should be only one singleton dispatcher in each application.\n\nExample:\n\n1. User types in title for a todo and hits enter.\n2. The view captures this event and **dispatches** an \"add-todo\" action containing the title of the todo.\n3. **Every store** will then receive this action.\n\n## Store\n\nA store is what holds the data of an application. Stores will register with the application's dispatcher so that they can receive actions. **The data in a store must only be mutated by responding to an action.** There should not be any public setters on a store, only getters. Stores decide what actions they want to respond to. **Every time a store's data changes it must emit a \"change\" event.** There should be many stores in each application.\n\nExamples:\n\n1. Store receives an \"add-todo\" action.\n2. It decides it is relevant and adds the todo to the list of things that need to be done today.\n3. The store updates its data and then emits a \"change\" event.\n\n## Actions\n\nActions define the internal API of your application. They capture the ways in which anything might interact with your application. They are simple objects that have a \"type\" field and some data.\n\nActions should be semantic and descriptive of the action taking place. They should not describe implementation details of that action. Use \"delete-user\" rather than breaking it up into \"delete-user-id\", \"clear-user-data\", \"refresh-credentials\" (or however the process works). Remember that all stores will receive the action and can know they need to clear the data or refresh credentials by handling the same \"delete-user\" action.\n\nExamples:\n\n1. When a user clicks \"delete\" on a completed todo a single \"delete-todo\" action is dispatched:\n\n```\n {\n type: 'delete-todo',\n todoID: '1234',\n }\n```\n\n## Views\n\nData from stores is displayed in views. Views can use whatever framework you want (In most examples here we will use React). **When a view uses data from a store it must also subscribe to change events from that store.** Then when the store emits a change the view can get the new data and re-render. If a component ever uses a store and does not subscribe to it then there is likely a subtle bug waiting to be found. Actions are typically dispatched from views as the user interacts with parts of the application's interface.\n\nExample:\n\n1. The main view subscribes to the TodoStore.\n2. It accesses a list of the Todos and renders them in a readable format for the user to interact with.\n3. When a user types in the title of a new Todo and hits enter the view tells the Dispatcher to dispatch an action.\n4. All stores receive the dispatched action.\n5. The TodoStore handles the action and adds another Todo to its internal data structure, then emits a \"change\" event.\n6. The main view is listening for the \"change\" event. It gets the event, gets new data from the TodoStore, and then re-renders the list of Todos in the user interface.\n\n## Flow of data\n\nWe can piece the parts of Flux above into a diagram describing how data flows through the system.\n\n1. Views send actions to the dispatcher.\n2. The dispatcher sends actions to every store.\n3. Stores send data to the views.\n\n- _(Different phrasing: Views get data from the stores.)_\n\n![Data flow within Flux application](./flux-simple-f8-diagram-with-client-action-1300w.png)\n\n_(There is also another node in the diagram accounting for actions that do not originate from views, which is common)_\n\n## Next steps\n\nThere are also plenty of great summaries of the Flux architecture online, feel free to search around for more resources if you need to.\n\nOtherwise you can start coding with the [flux-todomvc](../flux-todomvc) example, or head back to check out the full list of [example topics](..).\n" }, { "path": "examples/flux-flow/.babelrc", "content": "{\n \"presets\": [\"es2015\"],\n \"plugins\": [\n \"syntax-async-functions\",\n \"syntax-flow\",\n \"syntax-jsx\",\n \"syntax-object-rest-spread\",\n \"syntax-trailing-function-commas\",\n \"transform-flow-strip-types\",\n \"transform-object-rest-spread\",\n \"transform-react-jsx\",\n \"transform-regenerator\",\n \"transform-runtime\"\n ]\n}\n" }, { "path": "examples/flux-flow/.flowconfig", "content": "[ignore]\n\n.*/node_modules/.*\n\n[libs]\n\nflow\n\n[options]\n\nsuppress_comment=\\\\(.\\\\|\\n\\\\)*\\\\$FlowExpectedError\nexperimental.const_params=true\n" }, { "path": "examples/flux-flow/.gitignore", "content": "bundle.js\nlib\n" }, { "path": "examples/flux-flow/README.md", "content": "# flux-flow\n\nThis is a very simple example that highlights how to set up Flux and [Flow](https://flowtype.org/) in the same project. Flow is a static-type checking tool that will help catch errors in your code statically. It complements Flux well since it supports refining the action based on a type string.\n\n# Usage\n\n```bash\ncd path/to/flux-flow\nflow\n```\n\n_Note: Since flow is a static analysis tool you don't actually need to build anything for this example._\n\n# Differences from flux-shell\n\nThe primary differences from the `flux-shell` project that are necessary to use Flow are:\n\n1. Copy the `Flux` library definitions from [`./flow`](./flow)\n2. Create a [`.flowconfig`](./.flowconfig) file with the correct options\n\nAfter that you can navigate to your project and run `flow` in the terminal.\n\n# Kinds of errors caught by flow\n\n- Check out: [`__flowtests__/App-flowtest.js`](./src/__flowtests__/App-flowtest.js)\n- Or remove the `suppress_comment` line from [`.flowconfig`](./.flowconfig)\n\n# Const params\n\nYou may notice that `.flowconfig` has `experimental.const_params=true` in it. This is generally necessary to make refinements on the payload stronger. If for other reasons it's not possible to use this option in your project you may need to do this to work around Flow refinement issues:\n\n```\nfunction reduce(state: State, _action: Action): State {\n const action = _action;\n ...\n}\n```\n" }, { "path": "examples/flux-flow/flow/flux-utils.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\nimport type {Dispatcher} from 'flux';\nimport type React from 'react';\n\ntype DispatchToken = string;\n\ntype ContainerOptions = {\n pure?: ?boolean,\n withProps?: ?boolean,\n withContext?: ?boolean,\n};\n\ndeclare module 'flux/utils' {\n declare class Store {\n constructor(dispatcher: Dispatcher): void;\n addListener(callback: (eventType?: string) => void): {remove: () => void};\n getDispatcher(): Dispatcher;\n getDispatchToken(): DispatchToken;\n hasChanged(): boolean;\n }\n\n declare class ReduceStore extends Store {\n getState(): TState;\n getInitialState(): TState;\n reduce(state: TState, action: TPayload): TState;\n areEqual(one: TState, two: TState): boolean;\n }\n\n // This isn't really a class, just a simple object. Not sure how to put that\n // in declare module.\n declare class Container {\n static create(\n base: React.Element,\n options?: ?ContainerOptions,\n ): React.Class;\n\n static createFunctional(\n viewFn: (props: State) => React.Element,\n getStores: (props?: ?Props, context?: any) => Array>,\n calculateState: (\n prevState?: ?State,\n props?: ?Props,\n context?: any,\n ) => State,\n options?: ContainerOptions,\n ): React.Class;\n }\n}\n" }, { "path": "examples/flux-flow/flow/flux.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\ntype DispatchToken = string;\n\ndeclare module 'flux' {\n declare class Dispatcher {\n register(callback: (payload: TPayload) => void): DispatchToken;\n unregister(id: DispatchToken): void;\n waitFor(ids: Array): void;\n dispatch(payload: TPayload): void;\n isDispatching(): boolean;\n }\n}\n" }, { "path": "examples/flux-flow/index.html", "content": "\n\n \n \n Flux • Shell\n \n \n
\n \n \n\n" }, { "path": "examples/flux-flow/package.json", "content": "{\n \"name\": \"flux-flow\",\n \"version\": \"1.0.0\",\n \"description\": \"Basic shell application for the Flux architecture\",\n \"repository\": \"https://github.com/facebook/flux\",\n \"author\": \"Kyle Davis\",\n \"main\": \"bundle.js\",\n \"scripts\": {\n \"build\": \"webpack ./src/root.js ./bundle.js\",\n \"watch\": \"webpack ./src/root.js ./bundle.js --watch\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"dependencies\": {\n \"classnames\": \"^2.2.3\",\n \"flux\": \"../../.\",\n \"immutable\": \"^3.8.0\",\n \"react\": \"^15.0.2\",\n \"react-dom\": \"^15.0.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.7.6\",\n \"babel-loader\": \"^6.2.4\",\n \"babel-plugin-syntax-async-functions\": \"^6.5.0\",\n \"babel-plugin-syntax-flow\": \"^6.5.0\",\n \"babel-plugin-syntax-jsx\": \"^6.5.0\",\n \"babel-plugin-syntax-object-rest-spread\": \"^6.5.0\",\n \"babel-plugin-syntax-trailing-function-commas\": \"^6.5.0\",\n \"babel-plugin-transform-flow-strip-types\": \"^6.5.0\",\n \"babel-plugin-transform-object-rest-spread\": \"^6.6.5\",\n \"babel-plugin-transform-react-jsx\": \"^6.7.5\",\n \"babel-plugin-transform-regenerator\": \"^6.5.2\",\n \"babel-plugin-transform-runtime\": \"^6.5.2\",\n \"babel-preset-es2015\": \"^6.5.0\",\n \"webpack\": \"^1.13.0\"\n }\n}\n" }, { "path": "examples/flux-flow/src/AppActions.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nexport type Action =\n | {\n type: 'foo',\n foo: string,\n }\n | {\n type: 'bar',\n bar: string,\n };\n" }, { "path": "examples/flux-flow/src/AppContainer.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport AppDispatcher from './AppDispatcher';\nimport AppStore from './AppStore';\nimport AppView from './AppView';\nimport {Container} from 'flux/utils';\n\nfunction getStores() {\n return [AppStore];\n}\n\nfunction getState() {\n return {\n value: AppStore.getState(),\n\n // $FlowExpectedError: Cannot dispatch an incorrectly formed action.\n onFooChange: () =>\n AppDispatcher.dispatch({\n type: 'foo',\n bar: 'Hello Bar!',\n }),\n };\n}\n\nexport default Container.createFunctional(AppView, getStores, getState);\n" }, { "path": "examples/flux-flow/src/AppDispatcher.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport type {Action} from './AppActions';\n\nimport {Dispatcher} from 'flux';\n\nconst dispatcher: Dispatcher = new Dispatcher();\n\nexport default dispatcher;\n" }, { "path": "examples/flux-flow/src/AppStore.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport type {Action} from './AppActions';\n\nimport {ReduceStore} from 'flux/utils';\nimport AppDispatcher from './AppDispatcher';\n\nclass AppStore extends ReduceStore {\n constructor() {\n super(AppDispatcher);\n }\n\n getInitialState(): string {\n return 'Hello World!';\n }\n\n reduce(state: string, action: Action): string {\n switch (action.type) {\n case 'foo':\n return action.foo;\n\n // This is an error that should be caught by flow.\n case 'bar':\n // $FlowExpectedError: action type 'bar' does not have a 'foo' property.\n return action.foo;\n\n // This case is okay though, bar actions have a bar property.\n case 'bar':\n return action.bar;\n\n default:\n return state;\n }\n }\n}\n\nexport default new AppStore();\n" }, { "path": "examples/flux-flow/src/AppView.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport React from 'react';\n\nexport type Props = {value: string};\n\nfunction AppView(props: Props): React.Element<*> {\n return
{props.value}
;\n}\n\nexport default AppView;\n" }, { "path": "examples/flux-flow/src/__flowtests__/App-flowtest.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\n// This file will violate certain parts of flow definitions and expect errors\n// using the annotation \"FlowExpectedError\". This works because if the error\n// suppressing comment no longer suppresses an error that becomes a flow error.\n// This means regressions where we expect an error and there is not an error\n// will be caught.\n\nimport AppDispatcher from '../AppDispatcher';\nimport AppStore from '../AppStore';\nimport React from 'react';\nimport {Container} from 'flux/utils';\n\n/**\n * Tests a simple dispatch with an invalid payload.\n */\nfunction t1() {\n // $FlowExpectedError: Cannot dispatch an incorrectly formed action.\n AppDispatcher.dispatch({\n type: 'foo',\n bar: 'Hello Bar!',\n });\n}\n\n/**\n * Tests creating a container with state that doesn't match props of the view.\n */\nfunction t2(): React.Element<*> {\n function MyView(props: {value: string}) {\n return
{props.value}
;\n }\n\n const MyContainer = Container.createFunctional(\n MyView,\n () => [AppStore],\n // $FlowExpectedError: Incorrect shape for state.\n () => ({notValue: AppStore.getState()}),\n );\n\n return ;\n}\n" }, { "path": "examples/flux-flow/src/root.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @flow\n */\n\n'use strict';\n\nimport AppContainer from './AppContainer';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(, document.getElementById('root'));\n" }, { "path": "examples/flux-flow/webpack.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nmodule.exports = {\n module: {\n loaders: [{test: /\\.js$/, exclude: /node_modules/, loader: 'babel-loader'}],\n },\n};\n" }, { "path": "examples/flux-jest/.babelrc", "content": "{\n \"presets\": [\"es2015\"],\n \"plugins\": [\n \"syntax-async-functions\",\n \"syntax-flow\",\n \"syntax-jsx\",\n \"syntax-object-rest-spread\",\n \"syntax-trailing-function-commas\",\n \"transform-flow-strip-types\",\n \"transform-object-rest-spread\",\n \"transform-react-jsx\",\n \"transform-regenerator\",\n \"transform-runtime\"\n ]\n}\n" }, { "path": "examples/flux-jest/.gitignore", "content": "bundle.js\nlib\n" }, { "path": "examples/flux-jest/README.md", "content": "# flux-jest\n\nBeing able to unit test stores is critical. This example shows you how to write tests for the TodoMVC stores we created in an earlier example.\n\n# Usage\n\n```bash\ncd path/to/flux-jest\nnpm install\nnpm run test\n```\n\n# Differences from flux-shell\n\nThe primary differences from the `flux-shell` project that are necessary to use Jest are:\n\n1. Run `npm install --save-dev jest babel-jest`\n2. Add `\"jest\"` property to [`package.json`](./package.json)\n3. Update `\"test\"` key in the `\"scripts\"` section of [`package.json`](./package.json)\n\nSetting it up this way will reuse the [`.babelrc`](./babelrc) file we already have set up so we can keep using the same syntax in our test files!\n\n# Check out the tests\n\nCheck out the test file and make sure to read through the comments in `beforeEach()` to get a sense of how and why we set up the test file the way we did.\n\n- [`TodoStore-test.js`](./src/__tests__/TodoStore-test.js)\n- [`TodoStore.js`](../flux-todomvc/src/data/TodoStore.js)\n" }, { "path": "examples/flux-jest/package.json", "content": "{\n \"name\": \"flux-jest\",\n \"version\": \"1.0.0\",\n \"description\": \"Basic shell application for the Flux architecture\",\n \"repository\": \"https://github.com/facebook/flux\",\n \"author\": \"Kyle Davis\",\n \"main\": \"no_main.js\",\n \"scripts\": {\n \"test\": \"jest\"\n },\n \"dependencies\": {\n \"classnames\": \"^2.2.3\",\n \"flux\": \"../../.\",\n \"immutable\": \"^3.8.0\",\n \"react\": \"^15.0.2\",\n \"react-dom\": \"^15.0.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.7.6\",\n \"babel-jest\": \"^15.0.0\",\n \"babel-plugin-syntax-async-functions\": \"^6.5.0\",\n \"babel-plugin-syntax-flow\": \"^6.5.0\",\n \"babel-plugin-syntax-jsx\": \"^6.5.0\",\n \"babel-plugin-syntax-object-rest-spread\": \"^6.5.0\",\n \"babel-plugin-syntax-trailing-function-commas\": \"^6.5.0\",\n \"babel-plugin-transform-flow-strip-types\": \"^6.5.0\",\n \"babel-plugin-transform-object-rest-spread\": \"^6.6.5\",\n \"babel-plugin-transform-react-jsx\": \"^6.7.5\",\n \"babel-plugin-transform-regenerator\": \"^6.5.2\",\n \"babel-plugin-transform-runtime\": \"^6.5.2\",\n \"babel-preset-es2015\": \"^6.5.0\",\n \"jest\": \"^15.1.1\"\n },\n \"jest\": {\n \"modulePathIgnorePatterns\": [\n \"/node_modules/\"\n ],\n \"preprocessorIgnorePatterns\": [\n \"/node_modules/\"\n ],\n \"rootDir\": \"\",\n \"testPathDirs\": [\n \"/src\"\n ]\n }\n}\n" }, { "path": "examples/flux-jest/src/__tests__/TodoStore-test.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport Counter from '../../../flux-todomvc/src/data/Counter';\nimport Todo from '../../../flux-todomvc/src/data/Todo';\nimport TodoActionTypes from '../../../flux-todomvc/src/data/TodoActionTypes';\nimport TodoStore from '../../../flux-todomvc/src/data/TodoStore';\n\ndescribe('TodoStore', function () {\n // Before each test case we set up some helper functions that makes the tests\n // easier to read. It's okay to have a fair amount of helper functions as long\n // as they make the tests simpler to read and write. Depending on the\n // complexity of your store it is perfectly reasonable to factor these out\n // into a separate `TodoTestHelpers.js` file that can be reused -- and then\n // you could write tests for the helpers too! :P (we actually do this for our\n // main stores)\n beforeEach(function () {\n // Always start with the initial state.\n this.state = TodoStore.getInitialState();\n\n // This function gets a more readable form of the todos that we can pass\n // to expect().\n this.todos = () =>\n Array.from(this.state.values()).map((todo) => ({\n text: todo.text,\n complete: !!todo.complete,\n }));\n\n // This function is for setting up data, it will add all the todos to the\n // state in a direct way.\n this.addTodos = (todos) => {\n todos.forEach((todo) => {\n const id = Counter.increment();\n this.state = this.state.set(\n id,\n new Todo({id, text: todo.text, complete: !!todo.complete}),\n );\n });\n };\n\n // Because of how TodoStore is set up it's not easy to get access to ids of\n // todos. This will get the id of a particular todo based on the index it\n // was added to state in.\n this.id = (index) => {\n if (this.state.size <= index) {\n throw new Error(\n 'Requested id for an index that is larger than the size of the ' +\n 'current state.',\n );\n }\n return Array.from(this.state.keys())[index];\n };\n\n // This \"dispatches\" an action to our store. We can bypass the dispatcher\n // and just call the store's reduce function directly.\n this.dispatch = (action) => {\n this.state = TodoStore.reduce(this.state, action);\n };\n });\n\n ///// Begin tests /////\n\n it('can add multiple todos', function () {\n expect(this.todos()).toEqual([]);\n\n this.dispatch({\n type: TodoActionTypes.ADD_TODO,\n text: 'test0',\n });\n\n expect(this.todos()).toEqual([{text: 'test0', complete: false}]);\n\n this.dispatch({\n type: TodoActionTypes.ADD_TODO,\n text: 'test1',\n });\n\n expect(this.todos()).toEqual([\n {text: 'test0', complete: false},\n {text: 'test1', complete: false},\n ]);\n });\n\n it('only removes completed todos', function () {\n this.addTodos([\n {text: 'test0', complete: false},\n {text: 'test1', complete: true},\n {text: 'test2', complete: false},\n ]);\n\n this.dispatch({type: TodoActionTypes.DELETE_COMPLETED_TODOS});\n\n expect(this.todos()).toEqual([\n {text: 'test0', complete: false},\n {text: 'test2', complete: false},\n ]);\n });\n\n it('can delete a specific todo', function () {\n this.addTodos([\n {text: 'test0', complete: true},\n {text: 'test1', complete: true},\n {text: 'test2', complete: false},\n ]);\n\n this.dispatch({\n type: TodoActionTypes.DELETE_TODO,\n id: this.id(2),\n });\n\n expect(this.todos()).toEqual([\n {text: 'test0', complete: true},\n {text: 'test1', complete: true},\n ]);\n\n this.dispatch({\n type: TodoActionTypes.DELETE_TODO,\n id: this.id(0),\n });\n\n expect(this.todos()).toEqual([{text: 'test1', complete: true}]);\n });\n\n it('can edit a specific todo', function () {\n this.addTodos([\n {text: 'test0', complete: false},\n {text: 'test1', complete: false},\n {text: 'test2', complete: false},\n ]);\n\n this.dispatch({\n type: TodoActionTypes.EDIT_TODO,\n id: this.id(1),\n text: 'foobar',\n });\n\n expect(this.todos()).toEqual([\n {text: 'test0', complete: false},\n {text: 'foobar', complete: false},\n {text: 'test2', complete: false},\n ]);\n });\n\n it('marks all todos complete if any are incomplete', function () {\n this.addTodos([\n {text: 'test0', complete: true},\n {text: 'test1', complete: true},\n {text: 'test2', complete: false},\n ]);\n\n this.dispatch({type: TodoActionTypes.TOGGLE_ALL_TODOS});\n\n expect(this.todos()).toEqual([\n {text: 'test0', complete: true},\n {text: 'test1', complete: true},\n {text: 'test2', complete: true},\n ]);\n });\n\n it('marks all todos incomplete if all are complete', function () {\n this.addTodos([\n {text: 'test0', complete: true},\n {text: 'test1', complete: true},\n {text: 'test2', complete: true},\n ]);\n\n this.dispatch({type: TodoActionTypes.TOGGLE_ALL_TODOS});\n\n expect(this.todos()).toEqual([\n {text: 'test0', complete: false},\n {text: 'test1', complete: false},\n {text: 'test2', complete: false},\n ]);\n });\n\n it('toggles a particular todo', function () {\n this.addTodos([\n {text: 'test0', complete: true},\n {text: 'test1', complete: true},\n ]);\n\n this.dispatch({\n type: TodoActionTypes.TOGGLE_TODO,\n id: this.id(0),\n });\n\n expect(this.todos()).toEqual([\n {text: 'test0', complete: false},\n {text: 'test1', complete: true},\n ]);\n\n this.dispatch({\n type: TodoActionTypes.TOGGLE_TODO,\n id: this.id(0),\n });\n\n expect(this.todos()).toEqual([\n {text: 'test0', complete: true},\n {text: 'test1', complete: true},\n ]);\n\n this.dispatch({\n type: TodoActionTypes.TOGGLE_TODO,\n id: this.id(1),\n });\n\n expect(this.todos()).toEqual([\n {text: 'test0', complete: true},\n {text: 'test1', complete: false},\n ]);\n });\n});\n" }, { "path": "examples/flux-jest-container/.babelrc", "content": "{\n \"presets\": [\"es2015\"],\n \"plugins\": [\n \"syntax-async-functions\",\n \"syntax-flow\",\n \"syntax-jsx\",\n \"syntax-object-rest-spread\",\n \"syntax-trailing-function-commas\",\n \"transform-flow-strip-types\",\n \"transform-object-rest-spread\",\n \"transform-react-jsx\",\n \"transform-regenerator\",\n \"transform-runtime\"\n ]\n}\n" }, { "path": "examples/flux-jest-container/.gitignore", "content": "bundle.js\nlib\n" }, { "path": "examples/flux-jest-container/README.md", "content": "# flux-jest-container\n\nTesting the container logic that connects stores to views can be tricky. This example shows you how to create some utilities to help mock out store data in order to write these kinds of tests effectively.\n\n# Usage\n\n```bash\ncd path/to/flux-jest\nnpm install\nnpm run test\n```\n\n# Differences from flux-shell\n\nThe primary differences from the `flux-shell` project that are necessary to use Jest are:\n\n1. Run `npm install --save-dev jest babel-jest react-test-renderer`\n2. Add `\"jest\"` property to [`package.json`](./package.json)\n3. Update `\"test\"` key in the `\"scripts\"` section of [`package.json`](./package.json)\n\nSetting it up this way will reuse the [`.babelrc`](./babelrc) file we already have set up so we can keep using the same syntax in our test files!\n\n# Check out the tests\n\nCheck out the test file and make sure to read through the comments in `beforeEach()` to get a sense of how and why we set up the test file the way we did.\n\nIn this test we make use of `toMatchSnapshot()` which will serialize the state of a react component to a snapshot file. Then if any changes are made that cause the snapshot to change the test will fail unless we explicitly decide to update the snapshot. This helps prevent any unexpected UI regressions. Read more about snapshot testing in the blog post here: [React Tree Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html).\n\nImportant files for this example:\n\n- [`AppContainer-test.js`](./src/__tests__/AppContainer-test.js)\n- [`AppContainer-test.js.snap`](./src/__tests__/__snapshots__/AppContainer-test.js.snap)\n- [`AppContainer.js`](../flux-todomvc/src/containers/AppContainer.js)\n" }, { "path": "examples/flux-jest-container/package.json", "content": "{\n \"name\": \"flux-jest\",\n \"version\": \"1.0.0\",\n \"description\": \"Basic shell application for the Flux architecture\",\n \"repository\": \"https://github.com/facebook/flux\",\n \"author\": \"Kyle Davis\",\n \"main\": \"no_main.js\",\n \"scripts\": {\n \"test\": \"jest\"\n },\n \"dependencies\": {\n \"classnames\": \"^2.2.3\",\n \"flux\": \"../../.\",\n \"immutable\": \"^3.8.0\",\n \"react\": \"^15.3.1\",\n \"react-dom\": \"^15.3.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.7.6\",\n \"babel-jest\": \"^15.0.0\",\n \"babel-plugin-syntax-async-functions\": \"^6.5.0\",\n \"babel-plugin-syntax-flow\": \"^6.5.0\",\n \"babel-plugin-syntax-jsx\": \"^6.5.0\",\n \"babel-plugin-syntax-object-rest-spread\": \"^6.5.0\",\n \"babel-plugin-syntax-trailing-function-commas\": \"^6.5.0\",\n \"babel-plugin-transform-flow-strip-types\": \"^6.5.0\",\n \"babel-plugin-transform-object-rest-spread\": \"^6.6.5\",\n \"babel-plugin-transform-react-jsx\": \"^6.7.5\",\n \"babel-plugin-transform-regenerator\": \"^6.5.2\",\n \"babel-plugin-transform-runtime\": \"^6.5.2\",\n \"babel-preset-es2015\": \"^6.5.0\",\n \"jest\": \"^15.1.1\",\n \"react-test-renderer\": \"^15.3.1\"\n },\n \"jest\": {\n \"modulePathIgnorePatterns\": [\n \"/node_modules/\"\n ],\n \"preprocessorIgnorePatterns\": [\n \"/node_modules/\"\n ],\n \"rootDir\": \"\",\n \"testPathDirs\": [\n \"/src\"\n ]\n }\n}\n" }, { "path": "examples/flux-jest-container/src/__tests__/AppContainer-test.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport AppContainer from '../../../flux-todomvc/src/containers/AppContainer';\nimport Counter from '../../../flux-todomvc/src/data/Counter';\nimport Immutable from 'immutable';\nimport React from 'react';\nimport Todo from '../../../flux-todomvc/src/data/Todo';\nimport TodoDraftStore from '../../../flux-todomvc/src/data/TodoDraftStore';\nimport TodoEditStore from '../../../flux-todomvc/src/data/TodoEditStore';\nimport TodoStore from '../../../flux-todomvc/src/data/TodoStore';\n\nimport renderer from 'react-test-renderer';\n\ndescribe('AppContainer', function () {\n // Set up functions to help mock the data in each store that is used by\n // our container. If there are child containers you may also need to mock that\n // data as well. We do not need to mock all of the callbacks because we are\n // just testing how it renders at a particular point in time. If you also\n // wanted to test how the callbacks behave you would need to make these helper\n // functions actually inject their data into the stores rather than\n // overridding each store's getState() function. As your application grows\n // you should move these into test utils that can be reused across tests for\n // many containers. This should prevent the need for any code to be in the\n // beforeEach() function of your container tests.\n beforeEach(function () {\n let editStore = '';\n this.setEditID = (id) => (editStore = id);\n\n let draftStore = '';\n this.setDraftText = (text) => (draftStore = text);\n\n let todoStore = Immutable.OrderedMap();\n this.setTodos = (todos) => {\n todos.forEach((todo) => {\n const id = Counter.increment();\n todoStore = todoStore.set(\n id,\n new Todo({id, text: todo.text, complete: !!todo.complete}),\n );\n });\n };\n\n // Because of how TodoStore is set up it's not easy to get access to ids of\n // todos. This will get the id of a particular todo based on the index it\n // was added to state in.\n this.id = (index) => {\n if (todoStore.size <= index) {\n throw new Error(\n 'Requested id for an index that is larger than the size of the ' +\n 'current state.',\n );\n }\n return Array.from(todoStore.keys())[index];\n };\n\n // Override all the get state's to read from our fake data.\n TodoDraftStore.getState = () => draftStore;\n TodoEditStore.getState = () => editStore;\n TodoStore.getState = () => todoStore;\n\n // Simple helper so tests read easier.\n this.render = () => renderer.create().toJSON();\n });\n\n ///// Begin tests /////\n\n it('renders some todos', function () {\n this.setTodos([\n {text: 'Hello', complete: false},\n {text: 'World!', complete: false},\n // Uncomment this to see what it looks like when a snapshot doesn't match.\n // {text: 'Some changes', complete: false},\n ]);\n\n expect(this.render()).toMatchSnapshot();\n });\n\n it('renders with no todos', function () {\n expect(this.render()).toMatchSnapshot();\n });\n\n it('renders todos that are complete', function () {\n this.setTodos([\n // Try changing complete to \"true\" for test0 to see how snapshot changes.\n {text: 'test0', complete: false},\n {text: 'test1', complete: true},\n {text: 'test2', complete: true},\n {text: 'test3', complete: false},\n ]);\n\n expect(this.render()).toMatchSnapshot();\n });\n\n it('can edit task that is not complete', function () {\n this.setTodos([\n {text: 'test0', complete: false},\n {text: 'test1', complete: true},\n {text: 'test2', complete: true},\n {text: 'test3', complete: false},\n ]);\n\n this.setEditID(this.id(0));\n\n expect(this.render()).toMatchSnapshot();\n });\n\n it('can edit task that is complete', function () {\n this.setTodos([\n {text: 'test0', complete: false},\n {text: 'test1', complete: true},\n {text: 'test2', complete: true},\n {text: 'test3', complete: false},\n ]);\n\n this.setEditID(this.id(1));\n\n expect(this.render()).toMatchSnapshot();\n });\n\n it('renders draft with todos', function () {\n this.setTodos([{text: 'test0', complete: false}]);\n\n this.setDraftText('test1');\n\n expect(this.render()).toMatchSnapshot();\n });\n\n it('renders draft with no todos', function () {\n this.setDraftText('test0');\n\n expect(this.render()).toMatchSnapshot();\n });\n\n it('renders draft with todos while editing', function () {\n this.setTodos([\n {text: 'test0', complete: false},\n {text: 'test1', complete: false},\n ]);\n\n this.setEditID(this.id(1));\n\n this.setDraftText('test1 edit');\n\n expect(this.render()).toMatchSnapshot();\n });\n});\n" }, { "path": "examples/flux-jest-container/src/__tests__/__snapshots__/AppContainer-test.js.snap", "content": "exports[`AppContainer can edit task tat is complete 1`] = `\n
\n \n

\n todos\n

\n \n \n \n \n \n Mark all as complete\n \n \n \n \n \n \n test3\n \n \n
\n \n \n \n \n \n test2\n \n \n \n \n \n \n \n \n test1\n \n \n \n \n \n \n \n \n \n test0\n \n \n \n \n \n \n \n \n \n 2\n \n items left\n \n \n Clear completed (\n 2\n )\n \n \n\n`;\n\nexports[`AppContainer can edit task tat is not complete 1`] = `\n
\n \n

\n todos\n

\n \n \n \n \n \n Mark all as complete\n \n \n \n \n \n \n test3\n \n \n
\n \n \n \n \n \n test2\n \n \n \n \n \n \n \n \n test1\n \n \n \n \n \n \n \n \n test0\n \n \n \n \n \n \n \n \n \n \n 2\n \n items left\n \n \n Clear completed (\n 2\n )\n \n \n\n`;\n\nexports[`AppContainer renders draft with no todos 1`] = `\n
\n \n

\n todos\n

\n \n \n
\n`;\n\nexports[`AppContainer renders draft with todos 1`] = `\n
\n \n

\n todos\n

\n \n \n \n \n \n Mark all as complete\n \n \n \n \n \n \n test0\n \n \n
\n \n \n \n \n \n \n 1\n \n item left\n \n \n\n`;\n\nexports[`AppContainer renders draft with todos while editing 1`] = `\n
\n \n

\n todos\n

\n \n \n \n \n \n Mark all as complete\n \n \n \n \n \n \n test1\n \n \n
\n \n \n \n \n \n \n test0\n \n \n \n \n \n \n \n \n \n 2\n \n items left\n \n \n\n`;\n\nexports[`AppContainer renders some todos 1`] = `\n
\n \n

\n todos\n

\n \n \n \n \n \n Mark all as complete\n \n \n \n \n \n \n World!\n \n \n
\n \n \n \n \n \n Hello\n \n \n \n \n \n \n \n \n \n 2\n \n items left\n \n \n\n`;\n\nexports[`AppContainer renders todos that are complete 1`] = `\n
\n \n

\n todos\n

\n \n \n \n \n \n Mark all as complete\n \n \n \n \n \n \n test3\n \n \n
\n \n \n \n \n \n test2\n \n \n \n \n \n \n \n \n test1\n \n \n \n \n \n \n \n \n test0\n \n \n \n \n \n \n \n \n \n 2\n \n items left\n \n \n Clear completed (\n 2\n )\n \n \n\n`;\n\nexports[`AppContainer renders with no todos 1`] = `\n
\n \n

\n todos\n

\n \n \n
\n`;\n" }, { "path": "examples/flux-logging/.babelrc", "content": "{\n \"presets\": [\"es2015\"],\n \"plugins\": [\n \"syntax-async-functions\",\n \"syntax-flow\",\n \"syntax-jsx\",\n \"syntax-object-rest-spread\",\n \"syntax-trailing-function-commas\",\n \"transform-flow-strip-types\",\n \"transform-object-rest-spread\",\n \"transform-react-jsx\",\n \"transform-regenerator\",\n \"transform-runtime\"\n ]\n}\n" }, { "path": "examples/flux-logging/.gitignore", "content": "bundle.js\nlib\n" }, { "path": "examples/flux-logging/README.md", "content": "# flux-logging\n\nTaking advantage of the fact that a store gets every action makes it easy to add logging to a Flux application. Check out this quick example where we add a logger store to the TodoMVC app we created in an earlier example.\n\n# Usage\n\n```bash\ncd path/to/flux-logging\nnpm install\nnpm run watch\n# open path/to/flux-logging/index.html in your browser\n```\n\n# See the logging\n\nOpen the console in your browser and start adding todos. There should be logging printed to the console for each action that is fired.\n\nTo see how this is accomplished in code look at the logger store we created:\n\n- [`TodoLoggerStore.js`](./src/TodoLoggerStore.js)\n\nWhen creating a logger store you will also need to make sure it is explicitly initialized at the root of your application. This is because no container will directly use the logger store.\n\n- See: [`root.js`](./src/root.js)\n" }, { "path": "examples/flux-logging/index.html", "content": "\n\n \n \n Flux • TodoMVC\n \n \n \n
\n
\n

Double-click to edit a todo

\n

Part of TodoMVC

\n
\n \n \n\n" }, { "path": "examples/flux-logging/package.json", "content": "{\n \"name\": \"flux-logging\",\n \"version\": \"1.0.0\",\n \"description\": \"Basic shell application for the Flux architecture\",\n \"repository\": \"https://github.com/facebook/flux\",\n \"author\": \"Kyle Davis\",\n \"main\": \"bundle.js\",\n \"scripts\": {\n \"build\": \"webpack ./src/root.js ./bundle.js\",\n \"watch\": \"webpack ./src/root.js ./bundle.js --watch\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"dependencies\": {\n \"classnames\": \"^2.2.3\",\n \"flux\": \"../../.\",\n \"immutable\": \"^3.8.0\",\n \"react\": \"^15.0.2\",\n \"react-dom\": \"^15.0.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.7.6\",\n \"babel-loader\": \"^6.2.4\",\n \"babel-plugin-syntax-async-functions\": \"^6.5.0\",\n \"babel-plugin-syntax-flow\": \"^6.5.0\",\n \"babel-plugin-syntax-jsx\": \"^6.5.0\",\n \"babel-plugin-syntax-object-rest-spread\": \"^6.5.0\",\n \"babel-plugin-syntax-trailing-function-commas\": \"^6.5.0\",\n \"babel-plugin-transform-flow-strip-types\": \"^6.5.0\",\n \"babel-plugin-transform-object-rest-spread\": \"^6.6.5\",\n \"babel-plugin-transform-react-jsx\": \"^6.7.5\",\n \"babel-plugin-transform-regenerator\": \"^6.5.2\",\n \"babel-plugin-transform-runtime\": \"^6.5.2\",\n \"babel-preset-es2015\": \"^6.5.0\",\n \"webpack\": \"^1.13.0\"\n }\n}\n" }, { "path": "examples/flux-logging/src/TodoDispatcher.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport TodoStore from '../../flux-todomvc/src/data/TodoStore';\n\n// This is just a hack due to how we are requiring things from another project.\n// We need to make sure we use the correct dispatcher in our logger store and\n// this is the easiest way to ensure that. You should ignore this.\nconst dispatcher = TodoStore.__dispatcher;\n\nexport default dispatcher;\n" }, { "path": "examples/flux-logging/src/TodoLoggerStore.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport {ReduceStore} from 'flux/utils';\nimport TodoActionTypes from '../../flux-todomvc/src/data/TodoActionTypes';\nimport TodoDispatcher from './TodoDispatcher';\n\n// This would be the util for logging data to wherver you want to keep it.\n// For now we will just log it to the console.\nconst TodoLogger = {\n log(...args) {\n console.log(...args);\n },\n};\n\nclass TodoLoggerStore extends ReduceStore {\n constructor() {\n super(TodoDispatcher);\n }\n\n getInitialState() {\n // We don't actually have any state in this store. Eventually you may want\n // to keep state here in order to track \"sequences of actions\", but we won't\n // cover that in this example.\n return null;\n }\n\n reduce(state, action) {\n // We will always log the action type. Could extend this to log the entire\n // action, but depending on your actions and applications that could be a\n // large amount of data.\n TodoLogger.log('general_action_logging', action.type);\n\n // Here we can log additional information for specific action types we\n // care about. Can handle any kind of action here from any store.\n switch (action.type) {\n case TodoActionTypes.DELETE_TODO:\n TodoLogger.log('direct_deletion', action.id);\n break;\n }\n\n // Always return the old state.\n return state;\n }\n}\n\nexport default new TodoLoggerStore();\n" }, { "path": "examples/flux-logging/src/root.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport AppContainer from '../../flux-todomvc/src/containers/AppContainer';\nimport {Container} from 'flux/utils';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\n// Import the logger store explicitly so that it registers with the dispatcher.\nimport TodoLoggerStore from './TodoLoggerStore';\n\nReactDOM.render(, document.getElementById('todoapp'));\n" }, { "path": "examples/flux-logging/webpack.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nmodule.exports = {\n module: {\n loaders: [{test: /\\.js$/, exclude: /node_modules/, loader: 'babel-loader'}],\n },\n};\n" }, { "path": "examples/flux-shell/.babelrc", "content": "{\n \"presets\": [\"es2015\"],\n \"plugins\": [\n \"syntax-async-functions\",\n \"syntax-flow\",\n \"syntax-jsx\",\n \"syntax-object-rest-spread\",\n \"syntax-trailing-function-commas\",\n \"transform-flow-strip-types\",\n \"transform-object-rest-spread\",\n \"transform-react-jsx\",\n \"transform-regenerator\",\n \"transform-runtime\"\n ]\n}\n" }, { "path": "examples/flux-shell/.gitignore", "content": "bundle.js\nlib\n" }, { "path": "examples/flux-shell/README.md", "content": "# flux-shell\n\nThis is a very simple hello world app that you can use as a starting point for your application.\n\n# Usage\n\n```bash\ncd path/to/flux-shell\nnpm install\nnpm run build\n# open path/to/flux-shell/index.html in your browser\n```\n\n# Watch\n\nInstead of manually building after each change it's possible to automatically recompile the javascript bundle when files change:\n\n```bash\nnpm run watch\n# make javascript changes, then refresh path/to/flux-shell/index.html\n```\n" }, { "path": "examples/flux-shell/index.html", "content": "\n\n \n \n Flux • Shell\n \n \n
\n \n \n\n" }, { "path": "examples/flux-shell/package.json", "content": "{\n \"name\": \"flux-shell\",\n \"version\": \"1.0.0\",\n \"description\": \"Basic shell application for the Flux architecture\",\n \"repository\": \"https://github.com/facebook/flux\",\n \"author\": \"Kyle Davis\",\n \"license\": \"BSD-3-Clause\",\n \"main\": \"bundle.js\",\n \"scripts\": {\n \"build\": \"webpack ./src/root.js ./bundle.js\",\n \"watch\": \"webpack ./src/root.js ./bundle.js --watch\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"dependencies\": {\n \"classnames\": \"^2.2.3\",\n \"flux\": \"../../.\",\n \"immutable\": \"^3.8.0\",\n \"react\": \"^15.0.2\",\n \"react-dom\": \"^15.0.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.7.6\",\n \"babel-loader\": \"^6.2.4\",\n \"babel-plugin-syntax-async-functions\": \"^6.5.0\",\n \"babel-plugin-syntax-flow\": \"^6.5.0\",\n \"babel-plugin-syntax-jsx\": \"^6.5.0\",\n \"babel-plugin-syntax-object-rest-spread\": \"^6.5.0\",\n \"babel-plugin-syntax-trailing-function-commas\": \"^6.5.0\",\n \"babel-plugin-transform-flow-strip-types\": \"^6.5.0\",\n \"babel-plugin-transform-object-rest-spread\": \"^6.6.5\",\n \"babel-plugin-transform-react-jsx\": \"^6.7.5\",\n \"babel-plugin-transform-regenerator\": \"^6.5.2\",\n \"babel-plugin-transform-runtime\": \"^6.5.2\",\n \"babel-preset-es2015\": \"^6.5.0\",\n \"webpack\": \"^1.13.0\"\n }\n}\n" }, { "path": "examples/flux-shell/src/root.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(
Hello World!
, document.getElementById('root'));\n" }, { "path": "examples/flux-shell/webpack.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nmodule.exports = {\n module: {\n loaders: [{test: /\\.js$/, exclude: /node_modules/, loader: 'babel-loader'}],\n },\n};\n" }, { "path": "examples/flux-todomvc/.babelrc", "content": "{\n \"presets\": [\"es2015\"],\n \"plugins\": [\n \"syntax-async-functions\",\n \"syntax-flow\",\n \"syntax-jsx\",\n \"syntax-object-rest-spread\",\n \"syntax-trailing-function-commas\",\n \"transform-flow-strip-types\",\n \"transform-object-rest-spread\",\n \"transform-react-jsx\",\n \"transform-regenerator\",\n \"transform-runtime\"\n ]\n}\n" }, { "path": "examples/flux-todomvc/.gitignore", "content": "bundle.js\nlib\n" }, { "path": "examples/flux-todomvc/README.md", "content": "# flux-todomvc\n\nThis example is where you should start. It walks you through creating the classic [TodoMVC](http://todomvc.com/) application using a simple Flux implementation.\n\n## Prerequisites\n\n- ES6\n - [ES6 Overview in 350 Bullet Points](https://ponyfoo.com/articles/es6)\n - [Additional Resources](https://github.com/ericdouglas/ES6-Learning)\n- React\n - [Getting Started](https://facebook.github.io/react/docs/getting-started.html)\n- Exposure to the high-level concepts of Flux, this tutorial will be an application of those concepts\n - [Flux Concepts](../flux-concepts)\n - [Flux Utils](../../docs/Flux-Utils.md)\n\n## 1. Getting started\n\nClone and build the flux repo:\n\n```bash\ngit clone https://github.com/facebook/flux.git\ncd flux\nnpm install\n```\n\nCopy and build [flux-shell](../flux-shell):\n\n```bash\ncp -R examples/flux-shell examples/my-todomvc\ncd examples/my-todomvc\nnpm install\nnpm run watch\n```\n\nOpen `examples/my-todomvc/index.html` in your browser.\n\n- [ ] **You should see a blank page that says \"Hello World!\"**\n\n## 2. Set up TodoMVC assets\n\nCopy assets from `examples/todomvc-common`\n\n```bash\ncp -R ../todomvc-common todomvc-common\n```\n\nUpdate `examples/my-todomvc/index.html` to include the assets:\n\n```html\n\n\n \n \n Flux • TodoMVC\n \n \n \n
\n
\n

Double-click to edit a todo

\n

Part of TodoMVC

\n
\n \n \n\n```\n\nUpdate `examples/my-todomvc/src/root.js` to render into correct element:\n\n```js\n...\n\nReactDOM.render(
Hello World!
, document.getElementById('todoapp'));\n```\n\nRefresh `examples/my-todomvc/index.html` in your browser.\n\n- [ ] **The page should now have some styling and still say \"Hello World!\" in the center.**\n - _If it doesn't, make sure `npm run watch` is still running_\n\n## 3. Setting up Flux\n\nSet up folder structure:\n\n```\nsrc\n├── containers\n│   └── AppContainer.js\n├── data\n│   ├── TodoActions.js\n│   ├── TodoActionTypes.js\n│   ├── TodoDispatcher.js\n│   └── TodoStore.js\n├── root.js\n└── views\n └── AppView.js\n```\n\nSet up `data/TodoDispatcher.js`. Here we just need to import dispatcher from Flux and instantiate a new dispatcher to use throughout the application.\n\n```js\nimport {Dispatcher} from 'flux';\n\nexport default new Dispatcher();\n```\n\nCreate the actions and action types. Let's set up the files that will eventually contain all of the actions in the application.\n\nSet up `data/TodoActionTypes.js`. This is a simple enum to list the kinds of actions we will be creating.\n\n```js\nconst ActionTypes = {\n ADD_TODO: 'ADD_TODO',\n};\n\nexport default ActionTypes;\n```\n\nSet up `data/TodoActions.js`. Each function here dispatches an action.\n\n```js\nimport TodoActionTypes from './TodoActionTypes';\nimport TodoDispatcher from './TodoDispatcher';\n\nconst Actions = {\n addTodo(text) {\n TodoDispatcher.dispatch({\n type: TodoActionTypes.ADD_TODO,\n text,\n });\n },\n};\n\nexport default Actions;\n```\n\nNow we can set up our first store! Open `data/TodoStore.js`. This will save information about all of the Todo objects in our application. It will use an Immutable map as the state.\n\n```js\nimport Immutable from 'immutable';\nimport {ReduceStore} from 'flux/utils';\nimport TodoActionTypes from './TodoActionTypes';\nimport TodoDispatcher from './TodoDispatcher';\n\nclass TodoStore extends ReduceStore {\n constructor() {\n super(TodoDispatcher);\n }\n\n getInitialState() {\n return Immutable.OrderedMap();\n }\n\n reduce(state, action) {\n switch (action.type) {\n case TodoActionTypes.ADD_TODO:\n // Do nothing for now, we will add logic here soon!\n return state;\n\n default:\n return state;\n }\n }\n}\n\nexport default new TodoStore();\n```\n\nLet's set up a really simple view using React. Open `views/AppView.js`.\n\n```js\nimport React from 'react';\n\nfunction AppView() {\n return
Hello from Flux!
;\n}\n\nexport default AppView;\n```\n\nContainers are what connects the state from stores to views, let's set up `containers/AppContainer.js` now.\n\n```js\nimport AppView from '../views/AppView';\nimport {Container} from 'flux/utils';\nimport TodoStore from '../data/TodoStore';\n\nfunction getStores() {\n return [TodoStore];\n}\n\nfunction getState() {\n return {\n todos: TodoStore.getState(),\n };\n}\n\nexport default Container.createFunctional(AppView, getStores, getState);\n```\n\nFinally, let's update the root of our application to render this new `AppContainer`. Open `root.js`:\n\n```js\nimport AppContainer from './containers/AppContainer';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(, document.getElementById('todoapp'));\n```\n\n- [ ] **Reload the page, it should look basically the same as the last step but say \"Hello from Flux!\"**\n\n## 4. Rendering some Todos\n\nWe will use Immutable.js to hold onto data about each Todo. This will give us a nice API to update their information without needing to worry about accidentally mutating the Todo. Create `data/Todo.js`.\n\n```js\nimport Immutable from 'immutable';\n\nconst Todo = Immutable.Record({\n id: '',\n complete: false,\n text: '',\n});\n\nexport default Todo;\n```\n\nNow we can use this structure, along with a simple [`Counter`](./src/data/Counter.js) to implement the `ADD_TODO` action. Create or copy [`Counter`](./src/data/Counter.js) then update `data/TodoStore.js`\n\n```js\n...\nimport Counter from './Counter';\nimport Todo from './Todo';\n\nclass TodoStore extends ReduceStore {\n ...\n reduce(state, action) {\n switch (action.type) {\n case TodoActionTypes.ADD_TODO:\n // Don't add todos with no text.\n if (!action.text) {\n return state;\n }\n const id = Counter.increment();\n return state.set(id, new Todo({\n id,\n text: action.text,\n complete: false,\n }));\n\n default:\n return state;\n }\n }\n}\n\n...\n```\n\nLet's update our view to actually render the Todos that are being stored. Update `views/AppView.js`.\n\n```js\nimport React from 'react';\n\nfunction AppView(props) {\n return (\n
\n
\n
\n
\n
\n );\n}\n\nfunction Header(props) {\n return (\n
\n

todos

\n
\n );\n}\n\nfunction Main(props) {\n if (props.todos.size === 0) {\n return null;\n }\n return (\n
\n
    \n {[...props.todos.values()].reverse().map((todo) => (\n
  • \n
    \n {}\n }\n />\n \n {}\n }\n />\n
    \n
    • \n ))}\n
\n
\n );\n}\n\nfunction Footer(props) {\n if (props.todos.size === 0) {\n return null;\n }\n return (\n
\n \n {props.todos.size}\n {' items left'}\n \n
\n );\n}\n\nexport default AppView;\n```\n\nTo make sure it all works we have to create some fake data for now. Modify `root.js` to create some fake Todos after the initial render.\n\n```js\nimport AppContainer from './containers/AppContainer';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(, document.getElementById('todoapp'));\n\n// We will remove these lines later:\n\nimport TodoActions from './data/TodoActions';\n\nTodoActions.addTodo('My first task');\nTodoActions.addTodo('Another task');\nTodoActions.addTodo('Finish this tutorial');\n```\n\n- [ ] **Refresh the page and you should see some data that is coming from your `TodoStore`!**\n - _Keep in mind that it's not interactive yet, so no buttons will work_\n\n## 5. Adding some interactivity\n\nLet's add a few more actions so that the buttons do something.\n\nUpdate `data/TodoActionTypes.js`\n\n```js\nconst ActionTypes = {\n ADD_TODO: 'ADD_TODO',\n DELETE_TODO: 'DELETE_TODO',\n TOGGLE_TODO: 'TOGGLE_TODO',\n};\n\nexport default ActionTypes;\n```\n\nUpdate `data/TodoActions.js`\n\n```js\n...\n\nconst Actions = {\n addTodo(text) {\n TodoDispatcher.dispatch({\n type: TodoActionTypes.ADD_TODO,\n text,\n });\n },\n\n deleteTodo(id) {\n TodoDispatcher.dispatch({\n type: TodoActionTypes.DELETE_TODO,\n id,\n });\n },\n\n toggleTodo(id) {\n TodoDispatcher.dispatch({\n type: TodoActionTypes.TOGGLE_TODO,\n id,\n });\n },\n};\n\nexport default Actions;\n```\n\nUpdate `data/TodoStore.js`\n\n```js\n...\nclass TodoStore extends ReduceStore {\n ...\n reduce(state, action) {\n switch (action.type) {\n ...\n case TodoActionTypes.DELETE_TODO:\n return state.delete(action.id);\n\n case TodoActionTypes.TOGGLE_TODO:\n return state.update(\n action.id,\n todo => todo.set('complete', !todo.complete),\n );\n ...\n }\n }\n}\n\nexport default new TodoStore();\n```\n\nNow our store is capable of deleting or toggling a Todo. Let's hook it up to our view now. In a Flux app the **only** place that should have knowledge of Flux is the container, this means we have to define the callbacks in `AppContainer` and pass them down to `AppView`, the view does not dispatch the actions directly. This makes it easier to reuse, test, and change views.\n\nUpdate `containers/AppContainer.js`\n\n```js\n...\nimport TodoActions from '../data/TodoActions';\n\n...\nfunction getState() {\n return {\n todos: TodoStore.getState(),\n\n onDeleteTodo: TodoActions.deleteTodo,\n onToggleTodo: TodoActions.toggleTodo,\n };\n}\n\n...\n```\n\nNow we need to use the callbacks and update a small amount of rendering logic that displays the number of completed todos. Update `views/AppView.js`\n\n```js\n...\n\nfunction Main(props) {\n if (props.todos.size === 0) {\n return null;\n }\n return (\n
\n
    \n {[...props.todos.values()].reverse().map(todo => (\n
  • \n
    \n props.onToggleTodo(todo.id)}\n />\n \n props.onDeleteTodo(todo.id)}\n />\n
    \n
    • \n ))}\n
\n
\n );\n}\n\nfunction Footer(props) {\n if (props.todos.size === 0) {\n return null;\n }\n\n const remaining = props.todos.filter(todo => !todo.complete).size;\n const phrase = remaining === 1 ? ' item left' : ' items left';\n\n return (\n
\n \n \n {remaining}\n \n {phrase}\n \n
\n );\n}\n\nexport default AppView;\n```\n\n- [ ] **Refresh the page and you should be able to toggle todos and delete them. Toggling todos should also update the counter of todos remaining in the footer.**\n\n## 6. Remaining functionality\n\nNow you should be familiar enough with the structure of the todo app to implement the remaining pieces on your own. This last step outlines a good ordering for completing them. Make sure to reference the full example implementation as needed.\n\n1. Create the NewTodo view\n\n- Create the `TodoDraftStore` which tracks the contents of the NewTodo input, it will respond to two actions:\n - `UPDATE_DRAFT` which changes the draft contents\n - `ADD_TODO` which clears the draft contents (because the todo was added and is no longer a draft)\n - _Note: It would also be reasonable to keep track of this in React state, but in this tutorial we will make an effort to have all components be controlled so you get more experience dealing with stores._\n- Create the `updateDraft` action and pass through container\n- Hook everything up to the view\n\n2. Add clear completed button to the Footer\n\n- Create `deleteCompletedTodos` action\n- Add button to fire action to the footer\n\n3. Add Mark all as complete button\n\n- Create `toggleAllTodos` action\n - If any todos are incomplete, this marks them all as complete\n - If all todos are complete, this marks them all as incomplete\n- Hook it up to Main view\n\n4. Add ability to edit todos on double click\n\n- Create the `TodoEditStore` which tracks the ID of the Todo currently being edited\n- Create `startEditingTodo` and `stopEditingTodo` actions\n- Create `editTodo` action\n- Create TodoItem view component with editing functionality\n" }, { "path": "examples/flux-todomvc/index.html", "content": "\n\n \n \n Flux • TodoMVC\n \n \n \n
\n
\n

Double-click to edit a todo

\n

Part of TodoMVC

\n
\n \n \n\n" }, { "path": "examples/flux-todomvc/package.json", "content": "{\n \"name\": \"flux-todomvc\",\n \"version\": \"1.0.0\",\n \"description\": \"Basic shell application for the Flux architecture\",\n \"repository\": \"https://github.com/facebook/flux\",\n \"author\": \"Kyle Davis\",\n \"main\": \"bundle.js\",\n \"scripts\": {\n \"build\": \"webpack ./src/root.js ./bundle.js\",\n \"watch\": \"webpack ./src/root.js ./bundle.js --watch\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"dependencies\": {\n \"classnames\": \"^2.2.3\",\n \"flux\": \"../../.\",\n \"immutable\": \"^3.8.0\",\n \"react\": \"^15.0.2\",\n \"react-dom\": \"^15.0.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.7.6\",\n \"babel-loader\": \"^6.2.4\",\n \"babel-plugin-syntax-async-functions\": \"^6.5.0\",\n \"babel-plugin-syntax-flow\": \"^6.5.0\",\n \"babel-plugin-syntax-jsx\": \"^6.5.0\",\n \"babel-plugin-syntax-object-rest-spread\": \"^6.5.0\",\n \"babel-plugin-syntax-trailing-function-commas\": \"^6.5.0\",\n \"babel-plugin-transform-flow-strip-types\": \"^6.5.0\",\n \"babel-plugin-transform-object-rest-spread\": \"^6.6.5\",\n \"babel-plugin-transform-react-jsx\": \"^6.7.5\",\n \"babel-plugin-transform-regenerator\": \"^6.5.2\",\n \"babel-plugin-transform-runtime\": \"^6.5.2\",\n \"babel-preset-es2015\": \"^6.5.0\",\n \"webpack\": \"^1.13.0\"\n }\n}\n" }, { "path": "examples/flux-todomvc/src/containers/AppContainer.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport AppView from '../views/AppView';\nimport {Container} from 'flux/utils';\nimport TodoActions from '../data/TodoActions';\nimport TodoDraftStore from '../data/TodoDraftStore';\nimport TodoEditStore from '../data/TodoEditStore';\nimport TodoStore from '../data/TodoStore';\n\nfunction getStores() {\n return [TodoEditStore, TodoDraftStore, TodoStore];\n}\n\nfunction getState() {\n return {\n draft: TodoDraftStore.getState(),\n editing: TodoEditStore.getState(),\n todos: TodoStore.getState(),\n\n onAdd: TodoActions.addTodo,\n onDeleteCompletedTodos: TodoActions.deleteCompletedTodos,\n onDeleteTodo: TodoActions.deleteTodo,\n onEditTodo: TodoActions.editTodo,\n onStartEditingTodo: TodoActions.startEditingTodo,\n onStopEditingTodo: TodoActions.stopEditingTodo,\n onToggleAllTodos: TodoActions.toggleAllTodos,\n onToggleTodo: TodoActions.toggleTodo,\n onUpdateDraft: TodoActions.updateDraft,\n };\n}\n\nexport default Container.createFunctional(AppView, getStores, getState);\n" }, { "path": "examples/flux-todomvc/src/data/Counter.js", "content": "/*\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nlet _counter = 1;\n\n/**\n * This is a simple counter for providing unique ids.\n */\nconst Counter = {\n increment() {\n return 'id-' + String(_counter++);\n },\n};\n\nexport default Counter;\n" }, { "path": "examples/flux-todomvc/src/data/Todo.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport Immutable from 'immutable';\n\nconst Todo = Immutable.Record({\n id: '',\n complete: false,\n text: '',\n});\n\nexport default Todo;\n" }, { "path": "examples/flux-todomvc/src/data/TodoActionTypes.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nconst ActionTypes = {\n ADD_TODO: 'ADD_TODO',\n DELETE_COMPLETED_TODOS: 'DELETE_COMPLETED_TODOS',\n DELETE_TODO: 'DELETE_TODO',\n EDIT_TODO: 'EDIT_TODO',\n START_EDITING_TODO: 'START_EDITING_TODO',\n STOP_EDITING_TODO: 'STOP_EDITING_TODO',\n TOGGLE_ALL_TODOS: 'TOGGLE_ALL_TODOS',\n TOGGLE_TODO: 'TOGGLE_TODO',\n UPDATE_DRAFT: 'UPDATE_DRAFT',\n};\n\nexport default ActionTypes;\n" }, { "path": "examples/flux-todomvc/src/data/TodoActions.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport TodoActionTypes from './TodoActionTypes';\nimport TodoDispatcher from './TodoDispatcher';\n\nconst Actions = {\n addTodo(text) {\n TodoDispatcher.dispatch({\n type: TodoActionTypes.ADD_TODO,\n text,\n });\n },\n\n deleteCompletedTodos() {\n TodoDispatcher.dispatch({\n type: TodoActionTypes.DELETE_COMPLETED_TODOS,\n });\n },\n\n deleteTodo(id) {\n TodoDispatcher.dispatch({\n type: TodoActionTypes.DELETE_TODO,\n id,\n });\n },\n\n editTodo(id, text) {\n TodoDispatcher.dispatch({\n type: TodoActionTypes.EDIT_TODO,\n id,\n text,\n });\n },\n\n startEditingTodo(id) {\n TodoDispatcher.dispatch({\n type: TodoActionTypes.START_EDITING_TODO,\n id,\n });\n },\n\n stopEditingTodo() {\n TodoDispatcher.dispatch({\n type: TodoActionTypes.STOP_EDITING_TODO,\n });\n },\n\n toggleAllTodos() {\n TodoDispatcher.dispatch({\n type: TodoActionTypes.TOGGLE_ALL_TODOS,\n });\n },\n\n toggleTodo(id) {\n TodoDispatcher.dispatch({\n type: TodoActionTypes.TOGGLE_TODO,\n id,\n });\n },\n\n updateDraft(text) {\n TodoDispatcher.dispatch({\n type: TodoActionTypes.UPDATE_DRAFT,\n text,\n });\n },\n};\n\nexport default Actions;\n" }, { "path": "examples/flux-todomvc/src/data/TodoDispatcher.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * Blah blah\n */\n\n'use strict';\n\nimport {Dispatcher} from 'flux';\n\nexport default new Dispatcher();\n" }, { "path": "examples/flux-todomvc/src/data/TodoDraftStore.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport {ReduceStore} from 'flux/utils';\nimport TodoActionTypes from './TodoActionTypes';\nimport TodoDispatcher from './TodoDispatcher';\n\nclass TodoDraftStore extends ReduceStore {\n constructor() {\n super(TodoDispatcher);\n }\n\n getInitialState() {\n return '';\n }\n\n reduce(state, action) {\n switch (action.type) {\n case TodoActionTypes.ADD_TODO:\n return '';\n\n case TodoActionTypes.UPDATE_DRAFT:\n return action.text;\n\n default:\n return state;\n }\n }\n}\n\nexport default new TodoDraftStore();\n" }, { "path": "examples/flux-todomvc/src/data/TodoEditStore.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport {ReduceStore} from 'flux/utils';\nimport TodoActionTypes from './TodoActionTypes';\nimport TodoDispatcher from './TodoDispatcher';\n\nclass TodoEditStore extends ReduceStore {\n constructor() {\n super(TodoDispatcher);\n }\n\n getInitialState() {\n return '';\n }\n\n reduce(state, action) {\n switch (action.type) {\n case TodoActionTypes.START_EDITING_TODO:\n return action.id;\n\n case TodoActionTypes.STOP_EDITING_TODO:\n return '';\n\n default:\n return state;\n }\n }\n}\n\nexport default new TodoEditStore();\n" }, { "path": "examples/flux-todomvc/src/data/TodoStore.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport Counter from './Counter';\nimport Immutable from 'immutable';\nimport {ReduceStore} from 'flux/utils';\nimport Todo from './Todo';\nimport TodoActionTypes from './TodoActionTypes';\nimport TodoDispatcher from './TodoDispatcher';\n\nclass TodoStore extends ReduceStore {\n constructor() {\n super(TodoDispatcher);\n }\n\n getInitialState() {\n return Immutable.OrderedMap();\n }\n\n reduce(state, action) {\n switch (action.type) {\n case TodoActionTypes.ADD_TODO:\n // Don't add todos with no text.\n if (!action.text) {\n return state;\n }\n const id = Counter.increment();\n return state.set(\n id,\n new Todo({\n id,\n text: action.text,\n complete: false,\n }),\n );\n\n case TodoActionTypes.DELETE_COMPLETED_TODOS:\n return state.filter((todo) => !todo.complete);\n\n case TodoActionTypes.DELETE_TODO:\n return state.delete(action.id);\n\n case TodoActionTypes.EDIT_TODO:\n return state.setIn([action.id, 'text'], action.text);\n\n case TodoActionTypes.TOGGLE_ALL_TODOS:\n const areAllComplete = state.every((todo) => todo.complete);\n return state.map((todo) => todo.set('complete', !areAllComplete));\n\n case TodoActionTypes.TOGGLE_TODO:\n return state.update(action.id, (todo) =>\n todo.set('complete', !todo.complete),\n );\n\n default:\n return state;\n }\n }\n}\n\nexport default new TodoStore();\n" }, { "path": "examples/flux-todomvc/src/root.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport AppContainer from './containers/AppContainer';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(, document.getElementById('todoapp'));\n" }, { "path": "examples/flux-todomvc/src/views/AppView.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nimport React from 'react';\n\nimport classnames from 'classnames';\n\nfunction AppView(props) {\n return (\n
\n
\n
\n
\n
\n );\n}\n\nfunction Header(props) {\n return (\n
\n

todos

\n \n
\n );\n}\n\nfunction Main(props) {\n if (props.todos.size === 0) {\n return null;\n }\n\n // If this were expensive we could move it to the container.\n const areAllComplete = props.todos.every((todo) => todo.complete);\n\n return (\n
\n \n \n
    \n {[...props.todos.values()].reverse().map((todo) => (\n \n ))}\n
\n
\n );\n}\n\nfunction Footer(props) {\n if (props.todos.size === 0) {\n return null;\n }\n\n const remaining = props.todos.filter((todo) => !todo.complete).size;\n const completed = props.todos.size - remaining;\n const phrase = remaining === 1 ? ' item left' : ' items left';\n\n let clearCompletedButton = null;\n if (completed > 0) {\n clearCompletedButton = (\n \n );\n }\n\n return (\n
\n \n {remaining}\n {phrase}\n \n {clearCompletedButton}\n
\n );\n}\n\nconst ENTER_KEY_CODE = 13;\nfunction NewTodo(props) {\n const addTodo = () => props.onAdd(props.draft);\n const onBlur = () => addTodo();\n const onChange = (event) => props.onUpdateDraft(event.target.value);\n const onKeyDown = (event) => {\n if (event.keyCode === ENTER_KEY_CODE) {\n addTodo();\n }\n };\n return (\n \n );\n}\n\nfunction TodoItem(props) {\n const {editing, todo} = props;\n const isEditing = editing === todo.id;\n const onDeleteTodo = () => props.onDeleteTodo(todo.id);\n const onStartEditingTodo = () => props.onStartEditingTodo(todo.id);\n const onToggleTodo = () => props.onToggleTodo(todo.id);\n\n // Construct the input for editing a task if necessary.\n let input = null;\n if (isEditing) {\n const onChange = (event) => props.onEditTodo(todo.id, event.target.value);\n const onStopEditingTodo = props.onStopEditingTodo;\n const onKeyDown = (event) => {\n if (event.keyCode === ENTER_KEY_CODE) {\n onStopEditingTodo();\n }\n };\n input = (\n \n );\n }\n\n return (\n \n
\n \n \n
\n {input}\n \n );\n}\n\nexport default AppView;\n" }, { "path": "examples/flux-todomvc/todomvc-common/.bower.json", "content": "{\n \"name\": \"todomvc-common\",\n \"version\": \"0.1.9\",\n \"homepage\": \"https://github.com/tastejs/todomvc-common\",\n \"_release\": \"0.1.9\",\n \"_resolution\": {\n \"type\": \"version\",\n \"tag\": \"v0.1.9\",\n \"commit\": \"7dd61b0ebf56c020e719a69444442cc7ae7242ff\"\n },\n \"_source\": \"git://github.com/tastejs/todomvc-common.git\",\n \"_target\": \"~0.1.4\",\n \"_originalSource\": \"todomvc-common\"\n}\n" }, { "path": "examples/flux-todomvc/todomvc-common/base.css", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n}\n\nbutton {\n margin: 0;\n padding: 0;\n border: 0;\n background: none;\n font-size: 100%;\n vertical-align: baseline;\n font-family: inherit;\n color: inherit;\n -webkit-appearance: none;\n -ms-appearance: none;\n -o-appearance: none;\n appearance: none;\n}\n\nbody {\n font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n line-height: 1.4em;\n background: #eaeaea url('bg.png');\n color: #4d4d4d;\n width: 550px;\n margin: 0 auto;\n -webkit-font-smoothing: antialiased;\n -moz-font-smoothing: antialiased;\n -ms-font-smoothing: antialiased;\n -o-font-smoothing: antialiased;\n font-smoothing: antialiased;\n}\n\nbutton,\ninput[type='checkbox'] {\n outline: none;\n}\n\n#todoapp {\n background: #fff;\n background: rgba(255, 255, 255, 0.9);\n margin: 130px 0 40px 0;\n border: 1px solid #ccc;\n position: relative;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.15);\n}\n\n#todoapp:before {\n content: '';\n border-left: 1px solid #f5d6d6;\n border-right: 1px solid #f5d6d6;\n width: 2px;\n position: absolute;\n top: 0;\n left: 40px;\n height: 100%;\n}\n\n#todoapp input::-webkit-input-placeholder {\n font-style: italic;\n}\n\n#todoapp input::-moz-placeholder {\n font-style: italic;\n color: #a9a9a9;\n}\n\n#todoapp h1 {\n position: absolute;\n top: -120px;\n width: 100%;\n font-size: 70px;\n font-weight: bold;\n text-align: center;\n color: #b3b3b3;\n color: rgba(255, 255, 255, 0.3);\n text-shadow: -1px -1px rgba(0, 0, 0, 0.2);\n -webkit-text-rendering: optimizeLegibility;\n -moz-text-rendering: optimizeLegibility;\n -ms-text-rendering: optimizeLegibility;\n -o-text-rendering: optimizeLegibility;\n text-rendering: optimizeLegibility;\n}\n\n#header {\n padding-top: 15px;\n border-radius: inherit;\n}\n\n#header:before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n height: 15px;\n z-index: 2;\n border-bottom: 1px solid #6c615c;\n background: #8d7d77;\n background: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(rgba(132, 110, 100, 0.8)),\n to(rgba(101, 84, 76, 0.8))\n );\n background: -webkit-linear-gradient(\n top,\n rgba(132, 110, 100, 0.8),\n rgba(101, 84, 76, 0.8)\n );\n background: linear-gradient(\n top,\n rgba(132, 110, 100, 0.8),\n rgba(101, 84, 76, 0.8)\n );\n filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');\n border-top-left-radius: 1px;\n border-top-right-radius: 1px;\n}\n\n#new-todo,\n.edit {\n position: relative;\n margin: 0;\n width: 100%;\n font-size: 24px;\n font-family: inherit;\n line-height: 1.4em;\n border: 0;\n outline: none;\n color: inherit;\n padding: 6px;\n border: 1px solid #999;\n box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-sizing: border-box;\n -ms-box-sizing: border-box;\n -o-box-sizing: border-box;\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n -moz-font-smoothing: antialiased;\n -ms-font-smoothing: antialiased;\n -o-font-smoothing: antialiased;\n font-smoothing: antialiased;\n}\n\n#new-todo {\n padding: 16px 16px 16px 60px;\n border: none;\n background: rgba(0, 0, 0, 0.02);\n z-index: 2;\n box-shadow: none;\n}\n\n#main {\n position: relative;\n z-index: 2;\n border-top: 1px dotted #adadad;\n}\n\nlabel[for='toggle-all'] {\n display: none;\n}\n\n#toggle-all {\n position: absolute;\n top: -42px;\n left: -4px;\n width: 40px;\n text-align: center;\n /* Mobile Safari */\n border: none;\n}\n\n#toggle-all:before {\n content: '»';\n font-size: 28px;\n color: #d9d9d9;\n padding: 0 25px 7px;\n}\n\n#toggle-all:checked:before {\n color: #737373;\n}\n\n#todo-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n#todo-list li {\n position: relative;\n font-size: 24px;\n border-bottom: 1px dotted #ccc;\n}\n\n#todo-list li:last-child {\n border-bottom: none;\n}\n\n#todo-list li.editing {\n border-bottom: none;\n padding: 0;\n}\n\n#todo-list li.editing .edit {\n display: block;\n width: 506px;\n padding: 13px 17px 12px 17px;\n margin: 0 0 0 43px;\n}\n\n#todo-list li.editing .view {\n display: none;\n}\n\n#todo-list li .toggle {\n text-align: center;\n width: 40px;\n /* auto, since non-WebKit browsers doesn't support input styling */\n height: auto;\n position: absolute;\n top: 0;\n bottom: 0;\n margin: auto 0;\n /* Mobile Safari */\n border: none;\n -webkit-appearance: none;\n -ms-appearance: none;\n -o-appearance: none;\n appearance: none;\n}\n\n#todo-list li .toggle:after {\n content: '✔';\n /* 40 + a couple of pixels visual adjustment */\n line-height: 43px;\n font-size: 20px;\n color: #d9d9d9;\n text-shadow: 0 -1px 0 #bfbfbf;\n}\n\n#todo-list li .toggle:checked:after {\n color: #85ada7;\n text-shadow: 0 1px 0 #669991;\n bottom: 1px;\n position: relative;\n}\n\n#todo-list li label {\n white-space: pre;\n word-break: break-word;\n padding: 15px 60px 15px 15px;\n margin-left: 45px;\n display: block;\n line-height: 1.2;\n -webkit-transition: color 0.4s;\n transition: color 0.4s;\n}\n\n#todo-list li.completed label {\n color: #a9a9a9;\n text-decoration: line-through;\n}\n\n#todo-list li .destroy {\n display: none;\n position: absolute;\n top: 0;\n right: 10px;\n bottom: 0;\n width: 40px;\n height: 40px;\n margin: auto 0;\n font-size: 22px;\n color: #a88a8a;\n -webkit-transition: all 0.2s;\n transition: all 0.2s;\n}\n\n#todo-list li .destroy:hover {\n text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8);\n -webkit-transform: scale(1.3);\n -ms-transform: scale(1.3);\n transform: scale(1.3);\n}\n\n#todo-list li .destroy:after {\n content: '✖';\n}\n\n#todo-list li:hover .destroy {\n display: block;\n}\n\n#todo-list li .edit {\n display: none;\n}\n\n#todo-list li.editing:last-child {\n margin-bottom: -1px;\n}\n\n#footer {\n color: #777;\n padding: 0 15px;\n position: absolute;\n right: 0;\n bottom: -31px;\n left: 0;\n height: 20px;\n z-index: 1;\n text-align: center;\n}\n\n#footer:before {\n content: '';\n position: absolute;\n right: 0;\n bottom: 31px;\n left: 0;\n height: 50px;\n z-index: -1;\n box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),\n 0 6px 0 -3px rgba(255, 255, 255, 0.8), 0 7px 1px -3px rgba(0, 0, 0, 0.3),\n 0 43px 0 -6px rgba(255, 255, 255, 0.8), 0 44px 2px -6px rgba(0, 0, 0, 0.2);\n}\n\n#todo-count {\n float: left;\n text-align: left;\n}\n\n#filters {\n margin: 0;\n padding: 0;\n list-style: none;\n position: absolute;\n right: 0;\n left: 0;\n}\n\n#filters li {\n display: inline;\n}\n\n#filters li a {\n color: #83756f;\n margin: 2px;\n text-decoration: none;\n}\n\n#filters li a.selected {\n font-weight: bold;\n}\n\n#clear-completed {\n float: right;\n position: relative;\n line-height: 20px;\n text-decoration: none;\n background: rgba(0, 0, 0, 0.1);\n font-size: 11px;\n padding: 0 10px;\n border-radius: 3px;\n box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);\n}\n\n#clear-completed:hover {\n background: rgba(0, 0, 0, 0.15);\n box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);\n}\n\n#info {\n margin: 65px auto 0;\n color: #a6a6a6;\n font-size: 12px;\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);\n text-align: center;\n}\n\n#info a {\n color: inherit;\n}\n\n/*\n\tHack to remove background from Mobile Safari.\n\tCan't use it globally since it destroys checkboxes in Firefox and Opera\n*/\n\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n #toggle-all,\n #todo-list li .toggle {\n background: none;\n }\n\n #todo-list li .toggle {\n height: 40px;\n }\n\n #toggle-all {\n top: -56px;\n left: -15px;\n width: 65px;\n height: 41px;\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n -webkit-appearance: none;\n appearance: none;\n }\n}\n\n.hidden {\n display: none;\n}\n\nhr {\n margin: 20px 0;\n border: 0;\n border-top: 1px dashed #c5c5c5;\n border-bottom: 1px dashed #f7f7f7;\n}\n\n.learn a {\n font-weight: normal;\n text-decoration: none;\n color: #b83f45;\n}\n\n.learn a:hover {\n text-decoration: underline;\n color: #787e7e;\n}\n\n.learn h3,\n.learn h4,\n.learn h5 {\n margin: 10px 0;\n font-weight: 500;\n line-height: 1.2;\n color: #000;\n}\n\n.learn h3 {\n font-size: 24px;\n}\n\n.learn h4 {\n font-size: 18px;\n}\n\n.learn h5 {\n margin-bottom: 0;\n font-size: 14px;\n}\n\n.learn ul {\n padding: 0;\n margin: 0 0 30px 25px;\n}\n\n.learn li {\n line-height: 20px;\n}\n\n.learn p {\n font-size: 15px;\n font-weight: 300;\n line-height: 1.3;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.quote {\n border: none;\n margin: 20px 0 60px 0;\n}\n\n.quote p {\n font-style: italic;\n}\n\n.quote p:before {\n content: '“';\n font-size: 50px;\n opacity: 0.15;\n position: absolute;\n top: -20px;\n left: 3px;\n}\n\n.quote p:after {\n content: '”';\n font-size: 50px;\n opacity: 0.15;\n position: absolute;\n bottom: -42px;\n right: 3px;\n}\n\n.quote footer {\n position: absolute;\n bottom: -40px;\n right: 0;\n}\n\n.quote footer img {\n border-radius: 3px;\n}\n\n.quote footer a {\n margin-left: 5px;\n vertical-align: middle;\n}\n\n.speech-bubble {\n position: relative;\n padding: 10px;\n background: rgba(0, 0, 0, 0.04);\n border-radius: 5px;\n}\n\n.speech-bubble:after {\n content: '';\n position: absolute;\n top: 100%;\n right: 30px;\n border: 13px solid transparent;\n border-top-color: rgba(0, 0, 0, 0.04);\n}\n\n.learn-bar > .learn {\n position: absolute;\n width: 272px;\n top: 8px;\n left: -300px;\n padding: 10px;\n border-radius: 5px;\n background-color: rgba(255, 255, 255, 0.6);\n -webkit-transition-property: left;\n transition-property: left;\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n}\n\n@media (min-width: 899px) {\n .learn-bar {\n width: auto;\n margin: 0 0 0 300px;\n }\n\n .learn-bar > .learn {\n left: 8px;\n }\n\n .learn-bar #todoapp {\n width: 550px;\n margin: 130px auto 40px auto;\n }\n}\n" }, { "path": "examples/flux-todomvc/todomvc-common/bower.json", "content": "{\n \"name\": \"todomvc-common\",\n \"version\": \"0.1.9\"\n}\n" }, { "path": "examples/flux-todomvc/todomvc-common/readme.md", "content": "# todomvc-common\n\n> Bower component for some common utilities we use in every app\n\n## License\n\nMIT\n" }, { "path": "examples/flux-todomvc/webpack.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nmodule.exports = {\n module: {\n loaders: [{test: /\\.js$/, exclude: /node_modules/, loader: 'babel-loader'}],\n },\n};\n" }, { "path": "examples/todomvc-common/.bower.json", "content": "{\n \"name\": \"todomvc-common\",\n \"version\": \"0.1.9\",\n \"homepage\": \"https://github.com/tastejs/todomvc-common\",\n \"_release\": \"0.1.9\",\n \"_resolution\": {\n \"type\": \"version\",\n \"tag\": \"v0.1.9\",\n \"commit\": \"7dd61b0ebf56c020e719a69444442cc7ae7242ff\"\n },\n \"_source\": \"git://github.com/tastejs/todomvc-common.git\",\n \"_target\": \"~0.1.4\",\n \"_originalSource\": \"todomvc-common\"\n}\n" }, { "path": "examples/todomvc-common/base.css", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n}\n\nbutton {\n margin: 0;\n padding: 0;\n border: 0;\n background: none;\n font-size: 100%;\n vertical-align: baseline;\n font-family: inherit;\n color: inherit;\n -webkit-appearance: none;\n -ms-appearance: none;\n -o-appearance: none;\n appearance: none;\n}\n\nbody {\n font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n line-height: 1.4em;\n background: #eaeaea url('bg.png');\n color: #4d4d4d;\n width: 550px;\n margin: 0 auto;\n -webkit-font-smoothing: antialiased;\n -moz-font-smoothing: antialiased;\n -ms-font-smoothing: antialiased;\n -o-font-smoothing: antialiased;\n font-smoothing: antialiased;\n}\n\nbutton,\ninput[type='checkbox'] {\n outline: none;\n}\n\n#todoapp {\n background: #fff;\n background: rgba(255, 255, 255, 0.9);\n margin: 130px 0 40px 0;\n border: 1px solid #ccc;\n position: relative;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.15);\n}\n\n#todoapp:before {\n content: '';\n border-left: 1px solid #f5d6d6;\n border-right: 1px solid #f5d6d6;\n width: 2px;\n position: absolute;\n top: 0;\n left: 40px;\n height: 100%;\n}\n\n#todoapp input::-webkit-input-placeholder {\n font-style: italic;\n}\n\n#todoapp input::-moz-placeholder {\n font-style: italic;\n color: #a9a9a9;\n}\n\n#todoapp h1 {\n position: absolute;\n top: -120px;\n width: 100%;\n font-size: 70px;\n font-weight: bold;\n text-align: center;\n color: #b3b3b3;\n color: rgba(255, 255, 255, 0.3);\n text-shadow: -1px -1px rgba(0, 0, 0, 0.2);\n -webkit-text-rendering: optimizeLegibility;\n -moz-text-rendering: optimizeLegibility;\n -ms-text-rendering: optimizeLegibility;\n -o-text-rendering: optimizeLegibility;\n text-rendering: optimizeLegibility;\n}\n\n#header {\n padding-top: 15px;\n border-radius: inherit;\n}\n\n#header:before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n height: 15px;\n z-index: 2;\n border-bottom: 1px solid #6c615c;\n background: #8d7d77;\n background: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(rgba(132, 110, 100, 0.8)),\n to(rgba(101, 84, 76, 0.8))\n );\n background: -webkit-linear-gradient(\n top,\n rgba(132, 110, 100, 0.8),\n rgba(101, 84, 76, 0.8)\n );\n background: linear-gradient(\n top,\n rgba(132, 110, 100, 0.8),\n rgba(101, 84, 76, 0.8)\n );\n filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');\n border-top-left-radius: 1px;\n border-top-right-radius: 1px;\n}\n\n#new-todo,\n.edit {\n position: relative;\n margin: 0;\n width: 100%;\n font-size: 24px;\n font-family: inherit;\n line-height: 1.4em;\n border: 0;\n outline: none;\n color: inherit;\n padding: 6px;\n border: 1px solid #999;\n box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-sizing: border-box;\n -ms-box-sizing: border-box;\n -o-box-sizing: border-box;\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n -moz-font-smoothing: antialiased;\n -ms-font-smoothing: antialiased;\n -o-font-smoothing: antialiased;\n font-smoothing: antialiased;\n}\n\n#new-todo {\n padding: 16px 16px 16px 60px;\n border: none;\n background: rgba(0, 0, 0, 0.02);\n z-index: 2;\n box-shadow: none;\n}\n\n#main {\n position: relative;\n z-index: 2;\n border-top: 1px dotted #adadad;\n}\n\nlabel[for='toggle-all'] {\n display: none;\n}\n\n#toggle-all {\n position: absolute;\n top: -42px;\n left: -4px;\n width: 40px;\n text-align: center;\n /* Mobile Safari */\n border: none;\n}\n\n#toggle-all:before {\n content: '»';\n font-size: 28px;\n color: #d9d9d9;\n padding: 0 25px 7px;\n}\n\n#toggle-all:checked:before {\n color: #737373;\n}\n\n#todo-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n#todo-list li {\n position: relative;\n font-size: 24px;\n border-bottom: 1px dotted #ccc;\n}\n\n#todo-list li:last-child {\n border-bottom: none;\n}\n\n#todo-list li.editing {\n border-bottom: none;\n padding: 0;\n}\n\n#todo-list li.editing .edit {\n display: block;\n width: 506px;\n padding: 13px 17px 12px 17px;\n margin: 0 0 0 43px;\n}\n\n#todo-list li.editing .view {\n display: none;\n}\n\n#todo-list li .toggle {\n text-align: center;\n width: 40px;\n /* auto, since non-WebKit browsers doesn't support input styling */\n height: auto;\n position: absolute;\n top: 0;\n bottom: 0;\n margin: auto 0;\n /* Mobile Safari */\n border: none;\n -webkit-appearance: none;\n -ms-appearance: none;\n -o-appearance: none;\n appearance: none;\n}\n\n#todo-list li .toggle:after {\n content: '✔';\n /* 40 + a couple of pixels visual adjustment */\n line-height: 43px;\n font-size: 20px;\n color: #d9d9d9;\n text-shadow: 0 -1px 0 #bfbfbf;\n}\n\n#todo-list li .toggle:checked:after {\n color: #85ada7;\n text-shadow: 0 1px 0 #669991;\n bottom: 1px;\n position: relative;\n}\n\n#todo-list li label {\n white-space: pre;\n word-break: break-word;\n padding: 15px 60px 15px 15px;\n margin-left: 45px;\n display: block;\n line-height: 1.2;\n -webkit-transition: color 0.4s;\n transition: color 0.4s;\n}\n\n#todo-list li.completed label {\n color: #a9a9a9;\n text-decoration: line-through;\n}\n\n#todo-list li .destroy {\n display: none;\n position: absolute;\n top: 0;\n right: 10px;\n bottom: 0;\n width: 40px;\n height: 40px;\n margin: auto 0;\n font-size: 22px;\n color: #a88a8a;\n -webkit-transition: all 0.2s;\n transition: all 0.2s;\n}\n\n#todo-list li .destroy:hover {\n text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8);\n -webkit-transform: scale(1.3);\n -ms-transform: scale(1.3);\n transform: scale(1.3);\n}\n\n#todo-list li .destroy:after {\n content: '✖';\n}\n\n#todo-list li:hover .destroy {\n display: block;\n}\n\n#todo-list li .edit {\n display: none;\n}\n\n#todo-list li.editing:last-child {\n margin-bottom: -1px;\n}\n\n#footer {\n color: #777;\n padding: 0 15px;\n position: absolute;\n right: 0;\n bottom: -31px;\n left: 0;\n height: 20px;\n z-index: 1;\n text-align: center;\n}\n\n#footer:before {\n content: '';\n position: absolute;\n right: 0;\n bottom: 31px;\n left: 0;\n height: 50px;\n z-index: -1;\n box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),\n 0 6px 0 -3px rgba(255, 255, 255, 0.8), 0 7px 1px -3px rgba(0, 0, 0, 0.3),\n 0 43px 0 -6px rgba(255, 255, 255, 0.8), 0 44px 2px -6px rgba(0, 0, 0, 0.2);\n}\n\n#todo-count {\n float: left;\n text-align: left;\n}\n\n#filters {\n margin: 0;\n padding: 0;\n list-style: none;\n position: absolute;\n right: 0;\n left: 0;\n}\n\n#filters li {\n display: inline;\n}\n\n#filters li a {\n color: #83756f;\n margin: 2px;\n text-decoration: none;\n}\n\n#filters li a.selected {\n font-weight: bold;\n}\n\n#clear-completed {\n float: right;\n position: relative;\n line-height: 20px;\n text-decoration: none;\n background: rgba(0, 0, 0, 0.1);\n font-size: 11px;\n padding: 0 10px;\n border-radius: 3px;\n box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);\n}\n\n#clear-completed:hover {\n background: rgba(0, 0, 0, 0.15);\n box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);\n}\n\n#info {\n margin: 65px auto 0;\n color: #a6a6a6;\n font-size: 12px;\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);\n text-align: center;\n}\n\n#info a {\n color: inherit;\n}\n\n/*\n\tHack to remove background from Mobile Safari.\n\tCan't use it globally since it destroys checkboxes in Firefox and Opera\n*/\n\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n #toggle-all,\n #todo-list li .toggle {\n background: none;\n }\n\n #todo-list li .toggle {\n height: 40px;\n }\n\n #toggle-all {\n top: -56px;\n left: -15px;\n width: 65px;\n height: 41px;\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n -webkit-appearance: none;\n appearance: none;\n }\n}\n\n.hidden {\n display: none;\n}\n\nhr {\n margin: 20px 0;\n border: 0;\n border-top: 1px dashed #c5c5c5;\n border-bottom: 1px dashed #f7f7f7;\n}\n\n.learn a {\n font-weight: normal;\n text-decoration: none;\n color: #b83f45;\n}\n\n.learn a:hover {\n text-decoration: underline;\n color: #787e7e;\n}\n\n.learn h3,\n.learn h4,\n.learn h5 {\n margin: 10px 0;\n font-weight: 500;\n line-height: 1.2;\n color: #000;\n}\n\n.learn h3 {\n font-size: 24px;\n}\n\n.learn h4 {\n font-size: 18px;\n}\n\n.learn h5 {\n margin-bottom: 0;\n font-size: 14px;\n}\n\n.learn ul {\n padding: 0;\n margin: 0 0 30px 25px;\n}\n\n.learn li {\n line-height: 20px;\n}\n\n.learn p {\n font-size: 15px;\n font-weight: 300;\n line-height: 1.3;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.quote {\n border: none;\n margin: 20px 0 60px 0;\n}\n\n.quote p {\n font-style: italic;\n}\n\n.quote p:before {\n content: '“';\n font-size: 50px;\n opacity: 0.15;\n position: absolute;\n top: -20px;\n left: 3px;\n}\n\n.quote p:after {\n content: '”';\n font-size: 50px;\n opacity: 0.15;\n position: absolute;\n bottom: -42px;\n right: 3px;\n}\n\n.quote footer {\n position: absolute;\n bottom: -40px;\n right: 0;\n}\n\n.quote footer img {\n border-radius: 3px;\n}\n\n.quote footer a {\n margin-left: 5px;\n vertical-align: middle;\n}\n\n.speech-bubble {\n position: relative;\n padding: 10px;\n background: rgba(0, 0, 0, 0.04);\n border-radius: 5px;\n}\n\n.speech-bubble:after {\n content: '';\n position: absolute;\n top: 100%;\n right: 30px;\n border: 13px solid transparent;\n border-top-color: rgba(0, 0, 0, 0.04);\n}\n\n.learn-bar > .learn {\n position: absolute;\n width: 272px;\n top: 8px;\n left: -300px;\n padding: 10px;\n border-radius: 5px;\n background-color: rgba(255, 255, 255, 0.6);\n -webkit-transition-property: left;\n transition-property: left;\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n}\n\n@media (min-width: 899px) {\n .learn-bar {\n width: auto;\n margin: 0 0 0 300px;\n }\n\n .learn-bar > .learn {\n left: 8px;\n }\n\n .learn-bar #todoapp {\n width: 550px;\n margin: 130px auto 40px auto;\n }\n}\n" }, { "path": "examples/todomvc-common/bower.json", "content": "{\n \"name\": \"todomvc-common\",\n \"version\": \"0.1.9\"\n}\n" }, { "path": "examples/todomvc-common/readme.md", "content": "# todomvc-common\n\n> Bower component for some common utilities we use in every app\n\n## License\n\nMIT\n" }, { "path": "index.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\nmodule.exports.Dispatcher = require('./lib/Dispatcher');\n" }, { "path": "jest.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nmodule.exports = {\n modulePathIgnorePatterns: ['/lib/', '/node_modules/'],\n transformIgnorePatterns: ['/node_modules/'],\n rootDir: './',\n transform: {\n '\\\\.js$': './scripts/jest/preprocessor.js',\n },\n setupFiles: ['./scripts/jest/environment.js'],\n roots: ['/src'],\n modulePaths: [\n '/src',\n '/src/container',\n '/src/stores',\n ],\n testEnvironment: 'jsdom',\n};\n" }, { "path": "package.json", "content": "{\n \"name\": \"flux\",\n \"version\": \"4.0.4\",\n \"description\": \"An application architecture based on a unidirectional data flow\",\n \"keywords\": [\n \"flux\",\n \"react\",\n \"facebook\",\n \"dispatcher\"\n ],\n \"homepage\": \"https://facebookarchive.github.io/flux/\",\n \"bugs\": \"https://github.com/facebookarchive/flux/issues\",\n \"files\": [\n \"LICENSE\",\n \"PATENTS\",\n \"README.md\",\n \"index.js\",\n \"lib\",\n \"utils.js\",\n \"dist\"\n ],\n \"main\": \"index.js\",\n \"scripts\": {\n \"build\": \"gulp build\",\n \"prepublish\": \"gulp publish\",\n \"test\": \"NODE_ENV=test jest\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/facebook/flux\"\n },\n \"author\": \"Facebook\",\n \"contributors\": [\n \"Jing Chen \",\n \"Bill Fisher \",\n \"Paul O'Shannessy \",\n \"Kyle Davis \",\n \"Yangshun Tay \"\n ],\n \"license\": \"BSD-3-Clause\",\n \"devDependencies\": {\n \"@babel/core\": \"^7.12.10\",\n \"babel-loader\": \"^8.1.0\",\n \"babel-preset-fbjs\": \"^3.3.0\",\n \"del\": \"^2.2.0\",\n \"gulp\": \"^4.0.2\",\n \"gulp-babel\": \"^8.0.0\",\n \"gulp-flatten\": \"^0.2.0\",\n \"gulp-header\": \"1.8.2\",\n \"gulp-rename\": \"^1.2.2\",\n \"gulp-util\": \"^3.0.6\",\n \"immutable\": \"^3.7.4\",\n \"jest\": \"^28.1.0\",\n \"jest-environment-jsdom\": \"^28.1.0\",\n \"object-assign\": \"^4.0.1\",\n \"react\": \"^17.0.1\",\n \"react-addons-test-utils\": \"^15.6.2\",\n \"react-dom\": \"^17.0.1\",\n \"vinyl-source-stream\": \"^1.0.0\",\n \"webpack\": \"^1.11.0\",\n \"webpack-stream\": \"^3.1.0\"\n },\n \"dependencies\": {\n \"fbemitter\": \"^3.0.0\",\n \"fbjs\": \"^3.0.1\"\n },\n \"peerDependencies\": {\n \"react\": \"^15.0.2 || ^16.0.0 || ^17.0.0\"\n }\n}\n" }, { "path": "scripts/babel/default-options.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\nmodule.exports = {\n presets: [\n require('babel-preset-fbjs/configure')({\n rewriteModules: {\n map: {\n react: 'react',\n fbemitter: 'fbemitter',\n immutable: 'immutable',\n invariant: 'fbjs/lib/invariant',\n shallowEqual: 'fbjs/lib/shallowEqual',\n },\n },\n stripDEV: true,\n }),\n ],\n};\n" }, { "path": "scripts/jest/environment.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\nglobal.__DEV__ = true;\n" }, { "path": "scripts/jest/preprocessor.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst assign = require('object-assign');\nconst babel = require('@babel/core');\nconst babelOpts = require('../babel/default-options');\n\nmodule.exports = {\n process: function (src, path) {\n return {\n code: babel.transform(src, assign({filename: path}, babelOpts)).code,\n };\n },\n};\n" }, { "path": "src/.flowconfig", "content": "[ignore]\n.*/__tests__/.*\n\n[include]\n../node_modules/fbemitter\n../node_modules/fbjs/lib\n../node_modules/immutable\n../node_modules/promise\n../node_modules/react\n\n[libs]\n../node_modules/fbjs/flow/lib\n\n[options]\nmodule.system=haste\nmunge_underscores=true\n\nsuppress_type=$FlowIssue\nsuppress_type=$FlowFixMe\nsuppress_type=$FixMe\nsuppress_type=$FlowExpectedError\n\nsuppress_comment=\\\\(.\\\\|\\n\\\\)*\\\\$FlowFixMe\\\\($\\\\|[^(]\\\\|(\\\\(>=0\\\\.\\\\(2[0-2]\\\\|1[0-9]\\\\|[0-9]\\\\).[0-9]\\\\)? *\\\\(site=[a-z,_]*www[a-z,_]*\\\\)?)\\\\)\nsuppress_comment=\\\\(.\\\\|\\n\\\\)*\\\\$FlowIssue\\\\((\\\\(>=0\\\\.\\\\(2[0-2]\\\\|1[0-9]\\\\|[0-9]\\\\).[0-9]\\\\)? *\\\\(site=[a-z,_]*www[a-z,_]*\\\\)?)\\\\)?:? #[0-9]+\nsuppress_comment=\\\\(.\\\\|\\n\\\\)*\\\\$FlowFixedInNextDeploy\nsuppress_comment=\\\\(.\\\\|\\n\\\\)*\\\\$FlowExpectedError\n\n[version]\n0.35.0\n" }, { "path": "src/Dispatcher.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @providesModule Dispatcher\n * @flow\n * @preventMunge\n */\n\n'use strict';\n\nvar invariant = require('invariant');\n\nexport type DispatchToken = string;\n\nvar _prefix = 'ID_';\n\n/**\n * Dispatcher is used to broadcast payloads to registered callbacks. This is\n * different from generic pub-sub systems in two ways:\n *\n * 1) Callbacks are not subscribed to particular events. Every payload is\n * dispatched to every registered callback.\n * 2) Callbacks can be deferred in whole or part until other callbacks have\n * been executed.\n *\n * For example, consider this hypothetical flight destination form, which\n * selects a default city when a country is selected:\n *\n * var flightDispatcher = new Dispatcher();\n *\n * // Keeps track of which country is selected\n * var CountryStore = {country: null};\n *\n * // Keeps track of which city is selected\n * var CityStore = {city: null};\n *\n * // Keeps track of the base flight price of the selected city\n * var FlightPriceStore = {price: null}\n *\n * When a user changes the selected city, we dispatch the payload:\n *\n * flightDispatcher.dispatch({\n * actionType: 'city-update',\n * selectedCity: 'paris'\n * });\n *\n * This payload is digested by `CityStore`:\n *\n * flightDispatcher.register(function(payload) {\n * if (payload.actionType === 'city-update') {\n * CityStore.city = payload.selectedCity;\n * }\n * });\n *\n * When the user selects a country, we dispatch the payload:\n *\n * flightDispatcher.dispatch({\n * actionType: 'country-update',\n * selectedCountry: 'australia'\n * });\n *\n * This payload is digested by both stores:\n *\n * CountryStore.dispatchToken = flightDispatcher.register(function(payload) {\n * if (payload.actionType === 'country-update') {\n * CountryStore.country = payload.selectedCountry;\n * }\n * });\n *\n * When the callback to update `CountryStore` is registered, we save a reference\n * to the returned token. Using this token with `waitFor()`, we can guarantee\n * that `CountryStore` is updated before the callback that updates `CityStore`\n * needs to query its data.\n *\n * CityStore.dispatchToken = flightDispatcher.register(function(payload) {\n * if (payload.actionType === 'country-update') {\n * // `CountryStore.country` may not be updated.\n * flightDispatcher.waitFor([CountryStore.dispatchToken]);\n * // `CountryStore.country` is now guaranteed to be updated.\n *\n * // Select the default city for the new country\n * CityStore.city = getDefaultCityForCountry(CountryStore.country);\n * }\n * });\n *\n * The usage of `waitFor()` can be chained, for example:\n *\n * FlightPriceStore.dispatchToken =\n * flightDispatcher.register(function(payload) {\n * switch (payload.actionType) {\n * case 'country-update':\n * case 'city-update':\n * flightDispatcher.waitFor([CityStore.dispatchToken]);\n * FlightPriceStore.price =\n * getFlightPriceStore(CountryStore.country, CityStore.city);\n * break;\n * }\n * });\n *\n * The `country-update` payload will be guaranteed to invoke the stores'\n * registered callbacks in order: `CountryStore`, `CityStore`, then\n * `FlightPriceStore`.\n */\nclass Dispatcher {\n _callbacks: {[key: DispatchToken]: (payload: TPayload) => void};\n _isDispatching: boolean;\n _isHandled: {[key: DispatchToken]: boolean};\n _isPending: {[key: DispatchToken]: boolean};\n _lastID: number;\n _pendingPayload: TPayload;\n\n constructor() {\n this._callbacks = {};\n this._isDispatching = false;\n this._isHandled = {};\n this._isPending = {};\n this._lastID = 1;\n }\n\n /**\n * Registers a callback to be invoked with every dispatched payload. Returns\n * a token that can be used with `waitFor()`.\n */\n register(callback: (payload: TPayload) => void): DispatchToken {\n var id = _prefix + this._lastID++;\n this._callbacks[id] = callback;\n return id;\n }\n\n /**\n * Removes a callback based on its token.\n */\n unregister(id: DispatchToken): void {\n invariant(\n this._callbacks[id],\n 'Dispatcher.unregister(...): `%s` does not map to a registered callback.',\n id,\n );\n delete this._callbacks[id];\n }\n\n /**\n * Waits for the callbacks specified to be invoked before continuing execution\n * of the current callback. This method should only be used by a callback in\n * response to a dispatched payload.\n */\n waitFor(ids: Array): void {\n invariant(\n this._isDispatching,\n 'Dispatcher.waitFor(...): Must be invoked while dispatching.',\n );\n for (var ii = 0; ii < ids.length; ii++) {\n var id = ids[ii];\n if (this._isPending[id]) {\n invariant(\n this._isHandled[id],\n 'Dispatcher.waitFor(...): Circular dependency detected while ' +\n 'waiting for `%s`.',\n id,\n );\n continue;\n }\n invariant(\n this._callbacks[id],\n 'Dispatcher.waitFor(...): `%s` does not map to a registered callback.',\n id,\n );\n this._invokeCallback(id);\n }\n }\n\n /**\n * Dispatches a payload to all registered callbacks.\n */\n dispatch(payload: TPayload): void {\n invariant(\n !this._isDispatching,\n 'Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.',\n );\n this._startDispatching(payload);\n try {\n for (var id in this._callbacks) {\n if (this._isPending[id]) {\n continue;\n }\n this._invokeCallback(id);\n }\n } finally {\n this._stopDispatching();\n }\n }\n\n /**\n * Is this Dispatcher currently dispatching.\n */\n isDispatching(): boolean {\n return this._isDispatching;\n }\n\n /**\n * Call the callback stored with the given id. Also do some internal\n * bookkeeping.\n *\n * @internal\n */\n _invokeCallback(id: DispatchToken): void {\n this._isPending[id] = true;\n this._callbacks[id](this._pendingPayload);\n this._isHandled[id] = true;\n }\n\n /**\n * Set up bookkeeping needed when dispatching.\n *\n * @internal\n */\n _startDispatching(payload: TPayload): void {\n for (var id in this._callbacks) {\n this._isPending[id] = false;\n this._isHandled[id] = false;\n }\n this._pendingPayload = payload;\n this._isDispatching = true;\n }\n\n /**\n * Clear bookkeeping used for dispatching.\n *\n * @internal\n */\n _stopDispatching(): void {\n delete this._pendingPayload;\n this._isDispatching = false;\n }\n}\n\nmodule.exports = Dispatcher;\n" }, { "path": "src/FluxMixinLegacy.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates. All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @providesModule FluxMixinLegacy\n * @flow\n */\n\n'use strict';\n\nimport type FluxStore from 'FluxStore';\n\nvar FluxStoreGroup = require('FluxStoreGroup');\n\nvar invariant = require('invariant');\n\ntype Options = {\n withProps?: boolean,\n};\n\n/**\n * `FluxContainer` should be preferred over this mixin, but it requires using\n * react with classes. So this mixin is provided where it is not yet possible\n * to convert a container to be a class.\n *\n * This mixin should be used for React components that have state based purely\n * on stores. `this.props` will not be available inside of `calculateState()`.\n *\n * This mixin will only `setState` not replace it, so you should always return\n * every key in your state unless you know what you are doing. Consider this:\n *\n * var Foo = React.createClass({\n * mixins: [\n * FluxMixinLegacy([FooStore])\n * ],\n *\n * statics: {\n * calculateState(prevState) {\n * if (!prevState) {\n * return {\n * foo: FooStore.getFoo(),\n * };\n * }\n *\n * return {\n * bar: FooStore.getBar(),\n * };\n * }\n * },\n * });\n *\n * On the second calculateState when prevState is not null, the state will be\n * updated to contain the previous foo AND the bar that was just returned. Only\n * returning bar will not delete foo.\n *\n */\nfunction FluxMixinLegacy(\n stores: Array,\n options: Options = {withProps: false},\n): any {\n stores = stores.filter((store) => !!store);\n\n return {\n getInitialState(): Object {\n enforceInterface(this);\n return options.withProps\n ? this.constructor.calculateState(null, this.props)\n : this.constructor.calculateState(null, undefined);\n },\n\n componentWillMount(): void {\n // This tracks when any store has changed and we may need to update.\n var changed = false;\n var setChanged = () => {\n changed = true;\n };\n\n // This adds subscriptions to stores. When a store changes all we do is\n // set changed to true.\n this._fluxMixinSubscriptions = stores.map((store) =>\n store.addListener(setChanged),\n );\n\n // This callback is called after the dispatch of the relevant stores. If\n // any have reported a change we update the state, then reset changed.\n var callback = () => {\n if (changed) {\n this.setState((prevState) =>\n options.withProps\n ? this.constructor.calculateState(prevState, this.props)\n : this.constructor.calculateState(prevState, undefined),\n );\n }\n changed = false;\n };\n this._fluxMixinStoreGroup = new FluxStoreGroup(stores, callback);\n },\n\n componentWillUnmount(): void {\n this._fluxMixinStoreGroup.release();\n for (var subscription of this._fluxMixinSubscriptions) {\n subscription.remove();\n }\n this._fluxMixinSubscriptions = [];\n },\n };\n}\n\nfunction enforceInterface(o: any): void {\n invariant(\n o.constructor.calculateState,\n 'Components that use FluxMixinLegacy must implement ' +\n '`calculateState()` on the statics object',\n );\n}\n\nmodule.exports = FluxMixinLegacy;\n" }, { "path": "src/FluxStoreGroup.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @providesModule FluxStoreGroup\n * @flow\n */\n\n'use strict';\n\nimport type Dispatcher from 'Dispatcher';\nimport type FluxStore from 'FluxStore';\n\nvar invariant = require('invariant');\n\ntype DispatchToken = string;\n\n/**\n * FluxStoreGroup allows you to execute a callback on every dispatch after\n * waiting for each of the given stores.\n */\nclass FluxStoreGroup {\n _dispatcher: Dispatcher;\n _dispatchToken: DispatchToken;\n\n constructor(stores: Array, callback: Function): void {\n this._dispatcher = _getUniformDispatcher(stores);\n\n // Precompute store tokens.\n var storeTokens = stores.map((store) => store.getDispatchToken());\n\n // Register with the dispatcher.\n this._dispatchToken = this._dispatcher.register((payload) => {\n this._dispatcher.waitFor(storeTokens);\n callback();\n });\n }\n\n release(): void {\n this._dispatcher.unregister(this._dispatchToken);\n }\n}\n\nfunction _getUniformDispatcher(stores: Array): Dispatcher {\n invariant(\n stores && stores.length,\n 'Must provide at least one store to FluxStoreGroup',\n );\n var dispatcher = stores[0].getDispatcher();\n if (__DEV__) {\n for (var store of stores) {\n invariant(\n store.getDispatcher() === dispatcher,\n 'All stores in a FluxStoreGroup must use the same dispatcher',\n );\n }\n }\n return dispatcher;\n}\n\nmodule.exports = FluxStoreGroup;\n" }, { "path": "src/__tests__/Dispatcher-test.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\nimport Dispatcher from 'Dispatcher';\n\ndescribe('Dispatcher', () => {\n let dispatcher;\n let callbackA;\n let callbackB;\n\n beforeEach(() => {\n dispatcher = new Dispatcher();\n callbackA = jest.fn();\n callbackB = jest.fn();\n });\n\n it('should execute all subscriber callbacks', () => {\n dispatcher.register(callbackA);\n dispatcher.register(callbackB);\n\n const payload = {};\n dispatcher.dispatch(payload);\n\n expect(callbackA.mock.calls.length).toBe(1);\n expect(callbackA.mock.calls[0][0]).toBe(payload);\n\n expect(callbackB.mock.calls.length).toBe(1);\n expect(callbackB.mock.calls[0][0]).toBe(payload);\n\n dispatcher.dispatch(payload);\n\n expect(callbackA.mock.calls.length).toBe(2);\n expect(callbackA.mock.calls[1][0]).toBe(payload);\n\n expect(callbackB.mock.calls.length).toBe(2);\n expect(callbackB.mock.calls[1][0]).toBe(payload);\n });\n\n it('should wait for callbacks registered earlier', () => {\n const tokenA = dispatcher.register(callbackA);\n\n dispatcher.register((payload) => {\n dispatcher.waitFor([tokenA]);\n expect(callbackA.mock.calls.length).toBe(1);\n expect(callbackA.mock.calls[0][0]).toBe(payload);\n callbackB(payload);\n });\n\n const payload = {};\n dispatcher.dispatch(payload);\n\n expect(callbackA.mock.calls.length).toBe(1);\n expect(callbackA.mock.calls[0][0]).toBe(payload);\n\n expect(callbackB.mock.calls.length).toBe(1);\n expect(callbackB.mock.calls[0][0]).toBe(payload);\n });\n\n it('should wait for callbacks registered later', () => {\n dispatcher.register((payload) => {\n dispatcher.waitFor([tokenB]);\n expect(callbackB.mock.calls.length).toBe(1);\n expect(callbackB.mock.calls[0][0]).toBe(payload);\n callbackA(payload);\n });\n\n const tokenB = dispatcher.register(callbackB);\n\n const payload = {};\n dispatcher.dispatch(payload);\n\n expect(callbackA.mock.calls.length).toBe(1);\n expect(callbackA.mock.calls[0][0]).toBe(payload);\n\n expect(callbackB.mock.calls.length).toBe(1);\n expect(callbackB.mock.calls[0][0]).toBe(payload);\n });\n\n it('should throw if dispatch() while dispatching', () => {\n dispatcher.register((payload) => {\n dispatcher.dispatch(payload);\n callbackA();\n });\n\n const payload = {};\n expect(() => dispatcher.dispatch(payload)).toThrow();\n expect(callbackA.mock.calls.length).toBe(0);\n });\n\n it('should throw if waitFor() while not dispatching', () => {\n const tokenA = dispatcher.register(callbackA);\n\n expect(() => dispatcher.waitFor([tokenA])).toThrow();\n expect(callbackA.mock.calls.length).toBe(0);\n });\n\n it('should throw if waitFor() with invalid token', () => {\n const invalidToken = 1337;\n\n dispatcher.register(() => {\n dispatcher.waitFor([invalidToken]);\n });\n\n const payload = {};\n expect(() => dispatcher.dispatch(payload)).toThrow();\n });\n\n it('should throw on self-circular dependencies', () => {\n const tokenA = dispatcher.register((payload) => {\n dispatcher.waitFor([tokenA]);\n callbackA(payload);\n });\n\n const payload = {};\n expect(() => dispatcher.dispatch(payload)).toThrow();\n expect(callbackA.mock.calls.length).toBe(0);\n });\n\n it('should throw on multi-circular dependencies', () => {\n const tokenA = dispatcher.register((payload) => {\n dispatcher.waitFor([tokenB]);\n callbackA(payload);\n });\n\n const tokenB = dispatcher.register((payload) => {\n dispatcher.waitFor([tokenA]);\n callbackB(payload);\n });\n\n expect(() => dispatcher.dispatch({})).toThrow();\n expect(callbackA.mock.calls.length).toBe(0);\n expect(callbackB.mock.calls.length).toBe(0);\n });\n\n it('should remain in a consistent state after a failed dispatch', () => {\n dispatcher.register(callbackA);\n dispatcher.register((payload) => {\n if (payload.shouldThrow) {\n throw new Error();\n }\n callbackB();\n });\n\n expect(() => dispatcher.dispatch({shouldThrow: true})).toThrow();\n\n // Cannot make assumptions about a failed dispatch.\n const callbackACount = callbackA.mock.calls.length;\n\n dispatcher.dispatch({shouldThrow: false});\n\n expect(callbackA.mock.calls.length).toBe(callbackACount + 1);\n expect(callbackB.mock.calls.length).toBe(1);\n });\n\n it('should properly unregister callbacks', () => {\n dispatcher.register(callbackA);\n\n const tokenB = dispatcher.register(callbackB);\n\n const payload = {};\n dispatcher.dispatch(payload);\n\n expect(callbackA.mock.calls.length).toBe(1);\n expect(callbackA.mock.calls[0][0]).toBe(payload);\n\n expect(callbackB.mock.calls.length).toBe(1);\n expect(callbackB.mock.calls[0][0]).toBe(payload);\n\n dispatcher.unregister(tokenB);\n\n dispatcher.dispatch(payload);\n\n expect(callbackA.mock.calls.length).toBe(2);\n expect(callbackA.mock.calls[1][0]).toBe(payload);\n\n expect(callbackB.mock.calls.length).toBe(1);\n });\n});\n" }, { "path": "src/__tests__/FluxStoreGroup-test.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @emails oncall+uiecommd\n * @typechecks\n */\n\nimport Dispatcher from 'Dispatcher';\nimport FluxStore from 'FluxStore';\nimport FluxStoreGroup from 'FluxStoreGroup';\n\nclass SimpleStore extends FluxStore {\n __onDispatch(payload) {\n this.__emitChange();\n }\n}\n\ndescribe('FluxStoreGroup', () => {\n let dispatcher;\n let storeA;\n let storeB;\n\n beforeEach(() => {\n dispatcher = new Dispatcher();\n storeA = new SimpleStore(dispatcher);\n storeB = new SimpleStore(dispatcher);\n });\n\n it('should register a callback with the dispatcher', () => {\n const callback = jest.fn();\n new FluxStoreGroup([storeA, storeB], callback);\n\n dispatcher.dispatch({type: 'foo'});\n expect(callback).toBeCalled();\n });\n\n it('should wait for the store dependencies', () => {\n const callback = jest.fn().mockImplementation(() => {\n expect(storeA.hasChanged()).toBe(true);\n expect(storeB.hasChanged()).toBe(true);\n });\n new FluxStoreGroup([storeA, storeB], callback);\n\n dispatcher.dispatch({type: 'foo'});\n expect(callback).toBeCalled();\n });\n\n it('should not run the callback after being released', () => {\n const callback = jest.fn();\n const group = new FluxStoreGroup([storeA, storeB], callback);\n group.release();\n\n dispatcher.dispatch({type: 'foo'});\n expect(callback).not.toBeCalled();\n });\n\n it('should have at least one store', () => {\n const callback = jest.fn();\n expect(() => new FluxStoreGroup([], callback)).toThrow();\n });\n\n it('should make sure dispatchers are uniform in DEV', () => {\n const callback = jest.fn();\n const storeC = new SimpleStore(new Dispatcher());\n expect(() => new FluxStoreGroup([storeA, storeC], callback)).toThrow();\n });\n});\n" }, { "path": "src/container/FluxContainer.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @providesModule FluxContainer\n * @flow\n */\n\n'use strict';\n\nimport type FluxStore from 'FluxStore';\n\nconst FluxContainerSubscriptions = require('FluxContainerSubscriptions');\nconst React = require('react');\n\nconst invariant = require('invariant');\nconst shallowEqual = require('shallowEqual');\n\nconst {Component} = React;\n\ntype Options = {\n pure?: ?boolean,\n withProps?: ?boolean,\n withContext?: ?boolean,\n};\n\nconst DEFAULT_OPTIONS = {\n pure: true,\n withProps: false,\n withContext: false,\n};\n\n/**\n * A FluxContainer is used to subscribe a react component to multiple stores.\n * The stores that are used must be returned from a static `getStores()` method.\n *\n * The component receives information from the stores via state. The state\n * is generated using a static `calculateState()` method that each container\n * must implement. A simple container may look like:\n *\n * class FooContainer extends Component {\n * static getStores() {\n * return [FooStore];\n * }\n *\n * static calculateState() {\n * return {\n * foo: FooStore.getState(),\n * };\n * }\n *\n * render() {\n * return ;\n * }\n * }\n *\n * module.exports = FluxContainer.create(FooContainer);\n *\n * Flux container also supports some other, more advanced use cases. If you need\n * to base your state off of props as well:\n *\n * class FooContainer extends Component {\n * ...\n *\n * static calculateState(prevState, props) {\n * return {\n * foo: FooStore.getSpecificFoo(props.id),\n * };\n * }\n *\n * ...\n * }\n *\n * module.exports = FluxContainer.create(FooContainer, {withProps: true});\n *\n * Or if your stores are passed through your props:\n *\n * class FooContainer extends Component {\n * ...\n *\n * static getStores(props) {\n * const {BarStore, FooStore} = props.stores;\n * return [BarStore, FooStore];\n * }\n *\n * static calculateState(prevState, props) {\n * const {BarStore, FooStore} = props.stores;\n * return {\n * bar: BarStore.getState(),\n * foo: FooStore.getState(),\n * };\n * }\n *\n * ...\n * }\n *\n * module.exports = FluxContainer.create(FooContainer, {withProps: true});\n */\nfunction create(\n Base: ReactClass,\n options?: ?Options,\n): ReactClass {\n enforceInterface(Base);\n\n // Construct the options using default, override with user values as necessary.\n const realOptions = {\n ...DEFAULT_OPTIONS,\n ...(options || {}),\n };\n\n const getState = (state, maybeProps, maybeContext) => {\n const props = realOptions.withProps ? maybeProps : undefined;\n const context = realOptions.withContext ? maybeContext : undefined;\n return Base.calculateState(state, props, context);\n };\n\n const getStores = (maybeProps, maybeContext) => {\n const props = realOptions.withProps ? maybeProps : undefined;\n const context = realOptions.withContext ? maybeContext : undefined;\n return Base.getStores(props, context);\n };\n\n // Build the container class.\n class ContainerClass extends Base {\n _fluxContainerSubscriptions: FluxContainerSubscriptions;\n\n constructor(props: Props, context: any) {\n super(props, context);\n this._fluxContainerSubscriptions = new FluxContainerSubscriptions();\n this._fluxContainerSubscriptions.setStores(getStores(props, context));\n this._fluxContainerSubscriptions.addListener(() => {\n this.setState((prevState, currentProps) =>\n getState(prevState, currentProps, context),\n );\n });\n const calculatedState = getState(undefined, props, context);\n this.state = {\n ...(this.state || {}),\n ...calculatedState,\n };\n }\n\n UNSAFE_componentWillReceiveProps(nextProps: any, nextContext: any): void {\n if (super.UNSAFE_componentWillReceiveProps) {\n super.UNSAFE_componentWillReceiveProps(nextProps, nextContext);\n }\n\n if (super.componentWillReceiveProps) {\n super.componentWillReceiveProps(nextProps, nextContext);\n }\n\n if (realOptions.withProps || realOptions.withContext) {\n // Update both stores and state.\n this._fluxContainerSubscriptions.setStores(\n getStores(nextProps, nextContext),\n );\n this.setState((prevState) =>\n getState(prevState, nextProps, nextContext),\n );\n }\n }\n\n componentWillUnmount() {\n if (super.componentWillUnmount) {\n super.componentWillUnmount();\n }\n\n this._fluxContainerSubscriptions.reset();\n }\n }\n\n // Make sure we override shouldComponentUpdate only if the pure option is\n // specified. We can't override this above because we don't want to override\n // the default behavior on accident. Super works weird with react ES6 classes.\n const container = realOptions.pure\n ? createPureComponent(ContainerClass)\n : ContainerClass;\n\n // Update the name of the container before returning\n const componentName = Base.displayName || Base.name;\n container.displayName = 'FluxContainer(' + componentName + ')';\n return container;\n}\n\nfunction createPureComponent(\n BaseComponent: ReactClass,\n): ReactClass {\n class PureComponent extends BaseComponent {\n shouldComponentUpdate(nextProps: Props, nextState: State): boolean {\n return (\n !shallowEqual(this.props, nextProps) ||\n !shallowEqual(this.state, nextState)\n );\n }\n }\n return PureComponent;\n}\n\nfunction enforceInterface(o: any): void {\n invariant(\n o.getStores,\n 'Components that use FluxContainer must implement `static getStores()`',\n );\n invariant(\n o.calculateState,\n 'Components that use FluxContainer must implement `static calculateState()`',\n );\n}\n\n/**\n * This is a way to connect stores to a functional stateless view. Here's a\n * simple example:\n *\n * // FooView.js\n *\n * function FooView(props) {\n * return
{props.value}
;\n * }\n *\n * module.exports = FooView;\n *\n *\n * // FooContainer.js\n *\n * function getStores() {\n * return [FooStore];\n * }\n *\n * function calculateState() {\n * return {\n * value: FooStore.getState();\n * };\n * }\n *\n * module.exports = FluxContainer.createFunctional(\n * FooView,\n * getStores,\n * calculateState,\n * );\n *\n */\nfunction createFunctional(\n viewFn: (props: State) => React.Element,\n getStores: (props?: ?Props, context?: any) => Array,\n calculateState: (prevState?: ?State, props?: ?Props, context?: any) => State,\n options?: Options,\n): ReactClass {\n class FunctionalContainer extends Component {\n state: State;\n static getStores(props?: ?Props, context?: any): Array {\n return getStores(props, context);\n }\n\n static calculateState(\n prevState?: ?State,\n props?: ?Props,\n context?: any,\n ): State {\n return calculateState(prevState, props, context);\n }\n\n render(): React.Element {\n return viewFn(this.state);\n }\n }\n // Update the name of the component before creating the container.\n const viewFnName = viewFn.displayName || viewFn.name || 'FunctionalContainer';\n FunctionalContainer.displayName = viewFnName;\n return create(FunctionalContainer, options);\n}\n\nmodule.exports = {create, createFunctional};\n" }, { "path": "src/container/FluxContainerSubscriptions.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates. All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @providesModule FluxContainerSubscriptions\n * @flow\n */\n\n'use strict';\n\nimport type FluxStore from 'FluxStore';\n\nconst FluxStoreGroup = require('FluxStoreGroup');\n\nfunction shallowArrayEqual(a: Array, b: Array): boolean {\n if (a === b) {\n return true;\n }\n if (a.length !== b.length) {\n return false;\n }\n for (let i = 0; i < a.length; i++) {\n if (a[i] !== b[i]) {\n return false;\n }\n }\n return true;\n}\n\nclass FluxContainerSubscriptions {\n _callbacks: Array<() => void>;\n _storeGroup: ?FluxStoreGroup;\n _stores: ?Array;\n _tokens: ?Array<{remove: () => void}>;\n\n constructor() {\n this._callbacks = [];\n }\n\n setStores(stores: Array): void {\n if (this._stores && shallowArrayEqual(this._stores, stores)) {\n return;\n }\n this._stores = stores;\n this._resetTokens();\n this._resetStoreGroup();\n\n let changed = false;\n let changedStores = [];\n\n if (__DEV__) {\n // Keep track of the stores that changed for debugging purposes only\n this._tokens = stores.map((store) =>\n store.addListener(() => {\n changed = true;\n changedStores.push(store);\n }),\n );\n } else {\n const setChanged = () => {\n changed = true;\n };\n this._tokens = stores.map((store) => store.addListener(setChanged));\n }\n\n const callCallbacks = () => {\n if (changed) {\n this._callbacks.forEach((fn) => fn());\n changed = false;\n if (__DEV__) {\n // Uncomment this to print the stores that changed.\n // console.log(changedStores);\n changedStores = [];\n }\n }\n };\n this._storeGroup = new FluxStoreGroup(stores, callCallbacks);\n }\n\n addListener(fn: () => void): void {\n this._callbacks.push(fn);\n }\n\n reset(): void {\n this._resetTokens();\n this._resetStoreGroup();\n this._resetCallbacks();\n this._resetStores();\n }\n\n _resetTokens() {\n if (this._tokens) {\n this._tokens.forEach((token) => token.remove());\n this._tokens = null;\n }\n }\n\n _resetStoreGroup(): void {\n if (this._storeGroup) {\n this._storeGroup.release();\n this._storeGroup = null;\n }\n }\n\n _resetStores(): void {\n this._stores = null;\n }\n\n _resetCallbacks(): void {\n this._callbacks = [];\n }\n}\n\nmodule.exports = FluxContainerSubscriptions;\n" }, { "path": "src/container/__tests__/FluxContainer-test.js", "content": "/**\n * Copyright 2004-present Facebook. All Rights Reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @emails oncall+uiecommd\n * @typechecks\n */\n\n'use strict';\n\nimport Dispatcher from 'Dispatcher';\nimport FluxContainer from 'FluxContainer';\nimport FluxReduceStore from 'FluxReduceStore';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactTestUtils from 'react-dom/test-utils';\n\n/**\n * Helper to create a container. The container must render a single div with\n * text content, this will return a function to access that content.\n */\nfunction createContainer(containerClass, options, props) {\n const container = FluxContainer.create(containerClass, options);\n const element = React.createElement(container, props);\n const tag = ReactTestUtils.renderIntoDocument(element);\n const component = ReactTestUtils.findRenderedDOMComponentWithTag(tag, 'div');\n const simpleDOMNode = ReactDOM.findDOMNode(component);\n return () => simpleDOMNode.textContent;\n}\n\ndescribe('FluxContainer', () => {\n let dispatch;\n let FooStore;\n\n class BaseContainer extends React.Component {\n static getStores() {\n return [FooStore];\n }\n\n render() {\n return
{this.state.value}
;\n }\n }\n\n beforeEach(() => {\n const dispatcher = new Dispatcher();\n dispatch = dispatcher.dispatch.bind(dispatcher);\n\n class FooStoreClass extends FluxReduceStore {\n constructor() {\n super(dispatcher);\n }\n\n getInitialState() {\n return 'foo';\n }\n\n reduce(state, action) {\n switch (action.type) {\n case 'set':\n return action.value;\n\n default:\n return state;\n }\n }\n }\n FooStore = new FooStoreClass();\n });\n\n it('should update the state', () => {\n // Setup the container.\n class SimpleContainer extends BaseContainer {\n static calculateState(prevState) {\n return {\n value: FooStore.getState(),\n };\n }\n }\n const getValue = createContainer(SimpleContainer);\n\n // Test it.\n expect(getValue()).toBe('foo');\n dispatch({\n type: 'set',\n value: 'bar',\n });\n expect(getValue()).toBe('bar');\n });\n\n it('should work with prevState', () => {\n // Setup the container.\n class SimpleContainer extends BaseContainer {\n static calculateState(prevState) {\n if (!prevState) {\n return {\n value: 'one',\n };\n }\n\n return {\n value: prevState.value + '-' + FooStore.getState(),\n };\n }\n }\n const getValue = createContainer(SimpleContainer);\n\n // Test it.\n expect(getValue()).toBe('one');\n dispatch({\n type: 'set',\n value: 'two',\n });\n expect(getValue()).toBe('one-two');\n dispatch({\n type: 'set',\n value: 'three',\n });\n expect(getValue()).toBe('one-two-three');\n\n // Shouldn't change when the store doesn't change.\n dispatch({\n type: 'set',\n value: 'three',\n });\n expect(getValue()).toBe('one-two-three');\n });\n\n it('should get access to props', () => {\n // Setup the container.\n class SimpleContainer extends BaseContainer {\n static calculateState(prevState, props) {\n return {\n value: props.value + '-' + FooStore.getState(),\n };\n }\n }\n\n const getValue = createContainer(\n SimpleContainer,\n {withProps: true}, // options\n {value: 'prop'}, // props\n );\n\n // Test it.\n expect(getValue()).toBe('prop-foo');\n dispatch({\n type: 'set',\n value: 'bar',\n });\n expect(getValue()).toBe('prop-bar');\n });\n\n it('should react to props changes', () => {\n class SimpleContainer extends BaseContainer {\n static calculateState(prevState, props) {\n return {\n value: props.value + '-' + FooStore.getState(),\n };\n }\n }\n const SimpleContainerComponent = FluxContainer.create(SimpleContainer, {\n withProps: true,\n });\n\n const node = document.createElement('div');\n const component = ReactDOM.render(\n ,\n node,\n );\n ReactDOM.render(, node);\n const text = ReactDOM.findDOMNode(component).textContent;\n expect(text).toBe('changed-foo');\n });\n\n it('should preserve initial state set in constructor', () => {\n // Hack to expose internal state for testing.\n let dangerouslyGetState = () => ({});\n\n // Setup the container.\n class SimpleContainer extends BaseContainer {\n static calculateState(prevState, props) {\n return {\n value: FooStore.getState(),\n };\n }\n\n constructor(props) {\n super(props);\n this.state = {\n someOtherValue: 42,\n };\n dangerouslyGetState = () => this.state;\n }\n }\n const getValue = createContainer(SimpleContainer);\n\n // Make sure our other value is there initially.\n expect(dangerouslyGetState().someOtherValue).toBe(42);\n\n // Standard test.\n expect(getValue()).toBe('foo');\n dispatch({\n type: 'set',\n value: 'bar',\n });\n expect(getValue()).toBe('bar');\n\n // And make sure other value persists after changes.\n expect(dangerouslyGetState().someOtherValue).toBe(42);\n });\n\n it('should respect changes in componentWillMount', () => {\n // Setup the container.\n class SimpleContainer extends BaseContainer {\n static calculateState(prevState, props) {\n return {\n value: FooStore.getState(),\n };\n }\n\n UNSAFE_componentWillMount() {\n dispatch({\n type: 'set',\n value: 'bar',\n });\n }\n }\n const getValue = createContainer(SimpleContainer);\n expect(getValue()).toBe('bar');\n });\n\n it('should get access to context in getStores', () => {\n const MyContext = React.createContext({value: FooStore});\n\n class SimpleContainer extends BaseContainer {\n static contextType = MyContext;\n\n static getStores(props, context) {\n return [context.value];\n }\n\n static calculateState(prevState, props, context) {\n return {\n value: context.value.getState(),\n };\n }\n }\n SimpleContainer.contextType = MyContext;\n\n const getValue = createContainer(\n SimpleContainer,\n {withContext: true}, // options\n {}, // props\n );\n\n expect(getValue()).toBe('foo');\n });\n\n it('should get access to context in calculateState', () => {\n const MyContext = React.createContext({value: 'context'});\n\n class SimpleContainer extends BaseContainer {\n static contextType = MyContext;\n\n static calculateState(prevState, props, context) {\n return {\n value: context.value + '-' + FooStore.getState(),\n };\n }\n }\n\n const getValue = createContainer(\n SimpleContainer,\n {withProps: true, withContext: true}, // options\n {}, // props\n );\n\n // Test it.\n expect(getValue()).toBe('context-foo');\n dispatch({\n type: 'set',\n value: 'bar',\n });\n expect(getValue()).toBe('context-bar');\n });\n\n // Still need to write a test for changing props. Can't figure out how to do\n // that with react test utils at the moment...\n});\n" }, { "path": "src/stores/FluxReduceStore.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates. All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @providesModule FluxReduceStore\n * @flow\n */\n\n'use strict';\n\nimport type Dispatcher from 'Dispatcher';\n\nconst FluxStore = require('FluxStore');\n\nconst abstractMethod = require('abstractMethod');\nconst invariant = require('invariant');\n\n/**\n * This is the basic building block of a Flux application. All of your stores\n * should extend this class.\n *\n * class CounterStore extends FluxReduceStore {\n * getInitialState(): number {\n * return 1;\n * }\n *\n * reduce(state: number, action: Object): number {\n * switch(action.type) {\n * case: 'add':\n * return state + action.value;\n * case: 'double':\n * return state * 2;\n * default:\n * return state;\n * }\n * }\n * }\n */\nclass FluxReduceStore extends FluxStore {\n _state: TState;\n\n constructor(dispatcher: Dispatcher) {\n super(dispatcher);\n this._state = this.getInitialState();\n }\n\n /**\n * Getter that exposes the entire state of this store. If your state is not\n * immutable you should override this and not expose _state directly.\n */\n getState(): TState {\n return this._state;\n }\n\n /**\n * Constructs the initial state for this store. This is called once during\n * construction of the store.\n */\n getInitialState(): TState {\n return abstractMethod('FluxReduceStore', 'getInitialState');\n }\n\n /**\n * Used to reduce a stream of actions coming from the dispatcher into a\n * single state object.\n */\n reduce(state: TState, action: Object): TState {\n return abstractMethod('FluxReduceStore', 'reduce');\n }\n\n /**\n * Checks if two versions of state are the same. You do not need to override\n * this if your state is immutable.\n */\n areEqual(one: TState, two: TState): boolean {\n return one === two;\n }\n\n __invokeOnDispatch(action: Object): void {\n this.__changed = false;\n\n // Reduce the stream of incoming actions to state, update when necessary.\n const startingState = this._state;\n const endingState = this.reduce(startingState, action);\n\n // This means your ending state should never be undefined.\n invariant(\n endingState !== undefined,\n '%s returned undefined from reduce(...), did you forget to return ' +\n 'state in the default case? (use null if this was intentional)',\n this.constructor.name,\n );\n\n if (!this.areEqual(startingState, endingState)) {\n this._state = endingState;\n\n // `__emitChange()` sets `this.__changed` to true and then the actual\n // change will be fired from the emitter at the end of the dispatch, this\n // is required in order to support methods like `hasChanged()`\n this.__emitChange();\n }\n\n if (this.__changed) {\n this.__emitter.emit(this.__changeEvent);\n }\n }\n}\n\nmodule.exports = FluxReduceStore;\n" }, { "path": "src/stores/FluxStore.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates. All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @providesModule FluxStore\n * @flow\n */\n\n'use strict';\n\nimport type Dispatcher from 'Dispatcher';\n\nconst {EventEmitter} = require('fbemitter');\n\nconst invariant = require('invariant');\n\n/**\n * This class represents the most basic functionality for a FluxStore. Do not\n * extend this store directly; instead extend FluxReduceStore when creating a\n * new store.\n */\nclass FluxStore {\n // private\n _dispatchToken: string;\n\n // protected, available to subclasses\n __changed: boolean;\n __changeEvent: string;\n __className: any;\n __dispatcher: Dispatcher;\n __emitter: EventEmitter;\n\n constructor(dispatcher: Dispatcher): void {\n this.__className = this.constructor.name;\n\n this.__changed = false;\n this.__changeEvent = 'change';\n this.__dispatcher = dispatcher;\n this.__emitter = new EventEmitter();\n this._dispatchToken = dispatcher.register((payload) => {\n this.__invokeOnDispatch(payload);\n });\n }\n\n addListener(callback: (eventType?: string) => void): {remove: () => void} {\n return this.__emitter.addListener(this.__changeEvent, callback);\n }\n\n getDispatcher(): Dispatcher {\n return this.__dispatcher;\n }\n\n /**\n * This exposes a unique string to identify each store's registered callback.\n * This is used with the dispatcher's waitFor method to declaratively depend\n * on other stores updating themselves first.\n */\n getDispatchToken(): string {\n return this._dispatchToken;\n }\n\n /**\n * Returns whether the store has changed during the most recent dispatch.\n */\n hasChanged(): boolean {\n invariant(\n this.__dispatcher.isDispatching(),\n '%s.hasChanged(): Must be invoked while dispatching.',\n this.__className,\n );\n return this.__changed;\n }\n\n __emitChange(): void {\n invariant(\n this.__dispatcher.isDispatching(),\n '%s.__emitChange(): Must be invoked while dispatching.',\n this.__className,\n );\n this.__changed = true;\n }\n\n /**\n * This method encapsulates all logic for invoking __onDispatch. It should\n * be used for things like catching changes and emitting them after the\n * subclass has handled a payload.\n */\n __invokeOnDispatch(payload: Object): void {\n this.__changed = false;\n this.__onDispatch(payload);\n if (this.__changed) {\n this.__emitter.emit(this.__changeEvent);\n }\n }\n\n /**\n * The callback that will be registered with the dispatcher during\n * instantiation. Subclasses must override this method. This callback is the\n * only way the store receives new data.\n */\n __onDispatch(payload: Object): void {\n invariant(\n false,\n '%s has not overridden FluxStore.__onDispatch(), which is required',\n this.__className,\n );\n }\n}\n\nmodule.exports = FluxStore;\n" }, { "path": "src/stores/__tests__/FluxReduceStore-test.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @emails oncall+uiecommd\n */\n\nimport Dispatcher from 'Dispatcher';\nimport FluxReduceStore from 'FluxReduceStore';\nimport Immutable from 'immutable';\n\nclass FooStore extends FluxReduceStore {\n getInitialState() {\n return Immutable.Map();\n }\n\n reduce(state, action) {\n switch (action.type) {\n case 'foo':\n return state.set('foo', action.foo);\n case 'bar':\n return state.set('bar', action.bar);\n case 'foobar':\n return state.set('foo', action.foo).set('bar', action.bar);\n case 'boom':\n return state.clear();\n default:\n return state;\n }\n }\n}\n\ndescribe('FluxReduceStore', () => {\n var dispatch;\n var onChange;\n var store;\n\n beforeEach(() => {\n var dispatcher = new Dispatcher();\n store = new FooStore(dispatcher);\n dispatch = dispatcher.dispatch.bind(dispatcher);\n store.__emitter.emit = jest.fn();\n onChange = store.__emitter.emit;\n });\n\n it('should respond to actions', () => {\n expect(store.getState().get('foo')).toBe(undefined);\n expect(store.getState().has('foo')).toBe(false);\n\n dispatch({\n type: 'foo',\n foo: 100,\n });\n\n expect(store.getState().get('foo')).toBe(100);\n expect(store.getState().has('foo')).toBe(true);\n });\n\n it('should only emit one change for multiple cache changes', () => {\n dispatch({\n type: 'foo',\n foo: 100,\n });\n\n expect(onChange.mock.calls.length).toBe(1);\n expect(store.getState().get('foo')).toBe(100);\n\n dispatch({\n type: 'foobar',\n foo: 200,\n bar: 400,\n });\n\n expect(onChange.mock.calls.length).toBe(2);\n expect(store.getState().get('foo')).toBe(200);\n expect(store.getState().get('bar')).toBe(400);\n });\n\n it('should not emit for empty changes', () => {\n dispatch({\n type: 'foo',\n foo: 100,\n });\n\n expect(onChange.mock.calls.length).toBe(1);\n expect(store.getState().get('foo')).toBe(100);\n\n dispatch({\n type: 'foo',\n foo: 100,\n });\n\n expect(onChange.mock.calls.length).toBe(1);\n expect(store.getState().get('foo')).toBe(100);\n });\n\n it('should clear the cache', () => {\n dispatch({\n type: 'foo',\n foo: 100,\n });\n\n expect(onChange.mock.calls.length).toBe(1);\n expect(store.getState().get('foo')).toBe(100);\n\n dispatch({type: 'boom'});\n\n expect(onChange.mock.calls.length).toBe(2);\n expect(store.getState().get('foo')).toBe(undefined);\n expect(store.getState().has('foo')).toBe(false);\n });\n});\n" }, { "path": "src/stores/__tests__/FluxStore-test.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @emails oncall+uiecommd\n * @typechecks\n */\n\nimport FluxStore from 'FluxStore';\nimport Dispatcher from 'Dispatcher';\nimport {EventEmitter} from 'fbemitter';\n\njest.mock('fbemitter');\n\nclass TestFluxStore extends FluxStore {\n __onDispatch(action) {\n switch (action.type) {\n case 'store-will-change-state':\n this.__emitChange();\n break;\n default:\n // no op\n }\n }\n}\n\nclass IncompleteFluxStore extends FluxStore {}\n\nclass IllegalFluxStore extends FluxStore {\n __onDispatch() {}\n illegalEmit() {\n this.__emitChange();\n }\n}\n\ndescribe('FluxStore', () => {\n var dispatcher;\n var fluxStore;\n var mockEmit;\n var registeredCallback;\n\n beforeEach(() => {\n dispatcher = new Dispatcher();\n dispatcher.register = jest\n .fn()\n .mockReturnValueOnce('ID_1')\n .mockReturnValueOnce('ID_2');\n EventEmitter.mockClear();\n fluxStore = new TestFluxStore(dispatcher);\n mockEmit = EventEmitter.mock.instances[0].emit;\n registeredCallback = dispatcher.register.mock.calls[0][0];\n });\n\n it('registers a callback with the dispatcher', () => {\n expect(dispatcher.register.mock.calls.length).toBe(1);\n });\n\n it('requires that subclasses override the __onDispatch() method', () => {\n new IncompleteFluxStore(dispatcher);\n var incompleteStoreCallback = dispatcher.register.mock.calls[1][0];\n expect(() => incompleteStoreCallback({type: 'action-type'})).toThrow();\n expect(() => registeredCallback({type: 'action-type'})).not.toThrow();\n });\n\n it('throws when __emitChange() is invoked outside of a dispatch', () => {\n var illegalFluxStore = new IllegalFluxStore(dispatcher);\n expect(() => illegalFluxStore.illegalEmit()).toThrow();\n });\n\n it('throws when hasChanged() is invoked outside of a dispatch', () => {\n expect(() => fluxStore.hasChanged()).toThrow();\n });\n\n it('emits an event on state change', () => {\n dispatcher.isDispatching = jest.fn().mockReturnValue(true);\n registeredCallback({type: 'store-will-change-state'});\n expect(mockEmit.mock.calls.length).toBe(1);\n expect(mockEmit.mock.calls[0][0]).toBe('change');\n });\n\n it('exposes whether the state has changed during current dispatch', () => {\n dispatcher.isDispatching = jest.fn();\n dispatcher.isDispatching.mockReturnValue(true);\n registeredCallback({type: 'store-will-change-state'});\n expect(fluxStore.hasChanged()).toBe(true);\n registeredCallback({type: 'store-will-ignore'});\n expect(fluxStore.hasChanged()).toBe(false);\n });\n\n it('exposes the dispatch token in a getter', () => {\n expect(fluxStore.getDispatchToken()).toBeTruthy();\n });\n\n it('wraps EventEmitter.addListener() with an addListener() method', () => {\n var mockAddListener = EventEmitter.mock.instances[0].addListener;\n mockAddListener.mockImplementation(() => {\n return {};\n });\n fluxStore.addListener(() => {});\n expect(mockAddListener.mock.calls.length).toBe(1);\n expect(typeof mockAddListener.mock.calls[0][0]).toBe('string');\n expect(typeof mockAddListener.mock.calls[0][1]).toBe('function');\n });\n});\n" }, { "path": "src/utils/abstractMethod.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @providesModule abstractMethod\n * @flow\n */\n\n'use strict';\n\nvar invariant = require('invariant');\n\nfunction abstractMethod(className: string, methodName: string): T {\n invariant(\n false,\n 'Subclasses of %s must override %s() with their own implementation.',\n className,\n methodName,\n );\n}\n\nmodule.exports = abstractMethod;\n" }, { "path": "utils.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\nmodule.exports.Container = require('./lib/FluxContainer');\nmodule.exports.Mixin = require('./lib/FluxMixinLegacy');\nmodule.exports.ReduceStore = require('./lib/FluxReduceStore');\nmodule.exports.Store = require('./lib/FluxStore');\n" }, { "path": "website/.gitignore", "content": "# dependencies\n/node_modules\n\n# production\n/build\n\n# generated files\n.docusaurus\n.cache-loader\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*" }, { "path": "website/README.md", "content": "# Website\n\nThis website is built using Docusaurus 2, a modern static website generator.\n\n### Installation\n\n```\n$ yarn\n```\n\n### Local Development\n\n```\n$ yarn start\n```\n\nThis command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.\n\n### Build\n\n```\n$ yarn build\n```\n\nThis command generates static content into the `build` directory and can be served using any static contents hosting service.\n\n### Deployment\n\n```\n$ GIT_USER= USE_SSH=1 yarn deploy\n```\n\nIf you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.\n" }, { "path": "website/docusaurus.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nmodule.exports = {\n title: 'Flux',\n tagline: 'Application architecture for building user interfaces',\n url: 'https://facebookarchive.github.io',\n baseUrl: '/flux/',\n favicon: 'img/favicon.ico',\n organizationName: 'facebookarchive',\n projectName: 'flux',\n themeConfig: {\n announcementBar: {\n id: 'support_ukraine',\n content:\n 'The Flux project has been archived and no further changes will be made.',\n backgroundColor: '#20232a',\n textColor: '#fff',\n isCloseable: false,\n },\n algolia: {\n appId: 'YDWP2C57PH',\n apiKey: '05bee0fdd678621b57cf7f8881751543',\n indexName: 'flux',\n },\n navbar: {\n title: 'Flux',\n logo: {\n alt: 'Flux Logo',\n src: 'img/flux-logo-color.svg',\n },\n items: [\n {to: 'docs/overview', label: 'Docs', position: 'left'},\n {to: 'support', label: 'Support', position: 'left'},\n {\n href: 'https://github.com/facebookarchive/flux',\n label: 'GitHub',\n position: 'right',\n },\n ],\n },\n footer: {\n style: 'dark',\n logo: {\n alt: 'Facebook Open Source Logo',\n src: 'https://docusaurus.io/img/meta_opensource_logo_negative.svg',\n },\n links: [\n {\n title: 'Docs',\n items: [\n {\n label: 'Introduction',\n to: 'docs/overview',\n },\n ],\n },\n {\n title: 'Community',\n items: [\n {\n label: 'Stack Overflow',\n href: 'https://stackoverflow.com/questions/tagged/flux',\n },\n ],\n },\n {\n title: 'Social',\n items: [\n {\n label: 'GitHub',\n href: 'https://github.com/facebookarchive/flux',\n },\n ],\n },\n {\n title: 'Legal',\n // Please do not remove the privacy and terms, it's a legal requirement.\n items: [\n {\n label: 'Privacy',\n href: 'https://opensource.facebook.com/legal/privacy/',\n target: '_blank',\n rel: 'noreferrer noopener',\n },\n {\n label: 'Terms',\n href: 'https://opensource.facebook.com/legal/terms/',\n target: '_blank',\n rel: 'noreferrer noopener',\n },\n ],\n },\n ],\n copyright: `Copyright © ${new Date().getFullYear()} Meta Platforms, Inc.`,\n },\n },\n presets: [\n [\n '@docusaurus/preset-classic',\n {\n docs: {\n path: '../docs',\n sidebarPath: require.resolve('./sidebars.js'),\n editUrl: 'https://github.com/facebookarchive/flux/edit/master/docs/',\n showLastUpdateAuthor: true,\n showLastUpdateTime: true,\n },\n theme: {\n customCss: require.resolve('./src/css/custom.css'),\n },\n },\n ],\n ],\n};\n" }, { "path": "website/package.json", "content": "{\n \"name\": \"flux-website\",\n \"version\": \"0.0.1\",\n \"private\": true,\n \"scripts\": {\n \"docusaurus\": \"docusaurus\",\n \"start\": \"docusaurus start\",\n \"build\": \"docusaurus build\",\n \"swizzle\": \"docusaurus swizzle\",\n \"deploy\": \"docusaurus deploy\"\n },\n \"dependencies\": {\n \"@docusaurus/core\": \"^2.3.1\",\n \"@docusaurus/preset-classic\": \"^2.3.1\",\n \"classnames\": \"^2.2.6\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "website/sidebars.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nmodule.exports = {\n docs: {\n 'Quick Start': ['overview', 'in-depth-overview'],\n Reference: ['dispatcher', 'flux-utils'],\n Resources: ['videos', 'related-libraries'],\n },\n};\n" }, { "path": "website/src/css/custom.css", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Any CSS included here will be global. The classic template\n * bundles Infima by default. Infima is a CSS framework designed to\n * work well for content-centric websites.\n */\n\n/* You can override the default Infima variables here. */\n:root {\n --ifm-color-primary: #318435;\n --ifm-color-primary-dark: rgb(44, 119, 48);\n --ifm-color-primary-darker: rgb(42, 112, 45);\n --ifm-color-primary-darkest: rgb(34, 92, 37);\n --ifm-color-primary-light: rgb(80, 150, 83);\n --ifm-color-primary-lighter: rgb(111, 169, 114);\n --ifm-color-primary-lightest: rgb(152, 194, 154);\n\n --ifm-footer-padding-vertical: 4rem;\n}\n\n.navbar .navbar__logo {\n height: auto;\n width: 50px;\n}\n\n.video-container {\n height: 0;\n margin: 0;\n margin-bottom: 30px;\n overflow: hidden;\n padding-bottom: 56.25%;\n padding-top: 30px;\n position: relative;\n}\n\n.video-container iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n" }, { "path": "website/src/pages/index.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React from 'react';\nimport classnames from 'classnames';\nimport Layout from '@theme/Layout';\nimport Link from '@docusaurus/Link';\nimport useDocusaurusContext from '@docusaurus/useDocusaurusContext';\nimport useBaseUrl from '@docusaurus/useBaseUrl';\nimport styles from './styles.module.css';\n\nconst features = [\n {\n title: <>What is Flux?,\n imageUrl: 'img/undraw_building_blocks.svg',\n description: (\n <>\n Flux is the application architecture that Facebook uses for building\n client-side web applications.\n \n ),\n },\n {\n title: <>What does it do?,\n imageUrl: 'img/undraw_react.svg',\n description: (\n <>\n It complements React's composable view components by utilizing a\n unidirectional data flow.\n \n ),\n },\n {\n title: <>How do I use it?,\n imageUrl: 'img/undraw_programming.svg',\n description: (\n <>\n It's more of a pattern rather than a formal framework, and you can start\n using Flux immediately without a lot of new code.\n \n ),\n },\n];\n\nfunction VideoContainer() {\n return (\n
\n
\n
\n

Brief Introduction into Flux

\n
\n \n
\n
\n
\n

Closer Look at Flux

\n
\n \n
\n
\n
\n
\n );\n}\n\nfunction Home() {\n const context = useDocusaurusContext();\n const {siteConfig = {}} = context;\n\n return (\n \n
\n
\n

{siteConfig.title}

\n

{siteConfig.tagline}

\n
\n \n Get Started\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\n The Flux project has been archived and no further changes\n will be made. We recommend using modern alternatives like\n Redux, MobX, Recoil, Zustand, or Jotai instead.\n

\n
\n
\n
\n
\n
\n {features && features.length && (\n
\n
\n
\n {features.map(({imageUrl, title, description}, idx) => (\n \n {imageUrl && (\n
\n \n
\n )}\n

{title}

\n

{description}

\n
\n ))}\n
\n \n
\n )}\n \n
\n \n Learn more about Flux!\n \n
\n
\n \n );\n}\n\nexport default Home;\n" }, { "path": "website/src/pages/styles.module.css", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * CSS files with the .module.css suffix will be treated as CSS modules\n * and scoped locally.\n */\n\n.heroBanner {\n padding: 4rem 0;\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n\n@media screen and (max-width: 966px) {\n .heroBanner {\n padding: 2rem;\n }\n}\n\n.buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.deprecationBanner {\n background-color: var(--ifm-color-emphasis-200);\n}\n\n.features {\n display: flex;\n align-items: center;\n padding: 2rem 0;\n width: 100%;\n}\n\n.featureImage {\n height: 200px;\n width: 200px;\n}\n\n/* Announcement banner */\n\n:root {\n --docusaurus-announcement-bar-height: auto !important;\n}\n\ndiv[class^='announcementBarContent'] {\n line-height: 40px;\n font-size: 20px;\n font-weight: bold;\n padding: 8px 30px;\n}\n\ndiv[class^='announcementBarContent'] a {\n text-decoration: underline;\n display: inline-block;\n color: var(--ifm-color-primary-lightest) !important;\n}\n\ndiv[class^='announcementBarContent'] a:hover {\n color: var(--brand) !important;\n}\n\n@media only screen and (max-width: 768px) {\n div[class^='announcementBarContent'] {\n font-size: 18px;\n }\n}\n\n@media only screen and (max-width: 500px) {\n div[class^='announcementBarContent'] {\n font-size: 15px;\n line-height: 22px;\n padding: 6px 30px;\n }\n}\n" }, { "path": "website/src/pages/support.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React from 'react';\nimport classnames from 'classnames';\nimport Layout from '@theme/Layout';\nimport Link from '@docusaurus/Link';\nimport useDocusaurusContext from '@docusaurus/useDocusaurusContext';\nimport useBaseUrl from '@docusaurus/useBaseUrl';\nimport styles from './styles.module.css';\n\nfunction Support() {\n const context = useDocusaurusContext();\n const {siteConfig = {}} = context;\n return (\n \">\n
\n
\n
\n

Need Help?

\n

\n Flux is worked on full-time by Facebook's product infrastructure\n user interface engineering teams. They're often around and\n available for questions.\n

\n\n

Stack Overflow

\n

\n Many members of the community use Stack Overflow to ask questions.\n Read through the{' '}\n \n existing questions\n {' '}\n tagged with reactjs or{' '}\n ask your own!\n

\n\n

Google Groups mailing list

\n

\n The{' '}\n \n Reactjs Google Group\n {' '}\n is also a good place to ask questions and find answers.\n

\n\n

IRC

\n

\n Many developers and users idle on Freenode.net's IRC network in{' '}\n #reactjs on freenode\n .\n

\n\n

Twitter

\n

\n \n #fluxjs hash tag on Twitter\n {' '}\n is used to keep up with the latest Flux news.\n

\n
\n
\n
\n \n );\n}\n\nexport default Support;\n" } ]