Showing preview only (1,052K chars total). Download the full file or copy to clipboard to get everything.
Repository: piotrwitek/react-redux-typescript-guide
Branch: master
Commit: 47ca335db14a
Files: 174
Total size: 995.7 KB
Directory structure:
gitextract_2uvb6dl9/
├── .all-contributorsrc
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ ├── custom.md
│ │ └── feature_request.md
│ └── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .vscode/
│ └── launch.json
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── CONTRIBUTORS.md
├── LICENSE
├── README.md
├── README_SOURCE.md
├── configs/
│ ├── jest.config.json
│ └── jest.stubs.js
├── docs/
│ ├── build/
│ │ ├── 0.6e57cfb5.js
│ │ └── bundle.a71e23e0.js
│ └── index.html
├── generate-readme.js
├── generate-readme.sh
├── generate-styleguide.sh
├── is-git-status-clean.sh
├── package.json
└── playground/
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── .storybook/
│ ├── addons.js
│ ├── config.js
│ └── webpack.config.js
├── .vscode/
│ └── settings.json
├── README.md
├── index.html
├── package.json
├── public/
│ ├── index.html
│ └── manifest.json
├── src/
│ ├── api/
│ │ ├── agent.ts
│ │ ├── fixtures/
│ │ │ └── todos.json
│ │ ├── index.ts
│ │ ├── models.ts
│ │ ├── todos.ts
│ │ └── utils.ts
│ ├── app.test.tsx
│ ├── app.tsx
│ ├── components/
│ │ ├── __snapshots__/
│ │ │ ├── class-counter-with-default-props.stories.storyshot
│ │ │ ├── class-counter.stories.storyshot
│ │ │ ├── fc-counter-with-default-props.stories.storyshot
│ │ │ ├── fc-counter.stories.storyshot
│ │ │ ├── fc-spread-attributes.stories.storyshot
│ │ │ ├── generic-list.stories.storyshot
│ │ │ └── mouse-provider.stories.storyshot
│ │ ├── class-counter-with-default-props.md
│ │ ├── class-counter-with-default-props.stories.tsx
│ │ ├── class-counter-with-default-props.tsx
│ │ ├── class-counter-with-default-props.usage.tsx
│ │ ├── class-counter.md
│ │ ├── class-counter.stories.tsx
│ │ ├── class-counter.tsx
│ │ ├── class-counter.usage.tsx
│ │ ├── error-message.tsx
│ │ ├── fc-counter-with-default-props.md
│ │ ├── fc-counter-with-default-props.stories.tsx
│ │ ├── fc-counter-with-default-props.tsx
│ │ ├── fc-counter-with-default-props.usage.tsx
│ │ ├── fc-counter.md
│ │ ├── fc-counter.stories.tsx
│ │ ├── fc-counter.tsx
│ │ ├── fc-counter.usage.tsx
│ │ ├── fc-spread-attributes.md
│ │ ├── fc-spread-attributes.stories.tsx
│ │ ├── fc-spread-attributes.tsx
│ │ ├── fc-spread-attributes.usage.tsx
│ │ ├── generic-list.md
│ │ ├── generic-list.stories.tsx
│ │ ├── generic-list.tsx
│ │ ├── generic-list.usage.tsx
│ │ ├── index.ts
│ │ ├── mouse-provider.md
│ │ ├── mouse-provider.stories.tsx
│ │ ├── mouse-provider.tsx
│ │ ├── mouse-provider.usage.tsx
│ │ ├── name-provider.md
│ │ ├── name-provider.tsx
│ │ └── name-provider.usage.tsx
│ ├── connected/
│ │ ├── fc-counter-connected-bind-action-creators.tsx
│ │ ├── fc-counter-connected-bind-action-creators.usage.tsx
│ │ ├── fc-counter-connected-own-props.spec.tsx
│ │ ├── fc-counter-connected-own-props.tsx
│ │ ├── fc-counter-connected-own-props.usage.tsx
│ │ ├── fc-counter-connected.tsx
│ │ ├── fc-counter-connected.usage.tsx
│ │ └── index.ts
│ ├── context/
│ │ ├── theme-consumer-class.tsx
│ │ ├── theme-consumer.tsx
│ │ ├── theme-context.ts
│ │ └── theme-provider.tsx
│ ├── features/
│ │ ├── app/
│ │ │ └── epics.ts
│ │ ├── counters/
│ │ │ ├── actions.ts
│ │ │ ├── actions.usage.ts
│ │ │ ├── constants.ts
│ │ │ ├── index.ts
│ │ │ ├── reducer.ts
│ │ │ └── selectors.ts
│ │ ├── todos/
│ │ │ ├── __snapshots__/
│ │ │ │ └── reducer.spec.ts.snap
│ │ │ ├── actions.ts
│ │ │ ├── constants.ts
│ │ │ ├── epics.spec.ts
│ │ │ ├── epics.ts
│ │ │ ├── index.ts
│ │ │ ├── models.ts
│ │ │ ├── reducer-ta.ts
│ │ │ ├── reducer.spec.ts
│ │ │ ├── reducer.ts
│ │ │ └── selectors.ts
│ │ └── todos-typesafe/
│ │ ├── actions.ts
│ │ ├── index.ts
│ │ ├── models.ts
│ │ ├── reducer.ts
│ │ └── selectors.ts
│ ├── hoc/
│ │ ├── index.ts
│ │ ├── with-connected-count.tsx
│ │ ├── with-connected-count.usage.tsx
│ │ ├── with-error-boundary.tsx
│ │ ├── with-error-boundary.usage.tsx
│ │ ├── with-state.tsx
│ │ └── with-state.usage.tsx
│ ├── hooks/
│ │ ├── react-redux-hooks.tsx
│ │ ├── use-reducer.tsx
│ │ ├── use-state.tsx
│ │ └── use-theme-context.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── layout/
│ │ ├── layout-footer.tsx
│ │ ├── layout-header.tsx
│ │ └── layout.tsx
│ ├── models/
│ │ ├── index.ts
│ │ ├── nominal-types.ts
│ │ └── user.ts
│ ├── react-app-env.d.ts
│ ├── routes/
│ │ ├── home.tsx
│ │ └── not-found.tsx
│ ├── serviceWorker.ts
│ ├── services/
│ │ ├── index.ts
│ │ ├── local-storage-service.ts
│ │ ├── logger-service.ts
│ │ └── types.d.ts
│ ├── store/
│ │ ├── hooks.ts
│ │ ├── index.ts
│ │ ├── redux-router.ts
│ │ ├── root-action.ts
│ │ ├── root-epic.ts
│ │ ├── root-reducer.ts
│ │ ├── store.ts
│ │ ├── types.d.ts
│ │ └── utils.ts
│ └── storyshots.disabled-test.ts
├── src-old/
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ └── setupTests.ts
├── styleguide/
│ ├── docs/
│ │ └── intro.md
│ ├── package.json
│ └── styleguide.config.js
├── tsconfig.json
├── tsconfig.test.json
└── typings/
├── augmentations.d.ts
├── globals.d.ts
├── modules.d.ts
├── redux/
│ └── index.d.ts
└── redux-thunk/
└── index.d.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .all-contributorsrc
================================================
{
"projectName": "react-redux-typescript-guide",
"projectOwner": "piotrwitek",
"repoType": "github",
"repoHost": "https://github.com",
"files": [
"./CONTRIBUTORS.md"
],
"imageSize": 100,
"commit": false,
"contributors": [
{
"login": "piotrwitek",
"name": "Piotrek Witek",
"avatar_url": "https://avatars0.githubusercontent.com/u/739075?v=4",
"profile": "https://github.com/piotrwitek",
"contributions": [
"code",
"doc",
"ideas",
"review",
"question"
]
},
{
"login": "kazup01",
"name": "Kazz Yokomizo",
"avatar_url": "https://avatars3.githubusercontent.com/u/8602615?v=4",
"profile": "https://github.com/kazup01",
"contributions": [
"financial",
"fundingFinding"
]
},
{
"login": "jakeboone02",
"name": "Jake Boone",
"avatar_url": "https://avatars1.githubusercontent.com/u/366438?v=4",
"profile": "https://github.com/jakeboone02",
"contributions": [
"doc"
]
},
{
"login": "amitdahan",
"name": "Amit Dahan",
"avatar_url": "https://avatars1.githubusercontent.com/u/9748762?v=4",
"profile": "https://github.com/amitdahan",
"contributions": [
"doc"
]
},
{
"login": "gulderov",
"name": "gulderov",
"avatar_url": "https://avatars1.githubusercontent.com/u/98167?v=4",
"profile": "https://github.com/gulderov",
"contributions": [
"doc"
]
},
{
"login": "emp823",
"name": "Erik Pearson",
"avatar_url": "https://avatars1.githubusercontent.com/u/1964212?v=4",
"profile": "https://github.com/emp823",
"contributions": [
"doc"
]
},
{
"login": "flymason",
"name": "Bryan Mason",
"avatar_url": "https://avatars1.githubusercontent.com/u/5342677?v=4",
"profile": "https://github.com/flymason",
"contributions": [
"doc"
]
},
{
"login": "chodorowicz",
"name": "Jakub Chodorowicz",
"avatar_url": "https://avatars1.githubusercontent.com/u/119451?v=4",
"profile": "http://www.jakub.chodorowicz.pl/",
"contributions": [
"code"
]
},
{
"login": "mleg",
"name": "Oleg Maslov",
"avatar_url": "https://avatars1.githubusercontent.com/u/7266431?v=4",
"profile": "https://github.com/mleg",
"contributions": [
"bug"
]
},
{
"login": "awestbro",
"name": "Aaron Westbrook",
"avatar_url": "https://avatars0.githubusercontent.com/u/3393293?v=4",
"profile": "https://github.com/awestbro",
"contributions": [
"bug"
]
},
{
"login": "peterblazejewicz",
"name": "Peter Blazejewicz",
"avatar_url": "https://avatars3.githubusercontent.com/u/14539?v=4",
"profile": "http://www.linkedin.com/in/peterblazejewicz",
"contributions": [
"doc"
]
},
{
"login": "rubysolo",
"name": "Solomon White",
"avatar_url": "https://avatars3.githubusercontent.com/u/1642?v=4",
"profile": "https://github.com/rubysolo",
"contributions": [
"doc"
]
},
{
"login": "pino",
"name": "Levi Rocha",
"avatar_url": "https://avatars2.githubusercontent.com/u/8838006?v=4",
"profile": "https://github.com/pino",
"contributions": [
"doc"
]
},
{
"login": "loadbalance-sudachi-kun",
"name": "Sudachi-kun",
"avatar_url": "https://avatars1.githubusercontent.com/u/41281835?v=4",
"profile": "http://cloudnative.co.jp",
"contributions": [
"financial"
]
},
{
"login": "sosukesuzuki",
"name": "Sosuke Suzuki",
"avatar_url": "https://avatars1.githubusercontent.com/u/14838850?v=4",
"profile": "http://sosukesuzuki.github.io",
"contributions": [
"code"
]
},
{
"login": "chillitom",
"name": "Tom Rathbone",
"avatar_url": "https://avatars0.githubusercontent.com/u/74433?v=4",
"profile": "https://github.com/chillitom",
"contributions": [
"doc"
]
},
{
"login": "arshadkazmi42",
"name": "Arshad Kazmi",
"avatar_url": "https://avatars3.githubusercontent.com/u/4654382?v=4",
"profile": "https://arshadkazmi42.github.io/",
"contributions": [
"doc"
]
},
{
"login": "JeongUkJae",
"name": "JeongUkJae",
"avatar_url": "https://avatars1.githubusercontent.com/u/8815362?v=4",
"profile": "https://jeongukjae.github.io",
"contributions": [
"doc"
]
}
]
}
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: piotrekwitek # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: piotrwitek # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: ["https://www.buymeacoffee.com/piotrekwitek"] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
---
## Description
<!-- A clear description of what the bug is -->
## Steps to Reproduce
<!--
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
-->
## Expected behavior
<!-- A clear description of what you expected to happen -->
## Suggested solution(s)
<!-- How could we solve this bug. What changes would need to be made -->
## Project Dependencies
- TypeScript Version: X.X.X
- tsconfig.json:
<!-- Paste contents of your tsconfig.json here -->
## Environment (optional)
<!-- Fill if you think it's relevant to your issue -->
- Browser and Version: XXX
- OS: XXX
- Node Version: XXX
- Package Manager and Version: XXX
================================================
FILE: .github/ISSUE_TEMPLATE/custom.md
================================================
---
name: Question
about: Have a question? Please check our spectrum community chat.
---
First of all please check our spectrum community chat and we recommend to ask your question there for a quickest response and the indexing in search engines:
- https://spectrum.chat/react-redux-ts
The only good reason to use issue tracker for your questions would be for "special requests" that doesn't fit into bug reports and feature requests categories.
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
---
## Is your feature request related to a real problem or use-case?
<!-- A clear description of your problem or use-case-->
## Describe a solution including usage in code example
<!-- A clear description of the solution including usage with complete code examples, nicely formatted with "```ts" tags (especially if that's a new api proposal) -->
## Who does this impact? Who is this for?
<!-- Who is this for? All users? TypeScript users? Yourself? People using X, Y, Z, etc.? -->
## Describe alternatives you've considered (optional)
<!-- A clear and concise description of any alternative solutions or workaround you've considered -->
## Additional context (optional)
<!-- Add any other stuff you need, like links or related issues -->
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!-- Thank you for your contribution! :thumbsup: -->
<!-- Please makes sure that these checkboxes are checked before submitting your PR, thank you! -->
## Description
<!-- Example: Added error property support to `action` API -->
## Related issues:
- Resolved #XXX
## Checklist
* [ ] I have read [CONTRIBUTING.md](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/CONTRIBUTING.md)
* [ ] I have edited `README_SOURCE.md` (NOT `README.md`)
* [ ] I have run CI script locally `npm run ci-check` to generate an updated `README.md`
* [ ] I have linked all related issues above
* [ ] I have rebased my branch
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules
jspm_packages
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
temp/
playground/dist
playground/storybook-static
================================================
FILE: .vscode/launch.json
================================================
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3080",
"webRoot": "${workspaceFolder}/playground/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at piotrek.witek@gmail.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing Guide
## General
1. Make sure you have read and understand the **Goals** section to be aligned with project goals.
2. Before submitting a PR please comment in the relevant issue (or create a new one if it doesn't exist yet) to discuss all the requirements (this will prevent rejecting the PR and wasting your work).
3. All workflow scripts (prettier, linter, tests) must pass successfully (it is run automatically on CI and will fail on github checks).
## Edit `README_SOURCE.md` to generate an updated `README.md`
Don't edit `README.md` directly - it is generated automatically from `README_SOURCE.md` using an automated script.
- Use `sh ./generate-readme.sh` script to generate updated `README.md` (this will inject code examples using type-checked source files from the `/playground` folder)
- So to make changes in code examples edit source files in `/playground` folder
**Source code inject directives:**
```
# Inject code block with highlighter
::codeblock='playground/src/components/fc-counter.tsx'::
# Inject code block with highlighter and expander
::expander='playground/src/components/fc-counter.usage.tsx'::
```
================================================
FILE: CONTRIBUTORS.md
================================================
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore -->
| [<img src="https://avatars0.githubusercontent.com/u/739075?v=4" width="100px;"/><br /><sub><b>Piotrek Witek</b></sub>](https://github.com/piotrwitek)<br />[💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=piotrwitek "Code") [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=piotrwitek "Documentation") [🤔](#ideas-piotrwitek "Ideas, Planning, & Feedback") [👀](#review-piotrwitek "Reviewed Pull Requests") [💬](#question-piotrwitek "Answering Questions") | [<img src="https://avatars3.githubusercontent.com/u/8602615?v=4" width="100px;"/><br /><sub><b>Kazz Yokomizo</b></sub>](https://github.com/kazup01)<br />[💵](#financial-kazup01 "Financial") [🔍](#fundingFinding-kazup01 "Funding Finding") | [<img src="https://avatars1.githubusercontent.com/u/366438?v=4" width="100px;"/><br /><sub><b>Jake Boone</b></sub>](https://github.com/jakeboone02)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=jakeboone02 "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/9748762?v=4" width="100px;"/><br /><sub><b>Amit Dahan</b></sub>](https://github.com/amitdahan)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=amitdahan "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/98167?v=4" width="100px;"/><br /><sub><b>gulderov</b></sub>](https://github.com/gulderov)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=gulderov "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/1964212?v=4" width="100px;"/><br /><sub><b>Erik Pearson</b></sub>](https://github.com/emp823)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=emp823 "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/5342677?v=4" width="100px;"/><br /><sub><b>Bryan Mason</b></sub>](https://github.com/flymason)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=flymason "Documentation") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [<img src="https://avatars1.githubusercontent.com/u/119451?v=4" width="100px;"/><br /><sub><b>Jakub Chodorowicz</b></sub>](http://www.jakub.chodorowicz.pl/)<br />[💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=chodorowicz "Code") | [<img src="https://avatars1.githubusercontent.com/u/7266431?v=4" width="100px;"/><br /><sub><b>Oleg Maslov</b></sub>](https://github.com/mleg)<br />[🐛](https://github.com/piotrwitek/react-redux-typescript-guide/issues?q=author%3Amleg "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/3393293?v=4" width="100px;"/><br /><sub><b>Aaron Westbrook</b></sub>](https://github.com/awestbro)<br />[🐛](https://github.com/piotrwitek/react-redux-typescript-guide/issues?q=author%3Aawestbro "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/14539?v=4" width="100px;"/><br /><sub><b>Peter Blazejewicz</b></sub>](http://www.linkedin.com/in/peterblazejewicz)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=peterblazejewicz "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/1642?v=4" width="100px;"/><br /><sub><b>Solomon White</b></sub>](https://github.com/rubysolo)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=rubysolo "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/8838006?v=4" width="100px;"/><br /><sub><b>Levi Rocha</b></sub>](https://github.com/pino)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=pino "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/41281835?v=4" width="100px;"/><br /><sub><b>Sudachi-kun</b></sub>](http://cloudnative.co.jp)<br />[💵](#financial-loadbalance-sudachi-kun "Financial") |
| [<img src="https://avatars1.githubusercontent.com/u/14838850?v=4" width="100px;"/><br /><sub><b>Sosuke Suzuki</b></sub>](http://sosukesuzuki.github.io)<br />[💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=sosukesuzuki "Code") | [<img src="https://avatars0.githubusercontent.com/u/74433?v=4" width="100px;"/><br /><sub><b>Tom Rathbone</b></sub>](https://github.com/chillitom)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=chillitom "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/4654382?v=4" width="100px;"/><br /><sub><b>Arshad Kazmi</b></sub>](https://arshadkazmi42.github.io/)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=arshadkazmi42 "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/8815362?v=4" width="100px;"/><br /><sub><b>JeongUkJae</b></sub>](https://jeongukjae.github.io)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=JeongUkJae "Documentation") |
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2016 Piotr Witek <piotrek.witek@gmail.com> (http://piotrwitek.github.io)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<div align="center">
# React & Redux in TypeScript - Complete Guide
_"This guide is a **living compendium** documenting the most important patterns and recipes on how to use **React** (and its Ecosystem) in a **functional style** using **TypeScript**. It will help you make your code **completely type-safe** while focusing on **inferring the types from implementation** so there is less noise coming from excessive type annotations and it's easier to write and maintain correct types in the long run."_
[](https://spectrum.chat/react-redux-ts)
[](https://gitter.im/react-redux-typescript-guide/Lobby)
_Found it useful? Want more updates?_
[**Show your support by giving a :star:**](https://github.com/piotrwitek/react-redux-typescript-guide/stargazers)
<a href="https://www.buymeacoffee.com/piotrekwitek">
<img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me a Coffee">
</a>
<a href="https://www.patreon.com/piotrekwitek">
<img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" alt="Become a Patron" width="160">
</a>
<br/><hr/>
## **What's new?**
:tada: _Now updated to support **TypeScript v4.6**_ :tada:
:rocket: _Updated to `typesafe-actions@5.x` :rocket:
<hr/><br/>
</div>
### **Goals**
- Complete type safety (with [`--strict`](https://www.typescriptlang.org/docs/handbook/compiler-options.html) flag) without losing type information downstream through all the layers of our application (e.g. no type assertions or hacking with `any` type)
- Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like **Type Inference** and **Control flow analysis**
- Reduce repetition and complexity of types with TypeScript focused [complementary libraries](#react-redux-typescript-ecosystem)
### **React, Redux, Typescript Ecosystem**
- [typesafe-actions](https://github.com/piotrwitek/typesafe-actions) - Typesafe utilities for "action-creators" in Redux / Flux Architecture
- [utility-types](https://github.com/piotrwitek/utility-types) - Collection of generic types for TypeScript, complementing built-in mapped types and aliases - think lodash for reusable types.
- [react-redux-typescript-scripts](https://github.com/piotrwitek/react-redux-typescript-scripts) - dev-tools configuration files shared between projects based on this guide
### **Examples**
- Todo-App playground: [Codesandbox](https://codesandbox.io/s/github/piotrwitek/typesafe-actions/tree/master/codesandbox)
- React, Redux, TypeScript - RealWorld App: [Github](https://github.com/piotrwitek/react-redux-typescript-realworld-app) | [Demo](https://react-redux-typescript-realworld-app.netlify.com/)
### **Playground Project**
[](https://semaphoreci.com/piotrekwitek/react-redux-typescript-guide)
Check out our Playground Project located in the `/playground` folder. It contains all source files of the code examples found in the guide. They are all tested with the most recent version of TypeScript and 3rd party type-definitions (like `@types/react` or `@types/react-redux`) to ensure the examples are up-to-date and not broken with updated definitions (It's based on `create-react-app --typescript`).
> Playground project was created so that you can simply clone the repository locally and immediately play around with all the component patterns found in the guide. It will help you to learn all the examples from this guide in a real project environment without the need to create complicated environment setup by yourself.
## Contributing Guide
You can help make this project better by contributing. If you're planning to contribute please make sure to check our contributing guide: [CONTRIBUTING.md](/CONTRIBUTING.md)
## Funding
You can also help by funding issues.
Issues like bug fixes or feature requests can be very quickly resolved when funded through the IssueHunt platform.
I highly recommend to add a bounty to the issue that you're waiting for to increase priority and attract contributors willing to work on it.
[](https://issuehunt.io/repos/76996763)
---
🌟 - _New or updated section_
## Table of Contents
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
- [React Types Cheatsheet](#react-types-cheatsheet)
- [`React.FC<Props>` | `React.FunctionComponent<Props>`](#reactfcprops--reactfunctioncomponentprops)
- [`React.Component<Props, State>`](#reactcomponentprops-state)
- [`React.ComponentType<Props>`](#reactcomponenttypeprops)
- [`React.ComponentProps<typeof XXX>`](#reactcomponentpropstypeof-xxx)
- [`React.ReactElement` | `JSX.Element`](#reactreactelement--jsxelement)
- [`React.ReactNode`](#reactreactnode)
- [`React.CSSProperties`](#reactcssproperties)
- [`React.XXXHTMLAttributes<HTMLXXXElement>`](#reactxxxhtmlattributeshtmlxxxelement)
- [`React.ReactEventHandler<HTMLXXXElement>`](#reactreacteventhandlerhtmlxxxelement)
- [`React.XXXEvent<HTMLXXXElement>`](#reactxxxeventhtmlxxxelement)
- [React](#react)
- [Function Components - FC](#function-components---fc)
- [- Counter Component](#--counter-component)
- [- Counter Component with default props](#--counter-component-with-default-props)
- [- Spreading attributes in Component](#--spreading-attributes-in-component)
- [Class Components](#class-components)
- [- Class Counter Component](#--class-counter-component)
- [- Class Component with default props](#--class-component-with-default-props)
- [Generic Components](#generic-components)
- [- Generic List Component](#--generic-list-component)
- [Hooks](#hooks)
- [- useState](#--usestate)
- [- useContext](#--usecontext)
- [- useReducer](#--usereducer)
- [Render Props](#render-props)
- [- Name Provider Component](#--name-provider-component)
- [- Mouse Provider Component](#--mouse-provider-component)
- [Higher-Order Components](#higher-order-components)
- [- HOC wrapping a component](#--hoc-wrapping-a-component)
- [- HOC wrapping a component and injecting props](#--hoc-wrapping-a-component-and-injecting-props)
- [- Nested HOC - wrapping a component, injecting props and connecting to redux 🌟](#--nested-hoc---wrapping-a-component-injecting-props-and-connecting-to-redux-)
- [Redux Connected Components](#redux-connected-components)
- [- Redux connected counter](#--redux-connected-counter)
- [- Redux connected counter with own props](#--redux-connected-counter-with-own-props)
- [- Redux connected counter via hooks](#--redux-connected-counter-via-hooks)
- [- Redux connected counter with `redux-thunk` integration](#--redux-connected-counter-with-redux-thunk-integration)
- [Context](#context)
- [ThemeContext](#themecontext)
- [ThemeProvider](#themeprovider)
- [ThemeConsumer](#themeconsumer)
- [ThemeConsumer in class component](#themeconsumer-in-class-component)
- [Redux](#redux)
- [Store Configuration](#store-configuration)
- [Create Global Store Types](#create-global-store-types)
- [Create Store](#create-store)
- [Action Creators 🌟](#action-creators-)
- [Reducers](#reducers)
- [State with Type-level Immutability](#state-with-type-level-immutability)
- [Typing reducer](#typing-reducer)
- [Typing reducer with `typesafe-actions`](#typing-reducer-with-typesafe-actions)
- [Testing reducer](#testing-reducer)
- [Async Flow with `redux-observable`](#async-flow-with-redux-observable)
- [Typing epics](#typing-epics)
- [Testing epics](#testing-epics)
- [Selectors with `reselect`](#selectors-with-reselect)
- [Connect with `react-redux`](#connect-with-react-redux)
- [Typing connected component](#typing-connected-component)
- [Typing `useSelector` and `useDispatch`](#typing-useselector-and-usedispatch)
- [Typing connected component with `redux-thunk` integration](#typing-connected-component-with-redux-thunk-integration)
- [Configuration & Dev Tools](#configuration--dev-tools)
- [Common Npm Scripts](#common-npm-scripts)
- [tsconfig.json](#tsconfigjson)
- [TSLib](#tslib)
- [ESLint](#eslint)
- [.eslintrc.js](#eslintrcjs)
- [Jest](#jest)
- [jest.config.json](#jestconfigjson)
- [jest.stubs.js](#jeststubsjs)
- [Style Guides](#style-guides)
- [react-styleguidist](#react-styleguidist)
- [FAQ](#faq)
- [Ambient Modules](#ambient-modules)
- [Imports in ambient modules](#imports-in-ambient-modules)
- [Type-Definitions](#type-definitions)
- [Missing type-definitions error](#missing-type-definitions-error)
- [Using custom `d.ts` files for npm modules](#using-custom-dts-files-for-npm-modules)
- [Type Augmentation](#type-augmentation)
- [Augmenting library internal declarations - using relative import](#augmenting-library-internal-declarations---using-relative-import)
- [Augmenting library public declarations - using node_modules import](#augmenting-library-public-declarations---using-node_modules-import)
- [Misc](#misc)
- [- should I still use React.PropTypes in TS?](#--should-i-still-use-reactproptypes-in-ts)
- [- when to use `interface` declarations and when `type` aliases?](#--when-to-use-interface-declarations-and-when-type-aliases)
- [- what's better default or named exports?](#--whats-better-default-or-named-exports)
- [- how to best initialize class instance or static properties?](#--how-to-best-initialize-class-instance-or-static-properties)
- [- how to best declare component handler functions?](#--how-to-best-declare-component-handler-functions)
- [Tutorials & Articles](#tutorials--articles)
- [Contributors](#contributors)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
---
# Installation
## Types for React & Redux
```
npm i -D @types/react @types/react-dom @types/react-redux
```
"react" - `@types/react`
"react-dom" - `@types/react-dom`
"redux" - (types included with npm package)*
"react-redux" - `@types/react-redux`
> *NB: Guide is based on types for Redux >= v4.x.x.
[⇧ back to top](#table-of-contents)
---
## React Types Cheatsheet
### `React.FC<Props>` | `React.FunctionComponent<Props>`
Type representing a functional component
```tsx
const MyComponent: React.FC<Props> = ...
```
### `React.Component<Props, State>`
Type representing a class component
```tsx
class MyComponent extends React.Component<Props, State> { ...
```
### `React.ComponentType<Props>`
Type representing union of (`React.FC<Props> | React.Component<Props>`) - used in HOC
```tsx
const withState = <P extends WrappedComponentProps>(
WrappedComponent: React.ComponentType<P>,
) => { ...
```
### `React.ComponentProps<typeof XXX>`
Gets Props type of a specified component XXX (WARNING: does not work with statically declared default props and generic props)
```tsx
type MyComponentProps = React.ComponentProps<typeof MyComponent>;
```
### `React.ReactElement` | `JSX.Element`
Type representing a concept of React Element - representation of a native DOM component (e.g. `<div />`), or a user-defined composite component (e.g. `<MyComponent />`)
```tsx
const elementOnly: React.ReactElement = <div /> || <MyComponent />;
```
### `React.ReactNode`
Type representing any possible type of React node (basically ReactElement (including Fragments and Portals) + primitive JS types)
```tsx
const elementOrPrimitive: React.ReactNode = 'string' || 0 || false || null || undefined || <div /> || <MyComponent />;
const Component = ({ children: React.ReactNode }) => ...
```
### `React.CSSProperties`
Type representing style object in JSX - for css-in-js styles
```tsx
const styles: React.CSSProperties = { flexDirection: 'row', ...
const element = <div style={styles} ...
```
### `React.XXXHTMLAttributes<HTMLXXXElement>`
Type representing HTML attributes of specified HTML Element - for extending HTML Elements
```tsx
const Input: React.FC<Props & React.InputHTMLAttributes<HTMLInputElement>> = props => { ... }
<Input about={...} accept={...} alt={...} ... />
```
### `React.ReactEventHandler<HTMLXXXElement>`
Type representing generic event handler - for declaring event handlers
```tsx
const handleChange: React.ReactEventHandler<HTMLInputElement> = (ev) => { ... }
<input onChange={handleChange} ... />
```
### `React.XXXEvent<HTMLXXXElement>`
Type representing more specific event. Some common event examples: `ChangeEvent, FormEvent, FocusEvent, KeyboardEvent, MouseEvent, DragEvent, PointerEvent, WheelEvent, TouchEvent`.
```tsx
const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }
<div onMouseMove={handleChange} ... />
```
In code above `React.MouseEvent<HTMLDivElement>` is type of mouse event, and this event happened on `HTMLDivElement`
[⇧ back to top](#table-of-contents)
---
# React
## Function Components - FC
### - Counter Component
```tsx
import * as React from 'react';
type Props = {
label: string;
count: number;
onIncrement: () => void;
};
export const FCCounter: React.FC<Props> = props => {
const { label, count, onIncrement } = props;
const handleIncrement = () => {
onIncrement();
};
return (
<div>
<span>
{label}: {count}
</span>
<button type="button" onClick={handleIncrement}>
{`Increment`}
</button>
</div>
);
};
```
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fccounter)
[⇧ back to top](#table-of-contents)
### - Counter Component with default props
```tsx
import * as React from 'react';
type Props = {
label: string;
count: number;
onIncrement: () => void;
};
// React.FC is unaplicable here due not working properly with default props
// https://github.com/facebook/create-react-app/pull/8177
export const FCCounterWithDefaultProps = (props: Props): JSX.Element => {
const { label, count, onIncrement } = props;
const handleIncrement = () => {
onIncrement();
};
return (
<div>
<span>
{label}: {count}
</span>
<button type="button" onClick={handleIncrement}>
{`Increment`}
</button>
</div>
);
};
FCCounterWithDefaultProps.defaultProps = { count: 5 };
```
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fccounterwithdefaultprops)
[⇧ back to top](#table-of-contents)
### - [Spreading attributes](https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes) in Component
```tsx
import * as React from 'react';
type Props = React.PropsWithChildren<{
className?: string;
style?: React.CSSProperties;
}>;
export const FCSpreadAttributes: React.FC<Props> = (props) => {
const { children, ...restProps } = props;
return <div {...restProps}>{children}</div>;
};
```
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fcspreadattributes)
[⇧ back to top](#table-of-contents)
---
## Class Components
### - Class Counter Component
```tsx
import * as React from 'react';
type Props = {
label: string;
};
type State = {
count: number;
};
export class ClassCounter extends React.Component<Props, State> {
readonly state: State = {
count: 0,
};
handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
const { handleIncrement } = this;
const { label } = this.props;
const { count } = this.state;
return (
<div>
<span>
{label}: {count}
</span>
<button type="button" onClick={handleIncrement}>
{`Increment`}
</button>
</div>
);
}
}
```
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounter)
[⇧ back to top](#table-of-contents)
### - Class Component with default props
```tsx
import * as React from 'react';
type Props = {
label: string;
initialCount: number;
};
type State = {
count: number;
};
export class ClassCounterWithDefaultProps extends React.Component<
Props,
State
> {
static defaultProps = {
initialCount: 0,
};
readonly state: State = {
count: this.props.initialCount,
};
handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
const { handleIncrement } = this;
const { label } = this.props;
const { count } = this.state;
return (
<div>
<span>
{label}: {count}
</span>
<button type="button" onClick={handleIncrement}>
{`Increment`}
</button>
</div>
);
}
}
```
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounterwithdefaultprops)
[⇧ back to top](#table-of-contents)
---
## Generic Components
- easily create typed component variations and reuse common logic
- common use case is a generic list components
### - Generic List Component
```tsx
import * as React from 'react';
export interface GenericListProps<T> {
items: T[];
itemRenderer: (item: T) => JSX.Element;
}
export class GenericList<T> extends React.Component<GenericListProps<T>, {}> {
render() {
const { items, itemRenderer } = this.props;
return (
<div>
{items.map(itemRenderer)}
</div>
);
}
}
```
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#genericlist)
[⇧ back to top](#table-of-contents)
---
## Hooks
> <https://reactjs.org/docs/hooks-intro.html>
### - useState
> <https://reactjs.org/docs/hooks-reference.html#usestate>
```tsx
import * as React from 'react';
type Props = { initialCount: number };
export default function Counter({initialCount}: Props) {
const [count, setCount] = React.useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
</>
);
}
```
[⇧ back to top](#table-of-contents)
### - useContext
> <https://reactjs.org/docs/hooks-reference.html#usecontext>
```tsx
import * as React from 'react';
import ThemeContext from '../context/theme-context';
type Props = {};
export default function ThemeToggleButton(props: Props) {
const { theme, toggleTheme } = React.useContext(ThemeContext);
return (
<button onClick={toggleTheme} style={theme} >
Toggle Theme
</button>
);
}
```
[⇧ back to top](#table-of-contents)
### - useReducer
> <https://reactjs.org/docs/hooks-reference.html#usereducer>
```tsx
import * as React from 'react';
interface State {
count: number;
}
type Action = { type: 'reset' } | { type: 'increment' } | { type: 'decrement' };
function reducer(state: State, action: Action): State {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
case 'reset':
return { count: 0 };
default:
throw new Error();
}
}
interface CounterProps {
initialCount: number;
}
function Counter({ initialCount }: CounterProps) {
const [state, dispatch] = React.useReducer(reducer, {
count: initialCount,
});
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</>
);
}
export default Counter;
```
[⇧ back to top](#table-of-contents)
---
## Render Props
> <https://reactjs.org/docs/render-props.html>
### - Name Provider Component
Simple component using children as a render prop
```tsx
import * as React from 'react';
interface NameProviderProps {
children: (state: NameProviderState) => React.ReactNode;
}
interface NameProviderState {
readonly name: string;
}
export class NameProvider extends React.Component<NameProviderProps, NameProviderState> {
readonly state: NameProviderState = { name: 'Piotr' };
render() {
return this.props.children(this.state);
}
}
```
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#nameprovider)
[⇧ back to top](#table-of-contents)
### - Mouse Provider Component
`Mouse` component found in [Render Props React Docs](https://reactjs.org/docs/render-props.html#use-render-props-for-cross-cutting-concerns)
```tsx
import * as React from 'react';
export interface MouseProviderProps {
render: (state: MouseProviderState) => React.ReactNode;
}
interface MouseProviderState {
readonly x: number;
readonly y: number;
}
export class MouseProvider extends React.Component<MouseProviderProps, MouseProviderState> {
readonly state: MouseProviderState = { x: 0, y: 0 };
handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
this.setState({
x: event.clientX,
y: event.clientY,
});
};
render() {
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
{/*
Instead of providing a static representation of what <Mouse> renders,
use the `render` prop to dynamically determine what to render.
*/}
{this.props.render(this.state)}
</div>
);
}
}
```
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#mouseprovider)
[⇧ back to top](#table-of-contents)
---
## Higher-Order Components
> <https://reactjs.org/docs/higher-order-components.html>
### - HOC wrapping a component
Adds state to a stateless counter
```tsx
import React from 'react';
import { Diff } from 'utility-types';
// These props will be injected into the base component
interface InjectedProps {
count: number;
onIncrement: () => void;
}
export const withState = <BaseProps extends InjectedProps>(
BaseComponent: React.ComponentType<BaseProps>
) => {
type HocProps = Diff<BaseProps, InjectedProps> & {
// here you can extend hoc with new props
initialCount?: number;
};
type HocState = {
readonly count: number;
};
return class Hoc extends React.Component<HocProps, HocState> {
// Enhance component name for debugging and React-Dev-Tools
static displayName = `withState(${BaseComponent.name})`;
// reference to original wrapped component
static readonly WrappedComponent = BaseComponent;
readonly state: HocState = {
count: Number(this.props.initialCount) || 0,
};
handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
const { ...restProps } = this.props;
const { count } = this.state;
return (
<BaseComponent
{...(restProps as BaseProps)}
count={count} // injected
onIncrement={this.handleIncrement} // injected
/>
);
}
};
};
```
<details><summary><i>Click to expand</i></summary><p>
```tsx
import * as React from 'react';
import { withState } from '../hoc';
import { FCCounter } from '../components';
const FCCounterWithState = withState(FCCounter);
export default () => <FCCounterWithState label={'FCCounterWithState'} />;
```
</p></details>
[⇧ back to top](#table-of-contents)
### - HOC wrapping a component and injecting props
Adds error handling using componentDidCatch to any component
```tsx
import React from 'react';
const MISSING_ERROR = 'Error was swallowed during propagation.';
export const withErrorBoundary = <BaseProps extends {}>(
BaseComponent: React.ComponentType<BaseProps>
) => {
type HocProps = React.PropsWithChildren<{
// here you can extend hoc with new props
}>;
type HocState = {
readonly error: Error | null | undefined;
};
return class Hoc extends React.Component<HocProps, HocState> {
// Enhance component name for debugging and React-Dev-Tools
static displayName = `withErrorBoundary(${BaseComponent.name})`;
// reference to original wrapped component
static readonly WrappedComponent = BaseComponent;
readonly state: HocState = {
error: undefined,
};
componentDidCatch(error: Error | null, info: object) {
this.setState({ error: error || new Error(MISSING_ERROR) });
this.logErrorToCloud(error, info);
}
logErrorToCloud = (error: Error | null, info: object) => {
// TODO: send error report to service provider
};
render() {
const { children, ...restProps } = this.props;
const { error } = this.state;
if (error) {
return <BaseComponent {...(restProps as BaseProps)} />;
}
return children;
}
};
};
```
<details><summary><i>Click to expand</i></summary><p>
```tsx
import React, {useState} from 'react';
import { withErrorBoundary } from '../hoc';
import { ErrorMessage } from '../components';
const ErrorMessageWithErrorBoundary =
withErrorBoundary(ErrorMessage);
const BrokenComponent = () => {
throw new Error('I\'m broken! Don\'t render me.');
};
const BrokenButton = () => {
const [shouldRenderBrokenComponent, setShouldRenderBrokenComponent] =
useState(false);
if (shouldRenderBrokenComponent) {
return <BrokenComponent />;
}
return (
<button
type="button"
onClick={() => {
setShouldRenderBrokenComponent(true);
}}
>
{`Throw nasty error`}
</button>
);
};
export default () => (
<ErrorMessageWithErrorBoundary>
<BrokenButton />
</ErrorMessageWithErrorBoundary>
);
```
</p></details>
[⇧ back to top](#table-of-contents)
### - Nested HOC - wrapping a component, injecting props and connecting to redux 🌟
Adds error handling using componentDidCatch to any component
```tsx
import { RootState } from 'MyTypes';
import React from 'react';
import { connect } from 'react-redux';
import { Diff } from 'utility-types';
import { countersActions, countersSelectors } from '../features/counters';
// These props will be injected into the base component
interface InjectedProps {
count: number;
onIncrement: () => void;
}
export const withConnectedCount = <BaseProps extends InjectedProps>(
BaseComponent: React.ComponentType<BaseProps>
) => {
const mapStateToProps = (state: RootState) => ({
count: countersSelectors.getReduxCounter(state.counters),
});
const dispatchProps = {
onIncrement: countersActions.increment,
};
type HocProps = ReturnType<typeof mapStateToProps> &
typeof dispatchProps & {
// here you can extend ConnectedHoc with new props
overrideCount?: number;
};
class Hoc extends React.Component<HocProps> {
// Enhance component name for debugging and React-Dev-Tools
static displayName = `withConnectedCount(${BaseComponent.name})`;
// reference to original wrapped component
static readonly WrappedComponent = BaseComponent;
render() {
const { count, onIncrement, overrideCount, ...restProps } = this.props;
return (
<BaseComponent
{...(restProps as BaseProps)}
count={overrideCount || count} // injected
onIncrement={onIncrement} // injected
/>
);
}
}
const ConnectedHoc = connect<
ReturnType<typeof mapStateToProps>,
typeof dispatchProps, // use "undefined" if NOT using dispatchProps
Diff<BaseProps, InjectedProps>,
RootState
>(
mapStateToProps,
dispatchProps
)(Hoc);
return ConnectedHoc;
};
```
<details><summary><i>Click to expand</i></summary><p>
```tsx
import * as React from 'react';
import { withConnectedCount } from '../hoc';
import { FCCounter } from '../components';
const FCCounterWithConnectedCount = withConnectedCount(FCCounter);
export default () => (
<FCCounterWithConnectedCount overrideCount={5} label={'FCCounterWithState'} />
);
```
</p></details>
[⇧ back to top](#table-of-contents)
---
## Redux Connected Components
### - Redux connected counter
```tsx
import Types from 'MyTypes';
import { connect } from 'react-redux';
import { countersActions, countersSelectors } from '../features/counters';
import { FCCounter } from '../components';
const mapStateToProps = (state: Types.RootState) => ({
count: countersSelectors.getReduxCounter(state.counters),
});
const dispatchProps = {
onIncrement: countersActions.increment,
};
export const FCCounterConnected = connect(
mapStateToProps,
dispatchProps
)(FCCounter);
```
<details><summary><i>Click to expand</i></summary><p>
```tsx
import * as React from 'react';
import { FCCounterConnected } from '.';
export default () => <FCCounterConnected label={'FCCounterConnected'} />;
```
</p></details>
[⇧ back to top](#table-of-contents)
### - Redux connected counter with own props
```tsx
import Types from 'MyTypes';
import { connect } from 'react-redux';
import { countersActions, countersSelectors } from '../features/counters';
import { FCCounter } from '../components';
type OwnProps = {
initialCount?: number;
};
const mapStateToProps = (state: Types.RootState, ownProps: OwnProps) => ({
count:
countersSelectors.getReduxCounter(state.counters) +
(ownProps.initialCount || 0),
});
const dispatchProps = {
onIncrement: countersActions.increment,
};
export const FCCounterConnectedOwnProps = connect(
mapStateToProps,
dispatchProps
)(FCCounter);
```
<details><summary><i>Click to expand</i></summary><p>
```tsx
import * as React from 'react';
import { FCCounterConnectedOwnProps } from '.';
export default () => (
<FCCounterConnectedOwnProps
label={'FCCounterConnectedOwnProps'}
initialCount={10}
/>
);
```
</p></details>
[⇧ back to top](#table-of-contents)
### - Redux connected counter via hooks
```tsx
import * as React from 'react';
import { FCCounter } from '../components';
import { increment } from '../features/counters/actions';
import { useSelector, useDispatch } from '../store/hooks';
const FCCounterConnectedHooksUsage: React.FC = () => {
const counter = useSelector(state => state.counters.reduxCounter);
const dispatch = useDispatch();
return <FCCounter label="Use selector" count={counter} onIncrement={() => dispatch(increment())}/>;
};
export default FCCounterConnectedHooksUsage;
```
[⇧ back to top](#table-of-contents)
### - Redux connected counter with `redux-thunk` integration
```tsx
import Types from 'MyTypes';
import { bindActionCreators, Dispatch } from 'redux';
import { connect } from 'react-redux';
import * as React from 'react';
import { countersActions } from '../features/counters';
// Thunk Action
const incrementWithDelay = () => async (dispatch: Dispatch): Promise<void> => {
setTimeout(() => dispatch(countersActions.increment()), 1000);
};
const mapStateToProps = (state: Types.RootState) => ({
count: state.counters.reduxCounter,
});
const mapDispatchToProps = (dispatch: Dispatch<Types.RootAction>) =>
bindActionCreators(
{
onIncrement: incrementWithDelay,
},
dispatch
);
type Props = ReturnType<typeof mapStateToProps> &
ReturnType<typeof mapDispatchToProps> & {
label: string;
};
export const FCCounter: React.FC<Props> = props => {
const { label, count, onIncrement } = props;
const handleIncrement = () => {
// Thunk action is correctly typed as promise
onIncrement().then(() => {
// ...
});
};
return (
<div>
<span>
{label}: {count}
</span>
<button type="button" onClick={handleIncrement}>
{`Increment`}
</button>
</div>
);
};
export const FCCounterConnectedBindActionCreators = connect(
mapStateToProps,
mapDispatchToProps
)(FCCounter);
```
<details><summary><i>Click to expand</i></summary><p>
```tsx
import * as React from 'react';
import { FCCounterConnectedBindActionCreators } from '.';
export default () => (
<FCCounterConnectedBindActionCreators
label={'FCCounterConnectedBindActionCreators'}
/>
);
```
</p></details>
[⇧ back to top](#table-of-contents)
## Context
> <https://reactjs.org/docs/context.html>
### ThemeContext
```tsx
import * as React from 'react';
export type Theme = React.CSSProperties;
type Themes = {
dark: Theme;
light: Theme;
};
export const themes: Themes = {
dark: {
color: 'black',
backgroundColor: 'white',
},
light: {
color: 'white',
backgroundColor: 'black',
},
};
export type ThemeContextProps = { theme: Theme; toggleTheme?: () => void };
const ThemeContext = React.createContext<ThemeContextProps>({ theme: themes.light });
export default ThemeContext;
```
[⇧ back to top](#table-of-contents)
### ThemeProvider
```tsx
import React from 'react';
import ThemeContext, { themes, Theme } from './theme-context';
import ToggleThemeButton from './theme-consumer';
interface State {
theme: Theme;
}
export class ThemeProvider extends React.Component<{}, State> {
readonly state: State = { theme: themes.light };
toggleTheme = () => {
this.setState(state => ({
theme: state.theme === themes.light ? themes.dark : themes.light,
}));
}
render() {
const { theme } = this.state;
const { toggleTheme } = this;
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<ToggleThemeButton />
</ThemeContext.Provider>
);
}
}
```
[⇧ back to top](#table-of-contents)
### ThemeConsumer
```tsx
import * as React from 'react';
import ThemeContext from './theme-context';
type Props = {};
export default function ToggleThemeButton(props: Props) {
return (
<ThemeContext.Consumer>
{({ theme, toggleTheme }) => <button style={theme} onClick={toggleTheme} {...props} />}
</ThemeContext.Consumer>
);
}
```
### ThemeConsumer in class component
```tsx
import * as React from 'react';
import ThemeContext from './theme-context';
type Props = {};
export class ToggleThemeButtonClass extends React.Component<Props> {
static contextType = ThemeContext;
declare context: React.ContextType<typeof ThemeContext>;
render() {
const { theme, toggleTheme } = this.context;
return (
<button style={theme} onClick={toggleTheme}>
Toggle Theme
</button>
);
}
}
```
[Implementation with Hooks](#--usecontext)
[⇧ back to top](#table-of-contents)
---
# Redux
## Store Configuration
### Create Global Store Types
#### `RootState` - type representing root state-tree
Can be imported in connected components to provide type-safety to Redux `connect` function
#### `RootAction` - type representing union type of all action objects
Can be imported in various layers receiving or sending redux actions like: reducers, sagas or redux-observables epics
```tsx
import { StateType, ActionType } from 'typesafe-actions';
declare module 'MyTypes' {
export type Store = StateType<typeof import('./store').default>;
export type RootAction = ActionType<typeof import('./root-action').default>;
export type RootState = StateType<ReturnType<typeof import('./root-reducer').default>>;
}
declare module 'typesafe-actions' {
interface Types {
RootAction: ActionType<typeof import('./root-action').default>;
}
}
```
[⇧ back to top](#table-of-contents)
### Create Store
When creating a store instance we don't need to provide any additional types. It will set-up a **type-safe Store instance** using type inference.
> The resulting store instance methods like `getState` or `dispatch` will be type checked and will expose all type errors
```tsx
import { RootAction, RootState, Services } from 'MyTypes';
import { applyMiddleware, createStore } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import services from '../services';
import { routerMiddleware } from './redux-router';
import rootEpic from './root-epic';
import rootReducer from './root-reducer';
import { composeEnhancers } from './utils';
const epicMiddleware = createEpicMiddleware<
RootAction,
RootAction,
RootState,
Services
>({
dependencies: services,
});
// configure middlewares
const middlewares = [epicMiddleware, routerMiddleware];
// compose enhancers
const enhancer = composeEnhancers(applyMiddleware(...middlewares));
// rehydrate state on app start
const initialState = {};
// create store
const store = createStore(
rootReducer,
initialState,
enhancer
);
epicMiddleware.run(rootEpic);
// export store singleton instance
export default store;
```
---
## Action Creators 🌟
> We'll be using a battle-tested helper library [`typesafe-actions`](https://github.com/piotrwitek/typesafe-actions#typesafe-actions) [](https://www.npmjs.com/package/typesafe-actions) [](https://www.npmjs.com/package/typesafe-actions) that's designed to make it easy and fun working with **Redux** in **TypeScript**.
> To learn more please check this in-depth tutorial: [Typesafe-Actions - Tutorial](https://github.com/piotrwitek/typesafe-actions#tutorial)!
A solution below is using a simple factory function to automate the creation of type-safe action creators. The goal is to decrease maintenance effort and reduce code repetition of type annotations for actions and creators. The result is completely typesafe action-creators and their actions.
```tsx
/* eslint-disable */
import { action } from 'typesafe-actions';
import { ADD, INCREMENT } from './constants';
/* SIMPLE API */
export const increment = () => action(INCREMENT);
export const add = (amount: number) => action(ADD, amount);
/* ADVANCED API */
// More flexible allowing to create complex actions more easily
// use can use "action-creator" instance in place of "type constant"
// e.g. case getType(increment): return action.payload;
// This will allow to completely eliminate need for "constants" in your application, more info here:
// https://github.com/piotrwitek/typesafe-actions#constants
import { createAction } from 'typesafe-actions';
import { Todo } from '../todos/models';
export const emptyAction = createAction(INCREMENT)<void>();
export const payloadAction = createAction(ADD)<number>();
export const payloadMetaAction = createAction(ADD)<number, string>();
export const payloadCreatorAction = createAction(
'TOGGLE_TODO',
(todo: Todo) => todo.id
)<string>();
```
<details><summary><i>Click to expand</i></summary><p>
```tsx
import { store } from '../../store/';
import { countersActions as counter } from '../counters';
// store.dispatch(counter.increment(1)); // Error: Expected 0 arguments, but got 1.
store.dispatch(counter.increment()); // OK
// store.dispatch(counter.add()); // Error: Expected 1 arguments, but got 0.
store.dispatch(counter.add(1)); // OK
```
</p></details>
[⇧ back to top](#table-of-contents)
---
## Reducers
### State with Type-level Immutability
Declare reducer `State` type with `readonly` modifier to get compile time immutability
```ts
export type State = {
readonly counter: number;
readonly todos: ReadonlyArray<string>;
};
```
Readonly modifier allow initialization, but will not allow reassignment by highlighting compiler errors
```ts
export const initialState: State = {
counter: 0,
}; // OK
initialState.counter = 3; // TS Error: cannot be mutated
```
It's great for **Arrays in JS** because it will error when using mutator methods like (`push`, `pop`, `splice`, ...), but it'll still allow immutable methods like (`concat`, `map`, `slice`,...).
```ts
state.todos.push('Learn about tagged union types') // TS Error: Property 'push' does not exist on type 'ReadonlyArray<string>'
const newTodos = state.todos.concat('Learn about tagged union types') // OK
```
#### Caveat - `Readonly` is not recursive
This means that the `readonly` modifier doesn't propagate immutability down the nested structure of objects. You'll need to mark each property on each level explicitly.
> **TIP:** use `Readonly` or `ReadonlyArray` [Mapped types](https://www.typescriptlang.org/docs/handbook/advanced-types.html)
```ts
export type State = Readonly<{
counterPairs: ReadonlyArray<Readonly<{
immutableCounter1: number,
immutableCounter2: number,
}>>,
}>;
state.counterPairs[0] = { immutableCounter1: 1, immutableCounter2: 1 }; // TS Error: cannot be mutated
state.counterPairs[0].immutableCounter1 = 1; // TS Error: cannot be mutated
state.counterPairs[0].immutableCounter2 = 1; // TS Error: cannot be mutated
```
#### Solution - recursive `Readonly` is called `DeepReadonly`
To fix this we can use [`DeepReadonly`](https://github.com/piotrwitek/utility-types#deepreadonlyt) type (available from `utility-types`).
```ts
import { DeepReadonly } from 'utility-types';
export type State = DeepReadonly<{
containerObject: {
innerValue: number,
numbers: number[],
}
}>;
state.containerObject = { innerValue: 1 }; // TS Error: cannot be mutated
state.containerObject.innerValue = 1; // TS Error: cannot be mutated
state.containerObject.numbers.push(1); // TS Error: cannot use mutator methods
```
[⇧ back to top](#table-of-contents)
### Typing reducer
> to understand following section make sure to learn about [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html), [Control flow analysis](https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#control-flow-based-type-analysis) and [Tagged union types](https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#tagged-union-types)
```tsx
import { combineReducers } from 'redux';
import { ActionType } from 'typesafe-actions';
import { Todo, TodosFilter } from './models';
import * as actions from './actions';
import { ADD, CHANGE_FILTER, TOGGLE } from './constants';
export type TodosAction = ActionType<typeof actions>;
export type TodosState = Readonly<{
todos: Todo[];
todosFilter: TodosFilter;
}>;
const initialState: TodosState = {
todos: [],
todosFilter: TodosFilter.All,
};
export default combineReducers<TodosState, TodosAction>({
todos: (state = initialState.todos, action) => {
switch (action.type) {
case ADD:
return [...state, action.payload];
case TOGGLE:
return state.map(item =>
item.id === action.payload
? { ...item, completed: !item.completed }
: item
);
default:
return state;
}
},
todosFilter: (state = initialState.todosFilter, action) => {
switch (action.type) {
case CHANGE_FILTER:
return action.payload;
default:
return state;
}
},
});
```
[⇧ back to top](#table-of-contents)
### Typing reducer with `typesafe-actions`
> Notice we are not required to use any generic type parameter in the API. Try to compare it with regular reducer as they are equivalent.
```tsx
import { combineReducers } from 'redux';
import { createReducer } from 'typesafe-actions';
import { Todo, TodosFilter } from './models';
import { ADD, CHANGE_FILTER, TOGGLE } from './constants';
export type TodosState = Readonly<{
todos: Todo[];
todosFilter: TodosFilter;
}>;
const initialState: TodosState = {
todos: [],
todosFilter: TodosFilter.All,
};
const todos = createReducer(initialState.todos)
.handleType(ADD, (state, action) => [...state, action.payload])
.handleType(TOGGLE, (state, action) =>
state.map(item =>
item.id === action.payload
? { ...item, completed: !item.completed }
: item
)
);
const todosFilter = createReducer(initialState.todosFilter).handleType(
CHANGE_FILTER,
(state, action) => action.payload
);
export default combineReducers({
todos,
todosFilter,
});
```
[⇧ back to top](#table-of-contents)
### Testing reducer
```tsx
import {
todosReducer as reducer,
todosActions as actions,
} from './';
import { TodosState } from './reducer';
/**
* FIXTURES
*/
const getInitialState = (initial?: Partial<TodosState>) =>
reducer(initial as TodosState, {} as any);
/**
* STORIES
*/
describe('Todos Stories', () => {
describe('initial state', () => {
it('should match a snapshot', () => {
const initialState = getInitialState();
expect(initialState).toMatchSnapshot();
});
});
describe('adding todos', () => {
it('should add a new todo as the first element', () => {
const initialState = getInitialState();
expect(initialState.todos).toHaveLength(0);
const state = reducer(initialState, actions.add('new todo'));
expect(state.todos).toHaveLength(1);
expect(state.todos[0].title).toEqual('new todo');
});
});
describe('toggling completion state', () => {
it('should mark active todo as complete', () => {
const activeTodo = { id: '1', completed: false, title: 'active todo' };
const initialState = getInitialState({ todos: [activeTodo] });
expect(initialState.todos[0].completed).toBeFalsy();
const state1 = reducer(initialState, actions.toggle(activeTodo.id));
expect(state1.todos[0].completed).toBeTruthy();
});
});
});
```
[⇧ back to top](#table-of-contents)
---
## Async Flow with `redux-observable`
### Typing epics
```tsx
import { RootAction, RootState, Services } from 'MyTypes';
import { Epic } from 'redux-observable';
import { tap, ignoreElements, filter } from 'rxjs/operators';
import { isOfType } from 'typesafe-actions';
import { todosConstants } from '../todos';
// contrived example!!!
export const logAddAction: Epic<RootAction, RootAction, RootState, Services> = (
action$,
state$,
{ logger }
) =>
action$.pipe(
filter(isOfType(todosConstants.ADD)), // action is narrowed to: { type: "ADD_TODO"; payload: string; }
tap(action => {
logger.log(
`action type must be equal: ${todosConstants.ADD} === ${action.type}`
);
}),
ignoreElements()
);
```
[⇧ back to top](#table-of-contents)
### Testing epics
```tsx
import { StateObservable, ActionsObservable } from 'redux-observable';
import { RootState, RootAction } from 'MyTypes';
import { Subject } from 'rxjs';
import { add } from './actions';
import { logAddAction } from './epics';
// Simple typesafe mock of all the services, you dont't need to mock anything else
// It is decoupled and reusable for all your tests, just put it in a separate file
const services = {
logger: {
log: jest.fn(),
},
localStorage: {
loadState: jest.fn(),
saveState: jest.fn(),
},
};
describe('Todos Epics', () => {
let state$: StateObservable<RootState>;
beforeEach(() => {
state$ = new StateObservable<RootState>(
new Subject<RootState>(),
undefined as any
);
});
describe('logging todos actions', () => {
beforeEach(() => {
services.logger.log.mockClear();
});
it('should call the logger service when adding a new todo', done => {
const addTodoAction = add('new todo');
const action$ = ActionsObservable.of(addTodoAction);
logAddAction(action$, state$, services)
.toPromise()
.then((outputAction: RootAction) => {
expect(services.logger.log).toHaveBeenCalledTimes(1);
expect(services.logger.log).toHaveBeenCalledWith(
'action type must be equal: todos/ADD === todos/ADD'
);
// expect output undefined because we're using "ignoreElements" in epic
expect(outputAction).toEqual(undefined);
done();
});
});
});
});
```
[⇧ back to top](#table-of-contents)
---
## Selectors with `reselect`
```tsx
import { createSelector } from 'reselect';
import { TodosState } from './reducer';
export const getTodos = (state: TodosState) => state.todos;
export const getTodosFilter = (state: TodosState) => state.todosFilter;
export const getFilteredTodos = createSelector(getTodos, getTodosFilter, (todos, todosFilter) => {
switch (todosFilter) {
case 'completed':
return todos.filter(t => t.completed);
case 'active':
return todos.filter(t => !t.completed);
default:
return todos;
}
});
```
[⇧ back to top](#table-of-contents)
---
## Connect with `react-redux`
### Typing connected component
_**NOTE**: Below you'll find a short explanation of concepts behind using `connect` with TypeScript. For more detailed examples please check [Redux Connected Components](#redux-connected-components) section._
```tsx
import MyTypes from 'MyTypes';
import { bindActionCreators, Dispatch, ActionCreatorsMapObject } from 'redux';
import { connect } from 'react-redux';
import { countersActions } from '../features/counters';
import { FCCounter } from '../components';
// Type annotation for "state" argument is mandatory to check
// the correct shape of state object and injected props you can also
// extend connected component Props interface by annotating `ownProps` argument
const mapStateToProps = (state: MyTypes.RootState, ownProps: FCCounterProps) => ({
count: state.counters.reduxCounter,
});
// "dispatch" argument needs an annotation to check the correct shape
// of an action object when using dispatch function
const mapDispatchToProps = (dispatch: Dispatch<MyTypes.RootAction>) =>
bindActionCreators({
onIncrement: countersActions.increment,
}, dispatch);
// shorter alternative is to use an object instead of mapDispatchToProps function
const dispatchToProps = {
onIncrement: countersActions.increment,
};
// Notice we don't need to pass any generic type parameters to neither
// the connect function below nor map functions declared above
// because type inference will infer types from arguments annotations automatically
// This is much cleaner and idiomatic approach
export const FCCounterConnected =
connect(mapStateToProps, mapDispatchToProps)(FCCounter);
// You can add extra layer of validation of your action creators
// by using bindActionCreators generic type parameter and RootAction type
const mapDispatchToProps = (dispatch: Dispatch<MyTypes.RootAction>) =>
bindActionCreators<ActionCreatorsMapObject<Types.RootAction>>({
invalidActionCreator: () => 1, // Error: Type 'number' is not assignable to type '{ type: "todos/ADD"; payload: Todo; } | { ... }
}, dispatch);
```
[⇧ back to top](#table-of-contents)
### Typing `useSelector` and `useDispatch`
```tsx
import { Dispatch } from 'redux';
import {
TypedUseSelectorHook,
useSelector as useGenericSelector,
useDispatch as useGenericDispatch
} from 'react-redux';
import { RootState, RootAction } from 'MyTypes';
export const useSelector: TypedUseSelectorHook<RootState> = useGenericSelector;
export const useDispatch: () => Dispatch<RootAction> = useGenericDispatch;
```
[⇧ back to top](#table-of-contents)
### Typing connected component with `redux-thunk` integration
_**NOTE**: When using thunk action creators you need to use `bindActionCreators`. Only this way you can get corrected dispatch props type signature like below.*_
_**WARNING**: As of now (Apr 2019) `bindActionCreators` signature of the latest `redux-thunk` release will not work as below, you need to use our modified type definitions that you can find here [`/playground/typings/redux-thunk/index.d.ts`](./playground/typings/redux-thunk/index.d.ts) and then add `paths` overload in your tsconfig like this: [`"paths":{"redux-thunk":["typings/redux-thunk"]}`](./playground/tsconfig.json)._
```tsx
const thunkAsyncAction = () => async (dispatch: Dispatch): Promise<void> => {
// dispatch actions, return Promise, etc.
}
const mapDispatchToProps = (dispatch: Dispatch<Types.RootAction>) =>
bindActionCreators(
{
thunkAsyncAction,
},
dispatch
);
type DispatchProps = ReturnType<typeof mapDispatchToProps>;
// { thunkAsyncAction: () => Promise<void>; }
/* Without "bindActionCreators" fix signature will be the same as the original "unbound" thunk function: */
// { thunkAsyncAction: () => (dispatch: Dispatch<AnyAction>) => Promise<void>; }
```
[⇧ back to top](#table-of-contents)
---
# Configuration & Dev Tools
## Common Npm Scripts
> Common TS-related npm scripts shared across projects
```json
"prettier": "prettier --list-different 'src/**/*.ts' || (echo '\nPlease fix code formatting by running:\nnpm run prettier:fix\n'; exit 1)",
"prettier:fix": "prettier --write 'src/**/*.ts'",
"lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
"tsc": "tsc -p ./ --noEmit",
"tsc:watch": "tsc -p ./ --noEmit -w",
"test": "jest --config jest.config.json",
"test:watch": "jest --config jest.config.json --watch",
"test:update": "jest --config jest.config.json -u"
"ci-check": "npm run prettier && npm run lint && npm run tsc && npm run test",
```
[⇧ back to top](#table-of-contents)
## tsconfig.json
We have recommended `tsconfig.json` that you can easily add to your project thanks to [`react-redux-typescript-scripts`](https://github.com/piotrwitek/react-redux-typescript-scripts) package.
<details><summary><i>Click to expand</i></summary><p>
```tsx
{
"compilerOptions": {
"target": "ES6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src",
"typings"
]
}
```
</p></details>
[⇧ back to top](#table-of-contents)
## TSLib
This library will cut down on your bundle size, thanks to using external runtime helpers instead of adding them per each file.
> <https://www.npmjs.com/package/tslib>
> Installation
`npm i tslib`
Then add this to your `tsconfig.json`:
```ts
"compilerOptions": {
"importHelpers": true
}
```
[⇧ back to top](#table-of-contents)
## ESLint
We have recommended config that will automatically add a parser & plugin for TypeScript thanks to [`react-redux-typescript-scripts`](https://github.com/piotrwitek/react-redux-typescript-scripts) package.
> <https://typescript-eslint.io>
> Installation
`npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin`
### .eslintrc.js
<details><summary><i>Click to expand</i></summary><p>
```tsx
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
extends: ['react-app', 'react-app/jest', 'prettier'],
rules: { 'import/no-anonymous-default-export': 0 },
};
```
</p></details>
[⇧ back to top](#table-of-contents)
## Jest
> <https://jestjs.io/>
> Installation
`npm i -D jest ts-jest @types/jest`
### jest.config.json
<details><summary><i>Click to expand</i></summary><p>
```tsx
{
"verbose": true,
"transform": {
".(ts|tsx)": "ts-jest"
},
"testRegex": "(/spec/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"moduleFileExtensions": ["ts", "tsx", "js"],
"moduleNameMapper": {
"^Components/(.*)": "./src/components/$1"
},
"globals": {
"window": {},
"ts-jest": {
"tsConfig": "./tsconfig.json"
}
},
"setupFiles": ["./jest.stubs.js"],
"testURL": "http://localhost/"
}
```
</p></details>
### jest.stubs.js
<details><summary><i>Click to expand</i></summary><p>
```tsx
// Global/Window object Stubs for Jest
window.matchMedia = window.matchMedia || function () {
return {
matches: false,
addListener: function () { },
removeListener: function () { },
};
};
window.requestAnimationFrame = function (callback) {
setTimeout(callback);
};
window.localStorage = {
getItem: function () { },
setItem: function () { },
};
Object.values = () => [];
```
</p></details>
[⇧ back to top](#table-of-contents)
## Style Guides
### [react-styleguidist](https://github.com/styleguidist/react-styleguidist)
[⟩⟩⟩ styleguide.config.js](/playground/styleguide.config.js)
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/)
[⇧ back to top](#table-of-contents)
---
# FAQ
## Ambient Modules
### Imports in ambient modules
For type augmentation imports should stay outside of module declaration.
```ts
import { Operator } from 'rxjs/Operator';
import { Observable } from 'rxjs/Observable';
declare module 'rxjs/Subject' {
interface Subject<T> {
lift<R>(operator: Operator<T, R>): Observable<R>;
}
}
```
When creating 3rd party type-definitions all the imports should be kept inside the module declaration, otherwise it will be treated as augmentation and show error
```ts
declare module "react-custom-scrollbars" {
import * as React from "react";
export interface positionValues {
...
```
[⇧ back to top](#table-of-contents)
## Type-Definitions
### Missing type-definitions error
if you cannot find types for a third-party module you can provide your own types or disable type-checking for this module using [Shorthand Ambient Modules](https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Modules.md#shorthand-ambient-modules)
```tsx
// typings/modules.d.ts
declare module 'MyTypes';
declare module 'react-test-renderer';
declare module '@storybook/addon-storyshots'
```
### Using custom `d.ts` files for npm modules
If you want to use an alternative (customized) type-definitions for some npm module (that usually comes with it's own type-definitions), you can do it by adding an override in `paths` compiler option.
```ts
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"redux": ["typings/redux"], // use an alternative type-definitions instead of the included one
...
},
...,
}
}
```
[⇧ back to top](#table-of-contents)
## Type Augmentation
Strategies to fix issues coming from external type-definitions files (*.d.ts)
### Augmenting library internal declarations - using relative import
```ts
// added missing autoFocus Prop on Input component in "antd@2.10.0" npm package
declare module '../node_modules/antd/lib/input/Input' {
export interface InputProps {
autoFocus?: boolean;
}
}
```
### Augmenting library public declarations - using node_modules import
```ts
// fixed broken public type-definitions in "rxjs@5.4.1" npm package
import { Operator } from 'rxjs/Operator';
import { Observable } from 'rxjs/Observable';
declare module 'rxjs/Subject' {
interface Subject<T> {
lift<R>(operator: Operator<T, R>): Observable<R>;
}
}
```
> More advanced scenarios for working with vendor type-definitions can be found here [Official TypeScript Docs](https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Modules.md#working-with-other-javascript-libraries)
[⇧ back to top](#table-of-contents)
## Misc
### - should I still use React.PropTypes in TS?
No. With TypeScript, using PropTypes is an unnecessary overhead. When declaring Props and State interfaces, you will get complete intellisense and design-time safety with static type checking. This way you'll be safe from runtime errors and you will save a lot of time on debugging. Additional benefit is an elegant and standardized method of documenting your component public API in the source code.
[⇧ back to top](#table-of-contents)
### - when to use `interface` declarations and when `type` aliases?
From practical side, using `interface` declaration will create an identity (interface name) in compiler errors, on the contrary `type` aliases doesn't create an identity and will be unwinded to show all the properties and nested types it consists of.
Although I prefer to use `type` most of the time there are some places this can become too noisy when reading compiler errors and that's why I like to leverage this distinction to hide some of not so important type details in errors using interfaces identity.
Related `ts-lint` rule: <https://palantir.github.io/tslint/rules/interface-over-type-literal/>
[⇧ back to top](#table-of-contents)
### - what's better default or named exports?
A common flexible solution is to use module folder pattern, because you can leverage both named and default import when you see fit.
With this solution you'll achieve better encapsulation and be able to safely refactor internal naming and folders structure without breaking your consumer code:
```ts
// 1. create your component files (`select.tsx`) using default export in some folder:
// components/select.tsx
const Select: React.FC<Props> = (props) => {
...
export default Select;
// 2. in this folder create an `index.ts` file that will re-export components with named exports:
// components/index.ts
export { default as Select } from './select';
...
// 3. now you can import your components in both ways, with named export (better encapsulation) or using default export (internal access):
// containers/container.tsx
import { Select } from '@src/components';
or
import Select from '@src/components/select';
...
```
[⇧ back to top](#table-of-contents)
### - how to best initialize class instance or static properties?
Prefered modern syntax is to use class Property Initializers
```tsx
class ClassCounterWithInitialCount extends React.Component<Props, State> {
// default props using Property Initializers
static defaultProps: DefaultProps = {
className: 'default-class',
initialCount: 0,
};
// initial state using Property Initializers
state: State = {
count: this.props.initialCount,
};
...
}
```
[⇧ back to top](#table-of-contents)
### - how to best declare component handler functions?
Prefered modern syntax is to use Class Fields with arrow functions
```tsx
class ClassCounter extends React.Component<Props, State> {
// handlers using Class Fields with arrow functions
handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
};
...
}
```
[⇧ back to top](#table-of-contents)
---
# Tutorials & Articles
> Curated list of relevant in-depth tutorials
Higher-Order Components:
- <https://medium.com/@jrwebdev/react-higher-order-component-patterns-in-typescript-42278f7590fb>
[⇧ back to top](#table-of-contents)
---
# Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore -->
| [<img src="https://avatars0.githubusercontent.com/u/739075?v=4" width="100px;"/><br /><sub><b>Piotrek Witek</b></sub>](https://github.com/piotrwitek)<br />[💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=piotrwitek "Code") [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=piotrwitek "Documentation") [🤔](#ideas-piotrwitek "Ideas, Planning, & Feedback") [👀](#review-piotrwitek "Reviewed Pull Requests") [💬](#question-piotrwitek "Answering Questions") | [<img src="https://avatars3.githubusercontent.com/u/8602615?v=4" width="100px;"/><br /><sub><b>Kazz Yokomizo</b></sub>](https://github.com/kazup01)<br />[💵](#financial-kazup01 "Financial") [🔍](#fundingFinding-kazup01 "Funding Finding") | [<img src="https://avatars1.githubusercontent.com/u/366438?v=4" width="100px;"/><br /><sub><b>Jake Boone</b></sub>](https://github.com/jakeboone02)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=jakeboone02 "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/9748762?v=4" width="100px;"/><br /><sub><b>Amit Dahan</b></sub>](https://github.com/amitdahan)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=amitdahan "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/98167?v=4" width="100px;"/><br /><sub><b>gulderov</b></sub>](https://github.com/gulderov)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=gulderov "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/1964212?v=4" width="100px;"/><br /><sub><b>Erik Pearson</b></sub>](https://github.com/emp823)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=emp823 "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/5342677?v=4" width="100px;"/><br /><sub><b>Bryan Mason</b></sub>](https://github.com/flymason)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=flymason "Documentation") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [<img src="https://avatars1.githubusercontent.com/u/119451?v=4" width="100px;"/><br /><sub><b>Jakub Chodorowicz</b></sub>](http://www.jakub.chodorowicz.pl/)<br />[💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=chodorowicz "Code") | [<img src="https://avatars1.githubusercontent.com/u/7266431?v=4" width="100px;"/><br /><sub><b>Oleg Maslov</b></sub>](https://github.com/mleg)<br />[🐛](https://github.com/piotrwitek/react-redux-typescript-guide/issues?q=author%3Amleg "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/3393293?v=4" width="100px;"/><br /><sub><b>Aaron Westbrook</b></sub>](https://github.com/awestbro)<br />[🐛](https://github.com/piotrwitek/react-redux-typescript-guide/issues?q=author%3Aawestbro "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/14539?v=4" width="100px;"/><br /><sub><b>Peter Blazejewicz</b></sub>](http://www.linkedin.com/in/peterblazejewicz)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=peterblazejewicz "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/1642?v=4" width="100px;"/><br /><sub><b>Solomon White</b></sub>](https://github.com/rubysolo)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=rubysolo "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/8838006?v=4" width="100px;"/><br /><sub><b>Levi Rocha</b></sub>](https://github.com/pino)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=pino "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/41281835?v=4" width="100px;"/><br /><sub><b>Sudachi-kun</b></sub>](http://cloudnative.co.jp)<br />[💵](#financial-loadbalance-sudachi-kun "Financial") |
| [<img src="https://avatars1.githubusercontent.com/u/14838850?v=4" width="100px;"/><br /><sub><b>Sosuke Suzuki</b></sub>](http://sosukesuzuki.github.io)<br />[💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=sosukesuzuki "Code") | [<img src="https://avatars0.githubusercontent.com/u/74433?v=4" width="100px;"/><br /><sub><b>Tom Rathbone</b></sub>](https://github.com/chillitom)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=chillitom "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/4654382?v=4" width="100px;"/><br /><sub><b>Arshad Kazmi</b></sub>](https://arshadkazmi42.github.io/)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=arshadkazmi42 "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/8815362?v=4" width="100px;"/><br /><sub><b>JeongUkJae</b></sub>](https://jeongukjae.github.io)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=JeongUkJae "Documentation") |
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
---
MIT License
Copyright (c) 2017 Piotr Witek <piotrek.witek@gmail.com> (<https://piotrwitek.github.io>)
================================================
FILE: README_SOURCE.md
================================================
<div align="center">
# React & Redux in TypeScript - Complete Guide
_"This guide is a **living compendium** documenting the most important patterns and recipes on how to use **React** (and its Ecosystem) in a **functional style** using **TypeScript**. It will help you make your code **completely type-safe** while focusing on **inferring the types from implementation** so there is less noise coming from excessive type annotations and it's easier to write and maintain correct types in the long run."_
[](https://spectrum.chat/react-redux-ts)
[](https://gitter.im/react-redux-typescript-guide/Lobby)
_Found it useful? Want more updates?_
[**Show your support by giving a :star:**](https://github.com/piotrwitek/react-redux-typescript-guide/stargazers)
<a href="https://www.buymeacoffee.com/piotrekwitek">
<img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me a Coffee">
</a>
<a href="https://www.patreon.com/piotrekwitek">
<img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" alt="Become a Patron" width="160">
</a>
<br/><hr/>
## **What's new?**
:tada: _Now updated to support **TypeScript v4.6**_ :tada:
:rocket: _Updated to `typesafe-actions@5.x` :rocket:
<hr/><br/>
</div>
### **Goals**
- Complete type safety (with [`--strict`](https://www.typescriptlang.org/docs/handbook/compiler-options.html) flag) without losing type information downstream through all the layers of our application (e.g. no type assertions or hacking with `any` type)
- Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like **Type Inference** and **Control flow analysis**
- Reduce repetition and complexity of types with TypeScript focused [complementary libraries](#react-redux-typescript-ecosystem)
### **React, Redux, Typescript Ecosystem**
- [typesafe-actions](https://github.com/piotrwitek/typesafe-actions) - Typesafe utilities for "action-creators" in Redux / Flux Architecture
- [utility-types](https://github.com/piotrwitek/utility-types) - Collection of generic types for TypeScript, complementing built-in mapped types and aliases - think lodash for reusable types.
- [react-redux-typescript-scripts](https://github.com/piotrwitek/react-redux-typescript-scripts) - dev-tools configuration files shared between projects based on this guide
### **Examples**
- Todo-App playground: [Codesandbox](https://codesandbox.io/s/github/piotrwitek/typesafe-actions/tree/master/codesandbox)
- React, Redux, TypeScript - RealWorld App: [Github](https://github.com/piotrwitek/react-redux-typescript-realworld-app) | [Demo](https://react-redux-typescript-realworld-app.netlify.com/)
### **Playground Project**
[](https://semaphoreci.com/piotrekwitek/react-redux-typescript-guide)
Check out our Playground Project located in the `/playground` folder. It contains all source files of the code examples found in the guide. They are all tested with the most recent version of TypeScript and 3rd party type-definitions (like `@types/react` or `@types/react-redux`) to ensure the examples are up-to-date and not broken with updated definitions (It's based on `create-react-app --typescript`).
> Playground project was created so that you can simply clone the repository locally and immediately play around with all the component patterns found in the guide. It will help you to learn all the examples from this guide in a real project environment without the need to create complicated environment setup by yourself.
## Contributing Guide
You can help make this project better by contributing. If you're planning to contribute please make sure to check our contributing guide: [CONTRIBUTING.md](/CONTRIBUTING.md)
## Funding
You can also help by funding issues.
Issues like bug fixes or feature requests can be very quickly resolved when funded through the IssueHunt platform.
I highly recommend to add a bounty to the issue that you're waiting for to increase priority and attract contributors willing to work on it.
[](https://issuehunt.io/repos/76996763)
---
🌟 - _New or updated section_
## Table of Contents
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
- [React Types Cheatsheet](#react-types-cheatsheet)
- [`React.FC<Props>` | `React.FunctionComponent<Props>`](#reactfcprops--reactfunctioncomponentprops)
- [`React.Component<Props, State>`](#reactcomponentprops-state)
- [`React.ComponentType<Props>`](#reactcomponenttypeprops)
- [`React.ComponentProps<typeof XXX>`](#reactcomponentpropstypeof-xxx)
- [`React.ReactElement` | `JSX.Element`](#reactreactelement--jsxelement)
- [`React.ReactNode`](#reactreactnode)
- [`React.CSSProperties`](#reactcssproperties)
- [`React.XXXHTMLAttributes<HTMLXXXElement>`](#reactxxxhtmlattributeshtmlxxxelement)
- [`React.ReactEventHandler<HTMLXXXElement>`](#reactreacteventhandlerhtmlxxxelement)
- [`React.XXXEvent<HTMLXXXElement>`](#reactxxxeventhtmlxxxelement)
- [React](#react)
- [Function Components - FC](#function-components---fc)
- [- Counter Component](#--counter-component)
- [- Counter Component with default props](#--counter-component-with-default-props)
- [- Spreading attributes in Component](#--spreading-attributes-in-component)
- [Class Components](#class-components)
- [- Class Counter Component](#--class-counter-component)
- [- Class Component with default props](#--class-component-with-default-props)
- [Generic Components](#generic-components)
- [- Generic List Component](#--generic-list-component)
- [Hooks](#hooks)
- [- useState](#--usestate)
- [- useContext](#--usecontext)
- [- useReducer](#--usereducer)
- [Render Props](#render-props)
- [- Name Provider Component](#--name-provider-component)
- [- Mouse Provider Component](#--mouse-provider-component)
- [Higher-Order Components](#higher-order-components)
- [- HOC wrapping a component](#--hoc-wrapping-a-component)
- [- HOC wrapping a component and injecting props](#--hoc-wrapping-a-component-and-injecting-props)
- [- Nested HOC - wrapping a component, injecting props and connecting to redux 🌟](#--nested-hoc---wrapping-a-component-injecting-props-and-connecting-to-redux-)
- [Redux Connected Components](#redux-connected-components)
- [- Redux connected counter](#--redux-connected-counter)
- [- Redux connected counter with own props](#--redux-connected-counter-with-own-props)
- [- Redux connected counter via hooks](#--redux-connected-counter-via-hooks)
- [- Redux connected counter with `redux-thunk` integration](#--redux-connected-counter-with-redux-thunk-integration)
- [Context](#context)
- [ThemeContext](#themecontext)
- [ThemeProvider](#themeprovider)
- [ThemeConsumer](#themeconsumer)
- [ThemeConsumer in class component](#themeconsumer-in-class-component)
- [Redux](#redux)
- [Store Configuration](#store-configuration)
- [Create Global Store Types](#create-global-store-types)
- [Create Store](#create-store)
- [Action Creators 🌟](#action-creators-)
- [Reducers](#reducers)
- [State with Type-level Immutability](#state-with-type-level-immutability)
- [Typing reducer](#typing-reducer)
- [Typing reducer with `typesafe-actions`](#typing-reducer-with-typesafe-actions)
- [Testing reducer](#testing-reducer)
- [Async Flow with `redux-observable`](#async-flow-with-redux-observable)
- [Typing epics](#typing-epics)
- [Testing epics](#testing-epics)
- [Selectors with `reselect`](#selectors-with-reselect)
- [Connect with `react-redux`](#connect-with-react-redux)
- [Typing connected component](#typing-connected-component)
- [Typing `useSelector` and `useDispatch`](#typing-useselector-and-usedispatch)
- [Typing connected component with `redux-thunk` integration](#typing-connected-component-with-redux-thunk-integration)
- [Configuration & Dev Tools](#configuration--dev-tools)
- [Common Npm Scripts](#common-npm-scripts)
- [tsconfig.json](#tsconfigjson)
- [TSLib](#tslib)
- [ESLint](#eslint)
- [.eslintrc.js](#eslintrcjs)
- [Jest](#jest)
- [jest.config.json](#jestconfigjson)
- [jest.stubs.js](#jeststubsjs)
- [Style Guides](#style-guides)
- [react-styleguidist](#react-styleguidist)
- [FAQ](#faq)
- [Ambient Modules](#ambient-modules)
- [Imports in ambient modules](#imports-in-ambient-modules)
- [Type-Definitions](#type-definitions)
- [Missing type-definitions error](#missing-type-definitions-error)
- [Using custom `d.ts` files for npm modules](#using-custom-dts-files-for-npm-modules)
- [Type Augmentation](#type-augmentation)
- [Augmenting library internal declarations - using relative import](#augmenting-library-internal-declarations---using-relative-import)
- [Augmenting library public declarations - using node_modules import](#augmenting-library-public-declarations---using-node_modules-import)
- [Misc](#misc)
- [- should I still use React.PropTypes in TS?](#--should-i-still-use-reactproptypes-in-ts)
- [- when to use `interface` declarations and when `type` aliases?](#--when-to-use-interface-declarations-and-when-type-aliases)
- [- what's better default or named exports?](#--whats-better-default-or-named-exports)
- [- how to best initialize class instance or static properties?](#--how-to-best-initialize-class-instance-or-static-properties)
- [- how to best declare component handler functions?](#--how-to-best-declare-component-handler-functions)
- [Tutorials & Articles](#tutorials--articles)
- [Contributors](#contributors)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
---
# Installation
## Types for React & Redux
```
npm i -D @types/react @types/react-dom @types/react-redux
```
"react" - `@types/react`
"react-dom" - `@types/react-dom`
"redux" - (types included with npm package)*
"react-redux" - `@types/react-redux`
> *NB: Guide is based on types for Redux >= v4.x.x.
[⇧ back to top](#table-of-contents)
---
## React Types Cheatsheet
### `React.FC<Props>` | `React.FunctionComponent<Props>`
Type representing a functional component
```tsx
const MyComponent: React.FC<Props> = ...
```
### `React.Component<Props, State>`
Type representing a class component
```tsx
class MyComponent extends React.Component<Props, State> { ...
```
### `React.ComponentType<Props>`
Type representing union of (`React.FC<Props> | React.Component<Props>`) - used in HOC
```tsx
const withState = <P extends WrappedComponentProps>(
WrappedComponent: React.ComponentType<P>,
) => { ...
```
### `React.ComponentProps<typeof XXX>`
Gets Props type of a specified component XXX (WARNING: does not work with statically declared default props and generic props)
```tsx
type MyComponentProps = React.ComponentProps<typeof MyComponent>;
```
### `React.ReactElement` | `JSX.Element`
Type representing a concept of React Element - representation of a native DOM component (e.g. `<div />`), or a user-defined composite component (e.g. `<MyComponent />`)
```tsx
const elementOnly: React.ReactElement = <div /> || <MyComponent />;
```
### `React.ReactNode`
Type representing any possible type of React node (basically ReactElement (including Fragments and Portals) + primitive JS types)
```tsx
const elementOrPrimitive: React.ReactNode = 'string' || 0 || false || null || undefined || <div /> || <MyComponent />;
const Component = ({ children: React.ReactNode }) => ...
```
### `React.CSSProperties`
Type representing style object in JSX - for css-in-js styles
```tsx
const styles: React.CSSProperties = { flexDirection: 'row', ...
const element = <div style={styles} ...
```
### `React.XXXHTMLAttributes<HTMLXXXElement>`
Type representing HTML attributes of specified HTML Element - for extending HTML Elements
```tsx
const Input: React.FC<Props & React.InputHTMLAttributes<HTMLInputElement>> = props => { ... }
<Input about={...} accept={...} alt={...} ... />
```
### `React.ReactEventHandler<HTMLXXXElement>`
Type representing generic event handler - for declaring event handlers
```tsx
const handleChange: React.ReactEventHandler<HTMLInputElement> = (ev) => { ... }
<input onChange={handleChange} ... />
```
### `React.XXXEvent<HTMLXXXElement>`
Type representing more specific event. Some common event examples: `ChangeEvent, FormEvent, FocusEvent, KeyboardEvent, MouseEvent, DragEvent, PointerEvent, WheelEvent, TouchEvent`.
```tsx
const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }
<div onMouseMove={handleChange} ... />
```
In code above `React.MouseEvent<HTMLDivElement>` is type of mouse event, and this event happened on `HTMLDivElement`
[⇧ back to top](#table-of-contents)
---
# React
## Function Components - FC
### - Counter Component
::codeblock='playground/src/components/fc-counter.tsx'::
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fccounter)
[⇧ back to top](#table-of-contents)
### - Counter Component with default props
::codeblock='playground/src/components/fc-counter-with-default-props.tsx'::
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fccounterwithdefaultprops)
[⇧ back to top](#table-of-contents)
### - [Spreading attributes](https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes) in Component
::codeblock='playground/src/components/fc-spread-attributes.tsx'::
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#fcspreadattributes)
[⇧ back to top](#table-of-contents)
---
## Class Components
### - Class Counter Component
::codeblock='playground/src/components/class-counter.tsx'::
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounter)
[⇧ back to top](#table-of-contents)
### - Class Component with default props
::codeblock='playground/src/components/class-counter-with-default-props.tsx'::
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#classcounterwithdefaultprops)
[⇧ back to top](#table-of-contents)
---
## Generic Components
- easily create typed component variations and reuse common logic
- common use case is a generic list components
### - Generic List Component
::codeblock='playground/src/components/generic-list.tsx'::
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#genericlist)
[⇧ back to top](#table-of-contents)
---
## Hooks
> <https://reactjs.org/docs/hooks-intro.html>
### - useState
> <https://reactjs.org/docs/hooks-reference.html#usestate>
::codeblock='playground/src/hooks/use-state.tsx'::
[⇧ back to top](#table-of-contents)
### - useContext
> <https://reactjs.org/docs/hooks-reference.html#usecontext>
::codeblock='playground/src/hooks/use-theme-context.tsx'::
[⇧ back to top](#table-of-contents)
### - useReducer
> <https://reactjs.org/docs/hooks-reference.html#usereducer>
::codeblock='playground/src/hooks/use-reducer.tsx'::
[⇧ back to top](#table-of-contents)
---
## Render Props
> <https://reactjs.org/docs/render-props.html>
### - Name Provider Component
Simple component using children as a render prop
::codeblock='playground/src/components/name-provider.tsx'::
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#nameprovider)
[⇧ back to top](#table-of-contents)
### - Mouse Provider Component
`Mouse` component found in [Render Props React Docs](https://reactjs.org/docs/render-props.html#use-render-props-for-cross-cutting-concerns)
::codeblock='playground/src/components/mouse-provider.tsx'::
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#mouseprovider)
[⇧ back to top](#table-of-contents)
---
## Higher-Order Components
> <https://reactjs.org/docs/higher-order-components.html>
### - HOC wrapping a component
Adds state to a stateless counter
::codeblock='playground/src/hoc/with-state.tsx'::
::expander='playground/src/hoc/with-state.usage.tsx'::
[⇧ back to top](#table-of-contents)
### - HOC wrapping a component and injecting props
Adds error handling using componentDidCatch to any component
::codeblock='playground/src/hoc/with-error-boundary.tsx'::
::expander='playground/src/hoc/with-error-boundary.usage.tsx'::
[⇧ back to top](#table-of-contents)
### - Nested HOC - wrapping a component, injecting props and connecting to redux 🌟
Adds error handling using componentDidCatch to any component
::codeblock='playground/src/hoc/with-connected-count.tsx'::
::expander='playground/src/hoc/with-connected-count.usage.tsx'::
[⇧ back to top](#table-of-contents)
---
## Redux Connected Components
### - Redux connected counter
::codeblock='playground/src/connected/fc-counter-connected.tsx'::
::expander='playground/src/connected/fc-counter-connected.usage.tsx'::
[⇧ back to top](#table-of-contents)
### - Redux connected counter with own props
::codeblock='playground/src/connected/fc-counter-connected-own-props.tsx'::
::expander='playground/src/connected/fc-counter-connected-own-props.usage.tsx'::
[⇧ back to top](#table-of-contents)
### - Redux connected counter via hooks
::codeblock='playground/src/hooks/react-redux-hooks.tsx'::
[⇧ back to top](#table-of-contents)
### - Redux connected counter with `redux-thunk` integration
::codeblock='playground/src/connected/fc-counter-connected-bind-action-creators.tsx'::
::expander='playground/src/connected/fc-counter-connected-bind-action-creators.usage.tsx'::
[⇧ back to top](#table-of-contents)
## Context
> <https://reactjs.org/docs/context.html>
### ThemeContext
::codeblock='playground/src/context/theme-context.ts'::
[⇧ back to top](#table-of-contents)
### ThemeProvider
::codeblock='playground/src/context/theme-provider.tsx'::
[⇧ back to top](#table-of-contents)
### ThemeConsumer
::codeblock='playground/src/context/theme-consumer.tsx'::
### ThemeConsumer in class component
::codeblock='playground/src/context/theme-consumer-class.tsx'::
[Implementation with Hooks](#--usecontext)
[⇧ back to top](#table-of-contents)
---
# Redux
## Store Configuration
### Create Global Store Types
#### `RootState` - type representing root state-tree
Can be imported in connected components to provide type-safety to Redux `connect` function
#### `RootAction` - type representing union type of all action objects
Can be imported in various layers receiving or sending redux actions like: reducers, sagas or redux-observables epics
::codeblock='playground/src/store/types.d.ts'::
[⇧ back to top](#table-of-contents)
### Create Store
When creating a store instance we don't need to provide any additional types. It will set-up a **type-safe Store instance** using type inference.
> The resulting store instance methods like `getState` or `dispatch` will be type checked and will expose all type errors
::codeblock='playground/src/store/store.ts'::
---
## Action Creators 🌟
> We'll be using a battle-tested helper library [`typesafe-actions`](https://github.com/piotrwitek/typesafe-actions#typesafe-actions) [](https://www.npmjs.com/package/typesafe-actions) [](https://www.npmjs.com/package/typesafe-actions) that's designed to make it easy and fun working with **Redux** in **TypeScript**.
> To learn more please check this in-depth tutorial: [Typesafe-Actions - Tutorial](https://github.com/piotrwitek/typesafe-actions#tutorial)!
A solution below is using a simple factory function to automate the creation of type-safe action creators. The goal is to decrease maintenance effort and reduce code repetition of type annotations for actions and creators. The result is completely typesafe action-creators and their actions.
::codeblock='playground/src/features/counters/actions.ts'::
::expander='playground/src/features/counters/actions.usage.ts'::
[⇧ back to top](#table-of-contents)
---
## Reducers
### State with Type-level Immutability
Declare reducer `State` type with `readonly` modifier to get compile time immutability
```ts
export type State = {
readonly counter: number;
readonly todos: ReadonlyArray<string>;
};
```
Readonly modifier allow initialization, but will not allow reassignment by highlighting compiler errors
```ts
export const initialState: State = {
counter: 0,
}; // OK
initialState.counter = 3; // TS Error: cannot be mutated
```
It's great for **Arrays in JS** because it will error when using mutator methods like (`push`, `pop`, `splice`, ...), but it'll still allow immutable methods like (`concat`, `map`, `slice`,...).
```ts
state.todos.push('Learn about tagged union types') // TS Error: Property 'push' does not exist on type 'ReadonlyArray<string>'
const newTodos = state.todos.concat('Learn about tagged union types') // OK
```
#### Caveat - `Readonly` is not recursive
This means that the `readonly` modifier doesn't propagate immutability down the nested structure of objects. You'll need to mark each property on each level explicitly.
> **TIP:** use `Readonly` or `ReadonlyArray` [Mapped types](https://www.typescriptlang.org/docs/handbook/advanced-types.html)
```ts
export type State = Readonly<{
counterPairs: ReadonlyArray<Readonly<{
immutableCounter1: number,
immutableCounter2: number,
}>>,
}>;
state.counterPairs[0] = { immutableCounter1: 1, immutableCounter2: 1 }; // TS Error: cannot be mutated
state.counterPairs[0].immutableCounter1 = 1; // TS Error: cannot be mutated
state.counterPairs[0].immutableCounter2 = 1; // TS Error: cannot be mutated
```
#### Solution - recursive `Readonly` is called `DeepReadonly`
To fix this we can use [`DeepReadonly`](https://github.com/piotrwitek/utility-types#deepreadonlyt) type (available from `utility-types`).
```ts
import { DeepReadonly } from 'utility-types';
export type State = DeepReadonly<{
containerObject: {
innerValue: number,
numbers: number[],
}
}>;
state.containerObject = { innerValue: 1 }; // TS Error: cannot be mutated
state.containerObject.innerValue = 1; // TS Error: cannot be mutated
state.containerObject.numbers.push(1); // TS Error: cannot use mutator methods
```
[⇧ back to top](#table-of-contents)
### Typing reducer
> to understand following section make sure to learn about [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html), [Control flow analysis](https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#control-flow-based-type-analysis) and [Tagged union types](https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#tagged-union-types)
::codeblock='playground/src/features/todos/reducer.ts'::
[⇧ back to top](#table-of-contents)
### Typing reducer with `typesafe-actions`
> Notice we are not required to use any generic type parameter in the API. Try to compare it with regular reducer as they are equivalent.
::codeblock='playground/src/features/todos/reducer-ta.ts'::
[⇧ back to top](#table-of-contents)
### Testing reducer
::codeblock='playground/src/features/todos/reducer.spec.ts'::
[⇧ back to top](#table-of-contents)
---
## Async Flow with `redux-observable`
### Typing epics
::codeblock='playground/src/features/todos/epics.ts'::
[⇧ back to top](#table-of-contents)
### Testing epics
::codeblock='playground/src/features/todos/epics.spec.ts'::
[⇧ back to top](#table-of-contents)
---
## Selectors with `reselect`
::codeblock='playground/src/features/todos/selectors.ts'::
[⇧ back to top](#table-of-contents)
---
## Connect with `react-redux`
### Typing connected component
_**NOTE**: Below you'll find a short explanation of concepts behind using `connect` with TypeScript. For more detailed examples please check [Redux Connected Components](#redux-connected-components) section._
```tsx
import MyTypes from 'MyTypes';
import { bindActionCreators, Dispatch, ActionCreatorsMapObject } from 'redux';
import { connect } from 'react-redux';
import { countersActions } from '../features/counters';
import { FCCounter } from '../components';
// Type annotation for "state" argument is mandatory to check
// the correct shape of state object and injected props you can also
// extend connected component Props interface by annotating `ownProps` argument
const mapStateToProps = (state: MyTypes.RootState, ownProps: FCCounterProps) => ({
count: state.counters.reduxCounter,
});
// "dispatch" argument needs an annotation to check the correct shape
// of an action object when using dispatch function
const mapDispatchToProps = (dispatch: Dispatch<MyTypes.RootAction>) =>
bindActionCreators({
onIncrement: countersActions.increment,
}, dispatch);
// shorter alternative is to use an object instead of mapDispatchToProps function
const dispatchToProps = {
onIncrement: countersActions.increment,
};
// Notice we don't need to pass any generic type parameters to neither
// the connect function below nor map functions declared above
// because type inference will infer types from arguments annotations automatically
// This is much cleaner and idiomatic approach
export const FCCounterConnected =
connect(mapStateToProps, mapDispatchToProps)(FCCounter);
// You can add extra layer of validation of your action creators
// by using bindActionCreators generic type parameter and RootAction type
const mapDispatchToProps = (dispatch: Dispatch<MyTypes.RootAction>) =>
bindActionCreators<ActionCreatorsMapObject<Types.RootAction>>({
invalidActionCreator: () => 1, // Error: Type 'number' is not assignable to type '{ type: "todos/ADD"; payload: Todo; } | { ... }
}, dispatch);
```
[⇧ back to top](#table-of-contents)
### Typing `useSelector` and `useDispatch`
::codeblock='playground/src/store/hooks.ts'::
[⇧ back to top](#table-of-contents)
### Typing connected component with `redux-thunk` integration
_**NOTE**: When using thunk action creators you need to use `bindActionCreators`. Only this way you can get corrected dispatch props type signature like below.*_
_**WARNING**: As of now (Apr 2019) `bindActionCreators` signature of the latest `redux-thunk` release will not work as below, you need to use our modified type definitions that you can find here [`/playground/typings/redux-thunk/index.d.ts`](./playground/typings/redux-thunk/index.d.ts) and then add `paths` overload in your tsconfig like this: [`"paths":{"redux-thunk":["typings/redux-thunk"]}`](./playground/tsconfig.json)._
```tsx
const thunkAsyncAction = () => async (dispatch: Dispatch): Promise<void> => {
// dispatch actions, return Promise, etc.
}
const mapDispatchToProps = (dispatch: Dispatch<Types.RootAction>) =>
bindActionCreators(
{
thunkAsyncAction,
},
dispatch
);
type DispatchProps = ReturnType<typeof mapDispatchToProps>;
// { thunkAsyncAction: () => Promise<void>; }
/* Without "bindActionCreators" fix signature will be the same as the original "unbound" thunk function: */
// { thunkAsyncAction: () => (dispatch: Dispatch<AnyAction>) => Promise<void>; }
```
[⇧ back to top](#table-of-contents)
---
# Configuration & Dev Tools
## Common Npm Scripts
> Common TS-related npm scripts shared across projects
```json
"prettier": "prettier --list-different 'src/**/*.ts' || (echo '\nPlease fix code formatting by running:\nnpm run prettier:fix\n'; exit 1)",
"prettier:fix": "prettier --write 'src/**/*.ts'",
"lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
"tsc": "tsc -p ./ --noEmit",
"tsc:watch": "tsc -p ./ --noEmit -w",
"test": "jest --config jest.config.json",
"test:watch": "jest --config jest.config.json --watch",
"test:update": "jest --config jest.config.json -u"
"ci-check": "npm run prettier && npm run lint && npm run tsc && npm run test",
```
[⇧ back to top](#table-of-contents)
## tsconfig.json
We have recommended `tsconfig.json` that you can easily add to your project thanks to [`react-redux-typescript-scripts`](https://github.com/piotrwitek/react-redux-typescript-scripts) package.
::expander='playground/tsconfig.json'::
[⇧ back to top](#table-of-contents)
## TSLib
This library will cut down on your bundle size, thanks to using external runtime helpers instead of adding them per each file.
> <https://www.npmjs.com/package/tslib>
> Installation
`npm i tslib`
Then add this to your `tsconfig.json`:
```ts
"compilerOptions": {
"importHelpers": true
}
```
[⇧ back to top](#table-of-contents)
## ESLint
We have recommended config that will automatically add a parser & plugin for TypeScript thanks to [`react-redux-typescript-scripts`](https://github.com/piotrwitek/react-redux-typescript-scripts) package.
> <https://typescript-eslint.io>
> Installation
`npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin`
### .eslintrc.js
::expander='playground/.eslintrc.js'::
[⇧ back to top](#table-of-contents)
## Jest
> <https://jestjs.io/>
> Installation
`npm i -D jest ts-jest @types/jest`
### jest.config.json
::expander='configs/jest.config.json'::
### jest.stubs.js
::expander='configs/jest.stubs.js'::
[⇧ back to top](#table-of-contents)
## Style Guides
### [react-styleguidist](https://github.com/styleguidist/react-styleguidist)
[⟩⟩⟩ styleguide.config.js](/playground/styleguide.config.js)
[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/)
[⇧ back to top](#table-of-contents)
---
# FAQ
## Ambient Modules
### Imports in ambient modules
For type augmentation imports should stay outside of module declaration.
```ts
import { Operator } from 'rxjs/Operator';
import { Observable } from 'rxjs/Observable';
declare module 'rxjs/Subject' {
interface Subject<T> {
lift<R>(operator: Operator<T, R>): Observable<R>;
}
}
```
When creating 3rd party type-definitions all the imports should be kept inside the module declaration, otherwise it will be treated as augmentation and show error
```ts
declare module "react-custom-scrollbars" {
import * as React from "react";
export interface positionValues {
...
```
[⇧ back to top](#table-of-contents)
## Type-Definitions
### Missing type-definitions error
if you cannot find types for a third-party module you can provide your own types or disable type-checking for this module using [Shorthand Ambient Modules](https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Modules.md#shorthand-ambient-modules)
::codeblock='playground/typings/modules.d.ts'::
### Using custom `d.ts` files for npm modules
If you want to use an alternative (customized) type-definitions for some npm module (that usually comes with it's own type-definitions), you can do it by adding an override in `paths` compiler option.
```ts
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"redux": ["typings/redux"], // use an alternative type-definitions instead of the included one
...
},
...,
}
}
```
[⇧ back to top](#table-of-contents)
## Type Augmentation
Strategies to fix issues coming from external type-definitions files (*.d.ts)
### Augmenting library internal declarations - using relative import
```ts
// added missing autoFocus Prop on Input component in "antd@2.10.0" npm package
declare module '../node_modules/antd/lib/input/Input' {
export interface InputProps {
autoFocus?: boolean;
}
}
```
### Augmenting library public declarations - using node_modules import
```ts
// fixed broken public type-definitions in "rxjs@5.4.1" npm package
import { Operator } from 'rxjs/Operator';
import { Observable } from 'rxjs/Observable';
declare module 'rxjs/Subject' {
interface Subject<T> {
lift<R>(operator: Operator<T, R>): Observable<R>;
}
}
```
> More advanced scenarios for working with vendor type-definitions can be found here [Official TypeScript Docs](https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Modules.md#working-with-other-javascript-libraries)
[⇧ back to top](#table-of-contents)
## Misc
### - should I still use React.PropTypes in TS?
No. With TypeScript, using PropTypes is an unnecessary overhead. When declaring Props and State interfaces, you will get complete intellisense and design-time safety with static type checking. This way you'll be safe from runtime errors and you will save a lot of time on debugging. Additional benefit is an elegant and standardized method of documenting your component public API in the source code.
[⇧ back to top](#table-of-contents)
### - when to use `interface` declarations and when `type` aliases?
From practical side, using `interface` declaration will create an identity (interface name) in compiler errors, on the contrary `type` aliases doesn't create an identity and will be unwinded to show all the properties and nested types it consists of.
Although I prefer to use `type` most of the time there are some places this can become too noisy when reading compiler errors and that's why I like to leverage this distinction to hide some of not so important type details in errors using interfaces identity.
Related `ts-lint` rule: <https://palantir.github.io/tslint/rules/interface-over-type-literal/>
[⇧ back to top](#table-of-contents)
### - what's better default or named exports?
A common flexible solution is to use module folder pattern, because you can leverage both named and default import when you see fit.
With this solution you'll achieve better encapsulation and be able to safely refactor internal naming and folders structure without breaking your consumer code:
```ts
// 1. create your component files (`select.tsx`) using default export in some folder:
// components/select.tsx
const Select: React.FC<Props> = (props) => {
...
export default Select;
// 2. in this folder create an `index.ts` file that will re-export components with named exports:
// components/index.ts
export { default as Select } from './select';
...
// 3. now you can import your components in both ways, with named export (better encapsulation) or using default export (internal access):
// containers/container.tsx
import { Select } from '@src/components';
or
import Select from '@src/components/select';
...
```
[⇧ back to top](#table-of-contents)
### - how to best initialize class instance or static properties?
Prefered modern syntax is to use class Property Initializers
```tsx
class ClassCounterWithInitialCount extends React.Component<Props, State> {
// default props using Property Initializers
static defaultProps: DefaultProps = {
className: 'default-class',
initialCount: 0,
};
// initial state using Property Initializers
state: State = {
count: this.props.initialCount,
};
...
}
```
[⇧ back to top](#table-of-contents)
### - how to best declare component handler functions?
Prefered modern syntax is to use Class Fields with arrow functions
```tsx
class ClassCounter extends React.Component<Props, State> {
// handlers using Class Fields with arrow functions
handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
};
...
}
```
[⇧ back to top](#table-of-contents)
---
# Tutorials & Articles
> Curated list of relevant in-depth tutorials
Higher-Order Components:
- <https://medium.com/@jrwebdev/react-higher-order-component-patterns-in-typescript-42278f7590fb>
[⇧ back to top](#table-of-contents)
---
# Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore -->
| [<img src="https://avatars0.githubusercontent.com/u/739075?v=4" width="100px;"/><br /><sub><b>Piotrek Witek</b></sub>](https://github.com/piotrwitek)<br />[💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=piotrwitek "Code") [📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=piotrwitek "Documentation") [🤔](#ideas-piotrwitek "Ideas, Planning, & Feedback") [👀](#review-piotrwitek "Reviewed Pull Requests") [💬](#question-piotrwitek "Answering Questions") | [<img src="https://avatars3.githubusercontent.com/u/8602615?v=4" width="100px;"/><br /><sub><b>Kazz Yokomizo</b></sub>](https://github.com/kazup01)<br />[💵](#financial-kazup01 "Financial") [🔍](#fundingFinding-kazup01 "Funding Finding") | [<img src="https://avatars1.githubusercontent.com/u/366438?v=4" width="100px;"/><br /><sub><b>Jake Boone</b></sub>](https://github.com/jakeboone02)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=jakeboone02 "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/9748762?v=4" width="100px;"/><br /><sub><b>Amit Dahan</b></sub>](https://github.com/amitdahan)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=amitdahan "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/98167?v=4" width="100px;"/><br /><sub><b>gulderov</b></sub>](https://github.com/gulderov)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=gulderov "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/1964212?v=4" width="100px;"/><br /><sub><b>Erik Pearson</b></sub>](https://github.com/emp823)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=emp823 "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/5342677?v=4" width="100px;"/><br /><sub><b>Bryan Mason</b></sub>](https://github.com/flymason)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=flymason "Documentation") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [<img src="https://avatars1.githubusercontent.com/u/119451?v=4" width="100px;"/><br /><sub><b>Jakub Chodorowicz</b></sub>](http://www.jakub.chodorowicz.pl/)<br />[💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=chodorowicz "Code") | [<img src="https://avatars1.githubusercontent.com/u/7266431?v=4" width="100px;"/><br /><sub><b>Oleg Maslov</b></sub>](https://github.com/mleg)<br />[🐛](https://github.com/piotrwitek/react-redux-typescript-guide/issues?q=author%3Amleg "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/3393293?v=4" width="100px;"/><br /><sub><b>Aaron Westbrook</b></sub>](https://github.com/awestbro)<br />[🐛](https://github.com/piotrwitek/react-redux-typescript-guide/issues?q=author%3Aawestbro "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/14539?v=4" width="100px;"/><br /><sub><b>Peter Blazejewicz</b></sub>](http://www.linkedin.com/in/peterblazejewicz)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=peterblazejewicz "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/1642?v=4" width="100px;"/><br /><sub><b>Solomon White</b></sub>](https://github.com/rubysolo)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=rubysolo "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/8838006?v=4" width="100px;"/><br /><sub><b>Levi Rocha</b></sub>](https://github.com/pino)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=pino "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/41281835?v=4" width="100px;"/><br /><sub><b>Sudachi-kun</b></sub>](http://cloudnative.co.jp)<br />[💵](#financial-loadbalance-sudachi-kun "Financial") |
| [<img src="https://avatars1.githubusercontent.com/u/14838850?v=4" width="100px;"/><br /><sub><b>Sosuke Suzuki</b></sub>](http://sosukesuzuki.github.io)<br />[💻](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=sosukesuzuki "Code") | [<img src="https://avatars0.githubusercontent.com/u/74433?v=4" width="100px;"/><br /><sub><b>Tom Rathbone</b></sub>](https://github.com/chillitom)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=chillitom "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/4654382?v=4" width="100px;"/><br /><sub><b>Arshad Kazmi</b></sub>](https://arshadkazmi42.github.io/)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=arshadkazmi42 "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/8815362?v=4" width="100px;"/><br /><sub><b>JeongUkJae</b></sub>](https://jeongukjae.github.io)<br />[📖](https://github.com/piotrwitek/react-redux-typescript-guide/commits?author=JeongUkJae "Documentation") |
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
---
MIT License
Copyright (c) 2017 Piotr Witek <piotrek.witek@gmail.com> (<https://piotrwitek.github.io>)
================================================
FILE: configs/jest.config.json
================================================
{
"verbose": true,
"transform": {
".(ts|tsx)": "ts-jest"
},
"testRegex": "(/spec/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"moduleFileExtensions": ["ts", "tsx", "js"],
"moduleNameMapper": {
"^Components/(.*)": "./src/components/$1"
},
"globals": {
"window": {},
"ts-jest": {
"tsConfig": "./tsconfig.json"
}
},
"setupFiles": ["./jest.stubs.js"],
"testURL": "http://localhost/"
}
================================================
FILE: configs/jest.stubs.js
================================================
// Global/Window object Stubs for Jest
window.matchMedia = window.matchMedia || function () {
return {
matches: false,
addListener: function () { },
removeListener: function () { },
};
};
window.requestAnimationFrame = function (callback) {
setTimeout(callback);
};
window.localStorage = {
getItem: function () { },
setItem: function () { },
};
Object.values = () => [];
================================================
FILE: docs/build/0.6e57cfb5.js
================================================
webpackJsonp([0],{409:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),i=n.n(r),o=n(1),s=n.n(o),a=n(113),l=n.n(a),c=n(411),u=(n.n(c),n(412)),d=(n.n(u),Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}),p=function(){function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(e,t,n){return t&&defineProperties(e.prototype,t),n&&defineProperties(e,n),e}}();n(415),n(417);var h={mode:"jsx",lineNumbers:!1,lineWrapping:!0,smartIndent:!1,matchBrackets:!0,viewportMargin:1/0},f=10,g=function(e){!function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(Editor,r["Component"]);function Editor(){!function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,Editor);var e=function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(Editor.__proto__||Object.getPrototypeOf(Editor)).call(this));return e.handleChange=l()(e.handleChange.bind(e),f),e}return p(Editor,[{key:"shouldComponentUpdate",value:function shouldComponentUpdate(){return!1}},{key:"handleChange",value:function handleChange(e,t,n){this.props.onChange(n)}},{key:"render",value:function render(){var e=this.props.code,t=this.context.config.highlightTheme,n=d({},h,{theme:t});return i.a.createElement(c.UnControlled,{value:e,onChange:this.handleChange,options:n})}}]),Editor}();g.propTypes={code:s.a.string.isRequired,onChange:s.a.func.isRequired},g.contextTypes={config:s.a.object.isRequired},t.default=g},410:function(e,t,n){r=function(){"use strict";var e=navigator.userAgent,t=navigator.platform,n=/gecko\/\d/i.test(e),r=/MSIE \d/.test(e),i=/Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(e),o=/Edge\/(\d+)/.exec(e),s=r||i||o,a=s&&(r?document.documentMode||6:+(o||i)[1]),l=!o&&/WebKit\//.test(e),c=l&&/Qt\/\d+\.\d+/.test(e),u=!o&&/Chrome\//.test(e),d=/Opera\//.test(e),p=/Apple Computer/.test(navigator.vendor),h=/Mac OS X 1\d\D([8-9]|\d\d)\D/.test(e),f=/PhantomJS/.test(e),g=!o&&/AppleWebKit/.test(e)&&/Mobile\/\w+/.test(e),m=/Android/.test(e),v=g||m||/webOS|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(e),y=g||/Mac/.test(t),b=/\bCrOS\b/.test(e),C=/win/i.test(t),x=d&&e.match(/Version\/(\d*\.\d*)/);x&&(x=Number(x[1])),x&&x>=15&&(d=!1,l=!0);var w=y&&(c||d&&(null==x||x<12.11)),S=n||s&&a>=9;function classTest(e){return new RegExp("(^|\\s)"+e+"(?:$|\\s)\\s*")}var k=function(e,t){var n=e.className,r=classTest(t).exec(n);if(r){var i=n.slice(r.index+r[0].length);e.className=n.slice(0,r.index)+(i?r[1]+i:"")}};function removeChildren(e){for(var t=e.childNodes.length;t>0;--t)e.removeChild(e.firstChild);return e}function removeChildrenAndAdd(e,t){return removeChildren(e).appendChild(t)}function elt(e,t,n,r){var i=document.createElement(e);if(n&&(i.className=n),r&&(i.style.cssText=r),"string"==typeof t)i.appendChild(document.createTextNode(t));else if(t)for(var o=0;o<t.length;++o)i.appendChild(t[o]);return i}function eltP(e,t,n,r){var i=elt(e,t,n,r);return i.setAttribute("role","presentation"),i}var L;L=document.createRange?function(e,t,n,r){var i=document.createRange();return i.setEnd(r||e,n),i.setStart(e,t),i}:function(e,t,n){var r=document.body.createTextRange();try{r.moveToElementText(e.parentNode)}catch(e){return r}return r.collapse(!0),r.moveEnd("character",n),r.moveStart("character",t),r};function contains(e,t){if(3==t.nodeType&&(t=t.parentNode),e.contains)return e.contains(t);do{if(11==t.nodeType&&(t=t.host),t==e)return!0}while(t=t.parentNode)}function activeElt(){var e;try{e=document.activeElement}catch(t){e=document.body||null}for(;e&&e.shadowRoot&&e.shadowRoot.activeElement;)e=e.shadowRoot.activeElement;return e}function addClass(e,t){var n=e.className;classTest(t).test(n)||(e.className+=(n?" ":"")+t)}function joinClasses(e,t){for(var n=e.split(" "),r=0;r<n.length;r++)n[r]&&!classTest(n[r]).test(t)&&(t+=" "+n[r]);return t}var M=function(e){e.select()};g?M=function(e){e.selectionStart=0,e.selectionEnd=e.value.length}:s&&(M=function(e){try{e.select()}catch(e){}});function bind(e){var t=Array.prototype.slice.call(arguments,1);return function(){return e.apply(null,t)}}function copyObj(e,t,n){t||(t={});for(var r in e)!e.hasOwnProperty(r)||!1===n&&t.hasOwnProperty(r)||(t[r]=e[r]);return t}function countColumn(e,t,n,r,i){null==t&&-1==(t=e.search(/[^\s\u00a0]/))&&(t=e.length);for(var o=r||0,s=i||0;;){var a=e.indexOf("\t",o);if(a<0||a>=t)return s+(t-o);s+=a-o,s+=n-s%n,o=a+1}}var T=function(){this.id=null};T.prototype.set=function(e,t){clearTimeout(this.id),this.id=setTimeout(t,e)};function indexOf(e,t){for(var n=0;n<e.length;++n)if(e[n]==t)return n;return-1}var O=30,P={toString:function(){return"CodeMirror.Pass"}},A={scroll:!1},N={origin:"*mouse"},D={origin:"+move"};function findColumn(e,t,n){for(var r=0,i=0;;){var o=e.indexOf("\t",r);-1==o&&(o=e.length);var s=o-r;if(o==e.length||i+s>=t)return r+Math.min(s,t-i);if(i+=o-r,r=o+1,(i+=n-i%n)>=t)return r}}var H=[""];function spaceStr(e){for(;H.length<=e;)H.push(lst(H)+" ");return H[e]}function lst(e){return e[e.length-1]}function map(e,t){for(var n=[],r=0;r<e.length;r++)n[r]=t(e[r],r);return n}function nothing(){}function createObj(e,t){var n;return Object.create?n=Object.create(e):(nothing.prototype=e,n=new nothing),t&©Obj(t,n),n}var W=/[\u00df\u0587\u0590-\u05f4\u0600-\u06ff\u3040-\u309f\u30a0-\u30ff\u3400-\u4db5\u4e00-\u9fcc\uac00-\ud7af]/;function isWordCharBasic(e){return/\w/.test(e)||e>""&&(e.toUpperCase()!=e.toLowerCase()||W.test(e))}function isWordChar(e,t){return t?!!(t.source.indexOf("\\w")>-1&&isWordCharBasic(e))||t.test(e):isWordCharBasic(e)}function isEmpty(e){for(var t in e)if(e.hasOwnProperty(t)&&e[t])return!1;return!0}var E=/[\u0300-\u036f\u0483-\u0489\u0591-\u05bd\u05bf\u05c1\u05c2\u05c4\u05c5\u05c7\u0610-\u061a\u064b-\u065e\u0670\u06d6-\u06dc\u06de-\u06e4\u06e7\u06e8\u06ea-\u06ed\u0711\u0730-\u074a\u07a6-\u07b0\u07eb-\u07f3\u0816-\u0819\u081b-\u0823\u0825-\u0827\u0829-\u082d\u0900-\u0902\u093c\u0941-\u0948\u094d\u0951-\u0955\u0962\u0963\u0981\u09bc\u09be\u09c1-\u09c4\u09cd\u09d7\u09e2\u09e3\u0a01\u0a02\u0a3c\u0a41\u0a42\u0a47\u0a48\u0a4b-\u0a4d\u0a51\u0a70\u0a71\u0a75\u0a81\u0a82\u0abc\u0ac1-\u0ac5\u0ac7\u0ac8\u0acd\u0ae2\u0ae3\u0b01\u0b3c\u0b3e\u0b3f\u0b41-\u0b44\u0b4d\u0b56\u0b57\u0b62\u0b63\u0b82\u0bbe\u0bc0\u0bcd\u0bd7\u0c3e-\u0c40\u0c46-\u0c48\u0c4a-\u0c4d\u0c55\u0c56\u0c62\u0c63\u0cbc\u0cbf\u0cc2\u0cc6\u0ccc\u0ccd\u0cd5\u0cd6\u0ce2\u0ce3\u0d3e\u0d41-\u0d44\u0d4d\u0d57\u0d62\u0d63\u0dca\u0dcf\u0dd2-\u0dd4\u0dd6\u0ddf\u0e31\u0e34-\u0e3a\u0e47-\u0e4e\u0eb1\u0eb4-\u0eb9\u0ebb\u0ebc\u0ec8-\u0ecd\u0f18\u0f19\u0f35\u0f37\u0f39\u0f71-\u0f7e\u0f80-\u0f84\u0f86\u0f87\u0f90-\u0f97\u0f99-\u0fbc\u0fc6\u102d-\u1030\u1032-\u1037\u1039\u103a\u103d\u103e\u1058\u1059\u105e-\u1060\u1071-\u1074\u1082\u1085\u1086\u108d\u109d\u135f\u1712-\u1714\u1732-\u1734\u1752\u1753\u1772\u1773\u17b7-\u17bd\u17c6\u17c9-\u17d3\u17dd\u180b-\u180d\u18a9\u1920-\u1922\u1927\u1928\u1932\u1939-\u193b\u1a17\u1a18\u1a56\u1a58-\u1a5e\u1a60\u1a62\u1a65-\u1a6c\u1a73-\u1a7c\u1a7f\u1b00-\u1b03\u1b34\u1b36-\u1b3a\u1b3c\u1b42\u1b6b-\u1b73\u1b80\u1b81\u1ba2-\u1ba5\u1ba8\u1ba9\u1c2c-\u1c33\u1c36\u1c37\u1cd0-\u1cd2\u1cd4-\u1ce0\u1ce2-\u1ce8\u1ced\u1dc0-\u1de6\u1dfd-\u1dff\u200c\u200d\u20d0-\u20f0\u2cef-\u2cf1\u2de0-\u2dff\u302a-\u302f\u3099\u309a\ua66f-\ua672\ua67c\ua67d\ua6f0\ua6f1\ua802\ua806\ua80b\ua825\ua826\ua8c4\ua8e0-\ua8f1\ua926-\ua92d\ua947-\ua951\ua980-\ua982\ua9b3\ua9b6-\ua9b9\ua9bc\uaa29-\uaa2e\uaa31\uaa32\uaa35\uaa36\uaa43\uaa4c\uaab0\uaab2-\uaab4\uaab7\uaab8\uaabe\uaabf\uaac1\uabe5\uabe8\uabed\udc00-\udfff\ufb1e\ufe00-\ufe0f\ufe20-\ufe26\uff9e\uff9f]/;function isExtendingChar(e){return e.charCodeAt(0)>=768&&E.test(e)}function skipExtendingChars(e,t,n){for(;(n<0?t>0:t<e.length)&&isExtendingChar(e.charAt(t));)t+=n;return t}function findFirst(e,t,n){for(var r=t>n?-1:1;;){if(t==n)return t;var i=(t+n)/2,o=r<0?Math.ceil(i):Math.floor(i);if(o==t)return e(o)?t:n;e(o)?n=o:t=o+r}}function getLine(e,t){if((t-=e.first)<0||t>=e.size)throw new Error("There is no line "+(t+e.first)+" in the document.");for(var n=e;!n.lines;)for(var r=0;;++r){var i=n.children[r],o=i.chunkSize();if(t<o){n=i;break}t-=o}return n.lines[t]}function getBetween(e,t,n){var r=[],i=t.line;return e.iter(t.line,n.line+1,function(e){var o=e.text;i==n.line&&(o=o.slice(0,n.ch)),i==t.line&&(o=o.slice(t.ch)),r.push(o),++i}),r}function getLines(e,t,n){var r=[];return e.iter(t,n,function(e){r.push(e.text)}),r}function updateLineHeight(e,t){var n=t-e.height;if(n)for(var r=e;r;r=r.parent)r.height+=n}function lineNo(e){if(null==e.parent)return null;for(var t=e.parent,n=indexOf(t.lines,e),r=t.parent;r;t=r,r=r.parent)for(var i=0;r.children[i]!=t;++i)n+=r.children[i].chunkSize();return n+t.first}function lineAtHeight(e,t){var n=e.first;e:do{for(var r=0;r<e.children.length;++r){var i=e.children[r],o=i.height;if(t<o){e=i;continue e}t-=o,n+=i.chunkSize()}return n}while(!e.lines);for(var s=0;s<e.lines.length;++s){var a=e.lines[s].height;if(t<a)break;t-=a}return n+s}function isLine(e,t){return t>=e.first&&t<e.first+e.size}function lineNumberFor(e,t){return String(e.lineNumberFormatter(t+e.firstLineNumber))}function Pos(e,t,n){if(void 0===n&&(n=null),!(this instanceof Pos))return new Pos(e,t,n);this.line=e,this.ch=t,this.sticky=n}function cmp(e,t){return e.line-t.line||e.ch-t.ch}function equalCursorPos(e,t){return e.sticky==t.sticky&&0==cmp(e,t)}function copyPos(e){return Pos(e.line,e.ch)}function maxPos(e,t){return cmp(e,t)<0?t:e}function minPos(e,t){return cmp(e,t)<0?e:t}function clipLine(e,t){return Math.max(e.first,Math.min(t,e.first+e.size-1))}function clipPos(e,t){if(t.line<e.first)return Pos(e.first,0);var n=e.first+e.size-1;return t.line>n?Pos(n,getLine(e,n).text.length):function clipToLen(e,t){var n=e.ch;return null==n||n>t?Pos(e.line,t):n<0?Pos(e.line,0):e}(t,getLine(e,t.line).text.length)}function clipPosArray(e,t){for(var n=[],r=0;r<t.length;r++)n[r]=clipPos(e,t[r]);return n}var I=!1,F=!1;function MarkedSpan(e,t,n){this.marker=e,this.from=t,this.to=n}function getMarkedSpanFor(e,t){if(e)for(var n=0;n<e.length;++n){var r=e[n];if(r.marker==t)return r}}function removeMarkedSpan(e,t){for(var n,r=0;r<e.length;++r)e[r]!=t&&(n||(n=[])).push(e[r]);return n}function stretchSpansOverChange(e,t){if(t.full)return null;var n=isLine(e,t.from.line)&&getLine(e,t.from.line).markedSpans,r=isLine(e,t.to.line)&&getLine(e,t.to.line).markedSpans;if(!n&&!r)return null;var i=t.from.ch,o=t.to.ch,s=0==cmp(t.from,t.to),a=function markedSpansBefore(e,t,n){var r;if(e)for(var i=0;i<e.length;++i){var o=e[i],s=o.marker;if(null==o.from||(s.inclusiveLeft?o.from<=t:o.from<t)||o.from==t&&"bookmark"==s.type&&(!n||!o.marker.insertLeft)){var a=null==o.to||(s.inclusiveRight?o.to>=t:o.to>t);(r||(r=[])).push(new MarkedSpan(s,o.from,a?null:o.to))}}return r}(n,i,s),l=function markedSpansAfter(e,t,n){var r;if(e)for(var i=0;i<e.length;++i){var o=e[i],s=o.marker;if(null==o.to||(s.inclusiveRight?o.to>=t:o.to>t)||o.from==t&&"bookmark"==s.type&&(!n||o.marker.insertLeft)){var a=null==o.from||(s.inclusiveLeft?o.from<=t:o.from<t);(r||(r=[])).push(new MarkedSpan(s,a?null:o.from-t,null==o.to?null:o.to-t))}}return r}(r,o,s),c=1==t.text.length,u=lst(t.text).length+(c?i:0);if(a)for(var d=0;d<a.length;++d){var p=a[d];if(null==p.to){var h=getMarkedSpanFor(l,p.marker);h?c&&(p.to=null==h.to?null:h.to+u):p.to=i}}if(l)for(var f=0;f<l.length;++f){var g=l[f];if(null!=g.to&&(g.to+=u),null==g.from){getMarkedSpanFor(a,g.marker)||(g.from=u,c&&(a||(a=[])).push(g))}else g.from+=u,c&&(a||(a=[])).push(g)}a&&(a=clearEmptySpans(a)),l&&l!=a&&(l=clearEmptySpans(l));var m=[a];if(!c){var v,y=t.text.length-2;if(y>0&&a)for(var b=0;b<a.length;++b)null==a[b].to&&(v||(v=[])).push(new MarkedSpan(a[b].marker,null,null));for(var C=0;C<y;++C)m.push(v);m.push(l)}return m}function clearEmptySpans(e){for(var t=0;t<e.length;++t){var n=e[t];null!=n.from&&n.from==n.to&&!1!==n.marker.clearWhenEmpty&&e.splice(t--,1)}return e.length?e:null}function detachMarkedSpans(e){var t=e.markedSpans;if(t){for(var n=0;n<t.length;++n)t[n].marker.detachLine(e);e.markedSpans=null}}function attachMarkedSpans(e,t){if(t){for(var n=0;n<t.length;++n)t[n].marker.attachLine(e);e.markedSpans=t}}function extraLeft(e){return e.inclusiveLeft?-1:0}function extraRight(e){return e.inclusiveRight?1:0}function compareCollapsedMarkers(e,t){var n=e.lines.length-t.lines.length;if(0!=n)return n;var r=e.find(),i=t.find(),o=cmp(r.from,i.from)||extraLeft(e)-extraLeft(t);if(o)return-o;var s=cmp(r.to,i.to)||extraRight(e)-extraRight(t);return s||t.id-e.id}function collapsedSpanAtSide(e,t){var n,r=F&&e.markedSpans;if(r)for(var i=void 0,o=0;o<r.length;++o)(i=r[o]).marker.collapsed&&null==(t?i.from:i.to)&&(!n||compareCollapsedMarkers(n,i.marker)<0)&&(n=i.marker);return n}function collapsedSpanAtStart(e){return collapsedSpanAtSide(e,!0)}function collapsedSpanAtEnd(e){return collapsedSpanAtSide(e,!1)}function conflictingCollapsedRange(e,t,n,r,i){var o=getLine(e,t),s=F&&o.markedSpans;if(s)for(var a=0;a<s.length;++a){var l=s[a];if(l.marker.collapsed){var c=l.marker.find(0),u=cmp(c.from,n)||extraLeft(l.marker)-extraLeft(i),d=cmp(c.to,r)||extraRight(l.marker)-extraRight(i);if(!(u>=0&&d<=0||u<=0&&d>=0)&&(u<=0&&(l.marker.inclusiveRight&&i.inclusiveLeft?cmp(c.to,n)>=0:cmp(c.to,n)>0)||u>=0&&(l.marker.inclusiveRight&&i.inclusiveLeft?cmp(c.from,r)<=0:cmp(c.from,r)<0)))return!0}}}function visualLine(e){for(var t;t=collapsedSpanAtStart(e);)e=t.find(-1,!0).line;return e}function visualLineNo(e,t){var n=getLine(e,t),r=visualLine(n);return n==r?t:lineNo(r)}function visualLineEndNo(e,t){if(t>e.lastLine())return t;var n,r=getLine(e,t);if(!lineIsHidden(e,r))return t;for(;n=collapsedSpanAtEnd(r);)r=n.find(1,!0).line;return lineNo(r)+1}function lineIsHidden(e,t){var n=F&&t.markedSpans;if(n)for(var r=void 0,i=0;i<n.length;++i)if((r=n[i]).marker.collapsed){if(null==r.from)return!0;if(!r.marker.widgetNode&&0==r.from&&r.marker.inclusiveLeft&&lineIsHiddenInner(e,t,r))return!0}}function lineIsHiddenInner(e,t,n){if(null==n.to){var r=n.marker.find(1,!0);return lineIsHiddenInner(e,r.line,getMarkedSpanFor(r.line.markedSpans,n.marker))}if(n.marker.inclusiveRight&&n.to==t.text.length)return!0;for(var i=void 0,o=0;o<t.markedSpans.length;++o)if((i=t.markedSpans[o]).marker.collapsed&&!i.marker.widgetNode&&i.from==n.to&&(null==i.to||i.to!=n.from)&&(i.marker.inclusiveLeft||n.marker.inclusiveRight)&&lineIsHiddenInner(e,t,i))return!0}function heightAtLine(e){for(var t=0,n=(e=visualLine(e)).parent,r=0;r<n.lines.length;++r){var i=n.lines[r];if(i==e)break;t+=i.height}for(var o=n.parent;o;n=o,o=n.parent)for(var s=0;s<o.children.length;++s){var a=o.children[s];if(a==n)break;t+=a.height}return t}function lineLength(e){if(0==e.height)return 0;for(var t,n=e.text.length,r=e;t=collapsedSpanAtStart(r);){var i=t.find(0,!0);r=i.from.line,n+=i.from.ch-i.to.ch}for(r=e;t=collapsedSpanAtEnd(r);){var o=t.find(0,!0);n-=r.text.length-o.from.ch,n+=(r=o.to.line).text.length-o.to.ch}return n}function findMaxLine(e){var t=e.display,n=e.doc;t.maxLine=getLine(n,n.first),t.maxLineLength=lineLength(t.maxLine),t.maxLineChanged=!0,n.iter(function(e){var n=lineLength(e);n>t.maxLineLength&&(t.maxLineLength=n,t.maxLine=e)})}var B=null;function getBidiPartAt(e,t,n){var r;B=null;for(var i=0;i<e.length;++i){var o=e[i];if(o.from<t&&o.to>t)return i;o.to==t&&(o.from!=o.to&&"before"==n?r=i:B=i),o.from==t&&(o.from!=o.to&&"before"!=n?r=i:B=i)}return null!=r?r:B}var z=function(){var e="bbbbbbbbbtstwsbbbbbbbbbbbbbbssstwNN%%%NNNNNN,N,N1111111111NNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNbbbbbbsbbbbbbbbbbbbbbbbbbbbbbbbbb,N%%%%NNNNLNNNNN%%11NLNNN1LNNNNNLLLLLLLLLLLLLLLLLLLLLLLNLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLN",t="nnnnnnNNr%%r,rNNmmmmmmmmmmmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmmmmmmmmnnnnnnnnnn%nnrrrmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmnNmmmmmmrrmmNmmmmrr1111111111";var n=/[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/,r=/[stwN]/,i=/[LRr]/,o=/[Lb1n]/,s=/[1n]/;function BidiSpan(e,t,n){this.level=e,this.from=t,this.to=n}return function(a,l){var c="ltr"==l?"L":"R";if(0==a.length||"ltr"==l&&!n.test(a))return!1;for(var u=a.length,d=[],p=0;p<u;++p)d.push((h=a.charCodeAt(p))<=247?e.charAt(h):1424<=h&&h<=1524?"R":1536<=h&&h<=1785?t.charAt(h-1536):1774<=h&&h<=2220?"r":8192<=h&&h<=8203?"w":8204==h?"b":"L");for(var h,f=0,g=c;f<u;++f){var m=d[f];"m"==m?d[f]=g:g=m}for(var v=0,y=c;v<u;++v){var b=d[v];"1"==b&&"r"==y?d[v]="n":i.test(b)&&(y=b,"r"==b&&(d[v]="R"))}for(var C=1,x=d[0];C<u-1;++C){var w=d[C];"+"==w&&"1"==x&&"1"==d[C+1]?d[C]="1":","!=w||x!=d[C+1]||"1"!=x&&"n"!=x||(d[C]=x),x=w}for(var S=0;S<u;++S){var k=d[S];if(","==k)d[S]="N";else if("%"==k){var L=void 0;for(L=S+1;L<u&&"%"==d[L];++L);for(var M=S&&"!"==d[S-1]||L<u&&"1"==d[L]?"1":"N",T=S;T<L;++T)d[T]=M;S=L-1}}for(var O=0,P=c;O<u;++O){var A=d[O];"L"==P&&"1"==A?d[O]="L":i.test(A)&&(P=A)}for(var N=0;N<u;++N)if(r.test(d[N])){var D=void 0;for(D=N+1;D<u&&r.test(d[D]);++D);for(var H="L"==(N?d[N-1]:c),W=H==("L"==(D<u?d[D]:c))?H?"L":"R":c,E=N;E<D;++E)d[E]=W;N=D-1}for(var I,F=[],B=0;B<u;)if(o.test(d[B])){var z=B;for(++B;B<u&&o.test(d[B]);++B);F.push(new BidiSpan(0,z,B))}else{var R=B,V=F.length;for(++B;B<u&&"L"!=d[B];++B);for(var U=R;U<B;)if(s.test(d[U])){R<U&&F.splice(V,0,new BidiSpan(1,R,U));var j=U;for(++U;U<B&&s.test(d[U]);++U);F.splice(V,0,new BidiSpan(2,j,U)),R=U}else++U;R<B&&F.splice(V,0,new BidiSpan(1,R,B))}return"ltr"==l&&(1==F[0].level&&(I=a.match(/^\s+/))&&(F[0].from=I[0].length,F.unshift(new BidiSpan(0,0,I[0].length))),1==lst(F).level&&(I=a.match(/\s+$/))&&(lst(F).to-=I[0].length,F.push(new BidiSpan(0,u-I[0].length,u)))),"rtl"==l?F.reverse():F}}();function getOrder(e,t){var n=e.order;return null==n&&(n=e.order=z(e.text,t)),n}var R=[],V=function(e,t,n){if(e.addEventListener)e.addEventListener(t,n,!1);else if(e.attachEvent)e.attachEvent("on"+t,n);else{var r=e._handlers||(e._handlers={});r[t]=(r[t]||R).concat(n)}};function getHandlers(e,t){return e._handlers&&e._handlers[t]||R}function off(e,t,n){if(e.removeEventListener)e.removeEventListener(t,n,!1);else if(e.detachEvent)e.detachEvent("on"+t,n);else{var r=e._handlers,i=r&&r[t];if(i){var o=indexOf(i,n);o>-1&&(r[t]=i.slice(0,o).concat(i.slice(o+1)))}}}function signal(e,t){var n=getHandlers(e,t);if(n.length)for(var r=Array.prototype.slice.call(arguments,2),i=0;i<n.length;++i)n[i].apply(null,r)}function signalDOMEvent(e,t,n){return"string"==typeof t&&(t={type:t,preventDefault:function(){this.defaultPrevented=!0}}),signal(e,n||t.type,e,t),e_defaultPrevented(t)||t.codemirrorIgnore}function signalCursorActivity(e){var t=e._handlers&&e._handlers.cursorActivity;if(t)for(var n=e.curOp.cursorActivityHandlers||(e.curOp.cursorActivityHandlers=[]),r=0;r<t.length;++r)-1==indexOf(n,t[r])&&n.push(t[r])}function hasHandler(e,t){return getHandlers(e,t).length>0}function eventMixin(e){e.prototype.on=function(e,t){V(this,e,t)},e.prototype.off=function(e,t){off(this,e,t)}}function e_preventDefault(e){e.preventDefault?e.preventDefault():e.returnValue=!1}function e_stopPropagation(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0}function e_defaultPrevented(e){return null!=e.defaultPrevented?e.defaultPrevented:0==e.returnValue}function e_stop(e){e_preventDefault(e),e_stopPropagation(e)}function e_target(e){return e.target||e.srcElement}function e_button(e){var t=e.which;return null==t&&(1&e.button?t=1:2&e.button?t=3:4&e.button&&(t=2)),y&&e.ctrlKey&&1==t&&(t=3),t}var U,j=function(){if(s&&a<9)return!1;var e=elt("div");return"draggable"in e||"dragDrop"in e}();function zeroWidthElement(e){if(null==U){var t=elt("span","");removeChildrenAndAdd(e,elt("span",[t,document.createTextNode("x")])),0!=e.firstChild.offsetHeight&&(U=t.offsetWidth<=1&&t.offsetHeight>2&&!(s&&a<8))}var n=U?elt("span",""):elt("span"," ",null,"display: inline-block; width: 1px; margin-right: -1px");return n.setAttribute("cm-text",""),n}var G;function hasBadBidiRects(e){if(null!=G)return G;var t=removeChildrenAndAdd(e,document.createTextNode("AخA")),n=L(t,0,1).getBoundingClientRect(),r=L(t,1,2).getBoundingClientRect();return removeChildren(e),!(!n||n.left==n.right)&&(G=r.right-n.right<3)}var K=3!="\n\nb".split(/\n/).length?function(e){for(var t=0,n=[],r=e.length;t<=r;){var i=e.indexOf("\n",t);-1==i&&(i=e.length);var o=e.slice(t,"\r"==e.charAt(i-1)?i-1:i),s=o.indexOf("\r");-1!=s?(n.push(o.slice(0,s)),t+=s+1):(n.push(o),t=i+1)}return n}:function(e){return e.split(/\r\n?|\n/)},_=window.getSelection?function(e){try{return e.selectionStart!=e.selectionEnd}catch(e){return!1}}:function(e){var t;try{t=e.ownerDocument.selection.createRange()}catch(e){}return!(!t||t.parentElement()!=e)&&0!=t.compareEndPoints("StartToEnd",t)},$=function(){var e=elt("div");return"oncopy"in e||(e.setAttribute("oncopy","return;"),"function"==typeof e.oncopy)}(),q=null;var X={},Y={};function resolveMode(e){if("string"==typeof e&&Y.hasOwnProperty(e))e=Y[e];else if(e&&"string"==typeof e.name&&Y.hasOwnProperty(e.name)){var t=Y[e.name];"string"==typeof t&&(t={name:t}),(e=createObj(t,e)).name=t.name}else{if("string"==typeof e&&/^[\w\-]+\/[\w\-]+\+xml$/.test(e))return resolveMode("application/xml");if("string"==typeof e&&/^[\w\-]+\/[\w\-]+\+json$/.test(e))return resolveMode("application/json")}return"string"==typeof e?{name:e}:e||{name:"null"}}function getMode(e,t){t=resolveMode(t);var n=X[t.name];if(!n)return getMode(e,"text/plain");var r=n(e,t);if(Z.hasOwnProperty(t.name)){var i=Z[t.name];for(var o in i)i.hasOwnProperty(o)&&(r.hasOwnProperty(o)&&(r["_"+o]=r[o]),r[o]=i[o])}if(r.name=t.name,t.helperType&&(r.helperType=t.helperType),t.modeProps)for(var s in t.modeProps)r[s]=t.modeProps[s];return r}var Z={};function extendMode(e,t){copyObj(t,Z.hasOwnProperty(e)?Z[e]:Z[e]={})}function copyState(e,t){if(!0===t)return t;if(e.copyState)return e.copyState(t);var n={};for(var r in t){var i=t[r];i instanceof Array&&(i=i.concat([])),n[r]=i}return n}function innerMode(e,t){for(var n;e.innerMode&&(n=e.innerMode(t))&&n.mode!=e;)t=n.state,e=n.mode;return n||{mode:e,state:t}}function startState(e,t,n){return!e.startState||e.startState(t,n)}var Q=function(e,t,n){this.pos=this.start=0,this.string=e,this.tabSize=t||8,this.lastColumnPos=this.lastColumnValue=0,this.lineStart=0,this.lineOracle=n};Q.prototype.eol=function(){return this.pos>=this.string.length},Q.prototype.sol=function(){return this.pos==this.lineStart},Q.prototype.peek=function(){return this.string.charAt(this.pos)||void 0},Q.prototype.next=function(){if(this.pos<this.string.length)return this.string.charAt(this.pos++)},Q.prototype.eat=function(e){var t=this.string.charAt(this.pos);if("string"==typeof e?t==e:t&&(e.test?e.test(t):e(t)))return++this.pos,t},Q.prototype.eatWhile=function(e){for(var t=this.pos;this.eat(e););return this.pos>t},Q.prototype.eatSpace=function(){for(var e=this.pos;/[\s\u00a0]/.test(this.string.charAt(this.pos));)++this.pos;return this.pos>e},Q.prototype.skipToEnd=function(){this.pos=this.string.length},Q.prototype.skipTo=function(e){var t=this.string.indexOf(e,this.pos);if(t>-1)return this.pos=t,!0},Q.prototype.backUp=function(e){this.pos-=e},Q.prototype.column=function(){return this.lastColumnPos<this.start&&(this.lastColumnValue=countColumn(this.string,this.start,this.tabSize,this.lastColumnPos,this.lastColumnValue),this.lastColumnPos=this.start),this.lastColumnValue-(this.lineStart?countColumn(this.string,this.lineStart,this.tabSize):0)},Q.prototype.indentation=function(){return countColumn(this.string,null,this.tabSize)-(this.lineStart?countColumn(this.string,this.lineStart,this.tabSize):0)},Q.prototype.match=function(e,t,n){if("string"!=typeof e){var r=this.string.slice(this.pos).match(e);return r&&r.index>0?null:(r&&!1!==t&&(this.pos+=r[0].length),r)}var i=function(e){return n?e.toLowerCase():e};if(i(this.string.substr(this.pos,e.length))==i(e))return!1!==t&&(this.pos+=e.length),!0},Q.prototype.current=function(){return this.string.slice(this.start,this.pos)},Q.prototype.hideFirstChars=function(e,t){this.lineStart+=e;try{return t()}finally{this.lineStart-=e}},Q.prototype.lookAhead=function(e){var t=this.lineOracle;return t&&t.lookAhead(e)},Q.prototype.baseToken=function(){var e=this.lineOracle;return e&&e.baseToken(this.pos)};var J=function(e,t){this.state=e,this.lookAhead=t},ee=function(e,t,n,r){this.state=t,this.doc=e,this.line=n,this.maxLookAhead=r||0,this.baseTokens=null,this.baseTokenPos=1};ee.prototype.lookAhead=function(e){var t=this.doc.getLine(this.line+e);return null!=t&&e>this.maxLookAhead&&(this.maxLookAhead=e),t},ee.prototype.baseToken=function(e){if(!this.baseTokens)return null;for(;this.baseTokens[this.baseTokenPos]<=e;)this.baseTokenPos+=2;var t=this.baseTokens[this.baseTokenPos+1];return{type:t&&t.replace(/( |^)overlay .*/,""),size:this.baseTokens[this.baseTokenPos]-e}},ee.prototype.nextLine=function(){this.line++,this.maxLookAhead>0&&this.maxLookAhead--},ee.fromSaved=function(e,t,n){return t instanceof J?new ee(e,copyState(e.mode,t.state),n,t.lookAhead):new ee(e,copyState(e.mode,t),n)},ee.prototype.save=function(e){var t=!1!==e?copyState(this.doc.mode,this.state):this.state;return this.maxLookAhead>0?new J(t,this.maxLookAhead):t};function highlightLine(e,t,n,r){var i=[e.state.modeGen],o={};runMode(e,t.text,e.doc.mode,n,function(e,t){return i.push(e,t)},o,r);for(var s=n.state,a=function(r){n.baseTokens=i;var a=e.state.overlays[r],l=1,c=0;n.state=!0,runMode(e,t.text,a.mode,n,function(e,t){for(var n=l;c<e;){var r=i[l];r>e&&i.splice(l,1,e,i[l+1],r),l+=2,c=Math.min(e,r)}if(t)if(a.opaque)i.splice(n,l-n,e,"overlay "+t),l=n+2;else for(;n<l;n+=2){var o=i[n+1];i[n+1]=(o?o+" ":"")+"overlay "+t}},o),n.state=s,n.baseTokens=null,n.baseTokenPos=1},l=0;l<e.state.overlays.length;++l)a(l);return{styles:i,classes:o.bgClass||o.textClass?o:null}}function getLineStyles(e,t,n){if(!t.styles||t.styles[0]!=e.state.modeGen){var r=getContextBefore(e,lineNo(t)),i=t.text.length>e.options.maxHighlightLength&©State(e.doc.mode,r.state),o=highlightLine(e,t,r);i&&(r.state=i),t.stateAfter=r.save(!i),t.styles=o.styles,o.classes?t.styleClasses=o.classes:t.styleClasses&&(t.styleClasses=null),n===e.doc.highlightFrontier&&(e.doc.modeFrontier=Math.max(e.doc.modeFrontier,++e.doc.highlightFrontier))}return t.styles}function getContextBefore(e,t,n){var r=e.doc,i=e.display;if(!r.mode.startState)return new ee(r,!0,t);var o=function findStartLine(e,t,n){for(var r,i,o=e.doc,s=n?-1:t-(e.doc.mode.innerMode?1e3:100),a=t;a>s;--a){if(a<=o.first)return o.first;var l=getLine(o,a-1),c=l.stateAfter;if(c&&(!n||a+(c instanceof J?c.lookAhead:0)<=o.modeFrontier))return a;var u=countColumn(l.text,null,e.options.tabSize);(null==i||r>u)&&(i=a-1,r=u)}return i}(e,t,n),s=o>r.first&&getLine(r,o-1).stateAfter,a=s?ee.fromSaved(r,s,o):new ee(r,startState(r.mode),o);return r.iter(o,t,function(n){processLine(e,n.text,a);var r=a.line;n.stateAfter=r==t-1||r%5==0||r>=i.viewFrom&&r<i.viewTo?a.save():null,a.nextLine()}),n&&(r.modeFrontier=a.line),a}function processLine(e,t,n,r){var i=e.doc.mode,o=new Q(t,e.options.tabSize,n);for(o.start=o.pos=r||0,""==t&&callBlankLine(i,n.state);!o.eol();)readToken(i,o,n.state),o.start=o.pos}function callBlankLine(e,t){if(e.blankLine)return e.blankLine(t);if(e.innerMode){var n=innerMode(e,t);return n.mode.blankLine?n.mode.blankLine(n.state):void 0}}function readToken(e,t,n,r){for(var i=0;i<10;i++){r&&(r[0]=innerMode(e,n).mode);var o=e.token(t,n);if(t.pos>t.start)return o}throw new Error("Mode "+e.name+" failed to advance stream.")}var te=function(e,t,n){this.start=e.start,this.end=e.pos,this.string=e.current(),this.type=t||null,this.state=n};function takeToken(e,t,n,r){var i,o,s=e.doc,a=s.mode,l=getLine(s,(t=clipPos(s,t)).line),c=getContextBefore(e,t.line,n),u=new Q(l.text,e.options.tabSize,c);for(r&&(o=[]);(r||u.pos<t.ch)&&!u.eol();)u.start=u.pos,i=readToken(a,u,c.state),r&&o.push(new te(u,i,copyState(s.mode,c.state)));return r?o:new te(u,i,c.state)}function extractLineClasses(e,t){if(e)for(;;){var n=e.match(/(?:^|\s+)line-(background-)?(\S+)/);if(!n)break;e=e.slice(0,n.index)+e.slice(n.index+n[0].length);var r=n[1]?"bgClass":"textClass";null==t[r]?t[r]=n[2]:new RegExp("(?:^|s)"+n[2]+"(?:$|s)").test(t[r])||(t[r]+=" "+n[2])}return e}function runMode(e,t,n,r,i,o,s){var a=n.flattenSpans;null==a&&(a=e.options.flattenSpans);var l,c=0,u=null,d=new Q(t,e.options.tabSize,r),p=e.options.addModeClass&&[null];for(""==t&&extractLineClasses(callBlankLine(n,r.state),o);!d.eol();){if(d.pos>e.options.maxHighlightLength?(a=!1,s&&processLine(e,t,r,d.pos),d.pos=t.length,l=null):l=extractLineClasses(readToken(n,d,r.state,p),o),p){var h=p[0].name;h&&(l="m-"+(l?h+" "+l:h))}if(!a||u!=l){for(;c<d.start;)i(c=Math.min(d.start,c+5e3),u);u=l}d.start=d.pos}for(;c<d.pos;){var f=Math.min(d.pos,c+5e3);i(f,u),c=f}}var ne=function(e,t,n){this.text=e,attachMarkedSpans(this,t),this.height=n?n(this):1};ne.prototype.lineNo=function(){return lineNo(this)},eventMixin(ne);var re={},ie={};function interpretTokenStyle(e,t){if(!e||/^\s*$/.test(e))return null;var n=t.addModeClass?ie:re;return n[e]||(n[e]=e.replace(/\S+/g,"cm-$&"))}function buildLineContent(e,t){var n=eltP("span",null,null,l?"padding-right: .1px":null),r={pre:eltP("pre",[n],"CodeMirror-line"),content:n,col:0,pos:0,cm:e,trailingSpace:!1,splitSpaces:(s||l)&&e.getOption("lineWrapping")};t.measure={};for(var i=0;i<=(t.rest?t.rest.length:0);i++){var o=i?t.rest[i-1]:t.line,a=void 0;r.pos=0,r.addToken=buildToken,hasBadBidiRects(e.display.measure)&&(a=getOrder(o,e.doc.direction))&&(r.addToken=buildTokenBadBidi(r.addToken,a)),r.map=[];insertLineContent(o,r,getLineStyles(e,o,t!=e.display.externalMeasured&&lineNo(o))),o.styleClasses&&(o.styleClasses.bgClass&&(r.bgClass=joinClasses(o.styleClasses.bgClass,r.bgClass||"")),o.styleClasses.textClass&&(r.textClass=joinClasses(o.styleClasses.textClass,r.textClass||""))),0==r.map.length&&r.map.push(0,0,r.content.appendChild(zeroWidthElement(e.display.measure))),0==i?(t.measure.map=r.map,t.measure.cache={}):((t.measure.maps||(t.measure.maps=[])).push(r.map),(t.measure.caches||(t.measure.caches=[])).push({}))}if(l){var c=r.content.lastChild;(/\bcm-tab\b/.test(c.className)||c.querySelector&&c.querySelector(".cm-tab"))&&(r.content.className="cm-tab-wrap-hack")}return signal(e,"renderLine",e,t.line,r.pre),r.pre.className&&(r.textClass=joinClasses(r.pre.className,r.textClass||"")),r}function defaultSpecialCharPlaceholder(e){var t=elt("span","•","cm-invalidchar");return t.title="\\u"+e.charCodeAt(0).toString(16),t.setAttribute("aria-label",t.title),t}function buildToken(e,t,n,r,i,o,l){if(t){var c,u=e.splitSpaces?function splitSpaces(e,t){if(e.length>1&&!/ /.test(e))return e;for(var n=t,r="",i=0;i<e.length;i++){var o=e.charAt(i);" "!=o||!n||i!=e.length-1&&32!=e.charCodeAt(i+1)||(o=" "),r+=o,n=" "==o}return r}(t,e.trailingSpace):t,d=e.cm.state.specialChars,p=!1;if(d.test(t)){c=document.createDocumentFragment();for(var h=0;;){d.lastIndex=h;var f=d.exec(t),g=f?f.index-h:t.length-h;if(g){var m=document.createTextNode(u.slice(h,h+g));s&&a<9?c.appendChild(elt("span",[m])):c.appendChild(m),e.map.push(e.pos,e.pos+g,m),e.col+=g,e.pos+=g}if(!f)break;h+=g+1;var v=void 0;if("\t"==f[0]){var y=e.cm.options.tabSize,b=y-e.col%y;(v=c.appendChild(elt("span",spaceStr(b),"cm-tab"))).setAttribute("role","presentation"),v.setAttribute("cm-text","\t"),e.col+=b}else"\r"==f[0]||"\n"==f[0]?((v=c.appendChild(elt("span","\r"==f[0]?"␍":"","cm-invalidchar"))).setAttribute("cm-text",f[0]),e.col+=1):((v=e.cm.options.specialCharPlaceholder(f[0])).setAttribute("cm-text",f[0]),s&&a<9?c.appendChild(elt("span",[v])):c.appendChild(v),e.col+=1);e.map.push(e.pos,e.pos+1,v),e.pos++}}else e.col+=t.length,c=document.createTextNode(u),e.map.push(e.pos,e.pos+t.length,c),s&&a<9&&(p=!0),e.pos+=t.length;if(e.trailingSpace=32==u.charCodeAt(t.length-1),n||r||i||p||l){var C=n||"";r&&(C+=r),i&&(C+=i);var x=elt("span",[c],C,l);return o&&(x.title=o),e.content.appendChild(x)}e.content.appendChild(c)}}function buildTokenBadBidi(e,t){return function(n,r,i,o,s,a,l){i=i?i+" cm-force-border":"cm-force-border";for(var c=n.pos,u=c+r.length;;){for(var d=void 0,p=0;p<t.length&&!((d=t[p]).to>c&&d.from<=c);p++);if(d.to>=u)return e(n,r,i,o,s,a,l);e(n,r.slice(0,d.to-c),i,o,null,a,l),o=null,r=r.slice(d.to-c),c=d.to}}}function buildCollapsedSpan(e,t,n,r){var i=!r&&n.widgetNode;i&&e.map.push(e.pos,e.pos+t,i),!r&&e.cm.display.input.needsContentAttribute&&(i||(i=e.content.appendChild(document.createElement("span"))),i.setAttribute("cm-marker",n.id)),i&&(e.cm.display.input.setUneditable(i),e.content.appendChild(i)),e.pos+=t,e.trailingSpace=!1}function insertLineContent(e,t,n){var r=e.markedSpans,i=e.text,o=0;if(r)for(var s,a,l,c,u,d,p,h=i.length,f=0,g=1,m="",v=0;;){if(v==f){l=c=u=d=a="",p=null,v=1/0;for(var y=[],b=void 0,C=0;C<r.length;++C){var x=r[C],w=x.marker;"bookmark"==w.type&&x.from==f&&w.widgetNode?y.push(w):x.from<=f&&(null==x.to||x.to>f||w.collapsed&&x.to==f&&x.from==f)?(null!=x.to&&x.to!=f&&v>x.to&&(v=x.to,c=""),w.className&&(l+=" "+w.className),w.css&&(a=(a?a+";":"")+w.css),w.startStyle&&x.from==f&&(u+=" "+w.startStyle),w.endStyle&&x.to==v&&(b||(b=[])).push(w.endStyle,x.to),w.title&&!d&&(d=w.title),w.collapsed&&(!p||compareCollapsedMarkers(p.marker,w)<0)&&(p=x)):x.from>f&&v>x.from&&(v=x.from)}if(b)for(var S=0;S<b.length;S+=2)b[S+1]==v&&(c+=" "+b[S]);if(!p||p.from==f)for(var k=0;k<y.length;++k)buildCollapsedSpan(t,0,y[k]);if(p&&(p.from||0)==f){if(buildCollapsedSpan(t,(null==p.to?h+1:p.to)-f,p.marker,null==p.from),null==p.to)return;p.to==f&&(p=!1)}}if(f>=h)break;for(var L=Math.min(h,v);;){if(m){var M=f+m.length;if(!p){var T=M>L?m.slice(0,L-f):m;t.addToken(t,T,s?s+l:l,u,f+T.length==v?c:"",d,a)}if(M>=L){m=m.slice(L-f),f=L;break}f=M,u=""}m=i.slice(o,o=n[g++]),s=interpretTokenStyle(n[g++],t.cm.options)}}else for(var O=1;O<n.length;O+=2)t.addToken(t,i.slice(o,o=n[O]),interpretTokenStyle(n[O+1],t.cm.options))}function LineView(e,t,n){this.line=t,this.rest=function visualLineContinued(e){for(var t,n;t=collapsedSpanAtEnd(e);)e=t.find(1,!0).line,(n||(n=[])).push(e);return n}(t),this.size=this.rest?lineNo(lst(this.rest))-n+1:1,this.node=this.text=null,this.hidden=lineIsHidden(e,t)}function buildViewArray(e,t,n){for(var r,i=[],o=t;o<n;o=r){var s=new LineView(e.doc,getLine(e.doc,o),o);r=o+s.size,i.push(s)}return i}var oe=null;var se=null;function signalLater(e,t){var n=getHandlers(e,t);if(n.length){var r,i=Array.prototype.slice.call(arguments,2);oe?r=oe.delayedCallbacks:se?r=se:(r=se=[],setTimeout(fireOrphanDelayed,0));for(var o=function(e){r.push(function(){return n[e].apply(null,i)})},s=0;s<n.length;++s)o(s)}}function fireOrphanDelayed(){var e=se;se=null;for(var t=0;t<e.length;++t)e[t]()}function updateLineForChanges(e,t,n,r){for(var i=0;i<t.changes.length;i++){var o=t.changes[i];"text"==o?updateLineText(e,t):"gutter"==o?updateLineGutter(e,t,n,r):"class"==o?updateLineClasses(e,t):"widget"==o&&updateLineWidgets(e,t,r)}t.changes=null}function ensureLineWrapped(e){return e.node==e.text&&(e.node=elt("div",null,null,"position: relative"),e.text.parentNode&&e.text.parentNode.replaceChild(e.node,e.text),e.node.appendChild(e.text),s&&a<8&&(e.node.style.zIndex=2)),e.node}function getLineContent(e,t){var n=e.display.externalMeasured;return n&&n.line==t.line?(e.display.externalMeasured=null,t.measure=n.measure,n.built):buildLineContent(e,t)}function updateLineText(e,t){var n=t.text.className,r=getLineContent(e,t);t.text==t.node&&(t.node=r.pre),t.text.parentNode.replaceChild(r.pre,t.text),t.text=r.pre,r.bgClass!=t.bgClass||r.textClass!=t.textClass?(t.bgClass=r.bgClass,t.textClass=r.textClass,updateLineClasses(e,t)):n&&(t.text.className=n)}function updateLineClasses(e,t){!function updateLineBackground(e,t){var n=t.bgClass?t.bgClass+" "+(t.line.bgClass||""):t.line.bgClass;if(n&&(n+=" CodeMirror-linebackground"),t.background)n?t.background.className=n:(t.background.parentNode.removeChild(t.background),t.background=null);else if(n){var r=ensureLineWrapped(t);t.background=r.insertBefore(elt("div",null,n),r.firstChild),e.display.input.setUneditable(t.background)}}(e,t),t.line.wrapClass?ensureLineWrapped(t).className=t.line.wrapClass:t.node!=t.text&&(t.node.className="");var n=t.textClass?t.textClass+" "+(t.line.textClass||""):t.line.textClass;t.text.className=n||""}function updateLineGutter(e,t,n,r){if(t.gutter&&(t.node.removeChild(t.gutter),t.gutter=null),t.gutterBackground&&(t.node.removeChild(t.gutterBackground),t.gutterBackground=null),t.line.gutterClass){var i=ensureLineWrapped(t);t.gutterBackground=elt("div",null,"CodeMirror-gutter-background "+t.line.gutterClass,"left: "+(e.options.fixedGutter?r.fixedPos:-r.gutterTotalWidth)+"px; width: "+r.gutterTotalWidth+"px"),e.display.input.setUneditable(t.gutterBackground),i.insertBefore(t.gutterBackground,t.text)}var o=t.line.gutterMarkers;if(e.options.lineNumbers||o){var s=ensureLineWrapped(t),a=t.gutter=elt("div",null,"CodeMirror-gutter-wrapper","left: "+(e.options.fixedGutter?r.fixedPos:-r.gutterTotalWidth)+"px");if(e.display.input.setUneditable(a),s.insertBefore(a,t.text),t.line.gutterClass&&(a.className+=" "+t.line.gutterClass),!e.options.lineNumbers||o&&o["CodeMirror-linenumbers"]||(t.lineNumber=a.appendChild(elt("div",lineNumberFor(e.options,n),"CodeMirror-linenumber CodeMirror-gutter-elt","left: "+r.gutterLeft["CodeMirror-linenumbers"]+"px; width: "+e.display.lineNumInnerWidth+"px"))),o)for(var l=0;l<e.options.gutters.length;++l){var c=e.options.gutters[l],u=o.hasOwnProperty(c)&&o[c];u&&a.appendChild(elt("div",[u],"CodeMirror-gutter-elt","left: "+r.gutterLeft[c]+"px; width: "+r.gutterWidth[c]+"px"))}}}function updateLineWidgets(e,t,n){t.alignable&&(t.alignable=null);for(var r=t.node.firstChild,i=void 0;r;r=i)i=r.nextSibling,"CodeMirror-linewidget"==r.className&&t.node.removeChild(r);insertLineWidgets(e,t,n)}function buildLineElement(e,t,n,r){var i=getLineContent(e,t);return t.text=t.node=i.pre,i.bgClass&&(t.bgClass=i.bgClass),i.textClass&&(t.textClass=i.textClass),updateLineClasses(e,t),updateLineGutter(e,t,n,r),insertLineWidgets(e,t,r),t.node}function insertLineWidgets(e,t,n){if(insertLineWidgetsFor(e,t.line,t,n,!0),t.rest)for(var r=0;r<t.rest.length;r++)insertLineWidgetsFor(e,t.rest[r],t,n,!1)}function insertLineWidgetsFor(e,t,n,r,i){if(t.widgets)for(var o=ensureLineWrapped(n),s=0,a=t.widgets;s<a.length;++s){var l=a[s],c=elt("div",[l.node],"CodeMirror-linewidget");l.handleMouseEvents||c.setAttribute("cm-ignore-events","true"),positionLineWidget(l,c,n,r),e.display.input.setUneditable(c),i&&l.above?o.insertBefore(c,n.gutter||n.text):o.appendChild(c),signalLater(l,"redraw")}}function positionLineWidget(e,t,n,r){if(e.noHScroll){(n.alignable||(n.alignable=[])).push(t);var i=r.wrapperWidth;t.style.left=r.fixedPos+"px",e.coverGutter||(i-=r.gutterTotalWidth,t.style.paddingLeft=r.gutterTotalWidth+"px"),t.style.width=i+"px"}e.coverGutter&&(t.style.zIndex=5,t.style.position="relative",e.noHScroll||(t.style.marginLeft=-r.gutterTotalWidth+"px"))}function widgetHeight(e){if(null!=e.height)return e.height;var t=e.doc.cm;if(!t)return 0;if(!contains(document.body,e.node)){var n="position: relative;";e.coverGutter&&(n+="margin-left: -"+t.display.gutters.offsetWidth+"px;"),e.noHScroll&&(n+="width: "+t.display.wrapper.clientWidth+"px;"),removeChildrenAndAdd(t.display.measure,elt("div",[e.node],null,n))}return e.height=e.node.parentNode.offsetHeight}function eventInWidget(e,t){for(var n=e_target(t);n!=e.wrapper;n=n.parentNode)if(!n||1==n.nodeType&&"true"==n.getAttribute("cm-ignore-events")||n.parentNode==e.sizer&&n!=e.mover)return!0}function paddingTop(e){return e.lineSpace.offsetTop}function paddingVert(e){return e.mover.offsetHeight-e.lineSpace.offsetHeight}function paddingH(e){if(e.cachedPaddingH)return e.cachedPaddingH;var t=removeChildrenAndAdd(e.measure,elt("pre","x")),n=window.getComputedStyle?window.getComputedStyle(t):t.currentStyle,r={left:parseInt(n.paddingLeft),right:parseInt(n.paddingRight)};return isNaN(r.left)||isNaN(r.right)||(e.cachedPaddingH=r),r}function scrollGap(e){return O-e.display.nativeBarWidth}function displayWidth(e){return e.display.scroller.clientWidth-scrollGap(e)-e.display.barWidth}function displayHeight(e){return e.display.scroller.clientHeight-scrollGap(e)-e.display.barHeight}function mapFromLineView(e,t,n){if(e.line==t)return{map:e.measure.map,cache:e.measure.cache};for(var r=0;r<e.rest.length;r++)if(e.rest[r]==t)return{map:e.measure.maps[r],cache:e.measure.caches[r]};for(var i=0;i<e.rest.length;i++)if(lineNo(e.rest[i])>n)return{map:e.measure.maps[i],cache:e.measure.caches[i],before:!0}}function measureChar(e,t,n,r){return measureCharPrepared(e,prepareMeasureForLine(e,t),n,r)}function findViewForLine(e,t){if(t>=e.display.viewFrom&&t<e.display.viewTo)return e.display.view[findViewIndex(e,t)];var n=e.display.externalMeasured;return n&&t>=n.lineN&&t<n.lineN+n.size?n:void 0}function prepareMeasureForLine(e,t){var n=lineNo(t),r=findViewForLine(e,n);r&&!r.text?r=null:r&&r.changes&&(updateLineForChanges(e,r,n,getDimensions(e)),e.curOp.forceUpdate=!0),r||(r=function updateExternalMeasurement(e,t){var n=lineNo(t=visualLine(t)),r=e.display.externalMeasured=new LineView(e.doc,t,n);r.lineN=n;var i=r.built=buildLineContent(e,r);return r.text=i.pre,removeChildrenAndAdd(e.display.lineMeasure,i.pre),r}(e,t));var i=mapFromLineView(r,t,n);return{line:t,view:r,rect:null,map:i.map,cache:i.cache,before:i.before,hasHeights:!1}}function measureCharPrepared(e,t,n,r,i){t.before&&(n=-1);var o,l=n+(r||"");return t.cache.hasOwnProperty(l)?o=t.cache[l]:(t.rect||(t.rect=t.view.text.getBoundingClientRect()),t.hasHeights||(!function ensureLineHeights(e,t,n){var r=e.options.lineWrapping,i=r&&displayWidth(e);if(!t.measure.heights||r&&t.measure.width!=i){var o=t.measure.heights=[];if(r){t.measure.width=i;for(var s=t.text.firstChild.getClientRects(),a=0;a<s.length-1;a++){var l=s[a],c=s[a+1];Math.abs(l.bottom-c.bottom)>2&&o.push((l.bottom+c.top)/2-n.top)}}o.push(n.bottom-n.top)}}(e,t.view,t.rect),t.hasHeights=!0),(o=function measureCharInner(e,t,n,r){var i,o=nodeAndOffsetInLineMap(t.map,n,r),l=o.node,c=o.start,u=o.end,d=o.collapse;if(3==l.nodeType){for(var p=0;p<4;p++){for(;c&&isExtendingChar(t.line.text.charAt(o.coverStart+c));)--c;for(;o.coverStart+u<o.coverEnd&&isExtendingChar(t.line.text.charAt(o.coverStart+u));)++u;if((i=s&&a<9&&0==c&&u==o.coverEnd-o.coverStart?l.parentNode.getBoundingClientRect():getUsefulRect(L(l,c,u).getClientRects(),r)).left||i.right||0==c)break;u=c,c-=1,d="right"}s&&a<11&&(i=function maybeUpdateRectForZooming(e,t){if(!window.screen||null==screen.logicalXDPI||screen.logicalXDPI==screen.deviceXDPI||!function hasBadZoomedRects(e){if(null!=q)return q;var t=removeChildrenAndAdd(e,elt("span","x")),n=t.getBoundingClientRect(),r=L(t,0,1).getBoundingClientRect();return q=Math.abs(n.left-r.left)>1}(e))return t;var n=screen.logicalXDPI/screen.deviceXDPI,r=screen.logicalYDPI/screen.deviceYDPI;return{left:t.left*n,right:t.right*n,top:t.top*r,bottom:t.bottom*r}}(e.display.measure,i))}else{c>0&&(d=r="right");var h;i=e.options.lineWrapping&&(h=l.getClientRects()).length>1?h["right"==r?h.length-1:0]:l.getBoundingClientRect()}if(s&&a<9&&!c&&(!i||!i.left&&!i.right)){var f=l.parentNode.getClientRects()[0];i=f?{left:f.left,right:f.left+charWidth(e.display),top:f.top,bottom:f.bottom}:ae}for(var g=i.top-t.rect.top,m=i.bottom-t.rect.top,v=(g+m)/2,y=t.view.measure.heights,b=0;b<y.length-1&&!(v<y[b]);b++);var C=b?y[b-1]:0,x=y[b],w={left:("right"==d?i.right:i.left)-t.rect.left,right:("left"==d?i.left:i.right)-t.rect.left,top:C,bottom:x};i.left||i.right||(w.bogus=!0);e.options.singleCursorHeightPerLine||(w.rtop=g,w.rbottom=m);return w}(e,t,n,r)).bogus||(t.cache[l]=o)),{left:o.left,right:o.right,top:i?o.rtop:o.top,bottom:i?o.rbottom:o.bottom}}var ae={left:0,right:0,top:0,bottom:0};function nodeAndOffsetInLineMap(e,t,n){for(var r,i,o,s,a,l,c=0;c<e.length;c+=3)if(a=e[c],l=e[c+1],t<a?(i=0,o=1,s="left"):t<l?o=(i=t-a)+1:(c==e.length-3||t==l&&e[c+3]>t)&&(i=(o=l-a)-1,t>=l&&(s="right")),null!=i){if(r=e[c+2],a==l&&n==(r.insertLeft?"left":"right")&&(s=n),"left"==n&&0==i)for(;c&&e[c-2]==e[c-3]&&e[c-1].insertLeft;)r=e[2+(c-=3)],s="left";if("right"==n&&i==l-a)for(;c<e.length-3&&e[c+3]==e[c+4]&&!e[c+5].insertLeft;)r=e[(c+=3)+2],s="right";break}return{node:r,start:i,end:o,collapse:s,coverStart:a,coverEnd:l}}function getUsefulRect(e,t){var n=ae;if("left"==t)for(var r=0;r<e.length&&(n=e[r]).left==n.right;r++);else for(var i=e.length-1;i>=0&&(n=e[i]).left==n.right;i--);return n}function clearLineMeasurementCacheFor(e){if(e.measure&&(e.measure.cache={},e.measure.heights=null,e.rest))for(var t=0;t<e.rest.length;t++)e.measure.caches[t]={}}function clearLineMeasurementCache(e){e.display.externalMeasure=null,removeChildren(e.display.lineMeasure);for(var t=0;t<e.display.view.length;t++)clearLineMeasurementCacheFor(e.display.view[t])}function clearCaches(e){clearLineMeasurementCache(e),e.display.cachedCharWidth=e.display.cachedTextHeight=e.display.cachedPaddingH=null,e.options.lineWrapping||(e.display.maxLineChanged=!0),e.display.lineNumChars=null}function pageScrollX(){return u&&m?-(document.body.getBoundingClientRect().left-parseInt(getComputedStyle(document.body).marginLeft)):window.pageXOffset||(document.documentElement||document.body).scrollLeft}function pageScrollY(){return u&&m?-(document.body.getBoundingClientRect().top-parseInt(getComputedStyle(document.body).marginTop)):window.pageYOffset||(document.documentElement||document.body).scrollTop}function widgetTopHeight(e){var t=0;if(e.widgets)for(var n=0;n<e.widgets.length;++n)e.widgets[n].above&&(t+=widgetHeight(e.widgets[n]));return t}function intoCoordSystem(e,t,n,r,i){if(!i){var o=widgetTopHeight(t);n.top+=o,n.bottom+=o}if("line"==r)return n;r||(r="local");var s=heightAtLine(t);if("local"==r?s+=paddingTop(e.display):s-=e.display.viewOffset,"page"==r||"window"==r){var a=e.display.lineSpace.getBoundingClientRect();s+=a.top+("window"==r?0:pageScrollY());var l=a.left+("window"==r?0:pageScrollX());n.left+=l,n.right+=l}return n.top+=s,n.bottom+=s,n}function fromCoordSystem(e,t,n){if("div"==n)return t;var r=t.left,i=t.top;if("page"==n)r-=pageScrollX(),i-=pageScrollY();else if("local"==n||!n){var o=e.display.sizer.getBoundingClientRect();r+=o.left,i+=o.top}var s=e.display.lineSpace.getBoundingClientRect();return{left:r-s.left,top:i-s.top}}function charCoords(e,t,n,r,i){return r||(r=getLine(e.doc,t.line)),intoCoordSystem(e,r,measureChar(e,r,t.ch,i),n)}function cursorCoords(e,t,n,r,i,o){r=r||getLine(e.doc,t.line),i||(i=prepareMeasureForLine(e,r));function get(t,s){var a=measureCharPrepared(e,i,t,s?"right":"left",o);return s?a.left=a.right:a.right=a.left,intoCoordSystem(e,r,a,n)}var s=getOrder(r,e.doc.direction),a=t.ch,l=t.sticky;if(a>=r.text.length?(a=r.text.length,l="before"):a<=0&&(a=0,l="after"),!s)return get("before"==l?a-1:a,"before"==l);function getBidi(e,t,n){var r=1==s[t].level;return get(n?e-1:e,r!=n)}var c=getBidiPartAt(s,a,l),u=B,d=getBidi(a,c,"before"==l);return null!=u&&(d.other=getBidi(a,u,"before"!=l)),d}function estimateCoords(e,t){var n=0;t=clipPos(e.doc,t),e.options.lineWrapping||(n=charWidth(e.display)*t.ch);var r=getLine(e.doc,t.line),i=heightAtLine(r)+paddingTop(e.display);return{left:n,right:n,top:i,bottom:i+r.height}}function PosWithInfo(e,t,n,r,i){var o=Pos(e,t,n);return o.xRel=i,r&&(o.outside=!0),o}function coordsChar(e,t,n){var r=e.doc;if((n+=e.display.viewOffset)<0)return PosWithInfo(r.first,0,null,!0,-1);var i=lineAtHeight(r,n),o=r.first+r.size-1;if(i>o)return PosWithInfo(r.first+r.size-1,getLine(r,o).text.length,null,!0,1);t<0&&(t=0);for(var s=getLine(r,i);;){var a=coordsCharInner(e,s,i,t,n),l=collapsedSpanAtEnd(s),c=l&&l.find(0,!0);if(!l||!(a.ch>c.from.ch||a.ch==c.from.ch&&a.xRel>0))return a;i=lineNo(s=c.to.line)}}function wrappedLineExtent(e,t,n,r){r-=widgetTopHeight(t);var i=t.text.length,o=findFirst(function(t){return measureCharPrepared(e,n,t-1).bottom<=r},i,0);return{begin:o,end:i=findFirst(function(t){return measureCharPrepared(e,n,t).top>r},o,i)}}function wrappedLineExtentChar(e,t,n,r){n||(n=prepareMeasureForLine(e,t));return wrappedLineExtent(e,t,n,intoCoordSystem(e,t,measureCharPrepared(e,n,r),"line").top)}function boxIsAfter(e,t,n,r){return!(e.bottom<=n)&&(e.top>n||(r?e.left:e.right)>t)}function coordsCharInner(e,t,n,r,i){i-=heightAtLine(t);var o=prepareMeasureForLine(e,t),s=widgetTopHeight(t),a=0,l=t.text.length,c=!0,u=getOrder(t,e.doc.direction);if(u){var d=(e.options.lineWrapping?function coordsBidiPartWrapped(e,t,n,r,i,o,s){var a=wrappedLineExtent(e,t,r,s),l=a.begin,c=a.end;/\s/.test(t.text.charAt(c-1))&&c--;for(var u=null,d=null,p=0;p<i.length;p++){var h=i[p];if(!(h.from>=c||h.to<=l)){var f=1!=h.level,g=measureCharPrepared(e,r,f?Math.min(c,h.to)-1:Math.max(l,h.from)).right,m=g<o?o-g+1e9:g-o;(!u||d>m)&&(u=h,d=m)}}u||(u=i[i.length-1]);u.from<l&&(u={from:l,to:u.to,level:u.level});u.to>c&&(u={from:u.from,to:c,level:u.level});return u}:function coordsBidiPart(e,t,n,r,i,o,s){var a=findFirst(function(a){var l=i[a],c=1!=l.level;return boxIsAfter(cursorCoords(e,Pos(n,c?l.to:l.from,c?"before":"after"),"line",t,r),o,s,!0)},0,i.length-1),l=i[a];if(a>0){var c=1!=l.level,u=cursorCoords(e,Pos(n,c?l.from:l.to,c?"after":"before"),"line",t,r);boxIsAfter(u,o,s,!0)&&u.top>s&&(l=i[a-1])}return l})(e,t,n,o,u,r,i);a=(c=1!=d.level)?d.from:d.to-1,l=c?d.to:d.from-1}var p,h,f=null,g=null,m=findFirst(function(t){var n=measureCharPrepared(e,o,t);return n.top+=s,n.bottom+=s,!!boxIsAfter(n,r,i,!1)&&(n.top<=i&&n.left<=r&&(f=t,g=n),!0)},a,l),v=!1;if(g){var y=r-g.left<g.right-r,b=y==c;m=f+(b?0:1),h=b?"after":"before",p=y?g.left:g.right}else{c||m!=l&&m!=a||m++,h=0==m?"after":m==t.text.length?"before":measureCharPrepared(e,o,m-(c?1:0)).bottom+s<=i==c?"after":"before";var C=cursorCoords(e,Pos(n,m,h),"line",t,o);p=C.left,v=i<C.top||i>=C.bottom}return PosWithInfo(n,m=skipExtendingChars(t.text,m,1),h,v,r-p)}var le;function textHeight(e){if(null!=e.cachedTextHeight)return e.cachedTextHeight;if(null==le){le=elt("pre");for(var t=0;t<49;++t)le.appendChild(document.createTextNode("x")),le.appendChild(elt("br"));le.appendChild(document.createTextNode("x"))}removeChildrenAndAdd(e.measure,le);var n=le.offsetHeight/50;return n>3&&(e.cachedTextHeight=n),removeChildren(e.measure),n||1}function charWidth(e){if(null!=e.cachedCharWidth)return e.cachedCharWidth;var t=elt("span","xxxxxxxxxx"),n=elt("pre",[t]);removeChildrenAndAdd(e.measure,n);var r=t.getBoundingClientRect(),i=(r.right-r.left)/10;return i>2&&(e.cachedCharWidth=i),i||10}function getDimensions(e){for(var t=e.display,n={},r={},i=t.gutters.clientLeft,o=t.gutters.firstChild,s=0;o;o=o.nextSibling,++s)n[e.options.gutters[s]]=o.offsetLeft+o.clientLeft+i,r[e.options.gutters[s]]=o.clientWidth;return{fixedPos:compensateForHScroll(t),gutterTotalWidth:t.gutters.offsetWidth,gutterLeft:n,gutterWidth:r,wrapperWidth:t.wrapper.clientWidth}}function compensateForHScroll(e){return e.scroller.getBoundingClientRect().left-e.sizer.getBoundingClientRect().left}function estimateHeight(e){var t=textHeight(e.display),n=e.options.lineWrapping,r=n&&Math.max(5,e.display.scroller.clientWidth/charWidth(e.display)-3);return function(i){if(lineIsHidden(e.doc,i))return 0;var o=0;if(i.widgets)for(var s=0;s<i.widgets.length;s++)i.widgets[s].height&&(o+=i.widgets[s].height);return n?o+(Math.ceil(i.text.length/r)||1)*t:o+t}}function estimateLineHeights(e){var t=e.doc,n=estimateHeight(e);t.iter(function(e){var t=n(e);t!=e.height&&updateLineHeight(e,t)})}function posFromMouse(e,t,n,r){var i=e.display;if(!n&&"true"==e_target(t).getAttribute("cm-not-content"))return null;var o,s,a=i.lineSpace.getBoundingClientRect();try{o=t.clientX-a.left,s=t.clientY-a.top}catch(t){return null}var l,c=coordsChar(e,o,s);if(r&&1==c.xRel&&(l=getLine(e.doc,c.line).text).length==c.ch){var u=countColumn(l,l.length,e.options.tabSize)-l.length;c=Pos(c.line,Math.max(0,Math.round((o-paddingH(e.display).left)/charWidth(e.display))-u))}return c}function findViewIndex(e,t){if(t>=e.display.viewTo)return null;if((t-=e.display.viewFrom)<0)return null;for(var n=e.display.view,r=0;r<n.length;r++)if((t-=n[r].size)<0)return r}function updateSelection(e){e.display.input.showSelection(e.display.input.prepareSelection())}function prepareSelection(e,t){void 0===t&&(t=!0);for(var n=e.doc,r={},i=r.cursors=document.createDocumentFragment(),o=r.selection=document.createDocumentFragment(),s=0;s<n.sel.ranges.length;s++)if(t||s!=n.sel.primIndex){var a=n.sel.ranges[s];if(!(a.from().line>=e.display.viewTo||a.to().line<e.display.viewFrom)){var l=a.empty();(l||e.options.showCursorWhenSelecting)&&drawSelectionCursor(e,a.head,i),l||drawSelectionRange(e,a,o)}}return r}function drawSelectionCursor(e,t,n){var r=cursorCoords(e,t,"div",null,null,!e.options.singleCursorHeightPerLine),i=n.appendChild(elt("div"," ","CodeMirror-cursor"));if(i.style.left=r.left+"px",i.style.top=r.top+"px",i.style.height=Math.max(0,r.bottom-r.top)*e.options.cursorHeight+"px",r.other){var o=n.appendChild(elt("div"," ","CodeMirror-cursor CodeMirror-secondarycursor"));o.style.display="",o.style.left=r.other.left+"px",o.style.top=r.other.top+"px",o.style.height=.85*(r.other.bottom-r.other.top)+"px"}}function cmpCoords(e,t){return e.top-t.top||e.left-t.left}function drawSelectionRange(e,t,n){var r=e.display,i=e.doc,o=document.createDocumentFragment(),s=paddingH(e.display),a=s.left,l=Math.max(r.sizerWidth,displayWidth(e)-r.sizer.offsetLeft)-s.right,c="ltr"==i.direction;function add(e,t,n,r){t<0&&(t=0),t=Math.round(t),r=Math.round(r),o.appendChild(elt("div",null,"CodeMirror-selected","position: absolute; left: "+e+"px;\n top: "+t+"px; width: "+(null==n?l-e:n)+"px;\n height: "+(r-t)+"px"))}function drawForLine(t,n,r){var o,s,u=getLine(i,t),d=u.text.length;function coords(n,r){return charCoords(e,Pos(t,n),"div",u,r)}function wrapX(t,n,r){var i=wrappedLineExtentChar(e,u,null,t),o="ltr"==n==("after"==r)?"left":"right";return coords("after"==r?i.begin:i.end-(/\s/.test(u.text.charAt(i.end-1))?2:1),o)[o]}var p=getOrder(u,i.direction);return function iterateBidiSections(e,t,n,r){if(!e)return r(t,n,"ltr",0);for(var i=!1,o=0;o<e.length;++o){var s=e[o];(s.from<n&&s.to>t||t==n&&s.to==t)&&(r(Math.max(s.from,t),Math.min(s.to,n),1==s.level?"rtl":"ltr",o),i=!0)}i||r(t,n,"ltr")}(p,n||0,null==r?d:r,function(e,t,i,u){var h="ltr"==i,f=coords(e,h?"left":"right"),g=coords(t-1,h?"right":"left"),m=null==n&&0==e,v=null==r&&t==d,y=0==u,b=!p||u==p.length-1;if(g.top-f.top<=3){var C=(c?v:m)&&b,x=(c?m:v)&&y?a:(h?f:g).left,w=C?l:(h?g:f).right;add(x,f.top,w-x,f.bottom)}else{var S,k,L,M;h?(S=c&&m&&y?a:f.left,k=c?l:wrapX(e,i,"before"),L=c?a:wrapX(t,i,"after"),M=c&&v&&b?l:g.right):(S=c?wrapX(e,i,"before"):a,k=!c&&m&&y?l:f.right,L=!c&&v&&b?a:g.left,M=c?wrapX(t,i,"after"):l),add(S,f.top,k-S,f.bottom),f.bottom<g.top&&add(a,f.bottom,null,g.top),add(L,g.top,M-L,g.bottom)}(!o||cmpCoords(f,o)<0)&&(o=f),cmpCoords(g,o)<0&&(o=g),(!s||cmpCoords(f,s)<0)&&(s=f),cmpCoords(g,s)<0&&(s=g)}),{start:o,end:s}}var u=t.from(),d=t.to();if(u.line==d.line)drawForLine(u.line,u.ch,d.ch);else{var p=getLine(i,u.line),h=getLine(i,d.line),f=visualLine(p)==visualLine(h),g=drawForLine(u.line,u.ch,f?p.text.length+1:null).end,m=drawForLine(d.line,f?0:null,d.ch).start;f&&(g.top<m.top-2?(add(g.right,g.top,null,g.bottom),add(a,m.top,m.left,m.bottom)):add(g.right,g.top,m.left-g.right,g.bottom)),g.bottom<m.top&&add(a,g.bottom,null,m.top)}n.appendChild(o)}function restartBlink(e){if(e.state.focused){var t=e.display;clearInterval(t.blinker);var n=!0;t.cursorDiv.style.visibility="",e.options.cursorBlinkRate>0?t.blinker=setInterval(function(){return t.cursorDiv.style.visibility=(n=!n)?"":"hidden"},e.options.cursorBlinkRate):e.options.cursorBlinkRate<0&&(t.cursorDiv.style.visibility="hidden")}}function ensureFocus(e){e.state.focused||(e.display.input.focus(),onFocus(e))}function delayBlurEvent(e){e.state.delayingBlurEvent=!0,setTimeout(function(){e.state.delayingBlurEvent&&(e.state.delayingBlurEvent=!1,onBlur(e))},100)}function onFocus(e,t){e.state.delayingBlurEvent&&(e.state.delayingBlurEvent=!1),"nocursor"!=e.options.readOnly&&(e.state.focused||(signal(e,"focus",e,t),e.state.focused=!0,addClass(e.display.wrapper,"CodeMirror-focused"),e.curOp||e.display.selForContextMenu==e.doc.sel||(e.display.input.reset(),l&&setTimeout(function(){return e.display.input.reset(!0)},20)),e.display.input.receivedFocus()),restartBlink(e))}function onBlur(e,t){e.state.delayingBlurEvent||(e.state.focused&&(signal(e,"blur",e,t),e.state.focused=!1,k(e.display.wrapper,"CodeMirror-focused")),clearInterval(e.display.blinker),setTimeout(function(){e.state.focused||(e.display.shift=!1)},150))}function updateHeightsInViewport(e){for(var t=e.display,n=t.lineDiv.offsetTop,r=0;r<t.view.length;r++){var i=t.view[r],o=void 0;if(!i.hidden){if(s&&a<8){var l=i.node.offsetTop+i.node.offsetHeight;o=l-n,n=l}else{var c=i.node.getBoundingClientRect();o=c.bottom-c.top}var u=i.line.height-o;if(o<2&&(o=textHeight(t)),(u>.005||u<-.005)&&(updateLineHeight(i.line,o),updateWidgetHeight(i.line),i.rest))for(var d=0;d<i.rest.length;d++)updateWidgetHeight(i.rest[d])}}}function updateWidgetHeight(e){if(e.widgets)for(var t=0;t<e.widgets.length;++t){var n=e.widgets[t],r=n.node.parentNode;r&&(n.height=r.offsetHeight)}}function visibleLines(e,t,n){var r=n&&null!=n.top?Math.max(0,n.top):e.scroller.scrollTop;r=Math.floor(r-paddingTop(e));var i=n&&null!=n.bottom?n.bottom:r+e.wrapper.clientHeight,o=lineAtHeight(t,r),s=lineAtHeight(t,i);if(n&&n.ensure){var a=n.ensure.from.line,l=n.ensure.to.line;a<o?(o=a,s=lineAtHeight(t,heightAtLine(getLine(t,a))+e.wrapper.clientHeight)):Math.min(l,t.lastLine())>=s&&(o=lineAtHeight(t,heightAtLine(getLine(t,l))-e.wrapper.clientHeight),s=l)}return{from:o,to:Math.max(s,o+1)}}function alignHorizontally(e){var t=e.display,n=t.view;if(t.alignWidgets||t.gutters.firstChild&&e.options.fixedGutter){for(var r=compensateForHScroll(t)-t.scroller.scrollLeft+e.doc.scrollLeft,i=t.gutters.offsetWidth,o=r+"px",s=0;s<n.length;s++)if(!n[s].hidden){e.options.fixedGutter&&(n[s].gutter&&(n[s].gutter.style.left=o),n[s].gutterBackground&&(n[s].gutterBackground.style.left=o));var a=n[s].alignable;if(a)for(var l=0;l<a.length;l++)a[l].style.left=o}e.options.fixedGutter&&(t.gutters.style.left=r+i+"px")}}function maybeUpdateLineNumberWidth(e){if(!e.options.lineNumbers)return!1;var t=e.doc,n=lineNumberFor(e.options,t.first+t.size-1),r=e.display;if(n.length!=r.lineNumChars){var i=r.measure.appendChild(elt("div",[elt("div",n)],"CodeMirror-linenumber CodeMirror-gutter-elt")),o=i.firstChild.offsetWidth,s=i.offsetWidth-o;return r.lineGutter.style.width="",r.lineNumInnerWidth=Math.max(o,r.lineGutter.offsetWidth-s)+1,r.lineNumWidth=r.lineNumInnerWidth+s,r.lineNumChars=r.lineNumInnerWidth?n.length:-1,r.lineGutter.style.width=r.lineNumWidth+"px",updateGutterSpace(e),!0}return!1}function calculateScrollPos(e,t){var n=e.display,r=textHeight(e.display);t.top<0&&(t.top=0);var i=e.curOp&&null!=e.curOp.scrollTop?e.curOp.scrollTop:n.scroller.scrollTop,o=displayHeight(e),s={};t.bottom-t.top>o&&(t.bottom=t.top+o);var a=e.doc.height+paddingVert(n),l=t.top<r,c=t.bottom>a-r;if(t.top<i)s.scrollTop=l?0:t.top;else if(t.bottom>i+o){var u=Math.min(t.top,(c?a:t.bottom)-o);u!=i&&(s.scrollTop=u)}var d=e.curOp&&null!=e.curOp.scrollLeft?e.curOp.scrollLeft:n.scroller.scrollLeft,p=displayWidth(e)-(e.options.fixedGutter?n.gutters.offsetWidth:0),h=t.right-t.left>p;return h&&(t.right=t.left+p),t.left<10?s.scrollLeft=0:t.left<d?s.scrollLeft=Math.max(0,t.left-(h?0:10)):t.right>p+d-3&&(s.scrollLeft=t.right+(h?0:10)-p),s}function addToScrollTop(e,t){null!=t&&(resolveScrollToPos(e),e.curOp.scrollTop=(null==e.curOp.scrollTop?e.doc.scrollTop:e.curOp.scrollTop)+t)}function ensureCursorVisible(e){resolveScrollToPos(e);var t=e.getCursor();e.curOp.scrollToPos={from:t,to:t,margin:e.options.cursorScrollMargin}}function scrollToCoords(e,t,n){null==t&&null==n||resolveScrollToPos(e),null!=t&&(e.curOp.scrollLeft=t),null!=n&&(e.curOp.scrollTop=n)}function resolveScrollToPos(e){var t=e.curOp.scrollToPos;if(t){e.curOp.scrollToPos=null;scrollToCoordsRange(e,estimateCoords(e,t.from),estimateCoords(e,t.to),t.margin)}}function scrollToCoordsRange(e,t,n,r){var i=calculateScrollPos(e,{left:Math.min(t.left,n.left),top:Math.min(t.top,n.top)-r,right:Math.max(t.right,n.right),bottom:Math.max(t.bottom,n.bottom)+r});scrollToCoords(e,i.scrollLeft,i.scrollTop)}function updateScrollTop(e,t){Math.abs(e.doc.scrollTop-t)<2||(n||updateDisplaySimple(e,{top:t}),setScrollTop(e,t,!0),n&&updateDisplaySimple(e),startWorker(e,100))}function setScrollTop(e,t,n){t=Math.min(e.display.scroller.scrollHeight-e.display.scroller.clientHeight,t),(e.display.scroller.scrollTop!=t||n)&&(e.doc.scrollTop=t,e.display.scrollbars.setScrollTop(t),e.display.scroller.scrollTop!=t&&(e.display.scroller.scrollTop=t))}function setScrollLeft(e,t,n,r){t=Math.min(t,e.display.scroller.scrollWidth-e.display.scroller.clientWidth),(n?t==e.doc.scrollLeft:Math.abs(e.doc.scrollLeft-t)<2)&&!r||(e.doc.scrollLeft=t,alignHorizontally(e),e.display.scroller.scrollLeft!=t&&(e.display.scroller.scrollLeft=t),e.display.scrollbars.setScrollLeft(t))}function measureForScrollbars(e){var t=e.display,n=t.gutters.offsetWidth,r=Math.round(e.doc.height+paddingVert(e.display));return{clientHeight:t.scroller.clientHeight,viewHeight:t.wrapper.clientHeight,scrollWidth:t.scroller.scrollWidth,clientWidth:t.scroller.clientWidth,viewWidth:t.wrapper.clientWidth,barLeft:e.options.fixedGutter?n:0,docHeight:r,scrollHeight:r+scrollGap(e)+t.barHeight,nativeBarWidth:t.nativeBarWidth,gutterWidth:n}}var ce=function(e,t,n){this.cm=n;var r=this.vert=elt("div",[elt("div",null,null,"min-width: 1px")],"CodeMirror-vscrollbar"),i=this.horiz=elt("div",[elt("div",null,null,"height: 100%; min-height: 1px")],"CodeMirror-hscrollbar");e(r),e(i),V(r,"scroll",function(){r.clientHeight&&t(r.scrollTop,"vertical")}),V(i,"scroll",function(){i.clientWidth&&t(i.scrollLeft,"horizontal")}),this.checkedZeroWidth=!1,s&&a<8&&(this.horiz.style.minHeight=this.vert.style.minWidth="18px")};ce.prototype.update=function(e){var t=e.scrollWidth>e.clientWidth+1,n=e.scrollHeight>e.clientHeight+1,r=e.nativeBarWidth;if(n){this.vert.style.display="block",this.vert.style.bottom=t?r+"px":"0";var i=e.viewHeight-(t?r:0);this.vert.firstChild.style.height=Math.max(0,e.scrollHeight-e.clientHeight+i)+"px"}else this.vert.style.display="",this.vert.firstChild.style.height="0";if(t){this.horiz.style.display="block",this.horiz.style.right=n?r+"px":"0",this.horiz.style.left=e.barLeft+"px";var o=e.viewWidth-e.barLeft-(n?r:0);this.horiz.firstChild.style.width=Math.max(0,e.scrollWidth-e.clientWidth+o)+"px"}else this.horiz.style.display="",this.horiz.firstChild.style.width="0";return!this.checkedZeroWidth&&e.clientHeight>0&&(0==r&&this.zeroWidthHack(),this.checkedZeroWidth=!0),{right:n?r:0,bottom:t?r:0}},ce.prototype.setScrollLeft=function(e){this.horiz.scrollLeft!=e&&(this.horiz.scrollLeft=e),this.disableHoriz&&this.enableZeroWidthBar(this.horiz,this.disableHoriz,"horiz")},ce.prototype.setScrollTop=function(e){this.vert.scrollTop!=e&&(this.vert.scrollTop=e),this.disableVert&&this.enableZeroWidthBar(this.vert,this.disableVert,"vert")},ce.prototype.zeroWidthHack=function(){var e=y&&!h?"12px":"18px";this.horiz.style.height=this.vert.style.width=e,this.horiz.style.pointerEvents=this.vert.style.pointerEvents="none",this.disableHoriz=new T,this.disableVert=new T},ce.prototype.enableZeroWidthBar=function(e,t,n){e.style.pointerEvents="auto";t.set(1e3,function maybeDisable(){var r=e.getBoundingClientRect();("vert"==n?document.elementFromPoint(r.right-1,(r.top+r.bottom)/2):document.elementFromPoint((r.right+r.left)/2,r.bottom-1))!=e?e.style.pointerEvents="none":t.set(1e3,maybeDisable)})},ce.prototype.clear=function(){var e=this.horiz.parentNode;e.removeChild(this.horiz),e.removeChild(this.vert)};var ue=function(){};ue.prototype.update=function(){return{bottom:0,right:0}},ue.prototype.setScrollLeft=function(){},ue.prototype.setScrollTop=function(){},ue.prototype.clear=function(){};function updateScrollbars(e,t){t||(t=measureForScrollbars(e));var n=e.display.barWidth,r=e.display.barHeight;updateScrollbarsInner(e,t);for(var i=0;i<4&&n!=e.display.barWidth||r!=e.display.barHeight;i++)n!=e.display.barWidth&&e.options.lineWrapping&&updateHeightsInViewport(e),updateScrollbarsInner(e,measureForScrollbars(e)),n=e.display.barWidth,r=e.display.barHeight}function updateScrollbarsInner(e,t){var n=e.display,r=n.scrollbars.update(t);n.sizer.style.paddingRight=(n.barWidth=r.right)+"px",n.sizer.style.paddingBottom=(n.barHeight=r.bottom)+"px",n.heightForcer.style.borderBottom=r.bottom+"px solid transparent",r.right&&r.bottom?(n.scrollbarFiller.style.display="block",n.scrollbarFiller.style.height=r.bottom+"px",n.scrollbarFiller.style.width=r.right+"px"):n.scrollbarFiller.style.display="",r.bottom&&e.options.coverGutterNextToScrollbar&&e.options.fixedGutter?(n.gutterFiller.style.display="block",n.gutterFiller.style.height=r.bottom+"px",n.gutterFiller.style.width=t.gutterWidth+"px"):n.gutterFiller.style.display=""}var de={native:ce,null:ue};function initScrollbars(e){e.display.scrollbars&&(e.display.scrollbars.clear(),e.display.scrollbars.addClass&&k(e.display.wrapper,e.display.scrollbars.addClass)),e.display.scrollbars=new de[e.options.scrollbarStyle](function(t){e.display.wrapper.insertBefore(t,e.display.scrollbarFiller),V(t,"mousedown",function(){e.state.focused&&setTimeout(function(){return e.display.input.focus()},0)}),t.setAttribute("cm-not-content","true")},function(t,n){"horizontal"==n?setScrollLeft(e,t):updateScrollTop(e,t)},e),e.display.scrollbars.addClass&&addClass(e.display.wrapper,e.display.scrollbars.addClass)}var pe=0;function startOperation(e){e.curOp={cm:e,viewChanged:!1,startHeight:e.doc.height,forceUpdate:!1,updateInput:null,typing:!1,changeObjs:null,cursorActivityHandlers:null,cursorActivityCalled:0,selectionChanged:!1,updateMaxLine:!1,scrollLeft:null,scrollTop:null,scrollToPos:null,focus:!1,id:++pe},function pushOperation(e){oe?oe.ops.push(e):e.ownsGroup=oe={ops:[e],delayedCallbacks:[]}}(e.curOp)}function endOperation(e){!function finishOperation(e,t){var n=e.ownsGroup;if(n)try{!function fireCallbacksForOps(e){var t=e.delayedCallbacks,n=0;do{for(;n<t.length;n++)t[n].call(null);for(var r=0;r<e.ops.length;r++){var i=e.ops[r];if(i.cursorActivityHandlers)for(;i.cursorActivityCalled<i.cursorActivityHandlers.length;)i.cursorActivityHandlers[i.cursorActivityCalled++].call(null,i.cm)}}while(n<t.length)}(n)}finally{oe=null,t(n)}}(e.curOp,function(e){for(var t=0;t<e.ops.length;t++)e.ops[t].cm.curOp=null;!function endOperations(e){for(var t=e.ops,n=0;n<t.length;n++)endOperation_R1(t[n]);for(var r=0;r<t.length;r++)(i=t[r]).updatedDisplay=i.mustUpdate&&updateDisplayIfNeeded(i.cm,i.update);var i;for(var o=0;o<t.length;o++)endOperation_R2(t[o]);for(var s=0;s<t.length;s++)endOperation_W2(t[s]);for(var a=0;a<t.length;a++)endOperation_finish(t[a])}(e)})}function endOperation_R1(e){var t=e.cm,n=t.display;!function maybeClipScrollbars(e){var t=e.display;!t.scrollbarsClipped&&t.scroller.offsetWidth&&(t.nativeBarWidth=t.scroller.offsetWidth-t.scroller.clientWidth,t.heightForcer.style.height=scrollGap(e)+"px",t.sizer.style.marginBottom=-t.nativeBarWidth+"px",t.sizer.style.borderRightWidth=scrollGap(e)+"px",t.scrollbarsClipped=!0)}(t),e.updateMaxLine&&findMaxLine(
gitextract_2uvb6dl9/
├── .all-contributorsrc
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ ├── custom.md
│ │ └── feature_request.md
│ └── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .vscode/
│ └── launch.json
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── CONTRIBUTORS.md
├── LICENSE
├── README.md
├── README_SOURCE.md
├── configs/
│ ├── jest.config.json
│ └── jest.stubs.js
├── docs/
│ ├── build/
│ │ ├── 0.6e57cfb5.js
│ │ └── bundle.a71e23e0.js
│ └── index.html
├── generate-readme.js
├── generate-readme.sh
├── generate-styleguide.sh
├── is-git-status-clean.sh
├── package.json
└── playground/
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── .storybook/
│ ├── addons.js
│ ├── config.js
│ └── webpack.config.js
├── .vscode/
│ └── settings.json
├── README.md
├── index.html
├── package.json
├── public/
│ ├── index.html
│ └── manifest.json
├── src/
│ ├── api/
│ │ ├── agent.ts
│ │ ├── fixtures/
│ │ │ └── todos.json
│ │ ├── index.ts
│ │ ├── models.ts
│ │ ├── todos.ts
│ │ └── utils.ts
│ ├── app.test.tsx
│ ├── app.tsx
│ ├── components/
│ │ ├── __snapshots__/
│ │ │ ├── class-counter-with-default-props.stories.storyshot
│ │ │ ├── class-counter.stories.storyshot
│ │ │ ├── fc-counter-with-default-props.stories.storyshot
│ │ │ ├── fc-counter.stories.storyshot
│ │ │ ├── fc-spread-attributes.stories.storyshot
│ │ │ ├── generic-list.stories.storyshot
│ │ │ └── mouse-provider.stories.storyshot
│ │ ├── class-counter-with-default-props.md
│ │ ├── class-counter-with-default-props.stories.tsx
│ │ ├── class-counter-with-default-props.tsx
│ │ ├── class-counter-with-default-props.usage.tsx
│ │ ├── class-counter.md
│ │ ├── class-counter.stories.tsx
│ │ ├── class-counter.tsx
│ │ ├── class-counter.usage.tsx
│ │ ├── error-message.tsx
│ │ ├── fc-counter-with-default-props.md
│ │ ├── fc-counter-with-default-props.stories.tsx
│ │ ├── fc-counter-with-default-props.tsx
│ │ ├── fc-counter-with-default-props.usage.tsx
│ │ ├── fc-counter.md
│ │ ├── fc-counter.stories.tsx
│ │ ├── fc-counter.tsx
│ │ ├── fc-counter.usage.tsx
│ │ ├── fc-spread-attributes.md
│ │ ├── fc-spread-attributes.stories.tsx
│ │ ├── fc-spread-attributes.tsx
│ │ ├── fc-spread-attributes.usage.tsx
│ │ ├── generic-list.md
│ │ ├── generic-list.stories.tsx
│ │ ├── generic-list.tsx
│ │ ├── generic-list.usage.tsx
│ │ ├── index.ts
│ │ ├── mouse-provider.md
│ │ ├── mouse-provider.stories.tsx
│ │ ├── mouse-provider.tsx
│ │ ├── mouse-provider.usage.tsx
│ │ ├── name-provider.md
│ │ ├── name-provider.tsx
│ │ └── name-provider.usage.tsx
│ ├── connected/
│ │ ├── fc-counter-connected-bind-action-creators.tsx
│ │ ├── fc-counter-connected-bind-action-creators.usage.tsx
│ │ ├── fc-counter-connected-own-props.spec.tsx
│ │ ├── fc-counter-connected-own-props.tsx
│ │ ├── fc-counter-connected-own-props.usage.tsx
│ │ ├── fc-counter-connected.tsx
│ │ ├── fc-counter-connected.usage.tsx
│ │ └── index.ts
│ ├── context/
│ │ ├── theme-consumer-class.tsx
│ │ ├── theme-consumer.tsx
│ │ ├── theme-context.ts
│ │ └── theme-provider.tsx
│ ├── features/
│ │ ├── app/
│ │ │ └── epics.ts
│ │ ├── counters/
│ │ │ ├── actions.ts
│ │ │ ├── actions.usage.ts
│ │ │ ├── constants.ts
│ │ │ ├── index.ts
│ │ │ ├── reducer.ts
│ │ │ └── selectors.ts
│ │ ├── todos/
│ │ │ ├── __snapshots__/
│ │ │ │ └── reducer.spec.ts.snap
│ │ │ ├── actions.ts
│ │ │ ├── constants.ts
│ │ │ ├── epics.spec.ts
│ │ │ ├── epics.ts
│ │ │ ├── index.ts
│ │ │ ├── models.ts
│ │ │ ├── reducer-ta.ts
│ │ │ ├── reducer.spec.ts
│ │ │ ├── reducer.ts
│ │ │ └── selectors.ts
│ │ └── todos-typesafe/
│ │ ├── actions.ts
│ │ ├── index.ts
│ │ ├── models.ts
│ │ ├── reducer.ts
│ │ └── selectors.ts
│ ├── hoc/
│ │ ├── index.ts
│ │ ├── with-connected-count.tsx
│ │ ├── with-connected-count.usage.tsx
│ │ ├── with-error-boundary.tsx
│ │ ├── with-error-boundary.usage.tsx
│ │ ├── with-state.tsx
│ │ └── with-state.usage.tsx
│ ├── hooks/
│ │ ├── react-redux-hooks.tsx
│ │ ├── use-reducer.tsx
│ │ ├── use-state.tsx
│ │ └── use-theme-context.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── layout/
│ │ ├── layout-footer.tsx
│ │ ├── layout-header.tsx
│ │ └── layout.tsx
│ ├── models/
│ │ ├── index.ts
│ │ ├── nominal-types.ts
│ │ └── user.ts
│ ├── react-app-env.d.ts
│ ├── routes/
│ │ ├── home.tsx
│ │ └── not-found.tsx
│ ├── serviceWorker.ts
│ ├── services/
│ │ ├── index.ts
│ │ ├── local-storage-service.ts
│ │ ├── logger-service.ts
│ │ └── types.d.ts
│ ├── store/
│ │ ├── hooks.ts
│ │ ├── index.ts
│ │ ├── redux-router.ts
│ │ ├── root-action.ts
│ │ ├── root-epic.ts
│ │ ├── root-reducer.ts
│ │ ├── store.ts
│ │ ├── types.d.ts
│ │ └── utils.ts
│ └── storyshots.disabled-test.ts
├── src-old/
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ └── setupTests.ts
├── styleguide/
│ ├── docs/
│ │ └── intro.md
│ ├── package.json
│ └── styleguide.config.js
├── tsconfig.json
├── tsconfig.test.json
└── typings/
├── augmentations.d.ts
├── globals.d.ts
├── modules.d.ts
├── redux/
│ └── index.d.ts
└── redux-thunk/
└── index.d.ts
SYMBOL INDEX (1226 symbols across 57 files)
FILE: docs/build/0.6e57cfb5.js
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function Editor (line 1) | function Editor(){!function _classCallCheck(e,t){if(!(e instanceof t))th...
function classTest (line 1) | function classTest(e){return new RegExp("(^|\\s)"+e+"(?:$|\\s)\\s*")}
function removeChildren (line 1) | function removeChildren(e){for(var t=e.childNodes.length;t>0;--t)e.remov...
function removeChildrenAndAdd (line 1) | function removeChildrenAndAdd(e,t){return removeChildren(e).appendChild(t)}
function elt (line 1) | function elt(e,t,n,r){var i=document.createElement(e);if(n&&(i.className...
function eltP (line 1) | function eltP(e,t,n,r){var i=elt(e,t,n,r);return i.setAttribute("role","...
function contains (line 1) | function contains(e,t){if(3==t.nodeType&&(t=t.parentNode),e.contains)ret...
function activeElt (line 1) | function activeElt(){var e;try{e=document.activeElement}catch(t){e=docum...
function addClass (line 1) | function addClass(e,t){var n=e.className;classTest(t).test(n)||(e.classN...
function joinClasses (line 1) | function joinClasses(e,t){for(var n=e.split(" "),r=0;r<n.length;r++)n[r]...
function bind (line 1) | function bind(e){var t=Array.prototype.slice.call(arguments,1);return fu...
function copyObj (line 1) | function copyObj(e,t,n){t||(t={});for(var r in e)!e.hasOwnProperty(r)||!...
function countColumn (line 1) | function countColumn(e,t,n,r,i){null==t&&-1==(t=e.search(/[^\s\u00a0]/))...
function indexOf (line 1) | function indexOf(e,t){for(var n=0;n<e.length;++n)if(e[n]==t)return n;ret...
function findColumn (line 1) | function findColumn(e,t,n){for(var r=0,i=0;;){var o=e.indexOf("\t",r);-1...
function spaceStr (line 1) | function spaceStr(e){for(;H.length<=e;)H.push(lst(H)+" ");return H[e]}
function lst (line 1) | function lst(e){return e[e.length-1]}
function map (line 1) | function map(e,t){for(var n=[],r=0;r<e.length;r++)n[r]=t(e[r],r);return n}
function nothing (line 1) | function nothing(){}
function createObj (line 1) | function createObj(e,t){var n;return Object.create?n=Object.create(e):(n...
function isWordCharBasic (line 1) | function isWordCharBasic(e){return/\w/.test(e)||e>""&&(e.toUpperCase()!...
function isWordChar (line 1) | function isWordChar(e,t){return t?!!(t.source.indexOf("\\w")>-1&&isWordC...
function isEmpty (line 1) | function isEmpty(e){for(var t in e)if(e.hasOwnProperty(t)&&e[t])return!1...
function isExtendingChar (line 1) | function isExtendingChar(e){return e.charCodeAt(0)>=768&&E.test(e)}
function skipExtendingChars (line 1) | function skipExtendingChars(e,t,n){for(;(n<0?t>0:t<e.length)&&isExtendin...
function findFirst (line 1) | function findFirst(e,t,n){for(var r=t>n?-1:1;;){if(t==n)return t;var i=(...
function getLine (line 1) | function getLine(e,t){if((t-=e.first)<0||t>=e.size)throw new Error("Ther...
function getBetween (line 1) | function getBetween(e,t,n){var r=[],i=t.line;return e.iter(t.line,n.line...
function getLines (line 1) | function getLines(e,t,n){var r=[];return e.iter(t,n,function(e){r.push(e...
function updateLineHeight (line 1) | function updateLineHeight(e,t){var n=t-e.height;if(n)for(var r=e;r;r=r.p...
function lineNo (line 1) | function lineNo(e){if(null==e.parent)return null;for(var t=e.parent,n=in...
function lineAtHeight (line 1) | function lineAtHeight(e,t){var n=e.first;e:do{for(var r=0;r<e.children.l...
function isLine (line 1) | function isLine(e,t){return t>=e.first&&t<e.first+e.size}
function lineNumberFor (line 1) | function lineNumberFor(e,t){return String(e.lineNumberFormatter(t+e.firs...
function Pos (line 1) | function Pos(e,t,n){if(void 0===n&&(n=null),!(this instanceof Pos))retur...
function cmp (line 1) | function cmp(e,t){return e.line-t.line||e.ch-t.ch}
function equalCursorPos (line 1) | function equalCursorPos(e,t){return e.sticky==t.sticky&&0==cmp(e,t)}
function copyPos (line 1) | function copyPos(e){return Pos(e.line,e.ch)}
function maxPos (line 1) | function maxPos(e,t){return cmp(e,t)<0?t:e}
function minPos (line 1) | function minPos(e,t){return cmp(e,t)<0?e:t}
function clipLine (line 1) | function clipLine(e,t){return Math.max(e.first,Math.min(t,e.first+e.size...
function clipPos (line 1) | function clipPos(e,t){if(t.line<e.first)return Pos(e.first,0);var n=e.fi...
function clipPosArray (line 1) | function clipPosArray(e,t){for(var n=[],r=0;r<t.length;r++)n[r]=clipPos(...
function MarkedSpan (line 1) | function MarkedSpan(e,t,n){this.marker=e,this.from=t,this.to=n}
function getMarkedSpanFor (line 1) | function getMarkedSpanFor(e,t){if(e)for(var n=0;n<e.length;++n){var r=e[...
function removeMarkedSpan (line 1) | function removeMarkedSpan(e,t){for(var n,r=0;r<e.length;++r)e[r]!=t&&(n|...
function stretchSpansOverChange (line 1) | function stretchSpansOverChange(e,t){if(t.full)return null;var n=isLine(...
function clearEmptySpans (line 1) | function clearEmptySpans(e){for(var t=0;t<e.length;++t){var n=e[t];null!...
function detachMarkedSpans (line 1) | function detachMarkedSpans(e){var t=e.markedSpans;if(t){for(var n=0;n<t....
function attachMarkedSpans (line 1) | function attachMarkedSpans(e,t){if(t){for(var n=0;n<t.length;++n)t[n].ma...
function extraLeft (line 1) | function extraLeft(e){return e.inclusiveLeft?-1:0}
function extraRight (line 1) | function extraRight(e){return e.inclusiveRight?1:0}
function compareCollapsedMarkers (line 1) | function compareCollapsedMarkers(e,t){var n=e.lines.length-t.lines.lengt...
function collapsedSpanAtSide (line 1) | function collapsedSpanAtSide(e,t){var n,r=F&&e.markedSpans;if(r)for(var ...
function collapsedSpanAtStart (line 1) | function collapsedSpanAtStart(e){return collapsedSpanAtSide(e,!0)}
function collapsedSpanAtEnd (line 1) | function collapsedSpanAtEnd(e){return collapsedSpanAtSide(e,!1)}
function conflictingCollapsedRange (line 1) | function conflictingCollapsedRange(e,t,n,r,i){var o=getLine(e,t),s=F&&o....
function visualLine (line 1) | function visualLine(e){for(var t;t=collapsedSpanAtStart(e);)e=t.find(-1,...
function visualLineNo (line 1) | function visualLineNo(e,t){var n=getLine(e,t),r=visualLine(n);return n==...
function visualLineEndNo (line 1) | function visualLineEndNo(e,t){if(t>e.lastLine())return t;var n,r=getLine...
function lineIsHidden (line 1) | function lineIsHidden(e,t){var n=F&&t.markedSpans;if(n)for(var r=void 0,...
function lineIsHiddenInner (line 1) | function lineIsHiddenInner(e,t,n){if(null==n.to){var r=n.marker.find(1,!...
function heightAtLine (line 1) | function heightAtLine(e){for(var t=0,n=(e=visualLine(e)).parent,r=0;r<n....
function lineLength (line 1) | function lineLength(e){if(0==e.height)return 0;for(var t,n=e.text.length...
function findMaxLine (line 1) | function findMaxLine(e){var t=e.display,n=e.doc;t.maxLine=getLine(n,n.fi...
function getBidiPartAt (line 1) | function getBidiPartAt(e,t,n){var r;B=null;for(var i=0;i<e.length;++i){v...
function BidiSpan (line 1) | function BidiSpan(e,t,n){this.level=e,this.from=t,this.to=n}
function getOrder (line 1) | function getOrder(e,t){var n=e.order;return null==n&&(n=e.order=z(e.text...
function getHandlers (line 1) | function getHandlers(e,t){return e._handlers&&e._handlers[t]||R}
function off (line 1) | function off(e,t,n){if(e.removeEventListener)e.removeEventListener(t,n,!...
function signal (line 1) | function signal(e,t){var n=getHandlers(e,t);if(n.length)for(var r=Array....
function signalDOMEvent (line 1) | function signalDOMEvent(e,t,n){return"string"==typeof t&&(t={type:t,prev...
function signalCursorActivity (line 1) | function signalCursorActivity(e){var t=e._handlers&&e._handlers.cursorAc...
function hasHandler (line 1) | function hasHandler(e,t){return getHandlers(e,t).length>0}
function eventMixin (line 1) | function eventMixin(e){e.prototype.on=function(e,t){V(this,e,t)},e.proto...
function e_preventDefault (line 1) | function e_preventDefault(e){e.preventDefault?e.preventDefault():e.retur...
function e_stopPropagation (line 1) | function e_stopPropagation(e){e.stopPropagation?e.stopPropagation():e.ca...
function e_defaultPrevented (line 1) | function e_defaultPrevented(e){return null!=e.defaultPrevented?e.default...
function e_stop (line 1) | function e_stop(e){e_preventDefault(e),e_stopPropagation(e)}
function e_target (line 1) | function e_target(e){return e.target||e.srcElement}
function e_button (line 1) | function e_button(e){var t=e.which;return null==t&&(1&e.button?t=1:2&e.b...
function zeroWidthElement (line 1) | function zeroWidthElement(e){if(null==U){var t=elt("span","");removeChi...
function hasBadBidiRects (line 1) | function hasBadBidiRects(e){if(null!=G)return G;var t=removeChildrenAndA...
function resolveMode (line 1) | function resolveMode(e){if("string"==typeof e&&Y.hasOwnProperty(e))e=Y[e...
function getMode (line 1) | function getMode(e,t){t=resolveMode(t);var n=X[t.name];if(!n)return getM...
function extendMode (line 1) | function extendMode(e,t){copyObj(t,Z.hasOwnProperty(e)?Z[e]:Z[e]={})}
function copyState (line 1) | function copyState(e,t){if(!0===t)return t;if(e.copyState)return e.copyS...
function innerMode (line 1) | function innerMode(e,t){for(var n;e.innerMode&&(n=e.innerMode(t))&&n.mod...
function startState (line 1) | function startState(e,t,n){return!e.startState||e.startState(t,n)}
function highlightLine (line 1) | function highlightLine(e,t,n,r){var i=[e.state.modeGen],o={};runMode(e,t...
function getLineStyles (line 1) | function getLineStyles(e,t,n){if(!t.styles||t.styles[0]!=e.state.modeGen...
function getContextBefore (line 1) | function getContextBefore(e,t,n){var r=e.doc,i=e.display;if(!r.mode.star...
function processLine (line 1) | function processLine(e,t,n,r){var i=e.doc.mode,o=new Q(t,e.options.tabSi...
function callBlankLine (line 1) | function callBlankLine(e,t){if(e.blankLine)return e.blankLine(t);if(e.in...
function readToken (line 1) | function readToken(e,t,n,r){for(var i=0;i<10;i++){r&&(r[0]=innerMode(e,n...
function takeToken (line 1) | function takeToken(e,t,n,r){var i,o,s=e.doc,a=s.mode,l=getLine(s,(t=clip...
function extractLineClasses (line 1) | function extractLineClasses(e,t){if(e)for(;;){var n=e.match(/(?:^|\s+)li...
function runMode (line 1) | function runMode(e,t,n,r,i,o,s){var a=n.flattenSpans;null==a&&(a=e.optio...
function interpretTokenStyle (line 1) | function interpretTokenStyle(e,t){if(!e||/^\s*$/.test(e))return null;var...
function buildLineContent (line 1) | function buildLineContent(e,t){var n=eltP("span",null,null,l?"padding-ri...
function defaultSpecialCharPlaceholder (line 1) | function defaultSpecialCharPlaceholder(e){var t=elt("span","•","cm-inval...
function buildToken (line 1) | function buildToken(e,t,n,r,i,o,l){if(t){var c,u=e.splitSpaces?function ...
function buildTokenBadBidi (line 1) | function buildTokenBadBidi(e,t){return function(n,r,i,o,s,a,l){i=i?i+" c...
function buildCollapsedSpan (line 1) | function buildCollapsedSpan(e,t,n,r){var i=!r&&n.widgetNode;i&&e.map.pus...
function insertLineContent (line 1) | function insertLineContent(e,t,n){var r=e.markedSpans,i=e.text,o=0;if(r)...
function LineView (line 1) | function LineView(e,t,n){this.line=t,this.rest=function visualLineContin...
function buildViewArray (line 1) | function buildViewArray(e,t,n){for(var r,i=[],o=t;o<n;o=r){var s=new Lin...
function signalLater (line 1) | function signalLater(e,t){var n=getHandlers(e,t);if(n.length){var r,i=Ar...
function fireOrphanDelayed (line 1) | function fireOrphanDelayed(){var e=se;se=null;for(var t=0;t<e.length;++t...
function updateLineForChanges (line 1) | function updateLineForChanges(e,t,n,r){for(var i=0;i<t.changes.length;i+...
function ensureLineWrapped (line 1) | function ensureLineWrapped(e){return e.node==e.text&&(e.node=elt("div",n...
function getLineContent (line 1) | function getLineContent(e,t){var n=e.display.externalMeasured;return n&&...
function updateLineText (line 1) | function updateLineText(e,t){var n=t.text.className,r=getLineContent(e,t...
function updateLineClasses (line 1) | function updateLineClasses(e,t){!function updateLineBackground(e,t){var ...
function updateLineGutter (line 1) | function updateLineGutter(e,t,n,r){if(t.gutter&&(t.node.removeChild(t.gu...
function updateLineWidgets (line 1) | function updateLineWidgets(e,t,n){t.alignable&&(t.alignable=null);for(va...
function buildLineElement (line 1) | function buildLineElement(e,t,n,r){var i=getLineContent(e,t);return t.te...
function insertLineWidgets (line 1) | function insertLineWidgets(e,t,n){if(insertLineWidgetsFor(e,t.line,t,n,!...
function insertLineWidgetsFor (line 1) | function insertLineWidgetsFor(e,t,n,r,i){if(t.widgets)for(var o=ensureLi...
function positionLineWidget (line 1) | function positionLineWidget(e,t,n,r){if(e.noHScroll){(n.alignable||(n.al...
function widgetHeight (line 1) | function widgetHeight(e){if(null!=e.height)return e.height;var t=e.doc.c...
function eventInWidget (line 1) | function eventInWidget(e,t){for(var n=e_target(t);n!=e.wrapper;n=n.paren...
function paddingTop (line 1) | function paddingTop(e){return e.lineSpace.offsetTop}
function paddingVert (line 1) | function paddingVert(e){return e.mover.offsetHeight-e.lineSpace.offsetHe...
function paddingH (line 1) | function paddingH(e){if(e.cachedPaddingH)return e.cachedPaddingH;var t=r...
function scrollGap (line 1) | function scrollGap(e){return O-e.display.nativeBarWidth}
function displayWidth (line 1) | function displayWidth(e){return e.display.scroller.clientWidth-scrollGap...
function displayHeight (line 1) | function displayHeight(e){return e.display.scroller.clientHeight-scrollG...
function mapFromLineView (line 1) | function mapFromLineView(e,t,n){if(e.line==t)return{map:e.measure.map,ca...
function measureChar (line 1) | function measureChar(e,t,n,r){return measureCharPrepared(e,prepareMeasur...
function findViewForLine (line 1) | function findViewForLine(e,t){if(t>=e.display.viewFrom&&t<e.display.view...
function prepareMeasureForLine (line 1) | function prepareMeasureForLine(e,t){var n=lineNo(t),r=findViewForLine(e,...
function measureCharPrepared (line 1) | function measureCharPrepared(e,t,n,r,i){t.before&&(n=-1);var o,l=n+(r||"...
function nodeAndOffsetInLineMap (line 1) | function nodeAndOffsetInLineMap(e,t,n){for(var r,i,o,s,a,l,c=0;c<e.lengt...
function getUsefulRect (line 1) | function getUsefulRect(e,t){var n=ae;if("left"==t)for(var r=0;r<e.length...
function clearLineMeasurementCacheFor (line 1) | function clearLineMeasurementCacheFor(e){if(e.measure&&(e.measure.cache=...
function clearLineMeasurementCache (line 1) | function clearLineMeasurementCache(e){e.display.externalMeasure=null,rem...
function clearCaches (line 1) | function clearCaches(e){clearLineMeasurementCache(e),e.display.cachedCha...
function pageScrollX (line 1) | function pageScrollX(){return u&&m?-(document.body.getBoundingClientRect...
function pageScrollY (line 1) | function pageScrollY(){return u&&m?-(document.body.getBoundingClientRect...
function widgetTopHeight (line 1) | function widgetTopHeight(e){var t=0;if(e.widgets)for(var n=0;n<e.widgets...
function intoCoordSystem (line 1) | function intoCoordSystem(e,t,n,r,i){if(!i){var o=widgetTopHeight(t);n.to...
function fromCoordSystem (line 1) | function fromCoordSystem(e,t,n){if("div"==n)return t;var r=t.left,i=t.to...
function charCoords (line 1) | function charCoords(e,t,n,r,i){return r||(r=getLine(e.doc,t.line)),intoC...
function cursorCoords (line 1) | function cursorCoords(e,t,n,r,i,o){r=r||getLine(e.doc,t.line),i||(i=prep...
function estimateCoords (line 1) | function estimateCoords(e,t){var n=0;t=clipPos(e.doc,t),e.options.lineWr...
function PosWithInfo (line 1) | function PosWithInfo(e,t,n,r,i){var o=Pos(e,t,n);return o.xRel=i,r&&(o.o...
function coordsChar (line 1) | function coordsChar(e,t,n){var r=e.doc;if((n+=e.display.viewOffset)<0)re...
function wrappedLineExtent (line 1) | function wrappedLineExtent(e,t,n,r){r-=widgetTopHeight(t);var i=t.text.l...
function wrappedLineExtentChar (line 1) | function wrappedLineExtentChar(e,t,n,r){n||(n=prepareMeasureForLine(e,t)...
function boxIsAfter (line 1) | function boxIsAfter(e,t,n,r){return!(e.bottom<=n)&&(e.top>n||(r?e.left:e...
function coordsCharInner (line 1) | function coordsCharInner(e,t,n,r,i){i-=heightAtLine(t);var o=prepareMeas...
function textHeight (line 1) | function textHeight(e){if(null!=e.cachedTextHeight)return e.cachedTextHe...
function charWidth (line 1) | function charWidth(e){if(null!=e.cachedCharWidth)return e.cachedCharWidt...
function getDimensions (line 1) | function getDimensions(e){for(var t=e.display,n={},r={},i=t.gutters.clie...
function compensateForHScroll (line 1) | function compensateForHScroll(e){return e.scroller.getBoundingClientRect...
function estimateHeight (line 1) | function estimateHeight(e){var t=textHeight(e.display),n=e.options.lineW...
function estimateLineHeights (line 1) | function estimateLineHeights(e){var t=e.doc,n=estimateHeight(e);t.iter(f...
function posFromMouse (line 1) | function posFromMouse(e,t,n,r){var i=e.display;if(!n&&"true"==e_target(t...
function findViewIndex (line 1) | function findViewIndex(e,t){if(t>=e.display.viewTo)return null;if((t-=e....
function updateSelection (line 1) | function updateSelection(e){e.display.input.showSelection(e.display.inpu...
function prepareSelection (line 1) | function prepareSelection(e,t){void 0===t&&(t=!0);for(var n=e.doc,r={},i...
function drawSelectionCursor (line 1) | function drawSelectionCursor(e,t,n){var r=cursorCoords(e,t,"div",null,nu...
function cmpCoords (line 1) | function cmpCoords(e,t){return e.top-t.top||e.left-t.left}
function drawSelectionRange (line 1) | function drawSelectionRange(e,t,n){var r=e.display,i=e.doc,o=document.cr...
function restartBlink (line 1) | function restartBlink(e){if(e.state.focused){var t=e.display;clearInterv...
function ensureFocus (line 1) | function ensureFocus(e){e.state.focused||(e.display.input.focus(),onFocu...
function delayBlurEvent (line 1) | function delayBlurEvent(e){e.state.delayingBlurEvent=!0,setTimeout(funct...
function onFocus (line 1) | function onFocus(e,t){e.state.delayingBlurEvent&&(e.state.delayingBlurEv...
function onBlur (line 1) | function onBlur(e,t){e.state.delayingBlurEvent||(e.state.focused&&(signa...
function updateHeightsInViewport (line 1) | function updateHeightsInViewport(e){for(var t=e.display,n=t.lineDiv.offs...
function updateWidgetHeight (line 1) | function updateWidgetHeight(e){if(e.widgets)for(var t=0;t<e.widgets.leng...
function visibleLines (line 1) | function visibleLines(e,t,n){var r=n&&null!=n.top?Math.max(0,n.top):e.sc...
function alignHorizontally (line 1) | function alignHorizontally(e){var t=e.display,n=t.view;if(t.alignWidgets...
function maybeUpdateLineNumberWidth (line 1) | function maybeUpdateLineNumberWidth(e){if(!e.options.lineNumbers)return!...
function calculateScrollPos (line 1) | function calculateScrollPos(e,t){var n=e.display,r=textHeight(e.display)...
function addToScrollTop (line 1) | function addToScrollTop(e,t){null!=t&&(resolveScrollToPos(e),e.curOp.scr...
function ensureCursorVisible (line 1) | function ensureCursorVisible(e){resolveScrollToPos(e);var t=e.getCursor(...
function scrollToCoords (line 1) | function scrollToCoords(e,t,n){null==t&&null==n||resolveScrollToPos(e),n...
function resolveScrollToPos (line 1) | function resolveScrollToPos(e){var t=e.curOp.scrollToPos;if(t){e.curOp.s...
function scrollToCoordsRange (line 1) | function scrollToCoordsRange(e,t,n,r){var i=calculateScrollPos(e,{left:M...
function updateScrollTop (line 1) | function updateScrollTop(e,t){Math.abs(e.doc.scrollTop-t)<2||(n||updateD...
function setScrollTop (line 1) | function setScrollTop(e,t,n){t=Math.min(e.display.scroller.scrollHeight-...
function setScrollLeft (line 1) | function setScrollLeft(e,t,n,r){t=Math.min(t,e.display.scroller.scrollWi...
function measureForScrollbars (line 1) | function measureForScrollbars(e){var t=e.display,n=t.gutters.offsetWidth...
function updateScrollbars (line 1) | function updateScrollbars(e,t){t||(t=measureForScrollbars(e));var n=e.di...
function updateScrollbarsInner (line 1) | function updateScrollbarsInner(e,t){var n=e.display,r=n.scrollbars.updat...
function initScrollbars (line 1) | function initScrollbars(e){e.display.scrollbars&&(e.display.scrollbars.c...
function startOperation (line 1) | function startOperation(e){e.curOp={cm:e,viewChanged:!1,startHeight:e.do...
function endOperation (line 1) | function endOperation(e){!function finishOperation(e,t){var n=e.ownsGrou...
function endOperation_R1 (line 1) | function endOperation_R1(e){var t=e.cm,n=t.display;!function maybeClipSc...
function endOperation_R2 (line 1) | function endOperation_R2(e){var t=e.cm,n=t.display;e.updatedDisplay&&upd...
function endOperation_W2 (line 1) | function endOperation_W2(e){var t=e.cm;null!=e.adjustWidthTo&&(t.display...
function endOperation_finish (line 1) | function endOperation_finish(e){var t=e.cm,n=t.display,r=t.doc;if(e.upda...
function runInOp (line 1) | function runInOp(e,t){if(e.curOp)return t();startOperation(e);try{return...
function operation (line 1) | function operation(e,t){return function(){if(e.curOp)return t.apply(e,ar...
function methodOp (line 1) | function methodOp(e){return function(){if(this.curOp)return e.apply(this...
function docMethodOp (line 1) | function docMethodOp(e){return function(){var t=this.cm;if(!t||t.curOp)r...
function regChange (line 1) | function regChange(e,t,n,r){null==t&&(t=e.doc.first),null==n&&(n=e.doc.f...
function regLineChange (line 1) | function regLineChange(e,t,n){e.curOp.viewChanged=!0;var r=e.display,i=e...
function resetView (line 1) | function resetView(e){e.display.viewFrom=e.display.viewTo=e.doc.first,e....
function viewCuttingPoint (line 1) | function viewCuttingPoint(e,t,n,r){var i,o=findViewIndex(e,t),s=e.displa...
function countDirtyView (line 1) | function countDirtyView(e){for(var t=e.display.view,n=0,r=0;r<t.length;r...
function startWorker (line 1) | function startWorker(e,t){e.doc.highlightFrontier<e.display.viewTo&&e.st...
function highlightWorker (line 1) | function highlightWorker(e){var t=e.doc;if(!(t.highlightFrontier>=e.disp...
function updateDisplayIfNeeded (line 1) | function updateDisplayIfNeeded(e,t){var n=e.display,r=e.doc;if(t.editorI...
function postUpdateDisplay (line 1) | function postUpdateDisplay(e,t){for(var n=t.viewport,r=!0;(r&&e.options....
function updateDisplaySimple (line 1) | function updateDisplaySimple(e,t){var n=new he(e,t);if(updateDisplayIfNe...
function updateGutterSpace (line 1) | function updateGutterSpace(e){var t=e.display.gutters.offsetWidth;e.disp...
function setDocumentHeight (line 1) | function setDocumentHeight(e,t){e.display.sizer.style.minHeight=t.docHei...
function updateGutters (line 1) | function updateGutters(e){var t=e.display.gutters,n=e.options.gutters;re...
function setGuttersForLineNumbers (line 1) | function setGuttersForLineNumbers(e){var t=indexOf(e.gutters,"CodeMirror...
function wheelEventDelta (line 1) | function wheelEventDelta(e){var t=e.wheelDeltaX,n=e.wheelDeltaY;return n...
function wheelEventPixels (line 1) | function wheelEventPixels(e){var t=wheelEventDelta(e);return t.x*=ge,t.y...
function onScrollWheel (line 1) | function onScrollWheel(e,t){var r=wheelEventDelta(t),i=r.x,o=r.y,s=e.dis...
function normalizeSelection (line 1) | function normalizeSelection(e,t){var n=e[t];e.sort(function(e,t){return ...
function simpleSelection (line 1) | function simpleSelection(e,t){return new me([new ve(e,t||e)],0)}
function changeEnd (line 1) | function changeEnd(e){return e.text?Pos(e.from.line+e.text.length-1,lst(...
function adjustForChange (line 1) | function adjustForChange(e,t){if(cmp(e,t.from)<0)return e;if(cmp(e,t.to)...
function computeSelAfterChange (line 1) | function computeSelAfterChange(e,t){for(var n=[],r=0;r<e.sel.ranges.leng...
function offsetPos (line 1) | function offsetPos(e,t,n){return e.line==t.line?Pos(n.line,e.ch-t.ch+n.c...
function loadMode (line 1) | function loadMode(e){e.doc.mode=getMode(e.options,e.doc.modeOption),rese...
function resetModeState (line 1) | function resetModeState(e){e.doc.iter(function(e){e.stateAfter&&(e.state...
function isWholeLineUpdate (line 1) | function isWholeLineUpdate(e,t){return 0==t.from.ch&&0==t.to.ch&&""==lst...
function updateDoc (line 1) | function updateDoc(e,t,n,r){function spansFor(e){return n?n[e]:null}func...
function linkedDocs (line 1) | function linkedDocs(e,t,n){!function propagate(e,r,i){if(e.linked)for(va...
function attachDoc (line 1) | function attachDoc(e,t){if(t.cm)throw new Error("This document is alread...
function setDirectionClass (line 1) | function setDirectionClass(e){("rtl"==e.doc.direction?addClass:k)(e.disp...
function History (line 1) | function History(e){this.done=[],this.undone=[],this.undoDepth=1/0,this....
function historyChangeFromChange (line 1) | function historyChangeFromChange(e,t){var n={from:copyPos(t.from),to:cha...
function clearSelectionEvents (line 1) | function clearSelectionEvents(e){for(;e.length;){if(!lst(e).ranges)break...
function addChangeToHistory (line 1) | function addChangeToHistory(e,t,n,r){var i=e.history;i.undone.length=0;v...
function addSelectionToHistory (line 1) | function addSelectionToHistory(e,t,n,r){var i=e.history,o=r&&r.origin;n=...
function pushSelectionToHistory (line 1) | function pushSelectionToHistory(e,t){var n=lst(t);n&&n.ranges&&n.equals(...
function attachLocalSpans (line 1) | function attachLocalSpans(e,t,n,r){var i=t["spans_"+e.id],o=0;e.iter(Mat...
function removeClearedSpans (line 1) | function removeClearedSpans(e){if(!e)return null;for(var t,n=0;n<e.lengt...
function mergeOldSpans (line 1) | function mergeOldSpans(e,t){var n=function getOldSpans(e,t){var n=t["spa...
function copyHistoryArray (line 1) | function copyHistoryArray(e,t,n){for(var r=[],i=0;i<e.length;++i){var o=...
function extendRange (line 1) | function extendRange(e,t,n,r){if(r){var i=e.anchor;if(n){var o=cmp(t,i)<...
function extendSelection (line 1) | function extendSelection(e,t,n,r,i){null==i&&(i=e.cm&&(e.cm.display.shif...
function extendSelections (line 1) | function extendSelections(e,t,n){for(var r=[],i=e.cm&&(e.cm.display.shif...
function replaceOneSelection (line 1) | function replaceOneSelection(e,t,n,r){var i=e.sel.ranges.slice(0);i[t]=n...
function setSimpleSelection (line 1) | function setSimpleSelection(e,t,n,r){setSelection(e,simpleSelection(t,n)...
function setSelectionReplaceHistory (line 1) | function setSelectionReplaceHistory(e,t,n){var r=e.history.done,i=lst(r)...
function setSelection (line 1) | function setSelection(e,t,n){setSelectionNoUndo(e,t,n),addSelectionToHis...
function setSelectionNoUndo (line 1) | function setSelectionNoUndo(e,t,n){(hasHandler(e,"beforeSelectionChange"...
function setSelectionInner (line 1) | function setSelectionInner(e,t){t.equals(e.sel)||(e.sel=t,e.cm&&(e.cm.cu...
function reCheckSelection (line 1) | function reCheckSelection(e){setSelectionInner(e,skipAtomicInSelection(e...
function skipAtomicInSelection (line 1) | function skipAtomicInSelection(e,t,n,r){for(var i,o=0;o<t.ranges.length;...
function skipAtomicInner (line 1) | function skipAtomicInner(e,t,n,r,i){var o=getLine(e,t.line);if(o.markedS...
function skipAtomic (line 1) | function skipAtomic(e,t,n,r,i){var o=r||1,s=skipAtomicInner(e,t,n,o,i)||...
function movePos (line 1) | function movePos(e,t,n,r){return n<0&&0==t.ch?t.line>e.first?clipPos(e,P...
function selectAll (line 1) | function selectAll(e){e.setSelection(Pos(e.firstLine(),0),Pos(e.lastLine...
function filterChange (line 1) | function filterChange(e,t,n){var r={canceled:!1,from:t.from,to:t.to,text...
function makeChange (line 1) | function makeChange(e,t,n){if(e.cm){if(!e.cm.curOp)return operation(e.cm...
function makeChangeInner (line 1) | function makeChangeInner(e,t){if(1!=t.text.length||""!=t.text[0]||0!=cmp...
function makeChangeFromHistory (line 1) | function makeChangeFromHistory(e,t,n){if(!e.cm||!e.cm.state.suppressEdit...
function shiftDoc (line 1) | function shiftDoc(e,t){if(0!=t&&(e.first+=t,e.sel=new me(map(e.sel.range...
function makeChangeSingleDoc (line 1) | function makeChangeSingleDoc(e,t,n,r){if(e.cm&&!e.cm.curOp)return operat...
function replaceRange (line 1) | function replaceRange(e,t,n,r,i){if(r||(r=n),cmp(r,n)<0){var o;n=(o=[r,n...
function rebaseHistSelSingle (line 1) | function rebaseHistSelSingle(e,t,n,r){n<e.line?e.line+=r:t<e.line&&(e.li...
function rebaseHistArray (line 1) | function rebaseHistArray(e,t,n,r){for(var i=0;i<e.length;++i){var o=e[i]...
function rebaseHist (line 1) | function rebaseHist(e,t){var n=t.from.line,r=t.to.line,i=t.text.length-(...
function changeLine (line 1) | function changeLine(e,t,n,r){var i=t,o=t;return"number"==typeof t?o=getL...
function LeafChunk (line 1) | function LeafChunk(e){this.lines=e,this.parent=null;for(var t=0,n=0;n<e....
function BranchChunk (line 1) | function BranchChunk(e){this.children=e;for(var t=0,n=0,r=0;r<e.length;+...
function adjustScrollWhenAboveVisible (line 1) | function adjustScrollWhenAboveVisible(e,t,n){heightAtLine(t)<(e.curOp&&e...
function markText (line 1) | function markText(e,t,n,r,i){if(r&&r.shared)return function markTextShar...
function findSharedMarkers (line 1) | function findSharedMarkers(e){return e.findMarks(Pos(e.first,0),e.clipPo...
function detachSharedMarkers (line 1) | function detachSharedMarkers(e){for(var t=function(t){var n=e[t],r=[n.pr...
function onDrop (line 1) | function onDrop(e){var t=this;if(clearDragCursor(t),!signalDOMEvent(t,e)...
function clearDragCursor (line 1) | function clearDragCursor(e){e.display.dragCursor&&(e.display.lineSpace.r...
function forEachCodeMirror (line 1) | function forEachCodeMirror(e){if(document.getElementsByClassName)for(var...
function ensureGlobalHandlers (line 1) | function ensureGlobalHandlers(){Le||(!function registerGlobalHandlers(){...
function onResize (line 1) | function onResize(e){var t=e.display;t.lastWrapHeight==t.wrapper.clientH...
function normalizeKeyName (line 1) | function normalizeKeyName(e){var t=e.split(/-(?!$)/);e=t[t.length-1];for...
function normalizeKeyMap (line 1) | function normalizeKeyMap(e){var t={};for(var n in e)if(e.hasOwnProperty(...
function lookupKey (line 1) | function lookupKey(e,t,n,r){var i=(t=getKeyMap(t)).call?t.call(e,r):t[e]...
function isModifierKey (line 1) | function isModifierKey(e){var t="string"==typeof e?e:Me[e.keyCode];retur...
function addModifierNames (line 1) | function addModifierNames(e,t,n){var r=e;return t.altKey&&"Alt"!=r&&(e="...
function keyName (line 1) | function keyName(e,t){if(d&&34==e.keyCode&&e.char)return!1;var n=Me[e.ke...
function getKeyMap (line 1) | function getKeyMap(e){return"string"==typeof e?Ae[e]:e}
function deleteNearSelection (line 1) | function deleteNearSelection(e,t){for(var n=e.doc.sel.ranges,r=[],i=0;i<...
function moveCharLogically (line 1) | function moveCharLogically(e,t,n){var r=skipExtendingChars(e.text,t+n,n)...
function moveLogically (line 1) | function moveLogically(e,t,n){var r=moveCharLogically(e,t.ch,n);return n...
function endOfLine (line 1) | function endOfLine(e,t,n,r,i){if(e){var o=getOrder(n,t.doc.direction);if...
function lineStart (line 1) | function lineStart(e,t){var n=getLine(e.doc,t),r=visualLine(n);return r!...
function lineStartSmart (line 1) | function lineStartSmart(e,t){var n=lineStart(e,t.line),r=getLine(e.doc,n...
function doHandleBinding (line 1) | function doHandleBinding(e,t,n){if("string"==typeof t&&!(t=Ne[t]))return...
function dispatchKey (line 1) | function dispatchKey(e,t,n,r){var i=e.state.keySeq;if(i){if(isModifierKe...
function dispatchKeyInner (line 1) | function dispatchKeyInner(e,t,n,r){var i=function lookupKeyForEditor(e,t...
function handleKeyBinding (line 1) | function handleKeyBinding(e,t){var n=keyName(t,!0);return!!n&&(t.shiftKe...
function onKeyDown (line 1) | function onKeyDown(e){if(this.curOp.focus=activeElt(),!signalDOMEvent(th...
function onKeyUp (line 1) | function onKeyUp(e){16==e.keyCode&&(this.doc.sel.shift=!1),signalDOMEven...
function onKeyPress (line 1) | function onKeyPress(e){if(!(eventInWidget(this.display,e)||signalDOMEven...
function onMouseDown (line 1) | function onMouseDown(e){var t=this.display;if(!(signalDOMEvent(this,e)||...
function rangeForUnit (line 1) | function rangeForUnit(e,t,n){if("char"==n)return new ve(t,t);if("word"==...
function gutterEvent (line 1) | function gutterEvent(e,t,n,r){var i,o;if(t.touches)i=t.touches[0].client...
function clickInGutter (line 1) | function clickInGutter(e,t){return gutterEvent(e,t,"gutterClick",!0)}
function onContextMenu (line 1) | function onContextMenu(e,t){eventInWidget(e.display,t)||function context...
function themeChanged (line 1) | function themeChanged(e){e.display.wrapper.className=e.display.wrapper.c...
function guttersChanged (line 1) | function guttersChanged(e){updateGutters(e),regChange(e),alignHorizontal...
function dragDropChanged (line 1) | function dragDropChanged(e,t,n){if(!t!=!(n&&n!=Fe)){var r=e.display.drag...
function wrappingChanged (line 1) | function wrappingChanged(e){e.options.lineWrapping?(addClass(e.display.w...
function CodeMirror$1 (line 1) | function CodeMirror$1(e,t){var r=this;if(!(this instanceof CodeMirror$1)...
function indentLine (line 1) | function indentLine(e,t,n,r){var i,o=e.doc;null==n&&(n="add"),"smart"==n...
function setLastCopied (line 1) | function setLastCopied(e){Ve=e}
function applyTextInput (line 1) | function applyTextInput(e,t,n,r,i){var o=e.doc;e.display.shift=!1,r||(r=...
function handlePaste (line 1) | function handlePaste(e,t){var n=e.clipboardData&&e.clipboardData.getData...
function triggerElectric (line 1) | function triggerElectric(e,t){if(e.options.electricChars&&e.options.smar...
function copyableRanges (line 1) | function copyableRanges(e){for(var t=[],n=[],r=0;r<e.doc.sel.ranges.leng...
function disableBrowserMagic (line 1) | function disableBrowserMagic(e,t){e.setAttribute("autocorrect","off"),e....
function hiddenTextarea (line 1) | function hiddenTextarea(){var e=elt("textarea",null,null,"position: abso...
function findPosH (line 1) | function findPosH(e,t,n,r,i){var o=t,s=n,a=getLine(e,t.line);function mo...
function findPosV (line 1) | function findPosV(e,t,n,r){var i,o=e.doc,s=t.left;if("page"==r){var a=Ma...
function onCopyCut (line 1) | function onCopyCut(e){if(!signalDOMEvent(r,e)){if(r.somethingSelected())...
function close (line 1) | function close(){s&&(o+=a,s=!1)}
function addText (line 1) | function addText(e){e&&(close(),o+=e)}
function walk (line 1) | function walk(t){if(1==t.nodeType){var n=t.getAttribute("cm-text");if(nu...
function posToDOM (line 1) | function posToDOM(e,t){var n=findViewForLine(e,t.line);if(!n||n.hidden)r...
function badPos (line 1) | function badPos(e,t){return t&&(e.bad=!0),e}
function domToPos (line 1) | function domToPos(e,t,n){var r;if(t==e.display.lineDiv){if(!(r=e.display...
function locateNodeInLineView (line 1) | function locateNodeInLineView(e,t,n){var r=e.text.firstChild,i=!1;if(!t|...
function prepareCopyCut (line 1) | function prepareCopyCut(e){if(!signalDOMEvent(r,e)){if(r.somethingSelect...
function prepareSelectAllHack (line 1) | function prepareSelectAllHack(){if(null!=i.selectionStart){var e=n.somet...
function rehide (line 1) | function rehide(){if(t.contextMenuPending=!1,t.wrapper.style.cssText=p,i...
function option (line 1) | function option(n,r,i,o){e.defaults[n]=r,i&&(t[n]=o?function(e,t,n){n!=F...
function save (line 1) | function save(){e.value=s.getValue()}
function __ (line 1) | function __(){this.constructor=t}
function Shared (line 1) | function Shared(e,t){this.editor=e,this.props=t,this.notifyOfDeprecation()}
function Controlled (line 1) | function Controlled(t){var n=e.call(this,t)||this;return s?n:(n.deferred...
function UnControlled (line 1) | function UnControlled(t){var n=e.call(this,t)||this;return s?n:(n.contin...
function Context (line 1) | function Context(e,t,n,r){this.state=e,this.mode=t,this.depth=n,this.pre...
function flatXMLIndent (line 1) | function flatXMLIndent(e){var t=e.tagName;e.tagName=null;var n=r.indent(...
function token (line 1) | function token(n,o){return o.context.mode==r?function xmlToken(n,o,s){if...
function inText (line 1) | function inText(e,t){function chain(n){return t.tokenize=n,n(e,t)}var n=...
function inTag (line 1) | function inTag(e,t){var n=e.next();if(">"==n||"/"==n&&e.eat(">"))return ...
function inBlock (line 1) | function inBlock(e,t){return function(n,r){for(;!n.eol();){if(n.match(t)...
function popContext (line 1) | function popContext(e){e.context&&(e.context=e.context.prev)}
function maybePopContext (line 1) | function maybePopContext(e,t){for(var n;;){if(!e.context)return;if(n=e.c...
function baseState (line 1) | function baseState(e,t,n){return"openTag"==e?(n.tagStart=t.column(),tagN...
function tagNameState (line 1) | function tagNameState(e,t,n){return"word"==e?(n.tagName=t.current(),u="t...
function closeTagNameState (line 1) | function closeTagNameState(e,t,n){if("word"==e){var r=t.current();return...
function closeState (line 1) | function closeState(e,t,n){return"endTag"!=e?(u="error",closeState):(pop...
function closeStateErr (line 1) | function closeStateErr(e,t,n){return u="error",closeState(e,0,n)}
function attrState (line 1) | function attrState(e,t,n){if("word"==e)return u="attribute",attrEqState;...
function attrEqState (line 1) | function attrEqState(e,t,n){return"equals"==e?attrValueState:(s.allowMis...
function attrValueState (line 1) | function attrValueState(e,t,n){return"string"==e?attrContinuedState:"wor...
function attrContinuedState (line 1) | function attrContinuedState(e,t,n){return"string"==e?attrContinuedState:...
function kw (line 1) | function kw(e){return{type:e,style:"keyword"}}
function ret (line 1) | function ret(e,t,n){return p=e,h=n,t}
function tokenBase (line 1) | function tokenBase(e,t){var n=e.next();if('"'==n||"'"==n)return t.tokeni...
function tokenComment (line 1) | function tokenComment(e,t){for(var n,r=!1;n=e.next();){if("/"==n&&r){t.t...
function tokenQuasi (line 1) | function tokenQuasi(e,t){for(var n,r=!1;null!=(n=e.next());){if(!r&&("`"...
function findFatArrow (line 1) | function findFatArrow(e,t){t.fatArrowAt&&(t.fatArrowAt=null);var n=e.str...
function JSLexical (line 1) | function JSLexical(e,t,n,r,i,o){this.indented=e,this.column=t,this.type=...
function inScope (line 1) | function inScope(e,t){for(var n=e.localVars;n;n=n.next)if(n.name==t)retu...
function pass (line 1) | function pass(){for(var e=arguments.length-1;e>=0;e--)m.cc.push(argument...
function cont (line 1) | function cont(){return pass.apply(null,arguments),!0}
function register (line 1) | function register(e){function inList(t){for(var n=t;n;n=n.next)if(n.name...
function isModifier (line 1) | function isModifier(e){return"public"==e||"private"==e||"protected"==e||...
function pushcontext (line 1) | function pushcontext(){m.state.context={prev:m.state.context,vars:m.stat...
function popcontext (line 1) | function popcontext(){m.state.localVars=m.state.context.vars,m.state.con...
function pushlex (line 1) | function pushlex(e,t){var n=function(){var n=m.state,r=n.indented;if("st...
function poplex (line 1) | function poplex(){var e=m.state;e.lexical.prev&&(")"==e.lexical.type&&(e...
function expect (line 1) | function expect(e){return function exp(t){return t==e?cont():";"==e?pass...
function statement (line 1) | function statement(e,t){return"var"==e?cont(pushlex("vardef",t.length),v...
function expression (line 1) | function expression(e,t){return expressionInner(e,t,!1)}
function expressionNoComma (line 1) | function expressionNoComma(e,t){return expressionInner(e,t,!0)}
function parenExpr (line 1) | function parenExpr(e){return"("!=e?pass():cont(pushlex(")"),expression,e...
function expressionInner (line 1) | function expressionInner(e,t,n){if(m.state.fatArrowAt==m.stream.start){v...
function maybeexpression (line 1) | function maybeexpression(e){return e.match(/[;\}\)\],]/)?pass():pass(exp...
function maybeoperatorComma (line 1) | function maybeoperatorComma(e,t){return","==e?cont(expression):maybeoper...
function maybeoperatorNoComma (line 1) | function maybeoperatorNoComma(e,t,n){var r=0==n?maybeoperatorComma:maybe...
function quasi (line 1) | function quasi(e,t){return"quasi"!=e?pass():"${"!=t.slice(t.length-2)?co...
function continueQuasi (line 1) | function continueQuasi(e){if("}"==e)return m.marked="string-2",m.state.t...
function arrowBody (line 1) | function arrowBody(e){return findFatArrow(m.stream,m.state),pass("{"==e?...
function arrowBodyNoComma (line 1) | function arrowBodyNoComma(e){return findFatArrow(m.stream,m.state),pass(...
function target (line 1) | function target(e,t){if("target"==t)return m.marked="keyword",cont(maybe...
function targetNoComma (line 1) | function targetNoComma(e,t){if("target"==t)return m.marked="keyword",con...
function maybelabel (line 1) | function maybelabel(e){return":"==e?cont(poplex,statement):pass(maybeope...
function property (line 1) | function property(e){if("variable"==e)return m.marked="property",cont()}
function objprop (line 1) | function objprop(e,t){if("async"==e)return m.marked="property",cont(objp...
function getterSetter (line 1) | function getterSetter(e){return"variable"!=e?pass(afterprop):(m.marked="...
function afterprop (line 1) | function afterprop(e){return":"==e?cont(expressionNoComma):"("==e?pass(f...
function commasep (line 1) | function commasep(e,t,n){function proceed(r,i){if(n?n.indexOf(r)>-1:","=...
function contCommasep (line 1) | function contCommasep(e,t,n){for(var r=3;r<arguments.length;r++)m.cc.pus...
function block (line 1) | function block(e){return"}"==e?cont():pass(statement,block)}
function maybetype (line 1) | function maybetype(e,t){if(a){if(":"==e)return cont(typeexpr);if("?"==t)...
function mayberettype (line 1) | function mayberettype(e){if(a&&":"==e)return m.stream.match(/^\s*\w+\s+i...
function isKW (line 1) | function isKW(e,t){if("is"==t)return m.marked="keyword",cont()}
function typeexpr (line 1) | function typeexpr(e,t){return"variable"==e||"void"==t?"keyof"==t?(m.mark...
function maybeReturnType (line 1) | function maybeReturnType(e){if("=>"==e)return cont(typeexpr)}
function typeprop (line 1) | function typeprop(e,t){return"variable"==e||"keyword"==m.style?(m.marked...
function typearg (line 1) | function typearg(e){return"variable"==e?cont(typearg):":"==e?cont(typeex...
function afterType (line 1) | function afterType(e,t){return"<"==t?cont(pushlex(">"),commasep(typeexpr...
function maybeTypeArgs (line 1) | function maybeTypeArgs(e,t){if("<"==t)return cont(pushlex(">"),commasep(...
function typeparam (line 1) | function typeparam(){return pass(typeexpr,maybeTypeDefault)}
function maybeTypeDefault (line 1) | function maybeTypeDefault(e,t){if("="==t)return cont(typeexpr)}
function vardef (line 1) | function vardef(){return pass(pattern,maybetype,maybeAssign,vardefCont)}
function pattern (line 1) | function pattern(e,t){return a&&isModifier(t)?(m.marked="keyword",cont(p...
function proppattern (line 1) | function proppattern(e,t){return"variable"!=e||m.stream.match(/^\s*:/,!1...
function maybeAssign (line 1) | function maybeAssign(e,t){if("="==t)return cont(expressionNoComma)}
function vardefCont (line 1) | function vardefCont(e){if(","==e)return cont(vardef)}
function maybeelse (line 1) | function maybeelse(e,t){if("keyword b"==e&&"else"==t)return cont(pushlex...
function forspec (line 1) | function forspec(e){if("("==e)return cont(pushlex(")"),forspec1,expect("...
function forspec1 (line 1) | function forspec1(e){return"var"==e?cont(vardef,expect(";"),forspec2):";...
function formaybeinof (line 1) | function formaybeinof(e,t){return"in"==t||"of"==t?(m.marked="keyword",co...
function forspec2 (line 1) | function forspec2(e,t){return";"==e?cont(forspec3):"in"==t||"of"==t?(m.m...
function forspec3 (line 1) | function forspec3(e){")"!=e&&cont(expression)}
function functiondef (line 1) | function functiondef(e,t){return"*"==t?(m.marked="keyword",cont(function...
function funarg (line 1) | function funarg(e,t){return"@"==t&&cont(expression,funarg),"spread"==e?c...
function classExpression (line 1) | function classExpression(e,t){return"variable"==e?className(e,t):classNa...
function className (line 1) | function className(e,t){if("variable"==e)return register(t),cont(classNa...
function classNameAfter (line 1) | function classNameAfter(e,t){return"<"==t?cont(pushlex(">"),commasep(typ...
function classBody (line 1) | function classBody(e,t){return"async"==e||"variable"==e&&("static"==t||"...
function classfield (line 1) | function classfield(e,t){return"?"==t?cont(classfield):":"==e?cont(typee...
function afterExport (line 1) | function afterExport(e,t){return"*"==t?(m.marked="keyword",cont(maybeFro...
function exportField (line 1) | function exportField(e,t){return"as"==t?(m.marked="keyword",cont(expect(...
function afterImport (line 1) | function afterImport(e){return"string"==e?cont():pass(importSpec,maybeMo...
function importSpec (line 1) | function importSpec(e,t){return"{"==e?contCommasep(importSpec,"}"):("var...
function maybeMoreImports (line 1) | function maybeMoreImports(e){if(","==e)return cont(importSpec,maybeMoreI...
function maybeAs (line 1) | function maybeAs(e,t){if("as"==t)return m.marked="keyword",cont(importSp...
function maybeFrom (line 1) | function maybeFrom(e,t){if("from"==t)return m.marked="keyword",cont(expr...
function arrayLiteral (line 1) | function arrayLiteral(e){return"]"==e?cont():pass(commasep(expressionNoC...
function expressionAllowed (line 1) | function expressionAllowed(e,t,n){return t.tokenize==tokenBase&&/^(?:ope...
FILE: docs/build/bundle.a71e23e0.js
function __webpack_require__ (line 1) | function __webpack_require__(t){if(n[t])return n[t].exports;var r=n[t]={...
function onScriptComplete (line 1) | function onScriptComplete(){a.onerror=a.onload=null,clearTimeout(o);var ...
function classNames (line 1) | function classNames(){for(var e=[],t=0;t<arguments.length;t++){var r=arg...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function StyleRule (line 1) | function StyleRule(e,t,n){!function _classCallCheck(e,t){if(!(e instance...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function RuleList (line 1) | function RuleList(e){!function _classCallCheck(e,t){if(!(e instanceof t)...
function makeEmptyFunction (line 1) | function makeEmptyFunction(e){return function(){return e}}
function ListCache (line 1) | function ListCache(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t...
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function Stack (line 1) | function Stack(e){var t=this.__data__=new r(e);this.size=t.size}
function MapCache (line 1) | function MapCache(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<...
function memoize (line 1) | function memoize(e,t){if("function"!=typeof e||null!=t&&"function"!=type...
function indentStr (line 1) | function indentStr(e,t){for(var n="",r=0;r<t;r++)n+=" ";return n+e}
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
method constructor (line 1) | constructor(){super(...arguments),this.state={name:"Piotr"}}
method render (line 1) | render(){return this.props.children(this.state)}
method constructor (line 1) | constructor(){super(...arguments),this.state={x:0,y:0},this.handleMouseM...
method render (line 1) | render(){return r.createElement("div",{style:{height:"100%"},onMouseMove...
function checkDCE (line 1) | function checkDCE(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK_...
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function SheetsRegistry (line 1) | function SheetsRegistry(){!function _classCallCheck(e,t){if(!(e instance...
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function StyleSheet (line 1) | function StyleSheet(e,t){!function _classCallCheck(e,t){if(!(e instanceo...
function Group (line 1) | function Group(e){var t=e.children?function castArray(e){return Array.is...
function kMaxLength (line 1) | function kMaxLength(){return Buffer.TYPED_ARRAY_SUPPORT?2147483647:10737...
function createBuffer (line 1) | function createBuffer(e,t){if(kMaxLength()<t)throw new RangeError("Inval...
function Buffer (line 1) | function Buffer(e,t,n){if(!(Buffer.TYPED_ARRAY_SUPPORT||this instanceof ...
function from (line 1) | function from(e,t,n,r){if("number"==typeof t)throw new TypeError('"value...
function assertSize (line 1) | function assertSize(e){if("number"!=typeof e)throw new TypeError('"size"...
function allocUnsafe (line 1) | function allocUnsafe(e,t){if(assertSize(t),e=createBuffer(e,t<0?0:0|chec...
function fromArrayLike (line 1) | function fromArrayLike(e,t){var n=t.length<0?0:0|checked(t.length);e=cre...
function checked (line 1) | function checked(e){if(e>=kMaxLength())throw new RangeError("Attempt to ...
function byteLength (line 1) | function byteLength(e,t){if(Buffer.isBuffer(e))return e.length;if("undef...
function swap (line 1) | function swap(e,t,n){var r=e[t];e[t]=e[n],e[n]=r}
function bidirectionalIndexOf (line 1) | function bidirectionalIndexOf(e,t,n,r,i){if(0===e.length)return-1;if("st...
function arrayIndexOf (line 1) | function arrayIndexOf(e,t,n,r,i){var a=1,o=e.length,s=t.length;if(void 0...
function hexWrite (line 1) | function hexWrite(e,t,n,r){n=Number(n)||0;var i=e.length-n;r?(r=Number(r...
function asciiWrite (line 1) | function asciiWrite(e,t,n,r){return blitBuffer(function asciiToBytes(e){...
function base64Slice (line 1) | function base64Slice(e,t,n){return 0===t&&n===e.length?r.fromByteArray(e...
function utf8Slice (line 1) | function utf8Slice(e,t,n){n=Math.min(e.length,n);for(var r=[],i=t;i<n;){...
function asciiSlice (line 1) | function asciiSlice(e,t,n){var r="";n=Math.min(e.length,n);for(var i=t;i...
function latin1Slice (line 1) | function latin1Slice(e,t,n){var r="";n=Math.min(e.length,n);for(var i=t;...
function hexSlice (line 1) | function hexSlice(e,t,n){var r=e.length;(!t||t<0)&&(t=0),(!n||n<0||n>r)&...
function utf16leSlice (line 1) | function utf16leSlice(e,t,n){for(var r=e.slice(t,n),i="",a=0;a<r.length;...
function checkOffset (line 1) | function checkOffset(e,t,n){if(e%1!=0||e<0)throw new RangeError("offset ...
function checkInt (line 1) | function checkInt(e,t,n,r,i,a){if(!Buffer.isBuffer(e))throw new TypeErro...
function objectWriteUInt16 (line 1) | function objectWriteUInt16(e,t,n,r){t<0&&(t=65535+t+1);for(var i=0,a=Mat...
function objectWriteUInt32 (line 1) | function objectWriteUInt32(e,t,n,r){t<0&&(t=4294967295+t+1);for(var i=0,...
function checkIEEE754 (line 1) | function checkIEEE754(e,t,n,r,i,a){if(n+r>e.length)throw new RangeError(...
function writeFloat (line 1) | function writeFloat(e,t,n,r,a){return a||checkIEEE754(e,0,n,4),i.write(e...
function writeDouble (line 1) | function writeDouble(e,t,n,r,a){return a||checkIEEE754(e,0,n,8),i.write(...
function toHex (line 1) | function toHex(e){return e<16?"0"+e.toString(16):e.toString(16)}
function utf8ToBytes (line 1) | function utf8ToBytes(e,t){t=t||1/0;for(var n,r=e.length,i=null,a=[],o=0;...
function base64ToBytes (line 1) | function base64ToBytes(e){return r.toByteArray(function base64clean(e){i...
function blitBuffer (line 1) | function blitBuffer(e,t,n,r){for(var i=0;i<r&&!(i+n>=t.length||i>=e.leng...
method render (line 1) | render(){const{items:e,itemRenderer:t}=this.props;return r.createElement...
method constructor (line 1) | constructor(){super(...arguments),this.state={count:0},this.handleIncrem...
method render (line 1) | render(){const{handleIncrement:e}=this,{label:t}=this.props,{count:n}=th...
method constructor (line 1) | constructor(){super(...arguments),this.state={count:this.props.initialCo...
method componentWillReceiveProps (line 1) | componentWillReceiveProps({initialCount:e}){null!=e&&e!==this.props.init...
method render (line 1) | render(){const{handleIncrement:e}=this,{label:t}=this.props,{count:n}=th...
function addStylesToDom (line 1) | function addStylesToDom(e,t){for(var n=0;n<e.length;n++){var i=e[n],a=r[...
function listToStyles (line 1) | function listToStyles(e,t){for(var n=[],r={},i=0;i<e.length;i++){var a=e...
function insertStyleElement (line 1) | function insertStyleElement(e,t){var n=a(e.insertInto);if(!n)throw new E...
function removeStyleElement (line 1) | function removeStyleElement(e){if(null===e.parentNode)return!1;e.parentN...
function createStyleElement (line 1) | function createStyleElement(e){var t=document.createElement("style");ret...
function addAttrs (line 1) | function addAttrs(e,t){Object.keys(t).forEach(function(n){e.setAttribute...
function addStyle (line 1) | function addStyle(e,t){var n,r,i,a;if(t.transform&&e.css){if(!(a=t.trans...
function applyToSingletonTag (line 1) | function applyToSingletonTag(e,t,n,r){var i=n?"":r.css;if(e.styleSheet)e...
function invokeFunc (line 1) | function invokeFunc(t){var n=u,r=c;return u=c=void 0,m=t,h=e.apply(r,n)}
function shouldInvoke (line 1) | function shouldInvoke(e){var n=e-d;return void 0===d||n>=t||n<0||y&&e-m>=p}
function timerExpired (line 1) | function timerExpired(){var e=i();if(shouldInvoke(e))return trailingEdge...
function trailingEdge (line 1) | function trailingEdge(e){return f=void 0,v&&u?invokeFunc(e):(u=c=void 0,h)}
function debounced (line 1) | function debounced(){var e=i(),n=shouldInvoke(e);if(u=arguments,c=this,d...
function renderStyleguide (line 1) | function renderStyleguide(){var e=n(380),t=window.location.hash,r=Object...
function _name (line 1) | function _name(){var t,n;return this===Function||this===Function.prototy...
function assign (line 1) | function assign(e,t){if(void 0===e||null===e)throw new TypeError("Cannot...
function isFunction (line 1) | function isFunction(e){return"function"==typeof e}
function useSetTimeout (line 1) | function useSetTimeout(){var e=setTimeout;return function(){return e(flu...
function flush (line 1) | function flush(){for(var e=0;e<i;e+=2){(0,f[e])(f[e+1]),f[e]=void 0,f[e+...
function attemptVertx (line 1) | function attemptVertx(){try{var e=n(123);return a=e.runOnLoop||e.runOnCo...
function then (line 1) | function then(e,t){var n=this,r=new this.constructor(noop);void 0===r[m]...
function resolve$1 (line 1) | function resolve$1(e){if(e&&"object"==typeof e&&e.constructor===this)ret...
function noop (line 1) | function noop(){}
function getThen (line 1) | function getThen(e){try{return e.then}catch(e){return b.error=e,b}}
function handleMaybeThenable (line 1) | function handleMaybeThenable(e,t,n){t.constructor===e.constructor&&n===t...
function resolve (line 1) | function resolve(e,t){e===t?reject(e,function selfFulfillment(){return n...
function publishRejection (line 1) | function publishRejection(e){e._onerror&&e._onerror(e._result),publish(e)}
function fulfill (line 1) | function fulfill(e,t){e._state===g&&(e._result=t,e._state=y,0!==e._subsc...
function reject (line 1) | function reject(e,t){e._state===g&&(e._state=v,e._result=t,s(publishReje...
function subscribe (line 1) | function subscribe(e,t,n,r){var i=e._subscribers,a=i.length;e._onerror=n...
function publish (line 1) | function publish(e){var t=e._subscribers,n=e._state;if(0!==t.length){for...
function ErrorObject (line 1) | function ErrorObject(){this.error=null}
function invokeCallback (line 1) | function invokeCallback(e,t,n,r){var i=isFunction(n),a=void 0,o=void 0,s...
function makePromise (line 1) | function makePromise(e){e[m]=x++,e._state=void 0,e._result=void 0,e._sub...
function validationError (line 1) | function validationError(){return new Error("Array Methods must be provi...
function validationError (line 1) | function validationError(){return new Error("Array Methods must be provi...
function Enumerator (line 1) | function Enumerator(t,n){this._instanceConstructor=t,this.promise=new t(...
function Promise (line 1) | function Promise(e){this[m]=function nextId(){return x++}(),this._result...
function defaultSetTimout (line 1) | function defaultSetTimout(){throw new Error("setTimeout has not been def...
function defaultClearTimeout (line 1) | function defaultClearTimeout(){throw new Error("clearTimeout has not bee...
function runTimeout (line 1) | function runTimeout(e){if(n===setTimeout)return setTimeout(e,0);if((n===...
function cleanUpNextTick (line 1) | function cleanUpNextTick(){s&&a&&(s=!1,a.length?o=a.concat(o):l=-1,o.len...
function drainQueue (line 1) | function drainQueue(){if(!s){var e=runTimeout(cleanUpNextTick);s=!0;for(...
function Item (line 1) | function Item(e,t){this.fun=e,this.array=t}
function noop (line 1) | function noop(){}
function y (line 1) | function y(e){for(var t=arguments.length-1,n="Minified React error #"+e+...
function A (line 1) | function A(e,t,n){this.props=e,this.context=t,this.refs=i,this.updater=n...
function B (line 1) | function B(e,t,n){this.props=e,this.context=t,this.refs=i,this.updater=n...
function C (line 1) | function C(){}
function E (line 1) | function E(e,t,n){this.props=e,this.context=t,this.refs=i,this.updater=n...
function J (line 1) | function J(e,t,n){var r,i={},a=null,o=null;if(null!=t)for(r in void 0!==...
function K (line 1) | function K(e){return"object"==typeof e&&null!==e&&e.$$typeof===s}
function N (line 1) | function N(e,t,n,r){if(x.length){var i=x.pop();return i.result=e,i.keyPr...
function O (line 1) | function O(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,...
function P (line 1) | function P(e,t,n,r){var i=typeof e;"undefined"!==i&&"boolean"!==i||(e=nu...
function Q (line 1) | function Q(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function...
function R (line 1) | function R(e,t){e.func.call(e.context,t,e.count++)}
function S (line 1) | function S(e,t,n){var r=e.result,i=e.keyPrefix;e=e.func.call(e.context,t...
function T (line 1) | function T(e,t,n,r,i){var a="";null!=n&&(a=(""+n).replace(_,"$&/")+"/"),...
function E (line 1) | function E(e){for(var t=arguments.length-1,n="Minified React error #"+e+...
function pa (line 1) | function pa(e,t){return(e&t)===t}
function va (line 1) | function va(e,t){if(R.hasOwnProperty(e)||2<e.length&&("o"===e[0]||"O"===...
function wa (line 1) | function wa(e){return O.hasOwnProperty(e)?O[e]:null}
function Ia (line 1) | function Ia(e){return e[1].toUpperCase()}
function Ja (line 1) | function Ja(e,t,n,r,i,a,o,s,l){he._hasCaughtError=!1,he._caughtError=nul...
function Na (line 1) | function Na(){if(fe)for(var e in de){var t=de[e],n=fe.indexOf(e);if(-1<n...
function Qa (line 1) | function Qa(e,t,n){Se[e]&&E("100",e),Se[e]=t,Re[e]=t.eventTypes[n].depen...
function Ta (line 1) | function Ta(e){fe&&E("101"),fe=Array.prototype.slice.call(e),Na()}
function Ua (line 1) | function Ua(e){var t,n=!1;for(t in e)if(e.hasOwnProperty(t)){var r=e[t];...
function Za (line 1) | function Za(e,t,n,r){t=e.type||"unknown-event",e.currentTarget=je(r),he....
function $a (line 1) | function $a(e,t){return null==t&&E("30"),null==e?t:Array.isArray(e)?Arra...
function ab (line 1) | function ab(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)}
function cb (line 1) | function cb(e,t){if(e){var n=e._dispatchListeners,r=e._dispatchInstances...
function db (line 1) | function db(e){return cb(e,!0)}
function gb (line 1) | function gb(e){return cb(e,!1)}
function ib (line 1) | function ib(e,t){var n=e.stateNode;if(!n)return null;var r=Oe(n);if(!r)r...
function jb (line 1) | function jb(e,t,n,r){for(var i,a=0;a<ge.length;a++){var o=ge[a];o&&(o=o....
function kb (line 1) | function kb(e){e&&(Ae=$a(Ae,e))}
function lb (line 1) | function lb(e){var t=Ae;Ae=null,t&&(ab(t,e?db:gb),Ae&&E("95"),he.rethrow...
function pb (line 1) | function pb(e){if(e[ze])return e[ze];for(var t=[];!e[ze];){if(t.push(e),...
function qb (line 1) | function qb(e){if(5===e.tag||6===e.tag)return e.stateNode;E("33")}
function rb (line 1) | function rb(e){return e[Ve]||null}
function tb (line 1) | function tb(e){do{e=e.return}while(e&&5!==e.tag);return e||null}
function ub (line 1) | function ub(e,t,n){for(var r=[];e;)r.push(e),e=tb(e);for(e=r.length;0<e-...
function vb (line 1) | function vb(e,t,n){(t=ib(e,n.dispatchConfig.phasedRegistrationNames[t]))...
function wb (line 1) | function wb(e){e&&e.dispatchConfig.phasedRegistrationNames&&ub(e._target...
function xb (line 1) | function xb(e){if(e&&e.dispatchConfig.phasedRegistrationNames){var t=e._...
function yb (line 1) | function yb(e,t,n){e&&n&&n.dispatchConfig.registrationName&&(t=ib(e,n.di...
function zb (line 1) | function zb(e){e&&e.dispatchConfig.registrationName&&yb(e._targetInst,nu...
function Ab (line 1) | function Ab(e){ab(e,wb)}
function Bb (line 1) | function Bb(e,t,n,r){if(n&&r)e:{for(var i=n,a=r,o=0,s=i;s;s=tb(s))o++;s=...
function Eb (line 1) | function Eb(){return!Qe&&a.canUseDOM&&(Qe="textContent"in document.docum...
function Fb (line 1) | function Fb(){if(et._fallbackText)return et._fallbackText;var e,t,n=et._...
function Gb (line 1) | function Gb(){return"value"in et._root?et._root.value:et._root[Eb()]}
function T (line 1) | function T(e,t,n,r){this.dispatchConfig=e,this._targetInst=t,this.native...
function c (line 1) | function c(){}
function Kb (line 1) | function Kb(e,t,n,r){if(this.eventPool.length){var i=this.eventPool.pop(...
function Lb (line 1) | function Lb(e){e instanceof this||E("223"),e.destructor(),10>this.eventP...
function Jb (line 1) | function Jb(e){e.eventPool=[],e.getPooled=Kb,e.release=Lb}
function Mb (line 1) | function Mb(e,t,n,r){return T.call(this,e,t,n,r)}
function Nb (line 1) | function Nb(e,t,n,r){return T.call(this,e,t,n,r)}
function dc (line 1) | function dc(e,t){switch(e){case"topKeyUp":return-1!==rt.indexOf(t.keyCod...
function ec (line 1) | function ec(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}
function mc (line 1) | function mc(e){if(e=Te(e)){mt&&"function"==typeof mt.restoreControlledSt...
function oc (line 1) | function oc(e){gt?yt?yt.push(e):yt=[e]:gt=e}
function pc (line 1) | function pc(){if(gt){var e=gt,t=yt;if(yt=gt=null,mc(e),t)for(e=0;e<t.len...
function rc (line 1) | function rc(e,t){return e(t)}
function tc (line 1) | function tc(e,t){if(_t)return rc(e,t);_t=!0;try{return rc(e,t)}finally{_...
function vc (line 1) | function vc(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"inpu...
function wc (line 1) | function wc(e){return(e=e.target||e.srcElement||window).correspondingUse...
function yc (line 1) | function yc(e,t){if(!a.canUseDOM||t&&!("addEventListener"in document))re...
function zc (line 1) | function zc(e){var t=e.type;return(e=e.nodeName)&&"input"===e.toLowerCas...
function Bc (line 1) | function Bc(e){e._valueTracker||(e._valueTracker=function Ac(e){var t=zc...
function Cc (line 1) | function Cc(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n...
function Ec (line 1) | function Ec(e,t,n){return(e=T.getPooled(kt.change,e,t,n)).type="change",...
function Hc (line 1) | function Hc(e){kb(e),lb(!1)}
function Ic (line 1) | function Ic(e){if(Cc(qb(e)))return e}
function Jc (line 1) | function Jc(e,t){if("topChange"===e)return t}
function Lc (line 1) | function Lc(){Et&&(Et.detachEvent("onpropertychange",Mc),Ct=Et=null)}
function Mc (line 1) | function Mc(e){"value"===e.propertyName&&Ic(Ct)&&(e=Ec(Ct,e,wc(e)),tc(Hc...
function Nc (line 1) | function Nc(e,t,n){"topFocus"===e?(Lc(),Ct=n,(Et=t).attachEvent("onprope...
function Oc (line 1) | function Oc(e){if("topSelectionChange"===e||"topKeyUp"===e||"topKeyDown"...
function Pc (line 1) | function Pc(e,t){if("topClick"===e)return Ic(t)}
function $c (line 1) | function $c(e,t){if("topInput"===e||"topChange"===e)return Ic(t)}
function bd (line 1) | function bd(e,t,n,r){return T.call(this,e,t,n,r)}
function dd (line 1) | function dd(e){var t=this.nativeEvent;return t.getModifierState?t.getMod...
function ed (line 1) | function ed(){return dd}
function fd (line 1) | function fd(e,t,n,r){return T.call(this,e,t,n,r)}
function jd (line 1) | function jd(e){return"string"==typeof(e=e.type)?e:"function"==typeof e?e...
function kd (line 1) | function kd(e){var t=e;if(e.alternate)for(;t.return;)t=t.return;else{if(...
function ld (line 1) | function ld(e){return!!(e=e._reactInternalFiber)&&2===kd(e)}
function md (line 1) | function md(e){2!==kd(e)&&E("188")}
function nd (line 1) | function nd(e){var t=e.alternate;if(!t)return t=kd(e),3===t&&E("188"),1=...
function rd (line 1) | function rd(e){var t=e.targetInst;do{if(!t){e.ancestors.push(t);break}va...
function ud (line 1) | function ud(e){It=!!e}
function U (line 1) | function U(e,t,n){return n?l.listen(n,t,vd.bind(null,e)):null}
function wd (line 1) | function wd(e,t,n){return n?l.capture(n,t,vd.bind(null,e)):null}
function vd (line 1) | function vd(e,t){if(It){var n=wc(t);if(null===(n=pb(n))||"number"!=typeo...
method _enabled (line 1) | get _enabled(){return It}
method _handleTopLevel (line 1) | get _handleTopLevel(){return Lt}
function yd (line 1) | function yd(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["W...
function Cd (line 1) | function Cd(e){if(Dt[e])return Dt[e];if(!Mt[e])return e;var t,n=Mt[e];fo...
function Hd (line 1) | function Hd(e){return Object.prototype.hasOwnProperty.call(e,qt)||(e[qt]...
function Id (line 1) | function Id(e){for(;e&&e.firstChild;)e=e.firstChild;return e}
function Jd (line 1) | function Jd(e,t){var n=Id(e);e=0;for(var r;n;){if(3===n.nodeType){if(r=e...
function Kd (line 1) | function Kd(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&(...
function Rd (line 1) | function Rd(e,t){if(Gt||null==Wt||Wt!==p())return null;var n=Wt;return"s...
function Td (line 1) | function Td(e,t,n,r){return T.call(this,e,t,n,r)}
function Ud (line 1) | function Ud(e,t,n,r){return T.call(this,e,t,n,r)}
function Vd (line 1) | function Vd(e,t,n,r){return T.call(this,e,t,n,r)}
function Wd (line 1) | function Wd(e){var t=e.keyCode;return"charCode"in e?0===(e=e.charCode)&&...
function Zd (line 1) | function Zd(e,t,n,r){return T.call(this,e,t,n,r)}
function $d (line 1) | function $d(e,t,n,r){return T.call(this,e,t,n,r)}
function ae (line 1) | function ae(e,t,n,r){return T.call(this,e,t,n,r)}
function be (line 1) | function be(e,t,n,r){return T.call(this,e,t,n,r)}
function ce (line 1) | function ce(e,t,n,r){return T.call(this,e,t,n,r)}
method constructor (line 1) | constructor(e,t){e.parent=t,e.program=t.program||t,e.depth=t.depth+1,e...
method ancestor (line 1) | ancestor(e){let t=this;for(;e--;)if(!(t=t.parent))return null;return t}
method contains (line 1) | contains(e){for(;e;){if(e===this)return!0;e=e.parent}return!1}
method findLexicalBoundary (line 1) | findLexicalBoundary(){return this.parent.findLexicalBoundary()}
method findNearest (line 1) | findNearest(e){return"string"==typeof e&&(e=new RegExp(`^${e}$`)),e.te...
method unparenthesizedParent (line 1) | unparenthesizedParent(){let e=this.parent;for(;e&&"ParenthesizedExpres...
method unparenthesize (line 1) | unparenthesize(){let e=this;for(;"ParenthesizedExpression"===e.type;)e...
method findScope (line 1) | findScope(e){return this.parent.findScope(e)}
method getIndentation (line 1) | getIndentation(){return this.parent.getIndentation()}
method initialise (line 1) | initialise(e){for(var t=0,n=this.keys;t<n.length;t+=1){var r=n[t];cons...
method toJSON (line 1) | toJSON(){return toJSON(this)}
method toString (line 1) | toString(){return this.program.magicString.original.slice(this.start,t...
method transpile (line 1) | transpile(e,t){for(var n=0,r=this.keys;n<r.length;n+=1){const i=this[r...
function V (line 1) | function V(e){0>nn||(e.current=tn[nn],tn[nn]=null,nn--)}
function W (line 1) | function W(e,t){tn[++nn]=e.current,e.current=t}
function ke (line 1) | function ke(e){return le(e)?on:rn.current}
function me (line 1) | function me(e,t){var n=e.type.contextTypes;if(!n)return S;var r=e.stateN...
function le (line 1) | function le(e){return 2===e.tag&&null!=e.type.childContextTypes}
function ne (line 1) | function ne(e){le(e)&&(V(an),V(rn))}
function oe (line 1) | function oe(e,t,n){null!=rn.cursor&&E("168"),W(rn,t),W(an,n)}
function pe (line 1) | function pe(e,t){var n=e.stateNode,r=e.type.childContextTypes;if("functi...
method constructor (line 1) | constructor(e,t){if(super(e),this.name="CompileError",!t)return;const ...
method toString (line 1) | toString(){return`${this.name}: ${this.message}\n${this.snippet}`}
function qe (line 1) | function qe(e){if(!le(e))return!1;var t=e.stateNode;return t=t&&t.__reac...
function re (line 1) | function re(e,t){var n=e.stateNode;if(n||E("169"),t){var r=pe(e,on);n.__...
function Y (line 1) | function Y(e,t,n){this.tag=e,this.key=t,this.stateNode=this.type=null,th...
function se (line 1) | function se(e,t,n){var r=e.alternate;return null===r?((r=new Y(e.tag,e.k...
function te (line 1) | function te(e,t,n){var r=void 0,i=e.type,a=e.key;return"function"==typeo...
function ue (line 1) | function ue(e,t,n,r){return(t=new Y(10,r,t)).pendingProps=e,t.expiration...
function ve (line 1) | function ve(e,t,n){return(t=new Y(6,null,t)).pendingProps=e,t.expiration...
function we (line 1) | function we(e,t,n){return(t=new Y(7,e.key,t)).type=e.handler,t.pendingPr...
function xe (line 1) | function xe(e,t,n){return(e=new Y(9,null,t)).expirationTime=n,e}
function ye (line 1) | function ye(e,t,n){return(t=new Y(4,e.key,t)).pendingProps=e.children||[...
function Be (line 1) | function Be(e){return function(t){try{return e(t)}catch(e){}}}
function De (line 1) | function De(e){"function"==typeof sn&&sn(e)}
function Ee (line 1) | function Ee(e){"function"==typeof ln&&ln(e)}
function Fe (line 1) | function Fe(e){return{baseState:e,expirationTime:0,first:null,last:null,...
function Ge (line 1) | function Ge(e,t){null===e.last?e.first=e.last=t:(e.last.next=t,e.last=t)...
function He (line 1) | function He(e,t){var n=e.alternate,r=e.updateQueue;null===r&&(r=e.update...
function Ie (line 1) | function Ie(e,t,n,r){return"function"==typeof(e=e.partialState)?e.call(t...
function Je (line 1) | function Je(e,t,n,r,i,a){null!==e&&e.updateQueue===n&&(n=t.updateQueue={...
function Ke (line 1) | function Ke(e,t){var n=e.callbackList;if(null!==n)for(e.callbackList=nul...
function Xe (line 1) | function Xe(e){return null===e||void 0===e?null:"function"==typeof(e=mn&...
function Ze (line 1) | function Ze(e,t){var n=t.ref;if(null!==n&&"function"!=typeof n){if(t._ow...
function $e (line 1) | function $e(e,t){"textarea"!==e.type&&E("31","[object Object]"===Object....
function af (line 1) | function af(t){function b(e,n){if(t){var r=e.lastEffect;null!==r?(r.next...
function df (line 1) | function df(e,t,n,r,i){function f(e,t,n){var r=t.expirationTime;t.child=...
function kf (line 1) | function kf(t){function b(e){ce=Q=!0;var t=e.stateNode;if(t.current===e&...
function lf (line 1) | function lf(e){function b(e){return null===(e=function od(e){if(!(e=nd(e...
function If (line 1) | function If(e,t,n){var r=wa(t);if(r&&va(t,n)){var i=r.mutationMethod;i?i...
function Kf (line 1) | function Kf(e,t,n){(function Hf(e){return!!Un.hasOwnProperty(e)||!Bn.has...
function Jf (line 1) | function Jf(e,t){var n=wa(t);n?(t=n.mutationMethod)?t(e,void 0):n.mustUs...
function Lf (line 1) | function Lf(e,t){var n=t.value,r=t.checked;return o({type:void 0,step:vo...
function Mf (line 1) | function Mf(e,t){var n=t.defaultValue;e._wrapperState={initialChecked:nu...
function Nf (line 1) | function Nf(e,t){null!=(t=t.checked)&&If(e,"checked",t)}
function Of (line 1) | function Of(e,t){Nf(e,t);var n=t.value;null!=n?0===n&&""===e.value?e.val...
function Pf (line 1) | function Pf(e,t){switch(t.type){case"submit":case"reset":break;case"colo...
function Rf (line 1) | function Rf(e,t){return e=o({children:void 0},t),(t=function Qf(e){var t...
function Sf (line 1) | function Sf(e,t,n,r){if(e=e.options,t){t={};for(var i=0;i<n.length;i++)t...
function Tf (line 1) | function Tf(e,t){var n=t.value;e._wrapperState={initialValue:null!=n?n:t...
function Uf (line 1) | function Uf(e,t){return null!=t.dangerouslySetInnerHTML&&E("91"),o({},t,...
function Vf (line 1) | function Vf(e,t){var n=t.value;null==n&&(n=t.defaultValue,t=t.children,n...
function Wf (line 1) | function Wf(e,t){var n=t.value;null!=n&&(n=""+n,n!==e.value&&(e.value=n)...
function Xf (line 1) | function Xf(e){var t=e.textContent;t===e._wrapperState.initialValue&&(e....
function Zf (line 1) | function Zf(e){switch(e){case"svg":return"http://www.w3.org/2000/svg";ca...
function $f (line 1) | function $f(e,t){return null==e||"http://www.w3.org/1999/xhtml"===e?Zf(t...
function cg (line 1) | function cg(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.n...
function fg (line 1) | function fg(e,t){e=e.style;for(var n in t)if(t.hasOwnProperty(n)){var r=...
function hg (line 1) | function hg(e,t,n){t&&(Kn[e]&&(null!=t.children||null!=t.dangerouslySetI...
function ig (line 1) | function ig(e,t){if(-1===e.indexOf("-"))return"string"==typeof t.is;swit...
function lg (line 1) | function lg(e,t){var n=Hd(e=9===e.nodeType||11===e.nodeType?e:e.ownerDoc...
function ng (line 1) | function ng(e,t,n,r){return n=9===n.nodeType?n:n.ownerDocument,r===Gn&&(...
function og (line 1) | function og(e,t){return(9===t.nodeType?t:t.ownerDocument).createTextNode...
function pg (line 1) | function pg(e,t,n,r){var i=ig(t,n);switch(t){case"iframe":case"object":U...
function sg (line 1) | function sg(e,t,n,r,i){var a=null;switch(t){case"input":n=Lf(e,n),r=Lf(e...
function tg (line 1) | function tg(e,t,n,r,i){"input"===n&&"radio"===i.type&&null!=i.name&&Nf(e...
function ug (line 1) | function ug(e,t,n,r,i){switch(t){case"iframe":case"object":U("topLoad","...
function vg (line 1) | function vg(e,t){return e.nodeValue!==t}
function Ng (line 1) | function Ng(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeTy...
function Pg (line 1) | function Pg(e,t,n,r,i){Ng(n)||E("200");var a=n._reactRootContainer;if(a)...
function Qg (line 1) | function Qg(e,t){var n=2<arguments.length&&void 0!==arguments[2]?argumen...
function Rg (line 1) | function Rg(e,t){this._reactRootContainer=er.createContainer(e,t)}
function is (line 1) | function is(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function _possibleConstructorReturn (line 1) | function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError(...
function EditorLoader (line 1) | function EditorLoader(){var e,t,n;!function _classCallCheck(e,t){if(!(e ...
function EditorLoaderRenderer (line 1) | function EditorLoaderRenderer(e){var t=e.classes;return i.a.createElemen...
function shim (line 1) | function shim(e,t,n,r,o,s){s!==a&&i(!1,"Calling PropTypes validators dir...
function getShim (line 1) | function getShim(){return shim}
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function _class (line 1) | function _class(){return function _classCallCheck(e,t){if(!(e instanceof...
function Hash (line 1) | function Hash(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){...
function object (line 1) | function object(){}
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function SheetsManager (line 1) | function SheetsManager(){!function _classCallCheck(e,t){if(!(e instanceo...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function Jss (line 1) | function Jss(e){!function _classCallCheck(e,t){if(!(e instanceof t))thro...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function PluginsRegistry (line 1) | function PluginsRegistry(){!function _classCallCheck(e,t){if(!(e instanc...
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function SimpleRule (line 1) | function SimpleRule(e,t,n){!function _classCallCheck(e,t){if(!(e instanc...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function KeyframesRule (line 1) | function KeyframesRule(e,t,n){!function _classCallCheck(e,t){if(!(e inst...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function ConditionalRule (line 1) | function ConditionalRule(e,t,n){!function _classCallCheck(e,t){if(!(e in...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function FontFaceRule (line 1) | function FontFaceRule(e,t,n){!function _classCallCheck(e,t){if(!(e insta...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function ViewportRule (line 1) | function ViewportRule(e,t,n){!function _classCallCheck(e,t){if(!(e insta...
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function getStyle (line 1) | function getStyle(e,t){try{return e.style.getPropertyValue(t)}catch(e){r...
function setStyle (line 1) | function setStyle(e,t,n){try{var r=n;if(Array.isArray(n)&&(r=(0,s.defaul...
function setSelector (line 1) | function setSelector(e,t){return e.selectorText=t,e.selectorText===t}
function findPrevNode (line 1) | function findPrevNode(e){var t=a.default.registry;if(t.length>0){var n=f...
function DomRenderer (line 1) | function DomRenderer(t){!function _classCallCheck(e,t){if(!(e instanceof...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function VirtualRenderer (line 1) | function VirtualRenderer(){!function _classCallCheck(e,t){if(!(e instanc...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function _classCallCheck (line 1) | function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("...
function GlobalContainerRule (line 1) | function GlobalContainerRule(e,t,n){_classCallCheck(this,GlobalContainer...
function GlobalPrefixedRule (line 1) | function GlobalPrefixedRule(e,t,n){_classCallCheck(this,GlobalPrefixedRu...
function addScope (line 1) | function addScope(e,t){for(var n=e.split(c),r="",i=0;i<n.length;i++)r+=t...
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function getReplaceRef (line 1) | function getReplaceRef(e){return function(t,n){var r=e.getRule(n);return...
function replaceParentRefs (line 1) | function replaceParentRefs(t,n){for(var r=n.split(a),i=t.split(a),s="",l...
function getOptions (line 1) | function getOptions(e,t,n){if(n)return r({},n,{index:n.index+1});var i=e...
function replace (line 1) | function replace(e){return"-"+e.toLowerCase()}
function convertCase (line 1) | function convertCase(e){var t={};for(var n in e)t[n.replace(r,replace)]=...
function addCamelCasedVersion (line 1) | function addCamelCasedVersion(e){var t=/(-[a-z])/g,n=function replace(e)...
function iterate (line 1) | function iterate(e,t,n){if(!t)return t;var a=t,o=void 0===t?"undefined":...
function Usage (line 1) | function Usage(e){var t=e.props,n=t.props,r=t.methods,a=n&&i.a.createEle...
function _toConsumableArray (line 1) | function _toConsumableArray(e){if(Array.isArray(e)){for(var t=0,n=Array(...
function renderType (line 1) | function renderType(e){if(!e)return"unknown";var t=e.name;switch(t){case...
function renderEnum (line 1) | function renderEnum(e){if(!Array.isArray(Object(__WEBPACK_IMPORTED_MODUL...
function renderShape (line 1) | function renderShape(e){var t=[];for(var n in e){var r=e[n],i=renderDefa...
function renderDefault (line 1) | function renderDefault(prop){if(prop.required)return __WEBPACK_IMPORTED_...
function renderDescription (line 1) | function renderDescription(e){var t=e.description,n=e.tags,r=void 0===n?...
function renderExtra (line 1) | function renderExtra(e){var t=Object(__WEBPACK_IMPORTED_MODULE_15__util_...
function renderUnion (line 1) | function renderUnion(e){if(!Array.isArray(Object(__WEBPACK_IMPORTED_MODU...
function renderName (line 1) | function renderName(e){var t=e.name,n=e.tags,r=void 0===n?{}:n;return __...
function renderTypeColumn (line 1) | function renderTypeColumn(e){return __WEBPACK_IMPORTED_MODULE_0_react___...
function getRowKey (line 1) | function getRowKey(e){return e.name}
function propsToArray (line 1) | function propsToArray(e){return __WEBPACK_IMPORTED_MODULE_14_lodash_map_...
function PropsRenderer (line 1) | function PropsRenderer(e){var t=e.props;return __WEBPACK_IMPORTED_MODULE...
function escapeChar (line 1) | function escapeChar(e){return n[e]||"\\u"+("0000"+e.charCodeAt(0).toStri...
function isValidVariableName (line 1) | function isValidVariableName(e){return!r[e]&&i.test(e)}
function toGlobalVariable (line 1) | function toGlobalVariable(e){return"Function("+stringify("return this;")...
function toPath (line 1) | function toPath(e){for(var t="",n=0;n<e.length;n++)isValidVariableName(e...
function stringifyArray (line 1) | function stringifyArray(e,t,n){var r=e.map(function(e,r){var i=n(e,r);re...
function stringify (line 1) | function stringify(e,n,r){if(Object(e)!==e)return o[typeof e](e,n,r);if(...
function next (line 1) | function next(e,t){if(!o||void 0!==e){l.push(t);var n=f(e,stringify);ret...
function placeHoldersCount (line 1) | function placeHoldersCount(e){var t=e.length;if(t%4>0)throw new Error("I...
function encodeChunk (line 1) | function encodeChunk(e,t,n){for(var i,a=[],o=t;o<n;o+=3)i=(e[o]<<16)+(e[...
function ArgumentsRenderer (line 1) | function ArgumentsRenderer(e){var t=e.classes,n=e.args,r=e.heading;retur...
function ArgumentRenderer (line 1) | function ArgumentRenderer(e){var t=e.classes,n=e.name,r=e.type,a=e.descr...
function Code (line 1) | function Code(e){var t=e.children,n=e.className;return n&&-1!==n.indexOf...
function Markdown (line 1) | function Markdown(e){var t=e.classes,n=e.text,r=e.inline?b(t):v(t);retur...
function parseTableAlignCapture (line 1) | function parseTableAlignCapture(e){return H.test(e)?"right":V.test(e)?"c...
function parseTable (line 1) | function parseTable(e,t,n){n.inline=!0;var r=function parseTableHeader(e...
function getTableStyle (line 1) | function getTableStyle(e,t){return null==e.align[t]?{}:{textAlign:e.alig...
function attributeValueToJSXPropValue (line 1) | function attributeValueToJSXPropValue(e,t){return"style"===e?t.split(/;\...
function parserFor (line 1) | function parserFor(e){var t=Object.keys(e);t.sort(function(t,n){var r=e[...
function inlineRegex (line 1) | function inlineRegex(e){return function match(t,n){return n.inline?e.exe...
function blockRegex (line 1) | function blockRegex(e){return function match(t,n){return n.inline?null:e...
function anyScopeRegex (line 1) | function anyScopeRegex(e){return function match(t){return e.exec(t)}}
function sanitizeUrl (line 1) | function sanitizeUrl(e){try{if(0===decodeURIComponent(e).replace(/[^A-Z0...
function unescapeUrl (line 1) | function unescapeUrl(e){return e.replace(ee,"$1")}
function parseInline (line 1) | function parseInline(e,t,n){var r=n.inline||!1;n.inline=!0;var i=e(t,n);...
function parseBlock (line 1) | function parseBlock(e,t,n){return n.inline=!1,e(t+"\n\n",n)}
function parseCaptureInline (line 1) | function parseCaptureInline(e,t,n){return{content:parseInline(t,e[1],n)}}
function captureNothing (line 1) | function captureNothing(){return{}}
function renderNothing (line 1) | function renderNothing(){return null}
function get (line 1) | function get(e,t,n){for(var r=e,i=t.split(".");i.length&&void 0!==(r=r[i...
function compiler (line 1) | function compiler(e,t){(t=t||{}).overrides=t.overrides||{};function h(e,...
function SetCache (line 1) | function SetCache(e){var t=-1,n=null==e?0:e.length;for(this.__data__=new...
function LinkRenderer (line 1) | function LinkRenderer(e){var t=e.classes,n=e.children,r=function _object...
function _defineProperty (line 1) | function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,...
function TextRenderer (line 1) | function TextRenderer(e){var t,n=e.classes,r=e.semantic,a=e.size,o=e.col...
function ParaRenderer (line 1) | function ParaRenderer(e){var t=e.classes,n=e.semantic,r=e.children,a=n||...
function MarkdownHeadingRenderer (line 1) | function MarkdownHeadingRenderer(e){var t=e.classes,n=e.level,r=e.childr...
function HeadingRenderer (line 1) | function HeadingRenderer(e){var t=e.classes,n=e.level,r=e.children,a=fun...
function NameRenderer (line 1) | function NameRenderer(e){var t=e.classes,n=e.children,r=e.deprecated,a=c...
function CodeRenderer (line 1) | function CodeRenderer(e){var t=e.classes,n=e.className,r=e.children;retu...
function TypeRenderer (line 1) | function TypeRenderer(e){var t=e.classes,n=e.children;return i.a.createE...
function JsDoc (line 1) | function JsDoc(e){var t=function getMarkdown(e){return u()(p,function(t,...
function TableRenderer (line 1) | function TableRenderer(e){var t=e.classes,n=e.columns,r=e.rows,a=e.getRo...
function MethodsRenderer (line 1) | function MethodsRenderer(e){var t=e.methods;return i.a.createElement(h.a...
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function ToolbarButtonRenderer (line 1) | function ToolbarButtonRenderer(e){var t=e.classes,n=e.className,r=e.onCl...
function TabButtonRenderer (line 1) | function TabButtonRenderer(e){var t=e.classes,n=e.name,r=e.className,a=e...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function _possibleConstructorReturn (line 1) | function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError(...
function StyleGuide (line 1) | function StyleGuide(){var e,t,n;!function _classCallCheck(e,t){if(!(e in...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function _toConsumableArray (line 1) | function _toConsumableArray(e){if(Array.isArray(e)){for(var t=0,n=Array(...
function _possibleConstructorReturn (line 1) | function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError(...
function TableOfContents (line 1) | function TableOfContents(){var e,t,n;!function _classCallCheck(e,t){if(!...
function ComponentsListRenderer (line 1) | function ComponentsListRenderer(e){var t=e.classes,n=e.items;return(n=n....
function TableOfContentsRenderer (line 1) | function TableOfContentsRenderer(e){var t=e.classes,n=e.children,r=e.sea...
function _defineProperty (line 1) | function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,...
function StyleGuideRenderer (line 1) | function StyleGuideRenderer(e){var t=e.classes,n=e.title,r=e.homepageUrl...
function LogoRenderer (line 1) | function LogoRenderer(e){var t=e.classes,n=e.children;return i.a.createE...
function Sections (line 1) | function Sections(e){var t=e.sections,n=e.depth;return i.a.createElement...
function Section (line 1) | function Section(e,t){var n=e.section,r=e.depth,a=t.displayMode,o=n.name...
function Examples (line 1) | function Examples(e,t){var n=e.examples,r=e.name,a=t.codeRevision;return...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function Playground (line 1) | function Playground(e,t){!function _classCallCheck(e,t){if(!(e instanceo...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function _classCallCheck (line 1) | function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("...
function _possibleConstructorReturn (line 1) | function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError(...
function _inherits (line 1) | function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new Type...
function PreviewComponent (line 1) | function PreviewComponent(){_classCallCheck(this,PreviewComponent);var e...
function Preview (line 1) | function Preview(){_classCallCheck(this,Preview);var e=_possibleConstruc...
function isInAstralSet (line 1) | function isInAstralSet(e,t){for(var n=65536,r=0;r<t.length;r+=2){if((n+=...
function isIdentifierStart (line 1) | function isIdentifierStart(e,t){return e<65?36===e:e<91||(e<97?95===e:e<...
function isIdentifierChar (line 1) | function isIdentifierChar(e,t){return e<48?36===e:e<58||!(e<65)&&(e<91||...
function binop (line 1) | function binop(e,t){return new h(e,{beforeExpr:!0,binop:t})}
function kw (line 1) | function kw(e,t){return void 0===t&&(t={}),t.keyword=e,m[e]=new h(e,t)}
function isNewLine (line 1) | function isNewLine(e){return 10===e||13===e||8232===e||8233===e}
function has (line 1) | function has(e,t){return w.call(e,t)}
function getLineInfo (line 1) | function getLineInfo(e,t){for(var n=1,r=0;;){v.lastIndex=r;var i=v.exec(...
function getOptions (line 1) | function getOptions(e){var t={};for(var n in R)t[n]=e&&has(e,n)?e[n]:R[n...
function keywordRegexp (line 1) | function keywordRegexp(e){return new RegExp("^(?:"+e.replace(/ /g,"|")+"...
function DestructuringErrors (line 1) | function DestructuringErrors(){this.shorthandAssign=this.trailingComma=t...
function finishNodeAt (line 1) | function finishNodeAt(e,t,n,r){return e.type=t,e.end=n,this.options.loca...
function tryCreateRegexp (line 1) | function tryCreateRegexp(e,t,n,r){try{return new RegExp(e,t)}catch(e){if...
function codePointToString (line 1) | function codePointToString(e){return e<=65535?String.fromCharCode(e):(e-...
method parse_dammit (line 1) | get parse_dammit(){return Q}
method LooseParser (line 1) | get LooseParser(){return Z}
method pluginsLoose (line 1) | get pluginsLoose(){return ee}
function encodeInteger (line 1) | function encodeInteger(e){var t="";e<0?e=-e<<1|1:e<<=1;do{var n=31&e;(e>...
function Chunk (line 1) | function Chunk(e,t,n){this.start=e,this.end=t,this.original=n,this.intro...
function SourceMap (line 1) | function SourceMap(e){this.version=3,this.file=e.file,this.sources=e.sou...
function getLocator (line 1) | function getLocator(e){var t=0,n=e.split("\n").map(function(e,n){var r=t...
function Mappings (line 1) | function Mappings(e){var t=this,n={generatedCodeColumn:0,sourceIndex:0,s...
function MagicString$1 (line 1) | function MagicString$1(e,t){void 0===t&&(t={});var n=new Chunk(0,e.lengt...
function toJSON (line 1) | function toJSON(e){var t={};return Object.keys(e).forEach(n=>{"parent"!=...
class ce (line 1) | class ce{constructor(e,t){e.parent=t,e.program=t.program||t,e.depth=t.de...
method constructor (line 1) | constructor(e,t){e.parent=t,e.program=t.program||t,e.depth=t.depth+1,e...
method ancestor (line 1) | ancestor(e){let t=this;for(;e--;)if(!(t=t.parent))return null;return t}
method contains (line 1) | contains(e){for(;e;){if(e===this)return!0;e=e.parent}return!1}
method findLexicalBoundary (line 1) | findLexicalBoundary(){return this.parent.findLexicalBoundary()}
method findNearest (line 1) | findNearest(e){return"string"==typeof e&&(e=new RegExp(`^${e}$`)),e.te...
method unparenthesizedParent (line 1) | unparenthesizedParent(){let e=this.parent;for(;e&&"ParenthesizedExpres...
method unparenthesize (line 1) | unparenthesize(){let e=this;for(;"ParenthesizedExpression"===e.type;)e...
method findScope (line 1) | findScope(e){return this.parent.findScope(e)}
method getIndentation (line 1) | getIndentation(){return this.parent.getIndentation()}
method initialise (line 1) | initialise(e){for(var t=0,n=this.keys;t<n.length;t+=1){var r=n[t];cons...
method toJSON (line 1) | toJSON(){return toJSON(this)}
method toString (line 1) | toString(){return this.program.magicString.original.slice(this.start,t...
method transpile (line 1) | transpile(e,t){for(var n=0,r=this.keys;n<r.length;n+=1){const i=this[r...
function isArguments (line 1) | function isArguments(e){return"Identifier"===e.type&&"arguments"===e.name}
function spread (line 1) | function spread(e,t,n,r,i){let a=t.length,o=-1;for(;a--;){const n=t[a];n...
function removeTrailingComma (line 1) | function removeTrailingComma(e,t){for(;")"!==e.original[t];){if(","===e....
function repeat (line 1) | function repeat(e,t){let n="";for(;t--;)n+=e;return n}
function getSnippet (line 1) | function getSnippet(e,t,n){void 0===n&&(n=1);const r=Math.max(t.line-5,0...
class pe (line 1) | class pe extends Error{constructor(e,t){if(super(e),this.name="CompileEr...
method constructor (line 1) | constructor(e,t){if(super(e),this.name="CompileError",!t)return;const ...
method toString (line 1) | toString(){return`${this.name}: ${this.message}\n${this.snippet}`}
function findIndex (line 1) | function findIndex(e,t){for(let n=0;n<e.length;n+=1)if(t(e[n],n))return ...
class de (line 1) | class de extends ce{findScope(e){return e||!this.createdScope?this.paren...
method findScope (line 1) | findScope(e){return e||!this.createdScope?this.parent.findScope(e):thi...
method initialise (line 1) | initialise(e){if(this.body.createScope(),this.createdScope=!0,this.rea...
method transpile (line 1) | transpile(e,t){const n="ForOfStatement"!=this.type&&("BlockStatement"!...
function extractNames (line 1) | function extractNames(e){const t=[];return me[e.type](t,e),t}
method Identifier (line 1) | Identifier(e,t){e.push(t)}
method ObjectPattern (line 1) | ObjectPattern(e,t){for(var n=0,r=t.properties;n<r.length;n+=1){const t=r...
method Property (line 1) | Property(e,t){me[t.value.type](e,t.value)}
method ArrayPattern (line 1) | ArrayPattern(e,t){for(var n=0,r=t.elements;n<r.length;n+=1){const t=r[n]...
method RestElement (line 1) | RestElement(e,t){me[t.argument.type](e,t.argument)}
method AssignmentPattern (line 1) | AssignmentPattern(e,t){me[t.left.type](e,t.left)}
function destructure (line 1) | function destructure(e,t,n,r,i,a){ge[n.type](e,t,n,r,i,a)}
function destructureIdentifier (line 1) | function destructureIdentifier(e,t,n,r,i,a){a.push((t,a,o)=>{e.prependRi...
function destructureObjectPattern (line 1) | function destructureObjectPattern(e,t,n,r,i,a){let o=n.start;const s=[];...
function handleProperty (line 1) | function handleProperty(e,t,n,r,i,a,o){switch(r.type){case"Identifier":e...
function createCommonjsModule (line 1) | function createCommonjsModule(e,t){return e(t={exports:{}},t.exports),t....
function fromCodePoint (line 1) | function fromCodePoint(){var e,t,n=[],r=-1,i=arguments.length;if(!i)retu...
function assertType (line 1) | function assertType(e,t){if(-1==t.indexOf("|")){if(e==t)return;throw Err...
function generate (line 1) | function generate(e){var t=e.type;if(s.call(p,t))return p[t](e);throw Er...
function generateClassAtom (line 1) | function generateClassAtom(e){return assertType(e.type,"anchor|character...
function addRaw (line 1) | function addRaw(t){return t.raw=e.substring(t.range[0],t.range[1]),t}
function updateRawStart (line 1) | function updateRawStart(e,t){return e.range[0]=t,addRaw(e)}
function createAnchor (line 1) | function createAnchor(e,t){return addRaw({type:"anchor",kind:e,range:[s-...
function createValue (line 1) | function createValue(e,t,n,r){return addRaw({type:"value",kind:e,codePoi...
function createEscaped (line 1) | function createEscaped(e,t,n,r){return r=r||0,createValue(e,t,s-(n.lengt...
function createCharacter (line 1) | function createCharacter(e){var t=e[0],n=t.charCodeAt(0);if(o){var r;if(...
function createQuantifier (line 1) | function createQuantifier(e,t,n,r){return null==r&&(n=s-1,r=s),addRaw({t...
function createCharacterClass (line 1) | function createCharacterClass(e,t,n,r){return addRaw({type:"characterCla...
function createClassRange (line 1) | function createClassRange(e,t,n,r){return e.codePoint>t.codePoint&&bail(...
function flattenBody (line 1) | function flattenBody(e){return"alternative"===e.type?e.body:[e]}
function incr (line 1) | function incr(t){t=t||1;var n=e.substring(s,s+t);return s+=t||1,n}
function skip (line 1) | function skip(e){match(e)||bail("character",e)}
function match (line 1) | function match(t){if(e.indexOf(t,s)===s)return incr(t.length)}
function lookahead (line 1) | function lookahead(){return e[s]}
function current (line 1) | function current(t){return e.indexOf(t,s)===s}
function next (line 1) | function next(t){return e[s+1]===t}
function matchReg (line 1) | function matchReg(t){var n=e.substring(s).match(t);return n&&(n.range=[]...
function parseDisjunction (line 1) | function parseDisjunction(){var e=[],t=s;for(e.push(parseAlternative());...
function parseAlternative (line 1) | function parseAlternative(){for(var e,t=[],n=s;e=parseTerm();)t.push(e);...
function parseTerm (line 1) | function parseTerm(){if(s>=e.length||current("|")||current(")"))return n...
function parseGroup (line 1) | function parseGroup(e,t,n,r){var o=null,l=s;if(match(e))o=t;else{if(!mat...
function parseUnicodeSurrogatePairEscape (line 1) | function parseUnicodeSurrogatePairEscape(e){if(o){var t,n;if("unicodeEsc...
function parseClassEscape (line 1) | function parseClassEscape(){return parseAtomEscape(!0)}
function parseAtomEscape (line 1) | function parseAtomEscape(e){var t,a=s;if(t=function parseDecimalEscape()...
function parseClassRanges (line 1) | function parseClassRanges(){var e;return current("]")?[]:((e=function pa...
function parseHelperClassRanges (line 1) | function parseHelperClassRanges(e){var t,n,r;if(current("-")&&!next("]")...
function parseClassAtom (line 1) | function parseClassAtom(){return match("-")?createCharacter("-"):functio...
function bail (line 1) | function bail(t,n,r,i){r=null==r?s:r,i=null==i?r:i;var a=Math.max(0,r-10...
method initialise (line 1) | initialise(e){if(e.spreadRest&&this.elements.length){const e=this.findLe...
method transpile (line 1) | transpile(e,t){if(t.spreadRest){if(this.elements.length){let t=this.elem...
method initialise (line 1) | initialise(e){this.body.createScope(),super.initialise(e)}
method transpile (line 1) | transpile(e,t){const n=1===this.params.length&&this.start===this.params[...
method needsArguments (line 1) | needsArguments(e){return e.spreadRest&&this.params.filter(e=>"RestElemen...
method initialise (line 1) | initialise(e){if("Identifier"===this.left.type){const e=this.findScope(!...
method transpile (line 1) | transpile(e,t){"**="===this.operator&&t.exponentiation?this.transpileExp...
method transpileDestructuring (line 1) | transpileDestructuring(e){const t=this.findScope(!0),n=t.createIdentifie...
method transpileExponentiation (line 1) | transpileExponentiation(e){const t=this.findScope(!1),n=e=>{const n=t.fi...
method transpile (line 1) | transpile(e,t){"**"===this.operator&&t.exponentiation&&(e.prependRight(t...
method initialise (line 1) | initialise(){const e=this.findNearest(he),t=this.findNearest("SwitchCase...
method transpile (line 1) | transpile(e){if(this.loop&&this.loop.shouldRewriteAsFunction){if(this.la...
method initialise (line 1) | initialise(e){if(e.spreadRest&&this.arguments.length>1){const e=this.fin...
method transpile (line 1) | transpile(e,t){if(t.spreadRest&&this.arguments.length){let t,n=!1;const ...
method transpile (line 1) | transpile(e,t,n,r){if(t.classes){const t=this.parent.name,i=e.getIndentS...
method initialise (line 1) | initialise(e){this.id?(this.name=this.id.name,this.findScope(!0).addDecl...
method transpile (line 1) | transpile(e,t){if(t.classes){this.superClass||function deindent(e,t){con...
method initialise (line 1) | initialise(e){this.name=(this.id?this.id.name:"VariableDeclarator"===thi...
method transpile (line 1) | transpile(e,t){if(t.classes){const n=this.superClass&&(this.superClass.n...
method transpile (line 1) | transpile(e){const t=this.findNearest(he);if(t.shouldRewriteAsFunction){...
method initialise (line 1) | initialise(e){if(e.moduleExport)throw new pe("export is not supported",t...
method initialise (line 1) | initialise(e){if(e.moduleExport)throw new pe("export is not supported",t...
method findScope (line 1) | findScope(e){return e||!this.createdScope?this.parent.findScope(e):this....
method transpile (line 1) | transpile(e,t){const n=this.getIndentation()+e.getIndentString();if(this...
method findScope (line 1) | findScope(e){return e||!this.createdScope?this.parent.findScope(e):this....
method transpile (line 1) | transpile(e,t){if(this.shouldRewriteAsFunction){const e="VariableDeclara...
method initialise (line 1) | initialise(e){if(e.forOf&&!e.dangerousForOf)throw new pe("for...of state...
method transpile (line 1) | transpile(e,t){if(super.transpile(e,t),!t.dangerousForOf)return;if(!this...
method initialise (line 1) | initialise(e){if(this.generator&&e.generator)throw new pe("Generators ar...
method transpile (line 1) | transpile(e,t){super.transpile(e,t),t.trailingFunctionCommas&&this.param...
method initialise (line 1) | initialise(e){if(this.generator&&e.generator)throw new pe("Generators ar...
method transpile (line 1) | transpile(e,t){super.transpile(e,t),t.trailingFunctionCommas&&this.param...
method findScope (line 1) | findScope(e){return this.parent.params&&~this.parent.params.indexOf(this...
method initialise (line 1) | initialise(e){if(e.arrow&&function isReference(e,t){return"MemberExpress...
method transpile (line 1) | transpile(e){this.alias&&e.overwrite(this.start,this.end,this.alias,{sto...
method initialise (line 1) | initialise(e){super.initialise(e)}
method transpile (line 1) | transpile(e,t){("BlockStatement"!==this.consequent.type||"BlockStatement...
method initialise (line 1) | initialise(e){if(e.moduleImport)throw new pe("import is not supported",t...
method initialise (line 1) | initialise(e){this.findScope(!0).addDeclaration(this.local,"import"),sup...
method initialise (line 1) | initialise(e){this.findScope(!0).addDeclaration(this.local,"import"),sup...
method transpile (line 1) | transpile(e,t){const n=this.name;var r=n.start,i=n.name;const a=this.val...
method transpile (line 1) | transpile(e){let t=!0;const n=this.parent.children[this.parent.children....
method transpile (line 1) | transpile(e,t){super.transpile(e,t);const n=this.children.filter(e=>"Lit...
method transpile (line 1) | transpile(e,t){e.remove(this.start,this.expression.start),e.remove(this....
method transpile (line 1) | transpile(e,t){super.transpile(e,t),e.overwrite(this.start,this.name.sta...
method transpile (line 1) | transpile(e,t){e.remove(this.start,this.argument.start),e.remove(this.ar...
method initialise (line 1) | initialise(){"string"==typeof this.value&&this.program.indentExclusionEl...
method transpile (line 1) | transpile(e,t){if(t.numericLiteral){const t=this.raw.slice(0,2);"0b"!==t...
method transpile (line 1) | transpile(e,t){t.reservedProperties&&fe[this.property.name]&&(e.overwrit...
method initialise (line 1) | initialise(e){if(e.spreadRest&&this.arguments.length){const e=this.findL...
method transpile (line 1) | transpile(e,t){if(t.spreadRest&&this.arguments.length){const t=this.argu...
method transpile (line 1) | transpile(e,t){super.transpile(e,t);let n=this.start+1,r=0,i=0,a=0,o=nul...
method transpile (line 1) | transpile(e,t){if(super.transpile(e,t),t.conciseMethodProperty&&!this.co...
method initialise (line 1) | initialise(e){this.loop=this.findNearest(he),this.nearestFunction=this.f...
method transpile (line 1) | transpile(e,t){const n=this.shouldWrap&&this.loop&&this.loop.shouldRewri...
method transpile (line 1) | transpile(e,t){"ObjectExpression"==this.parent.type&&(e.remove(this.star...
method initialise (line 1) | initialise(e){if(e.classes){if(this.method=this.findNearest("MethodDefin...
method transpile (line 1) | transpile(e,t){if(t.classes){const t=this.isCalled||this.method.static?t...
method initialise (line 1) | initialise(e){if(e.templateString&&!e.dangerousTaggedTemplateString)thro...
method transpile (line 1) | transpile(e,t){if(t.templateString&&t.dangerousTaggedTemplateString){con...
method initialise (line 1) | initialise(){this.program.indentExclusionElements.push(this)}
method transpile (line 1) | transpile(e,t){if(super.transpile(e,t),t.templateString&&"TaggedTemplate...
method initialise (line 1) | initialise(e){if(e.arrow){const e=this.findLexicalBoundary(),t=this.find...
method transpile (line 1) | transpile(e){this.alias&&e.overwrite(this.start,this.end,this.alias,{sto...
method initialise (line 1) | initialise(e){if("Identifier"===this.argument.type){const e=this.findSco...
method initialise (line 1) | initialise(e){this.scope=this.findScope("var"===this.kind),this.declarat...
method transpile (line 1) | transpile(e,t){const n=this.getIndentation();let r=this.kind;if(t.letCon...
method initialise (line 1) | initialise(e){let t=this.parent.kind;"let"===t&&"ForStatement"===this.pa...
method transpile (line 1) | transpile(e,t){if(!this.init&&t.letConst&&"var"!==this.parent.kind){let ...
method isLeftDeclaratorOfLoop (line 1) | isLeftDeclaratorOfLoop(){return this.parent&&"VariableDeclaration"===thi...
function wrap (line 1) | function wrap(e,t){if(!e)return;if("length"in e){let n=e.length;for(;n--...
function Scope (line 1) | function Scope(e){e=e||{},this.parent=e.parent,this.isBlockScope=!!e.blo...
method addDeclaration (line 1) | addDeclaration(e,t){for(var n=0,r=extractNames(e);n<r.length;n+=1){const...
method addReference (line 1) | addReference(e){this.consolidated?this.consolidateReference(e):this.iden...
method consolidate (line 1) | consolidate(){for(let e=0;e<this.identifiers.length;e+=1){const t=this.i...
method consolidateReference (line 1) | consolidateReference(e){const t=this.declarations[e.name];t?t.instances....
method contains (line 1) | contains(e){return this.declarations[e]||!!this.parent&&this.parent.cont...
method createIdentifier (line 1) | createIdentifier(e){"number"==typeof e&&(e=e.toString());let t=e=e.repla...
method findDeclaration (line 1) | findDeclaration(e){return this.declarations[e]||this.parent&&this.parent...
class Le (line 1) | class Le extends ce{createScope(){this.parentIsFunction=/Function/.test(...
method createScope (line 1) | createScope(){this.parentIsFunction=/Function/.test(this.parent.type),...
method initialise (line 1) | initialise(e){this.thisAlias=null,this.argumentsAlias=null,this.defaul...
method findLexicalBoundary (line 1) | findLexicalBoundary(){return"Program"===this.type?this:/^Function/.tes...
method findScope (line 1) | findScope(e){return e&&!this.isFunctionBlock?this.parent.findScope(e):...
method getArgumentsAlias (line 1) | getArgumentsAlias(){return this.argumentsAlias||(this.argumentsAlias=t...
method getArgumentsArrayAlias (line 1) | getArgumentsArrayAlias(){return this.argumentsArrayAlias||(this.argume...
method getThisAlias (line 1) | getThisAlias(){return this.thisAlias||(this.thisAlias=this.scope.creat...
method getIndentation (line 1) | getIndentation(){if(void 0===this.indentation){const e=this.program.ma...
method transpile (line 1) | transpile(e,t){const n=this.getIndentation();let r=[];if(this.argument...
method declareIdentifier (line 1) | declareIdentifier(e){const t=this.scope.createIdentifier(e);return thi...
method transpileParameters (line 1) | transpileParameters(e,t,n,r){const i=this.parent.params;i.forEach(a=>{...
method transpileBlockScopedIdentifiers (line 1) | transpileBlockScopedIdentifiers(e){Object.keys(this.scope.blockScopedD...
function Program (line 1) | function Program(e,t,n,r){this.type="Root",this.jsx=r.jsx||"React.create...
method export (line 1) | export(e){return void 0===e&&(e={}),{code:this.magicString.toString(),ma...
function parseObj (line 1) | function parseObj(e,n){let r=this.startNode(),i=!0,a={};for(r.properties...
function getQualifiedJSXName (line 1) | function getQualifiedJSXName(e){return"JSXIdentifier"===e.type?e.name:"J...
function target (line 1) | function target(e){let t=Object.keys(e).length?4294967295:1073741824;Obj...
function PlaygroundErrorRenderer (line 1) | function PlaygroundErrorRenderer(e){var t=e.classes,n=e.message;return i...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function Wrapper (line 1) | function Wrapper(){return function _classCallCheck(e,t){if(!(e instanceo...
function Slot (line 1) | function Slot(e,t){var n=e.name,r=e.active,a=e.onlyActive,o=e.className,...
function PlaygroundRenderer (line 1) | function PlaygroundRenderer(e){var t=e.classes,n=e.name,r=e.preview,a=e....
function ExamplesRenderer (line 1) | function ExamplesRenderer(e){var t=e.classes,n=e.children;return i.a.cre...
function Components (line 1) | function Components(e){var t=e.components,n=e.depth;return i.a.createEle...
function defineProperties (line 1) | function defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r....
function ReactComponent (line 1) | function ReactComponent(e,t){!function _classCallCheck(e,t){if(!(e insta...
function SectionHeading (line 1) | function SectionHeading(e){var t=e.slotName,n=e.slotProps,r=e.children,a...
function SectionHeadingRenderer (line 1) | function SectionHeadingRenderer(e){var t=e.classes,n=e.children,r=e.tool...
function ReactComponentRenderer (line 1) | function ReactComponentRenderer(e){var t=e.classes,n=e.name,r=e.heading,...
function PathlineRenderer (line 1) | function PathlineRenderer(e){var t=e.classes,n=e.children;return i.a.cre...
function _interopRequireDefault (line 1) | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
function ComponentsRenderer (line 1) | function ComponentsRenderer(e){var t=e.children;return i.a.createElement...
function SectionRenderer (line 1) | function SectionRenderer(e){var t=e.classes,n=e.name,r=e.slug,a=e.conten...
function SectionsRenderer (line 1) | function SectionsRenderer(e){var t=e.classes,n=e.children;return i.a.cre...
function WelcomeRenderer (line 1) | function WelcomeRenderer(e){var t=e.classes,n=e.patterns;return i.a.crea...
function ErrorRenderer (line 1) | function ErrorRenderer(e){var t=e.classes,n=e.error,r=e.info;return i.a....
function _toConsumableArray (line 1) | function _toConsumableArray(e){if(Array.isArray(e)){for(var t=0,n=Array(...
function _toConsumableArray (line 1) | function _toConsumableArray(e){if(Array.isArray(e)){for(var t=0,n=Array(...
method constructor (line 1) | constructor(){super(...arguments),this.state={count:0}}
method render (line 1) | render(){return r.createElement(i.b,{label:"SFCCounter",count:this.state...
class s (line 1) | class s extends a.a{}
class a (line 1) | class a{constructor(e,t){this.firstName=e,this.lastName=t,this.id=i()()}...
method constructor (line 1) | constructor(e,t){this.firstName=e,this.lastName=t,this.id=i()()}
method fullName (line 1) | get fullName(){return`${this.firstName} ${this.lastName}`}
method create (line 1) | static create(e){const t=new a(e.first_name,e.last_name);return t.id=e...
method serialize (line 1) | serialize(){return{id:this.id,first_name:this.firstName,last_name:this...
function randomBlock (line 1) | function randomBlock(){return i((Math.random()*l<<0).toString(s),o)}
function safeCounter (line 1) | function safeCounter(){return a=a<l?a:0,++a-1}
function cuid (line 1) | function cuid(){return"c"+(new Date).getTime().toString(s)+i(safeCounter...
FILE: generate-readme.js
constant ROOT_PATH (line 3) | const ROOT_PATH = `${__dirname}/`;
function injectCodeBlocks (line 15) | function injectCodeBlocks(text) {
function injectExpanders (line 20) | function injectExpanders(text) {
function createMatchReplacer (line 25) | function createMatchReplacer(wrapper) {
function withSourceWrapper (line 33) | function withSourceWrapper(text) {
function withDetailsWrapper (line 41) | function withDetailsWrapper(text) {
FILE: playground/.storybook/config.js
function loadStories (line 7) | function loadStories() {
FILE: playground/src-old/App.tsx
function App (line 5) | function App() {
FILE: playground/src/api/agent.ts
constant URL (line 3) | const URL = 'http://localhost:3000/api/';
FILE: playground/src/api/models.ts
type ITodoModel (line 1) | interface ITodoModel {
FILE: playground/src/app.tsx
function App (line 13) | function App() {
FILE: playground/src/components/class-counter-with-default-props.tsx
type Props (line 3) | type Props = {
type State (line 8) | type State = {
class ClassCounterWithDefaultProps (line 12) | class ClassCounterWithDefaultProps extends React.Component<
method render (line 28) | render() {
FILE: playground/src/components/class-counter.tsx
type Props (line 3) | type Props = {
type State (line 7) | type State = {
class ClassCounter (line 11) | class ClassCounter extends React.Component<Props, State> {
method render (line 20) | render() {
FILE: playground/src/components/error-message.tsx
function test (line 22) | function test(props: any) {
FILE: playground/src/components/fc-counter-with-default-props.tsx
type Props (line 3) | type Props = {
FILE: playground/src/components/fc-counter.tsx
type Props (line 3) | type Props = {
FILE: playground/src/components/fc-counter.usage.tsx
method render (line 8) | render() {
FILE: playground/src/components/fc-spread-attributes.tsx
type Props (line 3) | type Props = React.PropsWithChildren<{
FILE: playground/src/components/generic-list.stories.tsx
class UserList (line 13) | class UserList extends GenericList<IUser> {}
FILE: playground/src/components/generic-list.tsx
type GenericListProps (line 3) | interface GenericListProps<T> {
class GenericList (line 8) | class GenericList<T> extends React.Component<GenericListProps<T>, {}> {
method render (line 9) | render() {
FILE: playground/src/components/generic-list.usage.tsx
class UserList (line 12) | class UserList extends GenericList<IUser> {}
FILE: playground/src/components/mouse-provider.tsx
type MouseProviderProps (line 3) | interface MouseProviderProps {
type MouseProviderState (line 7) | interface MouseProviderState {
class MouseProvider (line 12) | class MouseProvider extends React.Component<MouseProviderProps, MousePro...
method render (line 22) | render() {
FILE: playground/src/components/name-provider.tsx
type NameProviderProps (line 3) | interface NameProviderProps {
type NameProviderState (line 7) | interface NameProviderState {
class NameProvider (line 11) | class NameProvider extends React.Component<NameProviderProps, NameProvid...
method render (line 14) | render() {
FILE: playground/src/connected/fc-counter-connected-bind-action-creators.tsx
type Props (line 25) | type Props = ReturnType<typeof mapStateToProps> &
FILE: playground/src/connected/fc-counter-connected-own-props.spec.tsx
function renderWithRedux (line 43) | function renderWithRedux(
FILE: playground/src/connected/fc-counter-connected-own-props.tsx
type OwnProps (line 7) | type OwnProps = {
FILE: playground/src/context/theme-consumer-class.tsx
type Props (line 4) | type Props = {};
class ToggleThemeButtonClass (line 6) | class ToggleThemeButtonClass extends React.Component<Props> {
method render (line 10) | render() {
FILE: playground/src/context/theme-consumer.tsx
type Props (line 4) | type Props = {};
function ToggleThemeButton (line 6) | function ToggleThemeButton(props: Props) {
FILE: playground/src/context/theme-context.ts
type Theme (line 3) | type Theme = React.CSSProperties;
type Themes (line 5) | type Themes = {
type ThemeContextProps (line 21) | type ThemeContextProps = { theme: Theme; toggleTheme?: () => void };
FILE: playground/src/context/theme-provider.tsx
type State (line 5) | interface State {
class ThemeProvider (line 8) | class ThemeProvider extends React.Component<{}, State> {
method render (line 17) | render() {
FILE: playground/src/features/app/epics.ts
constant SAVING_DELAY (line 7) | const SAVING_DELAY = 1000;
FILE: playground/src/features/counters/constants.ts
constant INCREMENT (line 1) | const INCREMENT = 'counters/INCREMENT';
constant ADD (line 2) | const ADD = 'counters/ADD';
FILE: playground/src/features/counters/reducer.ts
type CountersAction (line 7) | type CountersAction = ActionType<typeof counters>;
type CountersState (line 9) | type CountersState = {
FILE: playground/src/features/todos-typesafe/actions.ts
constant ADD (line 6) | const ADD = 'todos/ADD';
constant TOGGLE (line 7) | const TOGGLE = 'todos/TOGGLE';
constant CHANGE_FILTER (line 8) | const CHANGE_FILTER = 'todos/CHANGE_FILTER';
FILE: playground/src/features/todos-typesafe/models.ts
type Todo (line 1) | type Todo = {
type TodosFilter (line 7) | enum TodosFilter {
FILE: playground/src/features/todos-typesafe/reducer.ts
type TodosState (line 7) | type TodosState = Readonly<{
type TodosAction (line 12) | type TodosAction = ActionType<typeof todos>;
FILE: playground/src/features/todos/constants.ts
constant ADD (line 1) | const ADD = 'todos/ADD';
constant TOGGLE (line 2) | const TOGGLE = 'todos/TOGGLE';
constant CHANGE_FILTER (line 3) | const CHANGE_FILTER = 'todos/CHANGE_FILTER';
FILE: playground/src/features/todos/models.ts
type Todo (line 1) | type Todo = {
type TodosFilter (line 7) | enum TodosFilter {
FILE: playground/src/features/todos/reducer-ta.ts
type TodosState (line 7) | type TodosState = Readonly<{
FILE: playground/src/features/todos/reducer.ts
type TodosAction (line 8) | type TodosAction = ActionType<typeof actions>;
type TodosState (line 10) | type TodosState = Readonly<{
FILE: playground/src/hoc/with-connected-count.tsx
type InjectedProps (line 8) | interface InjectedProps {
type HocProps (line 24) | type HocProps = ReturnType<typeof mapStateToProps> &
class Hoc (line 30) | class Hoc extends React.Component<HocProps> {
method render (line 36) | render() {
FILE: playground/src/hoc/with-error-boundary.tsx
constant MISSING_ERROR (line 3) | const MISSING_ERROR = 'Error was swallowed during propagation.';
type HocProps (line 8) | type HocProps = React.PropsWithChildren<{
type HocState (line 11) | type HocState = {
method componentDidCatch (line 25) | componentDidCatch(error: Error | null, info: object) {
method render (line 34) | render() {
FILE: playground/src/hoc/with-state.tsx
type InjectedProps (line 5) | interface InjectedProps {
type HocProps (line 13) | type HocProps = Diff<BaseProps, InjectedProps> & {
type HocState (line 17) | type HocState = {
method render (line 35) | render() {
FILE: playground/src/hooks/use-reducer.tsx
type State (line 3) | interface State {
type Action (line 7) | type Action = { type: 'reset' } | { type: 'increment' } | { type: 'decre...
function reducer (line 9) | function reducer(state: State, action: Action): State {
type CounterProps (line 22) | interface CounterProps {
function Counter (line 26) | function Counter({ initialCount }: CounterProps) {
FILE: playground/src/hooks/use-state.tsx
type Props (line 3) | type Props = { initialCount: number };
function Counter (line 5) | function Counter({initialCount}: Props) {
FILE: playground/src/hooks/use-theme-context.tsx
type Props (line 4) | type Props = {};
function ThemeToggleButton (line 6) | function ThemeToggleButton(props: Props) {
FILE: playground/src/layout/layout-footer.tsx
function LayoutFooter (line 3) | function LayoutFooter() {
FILE: playground/src/layout/layout-header.tsx
function LayoutHeader (line 4) | function LayoutHeader() {
FILE: playground/src/layout/layout.tsx
type Props (line 3) | type Props = {
function Layout (line 9) | function Layout({ renderHeader, renderContent, renderFooter }: Props) {
FILE: playground/src/models/nominal-types.ts
type Name (line 5) | interface Name extends String {
type Surname (line 14) | type Surname = string & { _brand: 'Surname' };
type Person (line 20) | type Person = {
FILE: playground/src/models/user.ts
type IUserDTO (line 3) | interface IUserDTO {
type IUser (line 9) | interface IUser {
class User (line 18) | class User implements IUser {
method fullName (line 20) | get fullName(): string {
method constructor (line 24) | constructor(public firstName: string, public lastName: string) {}
method deserialize (line 26) | static deserialize(dto: IUserDTO): IUser {
method serialize (line 33) | serialize(): IUserDTO {
FILE: playground/src/routes/home.tsx
function Home (line 12) | function Home() {
FILE: playground/src/routes/not-found.tsx
function NotFound (line 4) | function NotFound() {
FILE: playground/src/serviceWorker.ts
type Config (line 24) | type Config = {
function register (line 29) | function register(config?: Config) {
function registerValidSW (line 66) | function registerValidSW(swUrl: string, config?: Config) {
function checkValidServiceWorker (line 110) | function checkValidServiceWorker(swUrl: string, config?: Config) {
function unregister (line 138) | function unregister() {
FILE: playground/src/services/local-storage-service.ts
constant STORAGE_KEY (line 2) | const STORAGE_KEY = `__SERIALIZED_STATE_TREE_v${version}__`;
function saveState (line 4) | function saveState<T = object>(storeState: T): boolean {
function loadState (line 18) | function loadState<T = object>(): T | undefined {
FILE: playground/src/services/types.d.ts
type Services (line 2) | type Services = typeof import('./index').default;
FILE: playground/src/store/types.d.ts
type Store (line 4) | type Store = StateType<typeof import('./store').default>;
type RootAction (line 5) | type RootAction = ActionType<typeof import('./root-action').default>;
type RootState (line 6) | type RootState = StateType<ReturnType<typeof import('./root-reducer').de...
type Types (line 10) | interface Types {
FILE: playground/typings/globals.d.ts
type Window (line 3) | interface Window {
type NodeModule (line 8) | interface NodeModule {
type System (line 12) | interface System {
FILE: playground/typings/redux-thunk/index.d.ts
type ThunkDispatch (line 9) | interface ThunkDispatch<S, E, A extends Action> {
type ThunkAction (line 14) | type ThunkAction<R, S, E, A extends Action> = (
type ThunkActionDispatch (line 26) | type ThunkActionDispatch<
type ThunkMiddleware (line 30) | type ThunkMiddleware<
FILE: playground/typings/redux/index.d.ts
type Action (line 19) | interface Action<T = any> {
type Reducer (line 49) | type Reducer<S = any, A extends Action = Action> = (state: S | undefined...
type ReducersMapObject (line 56) | type ReducersMapObject<S = any, A extends Action = Action> = {
type Dispatch (line 103) | interface Dispatch<D = Action> {
type Unsubscribe (line 110) | interface Unsubscribe {
type Store (line 123) | interface Store<S = any, A extends Action = Action, N = never> {
type DeepPartial (line 197) | type DeepPartial<T> = {[K in keyof T]?: DeepPartial<T[K]> };
type StoreCreator (line 209) | interface StoreCreator {
type StoreEnhancer (line 233) | type StoreEnhancer<N = never> = (next: StoreEnhancerStoreCreator<N>) => ...
type GenericStoreEnhancer (line 234) | type GenericStoreEnhancer<N = never> = StoreEnhancer<N>;
type StoreEnhancerStoreCreator (line 235) | type StoreEnhancerStoreCreator<N = never> = <S = any, A extends Action =...
type MiddlewareAPI (line 270) | interface MiddlewareAPI<S = any, D = Action> {
type Middleware (line 284) | interface Middleware {
type ActionCreator (line 327) | interface ActionCreator<A> {
type ActionCreatorsMapObject (line 334) | interface ActionCreatorsMapObject<A = any> {
type Func0 (line 374) | type Func0<R> = () => R;
type Func1 (line 375) | type Func1<T1, R> = (a1: T1) => R;
type Func2 (line 376) | type Func2<T1, T2, R> = (a1: T1, a2: T2) => R;
type Func3 (line 377) | type Func3<T1, T2, T3, R> = (a1: T1, a2: T2, a3: T3, ...args: any[]) => R;
Condensed preview — 174 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,061K chars).
[
{
"path": ".all-contributorsrc",
"chars": 4745,
"preview": "{\n \"projectName\": \"react-redux-typescript-guide\",\n \"projectOwner\": \"piotrwitek\",\n \"repoType\": \"github\",\n \"repoHost\":"
},
{
"path": ".github/FUNDING.yml",
"chars": 781,
"preview": "# These are supported funding model platforms\n\ngithub: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [u"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 744,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\n---\n\n## Description\n<!-- A clear description of what the "
},
{
"path": ".github/ISSUE_TEMPLATE/custom.md",
"chars": 449,
"preview": "---\nname: Question\nabout: Have a question? Please check our spectrum community chat.\n---\n\nFirst of all please check our "
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 812,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\n---\n\n## Is your feature request related to a real prob"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 629,
"preview": "<!-- Thank you for your contribution! :thumbsup: -->\n<!-- Please makes sure that these checkboxes are checked before sub"
},
{
"path": ".gitignore",
"chars": 629,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscov"
},
{
"path": ".vscode/launch.json",
"chars": 540,
"preview": "{\n // Use IntelliSense to learn about possible attributes.\n // Hover to view descriptions of existing attributes.\n //"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3355,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "CONTRIBUTING.md",
"chars": 1150,
"preview": "# Contributing Guide\n\n## General\n1. Make sure you have read and understand the **Goals** section to be aligned with proj"
},
{
"path": "CONTRIBUTORS.md",
"chars": 5308,
"preview": "Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n<!-- ALL"
},
{
"path": "LICENSE",
"chars": 1124,
"preview": "MIT License\n\nCopyright (c) 2016 Piotr Witek <piotrek.witek@gmail.com> (http://piotrwitek.github.io)\n\nPermission is hereb"
},
{
"path": "README.md",
"chars": 67662,
"preview": "<div align=\"center\">\n\n# React & Redux in TypeScript - Complete Guide\n\n_\"This guide is a **living compendium** documentin"
},
{
"path": "README_SOURCE.md",
"chars": 41201,
"preview": "<div align=\"center\">\n\n# React & Redux in TypeScript - Complete Guide\n\n_\"This guide is a **living compendium** documentin"
},
{
"path": "configs/jest.config.json",
"chars": 420,
"preview": "{\n \"verbose\": true,\n \"transform\": {\n \".(ts|tsx)\": \"ts-jest\"\n },\n \"testRegex\": \"(/spec/.*|\\\\.(test|spec))\\\\.(ts|ts"
},
{
"path": "configs/jest.stubs.js",
"chars": 396,
"preview": "// Global/Window object Stubs for Jest\nwindow.matchMedia = window.matchMedia || function () {\n return {\n matches: fa"
},
{
"path": "docs/build/0.6e57cfb5.js",
"chars": 239581,
"preview": "webpackJsonp([0],{409:function(e,t,n){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0});var r=n(0),i=n.n(r),"
},
{
"path": "docs/build/bundle.a71e23e0.js",
"chars": 555672,
"preview": "!function(e){var t=window.webpackJsonp;window.webpackJsonp=function webpackJsonpCallback(n,i,a){for(var o,s,l=0,u=[];l<n"
},
{
"path": "docs/index.html",
"chars": 330,
"preview": "<!doctype html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<title>React & Redux in TypeScript - Component Typing Patterns"
},
{
"path": "generate-readme.js",
"chars": 1144,
"preview": "const fs = require('fs');\n\nconst ROOT_PATH = `${__dirname}/`;\nconst inputFiles = [ROOT_PATH + 'README_SOURCE.md'];\nconst"
},
{
"path": "generate-readme.sh",
"chars": 36,
"preview": "#!/bin/bash\nnode generate-readme.js\n"
},
{
"path": "generate-styleguide.sh",
"chars": 54,
"preview": "#!/bin/bash\ncd playground && npm run styleguide:build\n"
},
{
"path": "is-git-status-clean.sh",
"chars": 198,
"preview": "#!/bin/bash\nif output=$(git status --porcelain) && [ -z \"$output\" ]; then echo \"Success!\"; else (echo \">>> Please check "
},
{
"path": "package.json",
"chars": 694,
"preview": "{\n \"devDependencies\": {\n \"all-contributors-cli\": \"6.9.3\",\n \"doctoc\": \"1.4.0\",\n \"husky\": \"3.0.9\"\n },\n \"script"
},
{
"path": "playground/.eslintrc.js",
"chars": 220,
"preview": "module.exports = {\n root: true,\n parser: '@typescript-eslint/parser',\n plugins: ['@typescript-eslint'],\n extends: ['"
},
{
"path": "playground/.gitignore",
"chars": 310,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "playground/.prettierrc",
"chars": 88,
"preview": "{\n \"printWidth\": 80,\n \"semi\": true,\n \"singleQuote\": true,\n \"trailingComma\": \"es5\"\n}\n"
},
{
"path": "playground/.storybook/addons.js",
"chars": 86,
"preview": "import '@storybook/addon-actions/register';\nimport '@storybook/addon-links/register';\n"
},
{
"path": "playground/.storybook/config.js",
"chars": 333,
"preview": "import { configure } from '@storybook/react';\nimport requireContext from 'require-context.macro';\n\n// We load every file"
},
{
"path": "playground/.storybook/webpack.config.js",
"chars": 304,
"preview": "module.exports = ({ config, mode }) => {\n config.module.rules.push({\n test: /\\.(ts|tsx)$/,\n loader: require.resol"
},
{
"path": "playground/.vscode/settings.json",
"chars": 54,
"preview": "{\n \"typescript.tsdk\": \"node_modules/typescript/lib\"\n}"
},
{
"path": "playground/README.md",
"chars": 343,
"preview": "This folder is a playground project for testing the code examples that can be found in the guide. They are all tested wi"
},
{
"path": "playground/index.html",
"chars": 340,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "playground/package.json",
"chars": 2389,
"preview": "{\n \"name\": \"playground\",\n \"description\": \"Playground Project for https://github.com/piotrwitek/react-redux-typescript-"
},
{
"path": "playground/public/index.html",
"chars": 1632,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"shortcut icon\" href=\"%PUBLIC_URL%/"
},
{
"path": "playground/public/manifest.json",
"chars": 340,
"preview": "{\n \"short_name\": \"RRTS Guide - Playground\",\n \"name\": \"React, Redux, TypeScript Guide - Playground\",\n \"icons\": [\n {"
},
{
"path": "playground/src/api/agent.ts",
"chars": 483,
"preview": "import axios from 'axios';\n\nconst URL = 'http://localhost:3000/api/';\n\nconst getToken = () => 'some-token';\n\nconst forma"
},
{
"path": "playground/src/api/fixtures/todos.json",
"chars": 62,
"preview": "{\n \"id\": 0,\n \"text\": \"Example todo\",\n \"completed\": false\n}\n"
},
{
"path": "playground/src/api/index.ts",
"chars": 145,
"preview": "export { default as agent } from './agent';\nexport * from './agent';\nexport * from './models';\nexport * from './todos';\n"
},
{
"path": "playground/src/api/models.ts",
"chars": 82,
"preview": "export interface ITodoModel {\n id: string;\n text: string;\n completed: false;\n}\n"
},
{
"path": "playground/src/api/todos.ts",
"chars": 1299,
"preview": "import { ITodoModel } from './models';\nimport { resolveWithDelay } from './utils';\n\nconst pageSize = 10;\n\n// Mock API\n//"
},
{
"path": "playground/src/api/utils.ts",
"chars": 428,
"preview": "export const resolveWithDelay = <T>(value: T, time: number = 1000) => new Promise(\n (resolve) => setTimeout(() => resol"
},
{
"path": "playground/src/app.test.tsx",
"chars": 252,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { App } from './app';\n\nit('renders without crashing'"
},
{
"path": "playground/src/app.tsx",
"chars": 1094,
"preview": "import React from 'react';\nimport { Provider } from 'react-redux';\nimport { Outlet, Route, Routes } from 'react-router-d"
},
{
"path": "playground/src/components/__snapshots__/class-counter-with-default-props.stories.storyshot",
"chars": 536,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots ClassCounterWithDefaultProps with defaut initial count 1"
},
{
"path": "playground/src/components/__snapshots__/class-counter.stories.storyshot",
"chars": 241,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots ClassCounter default 1`] = `\n<div>\n <span>\n ClassCou"
},
{
"path": "playground/src/components/__snapshots__/fc-counter-with-default-props.stories.storyshot",
"chars": 267,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots FCCounterWithDefaultProps default 1`] = `\n<div>\n <span>"
},
{
"path": "playground/src/components/__snapshots__/fc-counter.stories.storyshot",
"chars": 235,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots FCCounter default 1`] = `\n<div>\n <span>\n FCCounter\n "
},
{
"path": "playground/src/components/__snapshots__/fc-spread-attributes.stories.storyshot",
"chars": 250,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots FCSpreadAttributes default 1`] = `\n<div\n className=\"cla"
},
{
"path": "playground/src/components/__snapshots__/generic-list.stories.storyshot",
"chars": 229,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots GenericList default 1`] = `\n<div>\n <div>\n Rosamonte "
},
{
"path": "playground/src/components/__snapshots__/mouse-provider.stories.storyshot",
"chars": 254,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Storyshots MouseProvider default 1`] = `\n<div\n onMouseMove={[Funct"
},
{
"path": "playground/src/components/class-counter-with-default-props.md",
"chars": 289,
"preview": "Usage:\n```jsx { \"filePath\": \"./class-counter-with-default-props.usage.tsx\" }\n```\n\nUsage Demo:\n```jsx \nconst Demo = requi"
},
{
"path": "playground/src/components/class-counter-with-default-props.stories.tsx",
"chars": 468,
"preview": "import React from 'react';\nimport { storiesOf } from '@storybook/react';\n\nimport { ClassCounterWithDefaultProps } from '"
},
{
"path": "playground/src/components/class-counter-with-default-props.tsx",
"chars": 754,
"preview": "import * as React from 'react';\n\ntype Props = {\n label: string;\n initialCount: number;\n};\n\ntype State = {\n count: num"
},
{
"path": "playground/src/components/class-counter-with-default-props.usage.tsx",
"chars": 184,
"preview": "import * as React from 'react';\n\nimport { ClassCounterWithDefaultProps } from '.';\n\nexport default () => (\n <ClassCount"
},
{
"path": "playground/src/components/class-counter.md",
"chars": 245,
"preview": "Usage:\n```jsx { \"filePath\": \"./class-counter.usage.tsx\" }\n```\n\nUsage Demo:\n```jsx\nconst Demo = require('./class-counter."
},
{
"path": "playground/src/components/class-counter.stories.tsx",
"chars": 224,
"preview": "import React from 'react';\nimport { storiesOf } from '@storybook/react';\n\nimport { ClassCounter } from '../components';\n"
},
{
"path": "playground/src/components/class-counter.tsx",
"chars": 633,
"preview": "import * as React from 'react';\n\ntype Props = {\n label: string;\n};\n\ntype State = {\n count: number;\n};\n\nexport class Cl"
},
{
"path": "playground/src/components/class-counter.usage.tsx",
"chars": 130,
"preview": "import * as React from 'react';\n\nimport { ClassCounter } from '.';\n\nexport default () => <ClassCounter label={'ClassCoun"
},
{
"path": "playground/src/components/error-message.tsx",
"chars": 471,
"preview": "import * as React from 'react';\n\nexport const ErrorMessage: React.FC<{ onReset: () => void }> = ({\n onReset,\n}) => {\n "
},
{
"path": "playground/src/components/fc-counter-with-default-props.md",
"chars": 293,
"preview": "Usage:\n```jsx { \"filePath\": \"./fc-counter-with-default-props.usage.tsx\" }\n```\n\nUsage Demo:\n```jsx\nconst Demo = require('"
},
{
"path": "playground/src/components/fc-counter-with-default-props.stories.tsx",
"chars": 362,
"preview": "\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { action } from '@storybook/addon-actio"
},
{
"path": "playground/src/components/fc-counter-with-default-props.tsx",
"chars": 669,
"preview": "import * as React from 'react';\n\ntype Props = {\n label: string;\n count: number;\n onIncrement: () => void;\n};\n\n// Reac"
},
{
"path": "playground/src/components/fc-counter-with-default-props.usage.tsx",
"chars": 272,
"preview": "import { action } from '@storybook/addon-actions';\nimport * as React from 'react';\n\nimport { FCCounterWithDefaultProps }"
},
{
"path": "playground/src/components/fc-counter.md",
"chars": 236,
"preview": "Usage:\n```jsx { \"filePath\": \"./fc-counter.usage.tsx\" }\n```\n\nUsage Demo:\n```jsx\nconst Demo = require('./fc-counter.usage'"
},
{
"path": "playground/src/components/fc-counter.stories.tsx",
"chars": 323,
"preview": "import React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { action } from '@storybook/addon-action"
},
{
"path": "playground/src/components/fc-counter.tsx",
"chars": 458,
"preview": "import * as React from 'react';\n\ntype Props = {\n label: string;\n count: number;\n onIncrement: () => void;\n};\n\nexport "
},
{
"path": "playground/src/components/fc-counter.usage.tsx",
"chars": 384,
"preview": "import * as React from 'react';\n\nimport { FCCounter } from '.';\n\nexport default class extends React.Component<{}, { coun"
},
{
"path": "playground/src/components/fc-spread-attributes.md",
"chars": 268,
"preview": "Usage:\n```jsx { \"filePath\": \"./fc-spread-attributes.usage.tsx\" }\n```\n\nUsage Demo:\n```jsx\nconst Demo = require('./fc-spre"
},
{
"path": "playground/src/components/fc-spread-attributes.stories.tsx",
"chars": 362,
"preview": "import React from 'react';\nimport { storiesOf } from '@storybook/react';\n\nimport { FCSpreadAttributes } from '../compone"
},
{
"path": "playground/src/components/fc-spread-attributes.tsx",
"chars": 289,
"preview": "import * as React from 'react';\n\ntype Props = React.PropsWithChildren<{\n className?: string;\n style?: React.CSSPropert"
},
{
"path": "playground/src/components/fc-spread-attributes.usage.tsx",
"chars": 268,
"preview": "import * as React from 'react';\n\nimport { FCSpreadAttributes } from '.';\n\nexport default () => (\n <FCSpreadAttributes\n "
},
{
"path": "playground/src/components/generic-list.md",
"chars": 243,
"preview": "Usage:\n```jsx { \"filePath\": \"./generic-list.usage.tsx\" }\n```\n\nUsage Demo:\n```jsx \nconst Demo = require('./generic-list.u"
},
{
"path": "playground/src/components/generic-list.stories.tsx",
"chars": 509,
"preview": "import React from 'react';\nimport { storiesOf } from '@storybook/react';\n\nimport { IUser, User } from '../models';\nimpor"
},
{
"path": "playground/src/components/generic-list.tsx",
"chars": 357,
"preview": "import * as React from 'react';\n\nexport interface GenericListProps<T> {\n items: T[];\n itemRenderer: (item: T) => JSX.E"
},
{
"path": "playground/src/components/generic-list.usage.tsx",
"chars": 434,
"preview": "import * as React from 'react';\n\nimport { IUser, User } from '../models';\nimport { GenericList } from '../components';\n\n"
},
{
"path": "playground/src/components/index.ts",
"chars": 336,
"preview": "export * from './error-message';\nexport * from './generic-list';\nexport * from './fc-counter';\nexport * from './fc-count"
},
{
"path": "playground/src/components/mouse-provider.md",
"chars": 249,
"preview": "Usage:\n```jsx { \"filePath\": \"./mouse-provider.usage.tsx\" }\n```\n\nUsage Demo:\n```jsx \nconst Demo = require('./mouse-provid"
},
{
"path": "playground/src/components/mouse-provider.stories.tsx",
"chars": 308,
"preview": "import React from 'react';\nimport { storiesOf } from '@storybook/react';\n\nimport { MouseProvider } from '../components';"
},
{
"path": "playground/src/components/mouse-provider.tsx",
"chars": 851,
"preview": "import * as React from 'react';\n\nexport interface MouseProviderProps {\n render: (state: MouseProviderState) => React.Re"
},
{
"path": "playground/src/components/mouse-provider.usage.tsx",
"chars": 218,
"preview": "import * as React from 'react';\n\nimport { MouseProvider } from './mouse-provider';\n\nexport default () => (\n <MouseProvi"
},
{
"path": "playground/src/components/name-provider.md",
"chars": 246,
"preview": "Usage:\n```jsx { \"filePath\": \"./name-provider.usage.tsx\" }\n```\n\nUsage Demo:\n```jsx \nconst Demo = require('./name-provider"
},
{
"path": "playground/src/components/name-provider.tsx",
"chars": 394,
"preview": "import * as React from 'react';\n\ninterface NameProviderProps {\n children: (state: NameProviderState) => React.ReactNode"
},
{
"path": "playground/src/components/name-provider.usage.tsx",
"chars": 195,
"preview": "import * as React from 'react';\n\nimport { NameProvider } from './name-provider';\n\nexport default () => (\n <NameProvider"
},
{
"path": "playground/src/connected/fc-counter-connected-bind-action-creators.tsx",
"chars": 1300,
"preview": "import Types from 'MyTypes';\nimport { bindActionCreators, Dispatch } from 'redux';\nimport { connect } from 'react-redux'"
},
{
"path": "playground/src/connected/fc-counter-connected-bind-action-creators.usage.tsx",
"chars": 214,
"preview": "import * as React from 'react';\n\nimport { FCCounterConnectedBindActionCreators } from '.';\n\nexport default () => (\n <FC"
},
{
"path": "playground/src/connected/fc-counter-connected-own-props.spec.tsx",
"chars": 1554,
"preview": "import React from 'react';\nimport { createStore, combineReducers } from 'redux';\nimport { Provider } from 'react-redux';"
},
{
"path": "playground/src/connected/fc-counter-connected-own-props.tsx",
"chars": 584,
"preview": "import Types from 'MyTypes';\nimport { connect } from 'react-redux';\n\nimport { countersActions, countersSelectors } from "
},
{
"path": "playground/src/connected/fc-counter-connected-own-props.usage.tsx",
"chars": 206,
"preview": "import * as React from 'react';\n\nimport { FCCounterConnectedOwnProps } from '.';\n\nexport default () => (\n <FCCounterCon"
},
{
"path": "playground/src/connected/fc-counter-connected.tsx",
"chars": 470,
"preview": "import Types from 'MyTypes';\nimport { connect } from 'react-redux';\n\nimport { countersActions, countersSelectors } from "
},
{
"path": "playground/src/connected/fc-counter-connected.usage.tsx",
"chars": 148,
"preview": "import * as React from 'react';\n\nimport { FCCounterConnected } from '.';\n\nexport default () => <FCCounterConnected label"
},
{
"path": "playground/src/connected/index.ts",
"chars": 151,
"preview": "export * from './fc-counter-connected-bind-action-creators';\nexport * from './fc-counter-connected-own-props';\nexport * "
},
{
"path": "playground/src/context/theme-consumer-class.tsx",
"chars": 437,
"preview": "import * as React from 'react';\nimport ThemeContext from './theme-context';\n\ntype Props = {};\n\nexport class ToggleThemeB"
},
{
"path": "playground/src/context/theme-consumer.tsx",
"chars": 322,
"preview": "import * as React from 'react';\nimport ThemeContext from './theme-context';\n\ntype Props = {};\n\nexport default function T"
},
{
"path": "playground/src/context/theme-context.ts",
"chars": 485,
"preview": "import * as React from 'react';\n\nexport type Theme = React.CSSProperties;\n\ntype Themes = {\n dark: Theme;\n light: Theme"
},
{
"path": "playground/src/context/theme-provider.tsx",
"chars": 662,
"preview": "import React from 'react';\nimport ThemeContext, { themes, Theme } from './theme-context';\nimport ToggleThemeButton from "
},
{
"path": "playground/src/features/app/epics.ts",
"chars": 656,
"preview": "import { RootAction, RootState, Services } from 'MyTypes';\nimport { combineEpics, Epic } from 'redux-observable';\nimport"
},
{
"path": "playground/src/features/counters/actions.ts",
"chars": 997,
"preview": "/* eslint-disable */\nimport { action } from 'typesafe-actions';\n\nimport { ADD, INCREMENT } from './constants';\n\n/* SIMPL"
},
{
"path": "playground/src/features/counters/actions.usage.ts",
"chars": 340,
"preview": "import { store } from '../../store/';\nimport { countersActions as counter } from '../counters';\n\n// store.dispatch(count"
},
{
"path": "playground/src/features/counters/constants.ts",
"chars": 82,
"preview": "export const INCREMENT = 'counters/INCREMENT';\nexport const ADD = 'counters/ADD';\n"
},
{
"path": "playground/src/features/counters/index.ts",
"chars": 280,
"preview": "import * as countersConstants from './constants';\nimport * as countersActions from './actions';\nimport countersReducer f"
},
{
"path": "playground/src/features/counters/reducer.ts",
"chars": 669,
"preview": "import { combineReducers } from 'redux';\nimport { ActionType } from 'typesafe-actions';\n\nimport * as counters from './ac"
},
{
"path": "playground/src/features/counters/selectors.ts",
"chars": 121,
"preview": "import { CountersState } from './reducer';\n\nexport const getReduxCounter = (state: CountersState) => state.reduxCounter;"
},
{
"path": "playground/src/features/todos/__snapshots__/reducer.spec.ts.snap",
"chars": 169,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Todos Stories initial state should match a snapshot 1`] = `\nObject "
},
{
"path": "playground/src/features/todos/actions.ts",
"chars": 437,
"preview": "import cuid from 'cuid';\nimport { action } from 'typesafe-actions';\n\nimport { TodosFilter, Todo } from './models';\nimpor"
},
{
"path": "playground/src/features/todos/constants.ts",
"chars": 122,
"preview": "export const ADD = 'todos/ADD';\nexport const TOGGLE = 'todos/TOGGLE';\nexport const CHANGE_FILTER = 'todos/CHANGE_FILTER'"
},
{
"path": "playground/src/features/todos/epics.spec.ts",
"chars": 1528,
"preview": "import { StateObservable, ActionsObservable } from 'redux-observable';\nimport { RootState, RootAction } from 'MyTypes';\n"
},
{
"path": "playground/src/features/todos/epics.ts",
"chars": 678,
"preview": "import { RootAction, RootState, Services } from 'MyTypes';\nimport { Epic } from 'redux-observable';\nimport { tap, ignore"
},
{
"path": "playground/src/features/todos/index.ts",
"chars": 260,
"preview": "// public API\nimport * as todosConstants from './constants';\nimport * as todosActions from './actions';\nimport todosRedu"
},
{
"path": "playground/src/features/todos/models.ts",
"chars": 166,
"preview": "export type Todo = {\n id: string;\n title: string;\n completed: boolean;\n};\n\nexport enum TodosFilter {\n All = '',\n Co"
},
{
"path": "playground/src/features/todos/reducer-ta.ts",
"chars": 843,
"preview": "import { combineReducers } from 'redux';\nimport { createReducer } from 'typesafe-actions';\n\nimport { Todo, TodosFilter }"
},
{
"path": "playground/src/features/todos/reducer.spec.ts",
"chars": 1309,
"preview": "import {\n todosReducer as reducer,\n todosActions as actions,\n} from './';\nimport { TodosState } from './reducer';\n\n/**"
},
{
"path": "playground/src/features/todos/reducer.ts",
"chars": 1074,
"preview": "import { combineReducers } from 'redux';\nimport { ActionType } from 'typesafe-actions';\n\nimport { Todo, TodosFilter } fr"
},
{
"path": "playground/src/features/todos/selectors.ts",
"chars": 517,
"preview": "import { createSelector } from 'reselect';\n\nimport { TodosState } from './reducer';\n\nexport const getTodos = (state: Tod"
},
{
"path": "playground/src/features/todos-typesafe/actions.ts",
"chars": 455,
"preview": "import cuid from 'cuid';\nimport { createAction } from 'typesafe-actions';\n\nimport { TodosFilter, Todo } from './models';"
},
{
"path": "playground/src/features/todos-typesafe/index.ts",
"chars": 197,
"preview": "// public API\nimport * as todosActions from './actions';\nimport todosReducer from './reducer';\nimport * as todosSelector"
},
{
"path": "playground/src/features/todos-typesafe/models.ts",
"chars": 166,
"preview": "export type Todo = {\n id: string;\n title: string;\n completed: boolean;\n};\n\nexport enum TodosFilter {\n All = '',\n Co"
},
{
"path": "playground/src/features/todos-typesafe/reducer.ts",
"chars": 919,
"preview": "import { combineReducers } from 'redux';\nimport { ActionType, getType } from 'typesafe-actions';\n\nimport { Todo, TodosFi"
},
{
"path": "playground/src/features/todos-typesafe/selectors.ts",
"chars": 517,
"preview": "import { createSelector } from 'reselect';\n\nimport { TodosState } from './reducer';\n\nexport const getTodos = (state: Tod"
},
{
"path": "playground/src/hoc/index.ts",
"chars": 109,
"preview": "export * from './with-connected-count';\nexport * from './with-error-boundary';\nexport * from './with-state';\n"
},
{
"path": "playground/src/hoc/with-connected-count.tsx",
"chars": 1708,
"preview": "import { RootState } from 'MyTypes';\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport { Diff } f"
},
{
"path": "playground/src/hoc/with-connected-count.usage.tsx",
"chars": 297,
"preview": "import * as React from 'react';\n\nimport { withConnectedCount } from '../hoc';\nimport { FCCounter } from '../components';"
},
{
"path": "playground/src/hoc/with-error-boundary.tsx",
"chars": 1271,
"preview": "import React from 'react';\n\nconst MISSING_ERROR = 'Error was swallowed during propagation.';\n\nexport const withErrorBoun"
},
{
"path": "playground/src/hoc/with-error-boundary.usage.tsx",
"chars": 785,
"preview": "import React, {useState} from 'react';\n\nimport { withErrorBoundary } from '../hoc';\nimport { ErrorMessage } from '../com"
},
{
"path": "playground/src/hoc/with-state.tsx",
"chars": 1269,
"preview": "import React from 'react';\nimport { Diff } from 'utility-types';\n\n// These props will be injected into the base componen"
},
{
"path": "playground/src/hoc/with-state.usage.tsx",
"chars": 237,
"preview": "import * as React from 'react';\n\nimport { withState } from '../hoc';\nimport { FCCounter } from '../components';\n\nconst F"
},
{
"path": "playground/src/hooks/react-redux-hooks.tsx",
"chars": 502,
"preview": "import * as React from 'react';\nimport { FCCounter } from '../components';\nimport { increment } from '../features/counte"
},
{
"path": "playground/src/hooks/use-reducer.tsx",
"chars": 945,
"preview": "import * as React from 'react';\n\ninterface State {\n count: number;\n}\n\ntype Action = { type: 'reset' } | { type: 'increm"
},
{
"path": "playground/src/hooks/use-state.tsx",
"chars": 466,
"preview": "import * as React from 'react';\n\ntype Props = { initialCount: number };\n\nexport default function Counter({initialCount}:"
},
{
"path": "playground/src/hooks/use-theme-context.tsx",
"chars": 328,
"preview": "import * as React from 'react';\nimport ThemeContext from '../context/theme-context';\n\ntype Props = {};\n\nexport default f"
},
{
"path": "playground/src/index.css",
"chars": 380,
"preview": "body {\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n "
},
{
"path": "playground/src/index.tsx",
"chars": 574,
"preview": "// tslint:disable-next-line:no-import-side-effect\nimport 'tslib';\n// tslint:disable-next-line:no-import-side-effect\nimpo"
},
{
"path": "playground/src/layout/layout-footer.tsx",
"chars": 151,
"preview": "import React from 'react';\n\nexport function LayoutFooter() {\n return (\n <div>\n React & Redux in TypeScript - Co"
},
{
"path": "playground/src/layout/layout-header.tsx",
"chars": 226,
"preview": "import React from 'react';\nimport { Link } from 'react-router-dom';\n\nexport function LayoutHeader() {\n return (\n <na"
},
{
"path": "playground/src/layout/layout.tsx",
"chars": 372,
"preview": "import React from 'react';\n\ntype Props = {\n renderHeader: () => JSX.Element;\n renderContent: () => JSX.Element;\n rend"
},
{
"path": "playground/src/models/index.ts",
"chars": 24,
"preview": "export * from './user';\n"
},
{
"path": "playground/src/models/nominal-types.ts",
"chars": 1109,
"preview": "// Nominal Typing\n// Usefull to model domain concepts that are using primitive data type for it's value\n\n// Method 1: us"
},
{
"path": "playground/src/models/user.ts",
"chars": 741,
"preview": "import cuid from 'cuid';\n\nexport interface IUserDTO {\n id: string;\n first_name: string;\n last_name: string;\n}\n\nexport"
},
{
"path": "playground/src/react-app-env.d.ts",
"chars": 40,
"preview": "/// <reference types=\"react-scripts\" />\n"
},
{
"path": "playground/src/routes/home.tsx",
"chars": 1054,
"preview": "import React from 'react'\nimport FCCounterUsage from '../components/fc-counter.usage';\nimport FCCounterWithDefaultPropsU"
},
{
"path": "playground/src/routes/not-found.tsx",
"chars": 232,
"preview": "import React from 'react';\nimport { Link } from 'react-router-dom';\n\nexport function NotFound() {\n return (\n <div>\n "
},
{
"path": "playground/src/serviceWorker.ts",
"chars": 5230,
"preview": "// tslint:disable:no-console\n// This optional code is used to register a service worker.\n// register() is not called by "
},
{
"path": "playground/src/services/index.ts",
"chars": 148,
"preview": "import * as logger from './logger-service';\nimport * as localStorage from './local-storage-service';\n\nexport default {\n "
},
{
"path": "playground/src/services/local-storage-service.ts",
"chars": 770,
"preview": "const version = process.env.APP_VERSION;\nconst STORAGE_KEY = `__SERIALIZED_STATE_TREE_v${version}__`;\n\nexport function s"
},
{
"path": "playground/src/services/logger-service.ts",
"chars": 71,
"preview": "// tslint:disable-next-line:no-console\nexport const log = console.log;\n"
},
{
"path": "playground/src/services/types.d.ts",
"chars": 88,
"preview": "declare module 'MyTypes' {\n export type Services = typeof import('./index').default;\n}\n"
},
{
"path": "playground/src/store/hooks.ts",
"chars": 368,
"preview": "import { Dispatch } from 'redux';\nimport {\n TypedUseSelectorHook,\n useSelector as useGenericSelector,\n useDispatch as"
},
{
"path": "playground/src/store/index.ts",
"chars": 76,
"preview": "export { default as store } from './store';\nexport * from './redux-router';\n"
},
{
"path": "playground/src/store/redux-router.ts",
"chars": 361,
"preview": "import { createBrowserHistory } from 'history';\nimport { createRouterReducer } from '@lagunovsky/redux-react-router';\nim"
},
{
"path": "playground/src/store/root-action.ts",
"chars": 285,
"preview": "import * as todosActions from '../features/todos/actions';\nimport * as countersActions from '../features/counters/action"
},
{
"path": "playground/src/store/root-epic.ts",
"chars": 165,
"preview": "import { combineEpics } from 'redux-observable';\n\nimport * as todosEpics from '../features/todos/epics';\n\nexport default"
},
{
"path": "playground/src/store/root-reducer.ts",
"chars": 353,
"preview": "import { combineReducers } from 'redux';\n\nimport countersReducer from '../features/counters/reducer';\nimport todosReduce"
},
{
"path": "playground/src/store/store.ts",
"chars": 919,
"preview": "import { RootAction, RootState, Services } from 'MyTypes';\nimport { applyMiddleware, createStore } from 'redux';\nimport "
},
{
"path": "playground/src/store/types.d.ts",
"chars": 455,
"preview": "import { StateType, ActionType } from 'typesafe-actions';\n\ndeclare module 'MyTypes' {\n export type Store = StateType<ty"
},
{
"path": "playground/src/store/utils.ts",
"chars": 188,
"preview": "import { compose } from 'redux';\n\nexport const composeEnhancers =\n (process.env.NODE_ENV === 'development' &&\n windo"
},
{
"path": "playground/src/storyshots.disabled-test.ts",
"chars": 223,
"preview": "// import initStoryshots, {\n// multiSnapshotWithOptions,\n// } from '@storybook/addon-storyshots';\n\n// initStoryshots({"
},
{
"path": "playground/src-old/App.css",
"chars": 564,
"preview": ".App {\n text-align: center;\n}\n\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion:"
},
{
"path": "playground/src-old/App.test.tsx",
"chars": 273,
"preview": "import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport App from './App';\n\ntest('rend"
},
{
"path": "playground/src-old/App.tsx",
"chars": 556,
"preview": "import React from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nfunction App() {\n return (\n <div clas"
},
{
"path": "playground/src-old/index.css",
"chars": 366,
"preview": "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Can"
},
{
"path": "playground/src-old/index.tsx",
"chars": 554,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimpor"
},
{
"path": "playground/src-old/react-app-env.d.ts",
"chars": 40,
"preview": "/// <reference types=\"react-scripts\" />\n"
},
{
"path": "playground/src-old/reportWebVitals.ts",
"chars": 425,
"preview": "import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n if (onPerfEntr"
},
{
"path": "playground/src-old/setupTests.ts",
"chars": 241,
"preview": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).to"
},
{
"path": "playground/styleguide/docs/intro.md",
"chars": 112,
"preview": "### Styleguide\n\n[⇦ back to guide](https://github.com/piotrwitek/react-redux-typescript-guide#table-of-contents)\n"
},
{
"path": "playground/styleguide/package.json",
"chars": 639,
"preview": "{\n \"name\": \"styleguide\",\n \"description\": \"Styleguide for https://github.com/piotrwitek/react-redux-typescript-guide\",\n"
},
{
"path": "playground/styleguide/styleguide.config.js",
"chars": 1738,
"preview": "const path = require('path');\nconst fs = require('fs');\nconst { createConfig } = require('webpack-blocks');\nconst typesc"
},
{
"path": "playground/tsconfig.json",
"chars": 550,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"ES6\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n "
},
{
"path": "playground/tsconfig.test.json",
"chars": 87,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"module\": \"commonjs\"\n }\n}"
},
{
"path": "playground/typings/augmentations.d.ts",
"chars": 303,
"preview": "// typings/augmentations.ts\n\n// import { Operator } from 'rxjs/Operator';\n// import { Observable } from 'rxjs/Observable"
},
{
"path": "playground/typings/globals.d.ts",
"chars": 404,
"preview": "// typings/globals.d.ts\n\ndeclare interface Window {\n __REDUX_DEVTOOLS_EXTENSION__: any;\n __REDUX_DEVTOOLS_EXTENSION_CO"
},
{
"path": "playground/typings/modules.d.ts",
"chars": 133,
"preview": "// typings/modules.d.ts\ndeclare module 'MyTypes';\ndeclare module 'react-test-renderer';\ndeclare module '@storybook/addon"
},
{
"path": "playground/typings/redux/index.d.ts",
"chars": 17659,
"preview": "\n/**\n * An *action* is a plain object that represents an intention to change the\n * state. Actions are the only way to g"
},
{
"path": "playground/typings/redux-thunk/index.d.ts",
"chars": 1568,
"preview": "import {\n Action,\n ActionCreatorsMapObject,\n AnyAction,\n Dispatch,\n Middleware,\n} from 'redux';\n\nexport i"
}
]
About this extraction
This page contains the full source code of the piotrwitek/react-redux-typescript-guide GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 174 files (995.7 KB), approximately 319.0k tokens, and a symbol index with 1226 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.