[ { "path": ".editorconfig", "content": "# top-most EditorConfig file\nroot = true\n\n[*]\nend_of_line = lf\ninsert_final_newline = true\nquote_type = single\n\n# Tab indentation\n[*.{js,ts,jsx,tsx,json}]\nindent_style = space\nindent_size = 2\n\n# Space indentation\n[package.json]\nindent_style = space\nindent_size = 2\n" }, { "path": ".gitattributes", "content": "* text=auto\n\n*.css text eol=lf\n*.js text eol=lf\n*.jsx text eol=lf\n*.ts text eol=lf linguist-language=JavaScript\n*.tsx text eol=lf linguist-language=JavaScript\n*.json text eol=lf\n*.html text eol=lf\n*.md text eol=lf\n.gitattributes text eol=lf\n" }, { "path": ".github/COMMIT_TEMPLATE.md", "content": "# : (If applied, this commit will...) (Max 50 char)\n# |<---- Using a Maximum Of 50 Characters ---->|\n\n\n# Explain why this change is being made\n# |<---- Try To Limit Each Line to a Maximum Of 72 Characters ---->|\n\n# Provide links or keys to any relevant tickets, articles or other resources\n# Example: Github issue #23\n\n# --- COMMIT END ---\n# Type can be \n# feat (new feature)\n# fix (bug fix)\n# refactor (refactoring production code)\n# style (formatting, missing semi colons, etc; no code change)\n# docs (changes to documentation)\n# test (adding or refactoring tests; no production code change)\n# chore (updating grunt tasks etc; no production code change)\n# --------------------\n# Remember to\n# Capitalize the subject line\n# Use the imperative mood in the subject line\n# Do not end the subject line with a period\n# Separate subject from body with a blank line\n# Use the body to explain what and why vs. how\n# Can use multiple lines with \"-\" for bullet points in body\n# --------------------\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\nopen_collective: inferno\n" }, { "path": ".github/ISSUE_TEMPLATE.md", "content": "*Before* submitting an issue please:\n- Check that you are using the latest version of Inferno. Either using our [CDN @ Master](http://cdn.infernojs.org/latest/inferno.js) or by checking the tags on [NPM](http://www.npmjs.com/package/inferno).\n- Check that the bug has not been fixed in the latest development version. Use our [CDN @ Edge](http://cdn.infernojs.org/edge/inferno.js).\n- Check that the issue has not been brought up before on [Github issues](http://www.github.com/infernojs/inferno/issues).\n\n**If you can, please distill your problem down and include a JSFiddle example for illustration. Also when requesting bug fix please include at least one test to avoid regression.**\n---\n\n## Issue Template\n\n**Observed Behaviour**\n\nInferno is...\n\n**Expected Current Behaviour**\n\nInferno should... \n\n**Inferno Metadata**\n\nmacOS / Windowx / Linux\nSafari / Chrome / Firefox / ... \n\n\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": " *Before* submitting a PR please:\n - Include tests for the functionality you are adding! See CONTRIBUTING.md for details how to run tests.\n - Run `npm run build` and check that the build succeeds.\n - Ensure that the PR hasn't been submitted before.\n\n---\n\n## PR Template\n\n**Objective**\n\nThis PR...\n\n**Closes Issue**\n\nIt closes Issue #...\n" }, { "path": ".github/workflows/ci-template.yml", "content": "name: CI\n\non:\n push:\n branches: [ master ]\n pull_request:\n branches: [ '**' ]\n\njobs:\n tests:\n runs-on: ubuntu-latest\n name: Tests\n steps:\n - uses: actions/checkout@v4\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: latest\n \n - name: Install dependencies\n run: npm ci\n\n - name: Lint\n run: npm run lint\n\n - name: Build\n run: npm run build\n\n - name: Test with coverage\n run: npm run test:coverage\n\n - name: Upload coverage to Coveralls\n uses: coverallsapp/github-action@v2\n\n - name: Run browser tests on SauceLabs\n run: npm run test:browser:sauce\n env:\n SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}\n SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}" }, { "path": ".github/workflows/codeql-analysis.yml", "content": "# For most projects, this workflow file will not need changing; you simply need\n# to commit it to your repository.\n#\n# You may wish to alter this file to override the set of languages analyzed,\n# or to provide custom queries or build logic.\n#\n# ******** NOTE ********\n# We have attempted to detect the languages in your repository. Please check\n# the `language` matrix defined below to confirm you have the correct set of\n# supported CodeQL languages.\n#\nname: \"CodeQL\"\n\non:\n push:\n branches: [ \"master\" ]\n pull_request:\n # The branches below must be a subset of the branches above\n branches: [ \"master\" ]\n schedule:\n - cron: '19 8 * * 0'\n\njobs:\n analyze:\n name: Analyze\n runs-on: ubuntu-latest\n permissions:\n actions: read\n contents: read\n security-events: write\n\n strategy:\n fail-fast: false\n matrix:\n language: [ 'javascript' ]\n # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]\n # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support\n\n steps:\n - name: Checkout repository\n uses: actions/checkout@v3\n\n # Initializes the CodeQL tools for scanning.\n - name: Initialize CodeQL\n uses: github/codeql-action/init@v2\n with:\n languages: ${{ matrix.language }}\n # If you wish to specify custom queries, you can do so here or in a config file.\n # By default, queries listed here will override any specified in a config file.\n # Prefix the list here with \"+\" to use these queries and those in the config file.\n \n # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs\n # queries: security-extended,security-and-quality\n\n \n # Autobuild attempts to build any compiled languages (C/C++, C#, or Java).\n # If this step fails, then you should remove it and run the build manually (see below)\n - name: Autobuild\n uses: github/codeql-action/autobuild@v2\n\n # ℹ️ Command-line programs to run using the OS shell.\n # πŸ“š See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun\n\n # If the Autobuild fails above, remove it and uncomment the following three lines. \n # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.\n\n # - run: |\n # echo \"Run, Build Application using script\"\n # ./location_of_script_within_repo/buildscript.sh\n\n - name: Perform CodeQL Analysis\n uses: github/codeql-action/analyze@v2\n" }, { "path": ".gitignore", "content": ".idea\n.vscode\n\n.DS_Store\n.rpt2_cache*\n.changelog\n\n*.log\n\nbuild\ndist\ncoverage\nnode_modules\nfixtures/browser/*.cmd\n\npackages/*/dist\npackages/*/tmpDist\npackages/*/package-lock.json\n\n.rpt2_cache_development\n.rpt2_cache_production\n\n.swc\n" }, { "path": ".npmrc", "content": "legacy-peer-deps=true\n" }, { "path": "CHANGELOG.md", "content": "See GitHub for changes https://github.com/infernojs/inferno/releases\n" }, { "path": "CONTRIBUTING.md", "content": "Contributing to Inferno\n==========================\n\nMany thanks for using Inferno and contributing to its development. The following is a quick set of guidelines designed to maximise your contribution's effectiveness.\n\nGot a question or need help?\n----------------------------\n\nIf you're having trouble getting Inferno to do what you want, there are a couple of places to get help before submitting an issue:\n\n* [Stack Overflow questions tagged infernojs](http://stackoverflow.com/questions/tagged/infernojs)\n\nOf course, if you've encountered a bug, then the best course of action is to raise an issue (if no-one else has!).\n\nReporting security vulnerabilities\n----------------------------------\n\nIf you think you've found a security vulnerability, please email [Dominic Gannaway](mailto:dg@domgan.com) with details, and he will respond to you if he isn't at work by that time.\n\nRepository Layout\n-----------------\n\nThe repository structures as a monorepo utilizing [lerna](https://github.com/lerna/lerna) as a management tool of choice. Lerna setup and linking are part of the `postinstall` task so it should be automatically\nrun after `npm install`. `lerna` executes command based on a topological-sorted order of packages based on their dependencies.\n\nFor example, if you want to see the order of packages being processed, you can do:\n```\n$ lerna exec -- node -e \"console.log(require('./package.json').name)\"\ninferno-shared\ninferno-vnode-flags\ninferno\ninferno-hyperscript\ninferno-create-element\ninferno-extras\ninferno-router\ninferno-compat\ninferno-server\ninferno-redux\ninferno-mobx\ninferno-test-utils\n```\n\nSource files are written in TypeScript and tests are written in JS/JSX consuming the dist files.\n\nRunning tests\n-------------\nAlways include tests for the functionality you want to add into Inferno. This way we can avoid regression in future.\n\nMake sure you have lerna tool installed globally.\n\n```\nnpm i -g lerna\n```\n\n- Clone the repository, and clean it. `lerna clean`\n- Install development dependencies `npm i`\n- build typescript files `npm run build`\n- run tests `npm run test`\n\n\nPull requests\n-------------\n\nAll pull requests are welcome.\n\n*Caveat for what follows: If in doubt, submit the request - a PR that needs tweaking is infinitely more valuable than a request that wasn't made because you were worrying about meeting these requirements.*\n\nBefore submitting, run `npm run build` (which will concatenate, lint and test the code) to ensure the build passes - but don't include files from outside the `src` and `test` folders in the PR.\n\nAnd make sure the PR haven't been published before!\n\nThere isn't (yet) a formal style guide for Inferno, so please take care to adhere to existing conventions:\n\n* 2-space indentation, not tabs!\n* Semi-colons\n* Single-quotes for strings\n\nAbove all, code should be clean and readable, and commented where necessary. If you add a new feature, make sure you add a test to go along with it!\n\n\nBefore you commit your changes, please run `npm run prettier` to format code correctly\n\nSmall print\n-----------\n\nThere's no contributor license agreement - contributions are made on a common sense basis. Inferno is distributed under the MIT license, which means your contributions will be too.\n\nDebugging Browser\n-----------------\nJust run `npm run test:browser:debug` Open localhost:9876 and click debug!\n\nDebugging NodeJS\n----------------\nIts possible to debug inferno tests by running following command `npm run debug` and open chrome web address: chrome://inspect/#devices\n\nPro tip: You can filter down number of tests by editing `debug` -task:\n`node --inspect-brk ./node_modules/.bin/jest {*edit this*} --runInBand --no-cache --no-watchman`\nChange parameter to jest to match only files you want to run.\nHappy debugging!\n\n\n## Credits\n\n\n### Contributors\n\nThank you to all the people who have already contributed to inferno!\n\n\n\n### Backers\n\nThank you to all our backers! [[Become a backer](https://opencollective.com/inferno#backer)]\n\n\n\n\n### Sponsors\n\nThank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/inferno#sponsor))\n\n\n\n\n\n\n\n\n\n\n\n" }, { "path": "LICENSE.md", "content": "# MIT License\nCopyright (c) 2015-2022 Dominic Gannaway\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n" }, { "path": "README.md", "content": "

\"Inferno\"

\n\n[![Build Status](https://github.com/infernojs/inferno/workflows/CI/badge.svg)](https://github.com/infernojs/inferno/actions)\n[![Coverage Status](https://img.shields.io/coveralls/infernojs/inferno/master.svg?style=flat-square)](https://coveralls.io/github/infernojs/inferno?branch=master)\n[![MIT](https://img.shields.io/npm/l/inferno.svg?style=flat-square)](https://github.com/infernojs/inferno/blob/master/LICENSE.md)\n[![NPM](https://img.shields.io/npm/v/inferno.svg?style=flat-square)](https://www.npmjs.com/package/inferno)\n[![npm downloads](https://img.shields.io/npm/dm/inferno.svg?style=flat-square)](https://www.npmjs.org/package/inferno)\n[![Discord](https://img.shields.io/discord/825669396823015496.svg?style=flat-square&label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/SUKuhgaBpF)\n[![gzip size](http://img.badgesize.io/https://unpkg.com/inferno/dist/inferno.min.js?compression=gzip)](https://unpkg.com/inferno/dist/inferno.min.js)\n[![Backers on Open Collective](https://opencollective.com/inferno/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/inferno/sponsors/badge.svg)](#sponsors)\n\nInferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server.\n\n## Description\n\nThe main objective of the InfernoJS project is to provide the fastest possible **runtime** performance for web applications. Inferno excels at rendering real time data views or large DOM trees.\n\nThe performance is achieved through multiple optimizations, for example:\n\n- Inferno's own JSX compilers creates monomorphic `createVNode` calls, instead of `createElement` calls.\nOptimizing runtime performance of the application. \n - [SWC plugin inferno](https://github.com/infernojs/swc-plugin-inferno) is a plugin for [SWC](https://swc.rs/). It can compile TSX and JSX\n - [Babel plugin inferno](https://github.com/infernojs/babel-plugin-inferno) is a plugin for [BabelJs](https://babeljs.io/). It can compile JSX.\n - [TS plugin inferno](https://github.com/infernojs/ts-plugin-inferno) is a plugin for [TSC](https://www.typescriptlang.org/). It can compile TSX.\n- Inferno's diff process uses bitwise flags to memoize the shape of objects\n- Child nodes are normalized only when needed\n- Special JSX flags can be used during compile time to optimize runtime performance at application level\n- Many micro optimizations\n\n## Features\n\n- Component driven + one-way data flow architecture\n- React-like API, concepts and component lifecycle events\n- Partial synthetic event system, normalizing events for better cross browser support\n- Inferno's [`linkEvent`](https://github.com/infernojs/inferno/blob/master/README.md#linkevent-package-inferno) feature removes the need to use arrow functions or binding event callbacks\n- Isomorphic rendering on both client and server with `inferno-server`\n- Unlike React and Preact, Inferno has lifecycle events on functional components\n- Unlike Preact and other React-like libraries, Inferno has controlled components for input/select/textarea elements\n- Components can be rendered outside their current html hierarchy using `createPortal` - API\n- Support for [older browsers](https://github.com/infernojs/inferno#browser-support) without any polyfills\n- defaultHooks for Functional components, this way re-defining lifecycle events per usage can be avoided\n- Inferno supports setting styles using string `
` or using object literal syntax `
`. For camelCase syntax support see [`inferno-compat`](https://github.com/infernojs/inferno/tree/master/packages/inferno-compat).\n- Fragments (v6)\n- createRef and forwardRef APIs (v6)\n- componentDidAppear, componentWillDisappear and componentWillMove (v8) - class and function component callbacks to ease animation work, see [inferno-animation](https://github.com/infernojs/inferno/tree/master/packages/inferno-animation) package\n\n## Runtime requirements\nInferno v9 requires following features to be present in the executing runtime:\n\n- `Promise`\n- `String.prototype.includes()`\n- `String.prototype.startsWith()`\n- `Array.prototype.includes()`\n- `Object.spread()`\n- `for ... of`\n\n## Browser support\nSince version 4 we have started running our test suite **without** any polyfills.\nInferno is now part of [Saucelabs](https://saucelabs.com/) open source program and we use their service for executing the tests.\n\nInfernoJS is actively tested with browsers listed below, however it may run well on older browsers as well.\nThis is due to limited support of browser versions in recent testing frameworks. https://github.com/jasmine/jasmine/blob/main/release_notes/5.0.0.md\n\n[![Browser Test Status](https://app.saucelabs.com/browser-matrix/Havunen.svg)](https://app.saucelabs.com/open_sauce/user/Havunen/tests/vdc)\n\n## Migration guides\n\n- [Inferno v4](https://github.com/infernojs/inferno/blob/master/documentation/v4-migration.md)\n- [Inferno v6](https://github.com/infernojs/inferno/blob/master/documentation/v6-migration.md)\n\n## Benchmarks\n\nLive examples at [https://infernojs.github.io/inferno](https://infernojs.github.io/inferno)\n\n- [UI Bench](https://localvoid.github.io/uibench/)\n- [dbmonster](https://infernojs.github.io/inferno/dbmonster/)\n- [JS Web Frameworks Benchmark (current)](https://krausest.github.io/js-framework-benchmark/current.html)\n- [Isomorphic-UI-Benchmark](https://github.com/marko-js/isomorphic-ui-benchmarks)\n- [1k Components](https://infernojs.github.io/inferno/1kcomponents/)\n\n## Code Example\n\nLet's start with some code. As you can see, Inferno intentionally keeps the same design ideas as React regarding components: one-way data flow and separation of concerns.\n\nIn these examples, JSX is used via the [Inferno JSX Babel Plugin](https://github.com/infernojs/babel-plugin-inferno) to provide a simple way to express Inferno virtual DOM. You do not need to use JSX, it's completely **optional**, you can use [hyperscript](https://github.com/infernojs/inferno/tree/master/packages/inferno-hyperscript) or [createElement](https://github.com/infernojs/inferno/tree/master/packages/inferno-create-element) (like React does).\nKeep in mind that compile time optimizations are available only for JSX.\n\n```jsx\nimport { render } from 'inferno';\n\nconst message = \"Hello world\";\n\nrender(\n ,\n document.getElementById(\"app\")\n);\n```\nFurthermore, Inferno also uses ES6 components like React:\n\n```jsx\nimport { render, Component } from 'inferno';\n\nclass MyComponent extends Component {\n constructor(props) {\n super(props);\n this.state = {\n counter: 0\n };\n }\n render() {\n return (\n
\n

Header!

\n Counter is at: { this.state.counter }\n
\n );\n }\n}\n\nrender(\n ,\n document.getElementById(\"app\")\n);\n```\n\nBecause performance is an important aspect of this library, we want to show you how to optimize your application even further.\nIn the example below we optimize diffing process by using JSX **$HasVNodeChildren** and **$HasTextChildren** to predefine children shape compile time.\nIn the MyComponent render method there is a div that contains JSX expression `node` as its content. Due to dynamic nature of Javascript\nthat variable `node` could be anything and Inferno needs to go through the normalization process to make sure there are no nested arrays or other invalid data.\nInferno offers a feature called ChildFlags for application developers to pre-define the shape of vNode's child node. In this example case\nit is using `$HasVNodeChildren` to tell the JSX compiler, that this vNode contains only single element or component vNode.\nNow inferno will not go into the normalization process runtime, but trusts the developer decision about the shape of the object and correctness of data.\nIf this contract is not kept and `node` variable contains invalid value for the pre-defined shape (fe. `null`), then application would crash runtime.\nThere is also span-element in the same render method, which content is set dynamically through `_getText()` method. There `$HasTextChildren` child-flag\nfits nicely, because the content of that given \"span\" is never anything else than text.\nAll the available child flags are documented [here](https://infernojs.org/docs/guides/optimizations).\n\n```jsx\nimport { createTextVNode, render, Component } from 'inferno';\n\nclass MyComponent extends Component {\n constructor(props) {\n super(props);\n this.state = {\n counter: 0\n };\n }\n\n _getText() {\n return 'Hello!';\n }\n \n render() {\n const node = this.state.counter > 0 ?
0
: {this._getText()};\n \n return (\n
\n

Header!

\n
{node}
\n
\n );\n }\n}\n\nrender(\n ,\n document.getElementById(\"app\")\n);\n```\n\n### Tear down\n\nTo tear down inferno application you need to render null on root element. \nRendering `null` will trigger unmount lifecycle hooks for whole vDOM tree and remove global event listeners.\nIt is important to unmount unused vNode trees to free browser memory. \n\n```jsx\nimport { createTextVNode, render, Component } from 'inferno';\n\nconst rootElement = document.getElementById(\"app\");\n\n// Start the application\nrender(\n ,\n rootElement\n);\n\n// Tear down\nrender(\n null,\n rootElement\n);\n\n```\n\n\n### More Examples\n\nIf you have built something using Inferno you can add them here:\n\n- [**Simple Clock** (@JSFiddle)](https://jsfiddle.net/4bha7kcg/)\n- [**Simple JS Counter** (@github/scorsi)](https://github.com/scorsi/simple-counter-inferno-cerebral-fusebox): SSR Inferno (view) + Cerebral (state manager) + FuseBox (build system/bundler)\n- [**Online interface to TMDb movie database** (@codesandbox.io)](https://codesandbox.io/s/9zjo5yx8po): Inferno + [Inferno hyperscript](https://github.com/infernojs/inferno) (view) + [Superagent](https://github.com/visionmedia/superagent) (network requests) + Web component ([custom elements v1](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)) + [state-transducer](https://github.com/brucou/state-transducer) \n(state machine library) \n- [**Lemmy - a self-hostable reddit alternative** (front end in Inferno)](https://github.com/dessalines/lemmy)\n\n## Getting Started\n\nThe easiest way to get started with Inferno is by using [Create Inferno App](https://github.com/infernojs/create-inferno-app).\n\nAlternatively, you can try any of the following:\n* the [Inferno Boilerplate](https://github.com/infernojs/inferno-boilerplate) for a very simple setup.\n* for a more advanced example demonstrating how Inferno might be used, we recommend trying out [Inferno Starter Project](https://github.com/nightwolfz/inferno-starter) by [nightwolfz](https://github.com/nightwolfz/).\n* for using Inferno to build a mobile app, try [Inferno Mobile Starter Project](https://github.com/Rudy-Zidan/inferno-mobile) by [Rudy-Zidan](https://github.com/Rudy-Zidan).\n* for [TypeScript](https://www.typescriptlang.org/) support and bundling, check out [ts-plugin-inferno](https://github.com/infernojs/ts-plugin-inferno), or [inferno-typescript-example](https://github.com/infernojs/inferno-typescript-example).\n* for an example of how to use Inferno in [codesandbox](https://codesandbox.io/): https://codesandbox.io/s/znmyj24w4p\n* for using [parcel and typescript](https://github.com/jayy-lmao/inferno-parcel-ts)\n\nCore package:\n\n```sh\nnpm install --save inferno\n```\n\nAddons:\n\n```sh\n# server-side rendering\nnpm install --save inferno-server\n# routing\nnpm install --save inferno-router\n```\n\nPre-bundled files for browser consumption can be found on [our cdnjs](https://cdnjs.com/libraries/inferno):\n\nOr on jsDelivr:\n\n```\nhttps://cdn.jsdelivr.net/npm/inferno@latest/dist/inferno.min.js\n```\n\nOr on unpkg.com:\n\n```\nhttps://unpkg.com/inferno@latest/dist/inferno.min.js\n```\n\n### Creating Virtual DOM\n\n#### JSX:\n```sh\nnpm install --save-dev babel-plugin-inferno\n```\n\n#### Hyperscript:\n```sh\nnpm install --save inferno-hyperscript\n```\n\n#### createElement:\n```sh\nnpm install --save inferno-create-element\n```\n\n### Compatibility with existing React apps\n```sh\nnpm install --save-dev inferno-compat\n```\n\nNote: Make sure you read more about [`inferno-compat`](https://github.com/infernojs/inferno/tree/master/packages/inferno-compat) before using it.\n\n## Third-party state libraries\n\nInferno now has bindings available for some of the major state management libraries out there:\n\n- Redux via [`inferno-redux`](https://github.com/infernojs/inferno/tree/dev/packages/inferno-redux)\n- MobX via [`inferno-mobx`](https://github.com/infernojs/inferno/tree/dev/packages/inferno-mobx)\n- Cerebral via [`@cerebral/inferno`](https://github.com/cerebral/cerebral/tree/master/packages/node_modules/@cerebral/inferno)\n\n## JSX\n\nInferno has its own [JSX Babel plugin](https://github.com/trueadm/babel-plugin-inferno).\n\n## Differences from React\n\n- Inferno doesn't have a fully synthetic event system like React does. Inferno has a partially synthetic event system, instead opting to only delegate certain events (such as `onClick`).\n- Inferno doesn't support React Native. Inferno was only designed for the browser/server with the DOM in mind.\n- Inferno doesn't support legacy string refs, use `createRef` or callback `ref` API\n- Inferno provides lifecycle events on functional components. This is a major win for people who prefer lightweight components rather than ES2015 classes.\n\n## Differences from Preact\n\n- Inferno has a partial synthetic event system, resulting in better performance via delegation of certain events.\n- Inferno is *much* faster than Preact in rendering, updating and removing elements from the DOM. Inferno diffs against virtual DOM, rather than the real DOM (except when loading from server-side rendered content), which means it can make drastic improvements. Unfortunately, diffing against the real DOM has a 30-40% overhead cost in operations.\n- Inferno fully supports controlled components for `input`/`select`/`textarea` elements. This prevents lots of edgecases where the virtual DOM is not the source of truth (it should always be). Preact pushes the source of truth to the DOM itself.\n- Inferno provides lifecycle events on functional components. This is a major win for people who prefer lightweight components rather than ES2015 classes.\n\n## Event System\n\nLike React, Inferno also uses a light-weight synthetic event system in certain places (although both event systems differ massively). Inferno's event system provides highly efficient delegation and an event helper called [`linkEvent`](https://github.com/infernojs/inferno/blob/master/README.md#linkevent-package-inferno).\n\nOne major difference between Inferno and React is that Inferno does not rename events or change how they work by default. Inferno only specifies that events should be camel cased, rather than lower case. Lower case events will bypass\nInferno's event system in favour of using the native event system supplied by the browser. For example, when detecting changes on an `` element, in React you'd use `onChange`, with Inferno you'd use `onInput` instead (the\nnative DOM event is `oninput`).\n\nAvailable synthetic events are:\n- `onClick`\n- `onDblClick`\n- `onFocusIn`\n- `onFocusOut`\n- `onKeyDown`\n- `onKeyPress`\n- `onKeyUp`\n- `onMouseDown`\n- `onMouseMove`\n- `onMouseUp`\n- `onTouchEnd`\n- `onTouchMove`\n- `onTouchStart`\n\n### `linkEvent` (package: `inferno`)\n\n`linkEvent()` is a helper function that allows attachment of `props`/`state`/`context` or other data to events without needing to `bind()` them or use arrow functions/closures. This is extremely useful when dealing with events in functional components. Below is an example:\n\n```jsx\nimport { linkEvent } from 'inferno';\n\nfunction handleClick(props, event) {\n props.validateValue(event.target.value);\n}\n\nfunction MyComponent(props) {\n return
;\n}\n```\n\nThis is an example of using it with ES2015 classes:\n\n\n```jsx\nimport { linkEvent, Component } from 'inferno';\n\nfunction handleClick(instance, event) {\n instance.setState({ data: event.target.value });\n}\n\nclass MyComponent extends Component {\n render () {\n return
;\n }\n}\n```\n\n`linkEvent()` offers better performance than binding an event in a class constructor and using arrow functions, so use it where possible.\n\n\n## Controlled Components\n\nIn HTML, form elements such as ``, `, container);\n }).toThrow(\n constructInfernoError(\"textarea elements can't have children.\"),\n );\n });\n\n it('Media elements cannot have children', () => {\n expect(() => {\n render(foobar, container);\n }).toThrow(constructInfernoError(\"media elements can't have children.\"));\n });\n\n it('< BR > elements cannot have children', () => {\n expect(() => {\n render(
foobar
, container);\n }).toThrow(constructInfernoError(\"br elements can't have children.\"));\n });\n\n it('< img > elements cannot have children', () => {\n expect(() => {\n render(foobar, container);\n }).toThrow(constructInfernoError(\"img elements can't have children.\"));\n });\n });\n});\n" }, { "path": "packages/inferno/index.cjs", "content": "'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./dist/index.min.cjs');\n} else {\n module.exports = require('./dist/index.cjs');\n}\n" }, { "path": "packages/inferno/index.mjs", "content": "export * from './dist/index.mjs';\n\nif (process.env.NODE_ENV !== 'production') {\n console.warn(\n 'You are running production build of Inferno in development mode. Use dev:module entry point.',\n );\n}\n" }, { "path": "packages/inferno/package.json", "content": "{\n \"name\": \"inferno\",\n \"version\": \"9.0.11\",\n \"license\": \"MIT\",\n \"type\": \"module\",\n \"description\": \"An extremely fast, React-like JavaScript library for building modern user interfaces\",\n \"author\": {\n \"name\": \"Dominic Gannaway\",\n \"email\": \"dg@domgan.com\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/infernojs/inferno/issues\"\n },\n \"funding\": {\n \"type\": \"opencollective\",\n \"url\": \"https://opencollective.com/inferno\"\n },\n \"homepage\": \"https://github.com/infernojs/inferno#readme\",\n \"keywords\": [\n \"inferno\",\n \"performance\",\n \"framework\",\n \"interfaces\",\n \"user interfaces\",\n \"html\",\n \"renderToString\",\n \"server\",\n \"dom\",\n \"browser\",\n \"rollup\",\n \"vdom\"\n ],\n \"collective\": {\n \"type\": \"opencollective\",\n \"url\": \"https://opencollective.com/inferno\",\n \"logo\": \"https://opencollective.com/inferno/logo.txt\"\n },\n \"scripts\": {\n \"postinstall\": \"opencollective-postinstall\"\n },\n \"rollup\": {\n \"bundledDependencies\": [\n \"inferno-shared\",\n \"inferno-vnode-flags\"\n ],\n \"moduleName\": \"Inferno\"\n },\n \"files\": [\n \"index.cjs\",\n \"index.mjs\",\n \"dist/\",\n \"README.md\",\n \"package.json\"\n ],\n \"exports\": {\n \".\": {\n \"import\": \"./index.mjs\",\n \"require\": \"./index.cjs\",\n \"types\": \"./dist/index.d.ts\"\n },\n \"./dist/index.dev.mjs\": \"./dist/index.dev.mjs\",\n \"./dist/index.mjs\": \"./dist/index.mjs\"\n },\n \"module\": \"index.mjs\",\n \"dev:module\": \"dist/index.dev.mjs\",\n \"typings\": \"dist/index.d.ts\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/infernojs/inferno.git\",\n \"directory\": \"packages/inferno\"\n },\n \"devDependencies\": {\n \"inferno-shared\": \"9.0.11\",\n \"inferno-utils\": \"9.0.11\"\n },\n \"dependencies\": {\n \"csstype\": \"^3.2.3\",\n \"inferno-vnode-flags\": \"9.0.11\",\n \"opencollective-postinstall\": \"^2.0.3\"\n }\n}\n" }, { "path": "packages/inferno/src/DOM/constants.ts", "content": "export const xlinkNS = 'http://www.w3.org/1999/xlink';\nexport const xmlNS = 'http://www.w3.org/XML/1998/namespace';\n\nexport const namespaces: Record = {\n 'xlink:actuate': xlinkNS,\n 'xlink:arcrole': xlinkNS,\n 'xlink:href': xlinkNS,\n 'xlink:role': xlinkNS,\n 'xlink:show': xlinkNS,\n 'xlink:title': xlinkNS,\n 'xlink:type': xlinkNS,\n 'xml:base': xmlNS,\n 'xml:lang': xmlNS,\n 'xml:space': xmlNS,\n};\n" }, { "path": "packages/inferno/src/DOM/events/attachEvent.ts", "content": "import { isFunction } from 'inferno-shared';\n\nexport function attachEvent(dom, eventName, handler): void {\n const previousKey = `$${eventName}`;\n const previousArgs = dom[previousKey];\n\n if (previousArgs) {\n if (previousArgs[1].wrapped) {\n return;\n }\n dom.removeEventListener(previousArgs[0], previousArgs[1]);\n dom[previousKey] = null;\n }\n\n if (isFunction(handler)) {\n dom.addEventListener(eventName, handler);\n dom[previousKey] = [eventName, handler];\n }\n}\n" }, { "path": "packages/inferno/src/DOM/events/delegation.ts", "content": "import type { LinkedEvent, SemiSyntheticEvent } from './../../core/types';\nimport { isFunction, isNull, isNullOrUndef } from 'inferno-shared';\nimport {\n isLastValueSameLinkEvent,\n normalizeEventName,\n} from './../utils/common';\nimport { isLinkEventObject } from './linkEvent';\n\ninterface IEventData {\n dom: Element;\n}\n\nexport interface DelegateEventTypes {\n onClick: unknown;\n onDblClick: unknown;\n onFocusIn: unknown;\n onFocusOut: unknown;\n onKeyDown: unknown;\n onKeyPress: unknown;\n onKeyUp: unknown;\n onMouseDown: unknown;\n onMouseMove: unknown;\n onMouseUp: unknown;\n onTouchEnd: unknown;\n onTouchMove: unknown;\n onTouchStart: unknown;\n}\n\nfunction getDelegatedEventObject(v: unknown): DelegateEventTypes {\n return {\n onClick: v,\n onDblClick: v,\n onFocusIn: v,\n onFocusOut: v,\n onKeyDown: v,\n onKeyPress: v,\n onKeyUp: v,\n onMouseDown: v,\n onMouseMove: v,\n onMouseUp: v,\n onTouchEnd: v,\n onTouchMove: v,\n onTouchStart: v,\n };\n}\nconst attachedEventCounts = getDelegatedEventObject(0);\nconst attachedEvents = getDelegatedEventObject(null);\n\nexport const syntheticEvents = getDelegatedEventObject(true);\n\nfunction updateOrAddSyntheticEvent(name: string, dom): DelegateEventTypes {\n let eventsObject = dom.$EV;\n\n if (!eventsObject) {\n eventsObject = dom.$EV = getDelegatedEventObject(null);\n }\n if (!eventsObject[name]) {\n if (++attachedEventCounts[name] === 1) {\n attachedEvents[name] = attachEventToDocument(name);\n }\n }\n\n return eventsObject;\n}\n\nexport function unmountSyntheticEvent(name: string, dom): void {\n const eventsObject = dom.$EV;\n\n if (eventsObject?.[name]) {\n if (--attachedEventCounts[name] === 0) {\n document.removeEventListener(\n normalizeEventName(name),\n attachedEvents[name],\n );\n attachedEvents[name] = null;\n }\n eventsObject[name] = null;\n }\n}\n\nexport function handleSyntheticEvent(\n name: string,\n lastEvent: (() => void) | LinkedEvent | null | false | true,\n nextEvent: (() => void) | LinkedEvent | null | false | true,\n dom,\n): void {\n if (isFunction(nextEvent)) {\n updateOrAddSyntheticEvent(name, dom)[name] = nextEvent;\n } else if (isLinkEventObject(nextEvent)) {\n if (isLastValueSameLinkEvent(lastEvent, nextEvent)) {\n return;\n }\n updateOrAddSyntheticEvent(name, dom)[name] = nextEvent;\n } else {\n unmountSyntheticEvent(name, dom);\n }\n}\n\n// TODO: When browsers fully support event.composedPath we could loop it through instead of using parentNode property\nfunction getTargetNode(event): any {\n return isFunction(event.composedPath)\n ? event.composedPath()[0]\n : event.target;\n}\n\nfunction dispatchEvents(\n event: SemiSyntheticEvent,\n isClick: boolean,\n name: string,\n eventData: IEventData,\n): void {\n let dom = getTargetNode(event);\n do {\n // Html Nodes can be nested fe: span inside button in that scenario browser does not handle disabled attribute on parent,\n // because the event listener is on document.body\n // Don't process clicks on disabled elements\n if (isClick && dom.disabled) {\n return;\n }\n const eventsObject = dom.$EV;\n\n if (!isNullOrUndef(eventsObject)) {\n const currentEvent = eventsObject[name];\n\n if (currentEvent) {\n // linkEvent object\n eventData.dom = dom;\n if (currentEvent.event) {\n currentEvent.event(currentEvent.data, event);\n } else {\n currentEvent(event);\n }\n\n if (event.cancelBubble) {\n return;\n }\n }\n }\n dom = dom.parentNode;\n } while (!isNull(dom));\n}\n\nfunction stopPropagation(): void {\n this.cancelBubble = true;\n\n if (!this.immediatePropagationStopped) {\n this.stopImmediatePropagation();\n }\n}\n\nfunction isDefaultPrevented(): boolean {\n return this.defaultPrevented;\n}\n\nfunction isPropagationStopped(): boolean {\n return this.cancelBubble;\n}\n\nfunction extendEventProperties(event): IEventData {\n // Event data needs to be an object to save reference to currentTarget getter\n const eventData: IEventData = {\n dom: document as any,\n };\n\n event.isDefaultPrevented = isDefaultPrevented;\n event.isPropagationStopped = isPropagationStopped;\n event.stopPropagation = stopPropagation;\n\n Object.defineProperty(event, 'currentTarget', {\n configurable: true,\n get: function get() {\n return eventData.dom;\n },\n });\n\n return eventData;\n}\n\nfunction rootEvent(name: string): (event: SemiSyntheticEvent) => void {\n const isClick = name === 'onClick' || name === 'onDblClick';\n return function (event: SemiSyntheticEvent) {\n dispatchEvents(event, isClick, name, extendEventProperties(event));\n };\n}\n\nfunction attachEventToDocument(\n name: string,\n): (event: SemiSyntheticEvent) => void {\n const attachedEvent = rootEvent(name);\n document.addEventListener(normalizeEventName(name), attachedEvent);\n return attachedEvent;\n}\n" }, { "path": "packages/inferno/src/DOM/events/linkEvent.ts", "content": "import type { LinkedEvent } from '../../core/types';\nimport { isFunction, isNull } from 'inferno-shared';\n\n/**\n * Links given data to event as first parameter\n * @param {*} data data to be linked, it will be available in function as first parameter\n * @param {Function} callback Function to be called when event occurs\n * @returns {{data: *, event: Function}}\n */\nexport function linkEvent(\n data: T,\n callback: (data: T, event: E) => void,\n): LinkedEvent | null {\n if (isFunction(callback)) {\n return { data, event: callback };\n }\n return null; // Return null when event is invalid, to avoid creating unnecessary event handlers\n}\n\n// object.event should always be function, otherwise its badly created object.\nexport function isLinkEventObject(o): o is LinkedEvent {\n return !isNull(o) && typeof o === 'object';\n}\n" }, { "path": "packages/inferno/src/DOM/mounting.ts", "content": "import type { VNode, ContextObject } from '../core/types';\nimport {\n isFunction,\n isNull,\n isNullOrUndef,\n isString,\n isStringOrNumber,\n throwError,\n} from 'inferno-shared';\nimport { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';\nimport {\n createVoidVNode,\n directClone,\n normalizeRoot,\n} from '../core/implementation';\nimport {\n AnimationQueues,\n documentCreateElement,\n EMPTY_OBJ,\n findDOMFromVNode,\n insertOrAppend,\n safeCall1,\n setTextContent,\n} from './utils/common';\nimport { mountProps } from './props';\nimport {\n createClassComponentInstance,\n renderFunctionalComponent,\n} from './utils/componentUtil';\nimport { validateKeys } from '../core/validate';\nimport { mountRef } from '../core/refs';\n\nexport function mount(\n vNode: VNode,\n parentDOM: Element | null,\n context: ContextObject,\n isSVG: boolean,\n nextNode: Element | null,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n const flags = (vNode.flags |= VNodeFlags.InUse);\n\n if ((flags & VNodeFlags.Element) !== 0) {\n mountElement(\n vNode,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n } else if ((flags & VNodeFlags.ComponentClass) !== 0) {\n mountClassComponent(\n vNode,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n } else if (flags & VNodeFlags.ComponentFunction) {\n mountFunctionalComponent(\n vNode,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n } else if (flags & VNodeFlags.Text) {\n mountText(vNode, parentDOM, nextNode);\n } else if (flags & VNodeFlags.Fragment) {\n mountFragment(\n vNode,\n context,\n parentDOM,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n } else if (flags & VNodeFlags.Portal) {\n mountPortal(vNode, context, parentDOM, nextNode, lifecycle, animations);\n } else if (process.env.NODE_ENV !== 'production') {\n // Development validation, in production we don't need to throw because it crashes anyway\n if (typeof vNode === 'object') {\n throwError(\n `mount() received an object that's not a valid VNode, you should stringify it first, fix createVNode flags or call normalizeChildren. Object: \"${JSON.stringify(\n vNode,\n )}\".`,\n );\n } else {\n throwError(\n `mount() expects a valid VNode, instead it received an object with the type \"${typeof vNode}\".`,\n );\n }\n }\n}\n\nfunction mountPortal(\n vNode,\n context,\n parentDOM: Element | null,\n nextNode: Element | null,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n mount(\n vNode.children as VNode,\n vNode.ref,\n context,\n false,\n null,\n lifecycle,\n animations,\n );\n\n const placeHolderVNode = createVoidVNode();\n\n mountText(placeHolderVNode, parentDOM, nextNode);\n\n vNode.dom = placeHolderVNode.dom;\n}\n\nfunction mountFragment(\n vNode,\n context,\n parentDOM: Element | null,\n isSVG,\n nextNode,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n let children = vNode.children;\n let childFlags = vNode.childFlags;\n\n // When fragment is optimized for multiple children, check if there is no children and change flag to invalid\n // This is the only normalization always done, to keep optimization flags API same for fragments and regular elements\n if (childFlags & ChildFlags.MultipleChildren && children.length === 0) {\n childFlags = vNode.childFlags = ChildFlags.HasVNodeChildren;\n children = vNode.children = createVoidVNode();\n }\n\n if (childFlags === ChildFlags.HasVNodeChildren) {\n mount(\n children as VNode,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n } else {\n mountArrayChildren(\n children,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n }\n}\n\nexport function mountText(\n vNode: VNode,\n parentDOM: Element | null,\n nextNode: Element | null,\n): void {\n const dom = (vNode.dom = document.createTextNode(\n vNode.children as string,\n ) as any);\n\n if (!isNull(parentDOM)) {\n insertOrAppend(parentDOM, dom, nextNode);\n }\n}\n\nexport function mountElement(\n vNode: VNode,\n parentDOM: Element | null,\n context: ContextObject,\n isSVG: boolean,\n nextNode: Element | null,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n const flags = vNode.flags;\n const props = vNode.props;\n const className = vNode.className;\n const childFlags = vNode.childFlags;\n const dom = (vNode.dom = documentCreateElement(\n vNode.type,\n (isSVG = isSVG || (flags & VNodeFlags.SvgElement) > 0),\n ));\n let children = vNode.children;\n\n if (!isNullOrUndef(className) && className !== '') {\n if (isSVG) {\n dom.setAttribute('class', className);\n } else {\n dom.className = className;\n }\n }\n\n if (process.env.NODE_ENV !== 'production') {\n validateKeys(vNode);\n }\n\n if (childFlags === ChildFlags.HasTextChildren) {\n setTextContent(dom, children as string);\n } else if (childFlags !== ChildFlags.HasInvalidChildren) {\n const childrenIsSVG = isSVG && vNode.type !== 'foreignObject';\n\n if (childFlags === ChildFlags.HasVNodeChildren) {\n if ((children as VNode).flags & VNodeFlags.InUse) {\n vNode.children = children = directClone(children as VNode);\n }\n mount(\n children as VNode,\n dom,\n context,\n childrenIsSVG,\n null,\n lifecycle,\n animations,\n );\n } else if (\n childFlags === ChildFlags.HasKeyedChildren ||\n childFlags === ChildFlags.HasNonKeyedChildren\n ) {\n mountArrayChildren(\n children,\n dom,\n context,\n childrenIsSVG,\n null,\n lifecycle,\n animations,\n );\n }\n }\n\n if (!isNull(parentDOM)) {\n insertOrAppend(parentDOM, dom, nextNode);\n }\n\n if (!isNull(props)) {\n mountProps(vNode, flags, props, dom, isSVG, animations);\n }\n\n if (process.env.NODE_ENV !== 'production') {\n if (isString(vNode.ref)) {\n throwError(\n 'string \"refs\" are not supported in Inferno 1.0. Use callback ref or Inferno.createRef() API instead.',\n );\n }\n }\n mountRef(vNode.ref, dom, lifecycle);\n}\n\nexport function mountArrayChildren(\n children,\n dom: Element | null,\n context: ContextObject,\n isSVG: boolean,\n nextNode: Element | null,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n for (let i = 0; i < children.length; ++i) {\n let child = children[i];\n\n if (child.flags & VNodeFlags.InUse) {\n children[i] = child = directClone(child);\n }\n mount(child, dom, context, isSVG, nextNode, lifecycle, animations);\n }\n}\n\nexport function mountClassComponent(\n vNode: VNode,\n parentDOM: Element | null,\n context: ContextObject,\n isSVG: boolean,\n nextNode: Element | null,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n const instance = createClassComponentInstance(\n vNode,\n vNode.type,\n vNode.props || EMPTY_OBJ,\n context,\n isSVG,\n lifecycle,\n );\n\n // If we have a componentDidAppear on this component, we shouldn't allow children to animate so we're passing an dummy animations queue\n let childAnimations = animations;\n\n if (isFunction(instance.componentDidAppear)) {\n childAnimations = new AnimationQueues();\n }\n mount(\n instance.$LI,\n parentDOM,\n instance.$CX,\n isSVG,\n nextNode,\n lifecycle,\n childAnimations,\n );\n mountClassComponentCallbacks(vNode.ref, instance, lifecycle, animations);\n}\n\nexport function mountFunctionalComponent(\n vNode: VNode,\n parentDOM: Element | null,\n context: ContextObject,\n isSVG: boolean,\n nextNode: Element | null,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n const ref = vNode.ref;\n // If we have a componentDidAppear on this component, we shouldn't allow children to animate so we're passing an dummy animations queue\n let childAnimations = animations;\n if (!isNullOrUndef(ref) && isFunction(ref.onComponentDidAppear)) {\n childAnimations = new AnimationQueues();\n }\n\n mount(\n (vNode.children = normalizeRoot(renderFunctionalComponent(vNode, context))),\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n childAnimations,\n );\n mountFunctionalComponentCallbacks(vNode, lifecycle, animations);\n}\n\nfunction createClassMountCallback(instance) {\n return () => {\n instance.componentDidMount();\n };\n}\n\nfunction addAppearAnimationHookClass(\n animations: AnimationQueues,\n instance,\n dom: Element,\n): void {\n animations.componentDidAppear.push(() => {\n instance.componentDidAppear(dom);\n });\n}\n\nfunction addAppearAnimationHookFunctional(\n animations: AnimationQueues,\n ref,\n dom: Element,\n props,\n): void {\n animations.componentDidAppear.push(() => {\n ref.onComponentDidAppear(dom, props);\n });\n}\n\nexport function mountClassComponentCallbacks(\n ref,\n instance,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n mountRef(ref, instance, lifecycle);\n\n if (process.env.NODE_ENV !== 'production') {\n if (isStringOrNumber(ref)) {\n throwError(\n 'string \"refs\" are not supported in Inferno 1.0. Use callback ref or Inferno.createRef() API instead.',\n );\n } else if (\n !isNullOrUndef(ref) &&\n typeof ref === 'object' &&\n ref.current === void 0\n ) {\n throwError(\n 'functional component lifecycle events are not supported on ES2015 class components.',\n );\n }\n }\n\n if (isFunction(instance.componentDidMount)) {\n lifecycle.push(createClassMountCallback(instance));\n }\n if (isFunction(instance.componentDidAppear)) {\n addAppearAnimationHookClass(animations, instance, instance.$LI.dom);\n }\n}\n\nfunction createOnMountCallback(ref, vNode) {\n return () => {\n ref.onComponentDidMount(\n findDOMFromVNode(vNode, true),\n vNode.props || EMPTY_OBJ,\n );\n };\n}\n\nexport function mountFunctionalComponentCallbacks(\n vNode: VNode,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n const ref = vNode.ref;\n\n if (!isNullOrUndef(ref)) {\n safeCall1(ref.onComponentWillMount, vNode.props || EMPTY_OBJ);\n if (isFunction(ref.onComponentDidMount)) {\n lifecycle.push(createOnMountCallback(ref, vNode));\n }\n if (isFunction(ref.onComponentDidAppear)) {\n addAppearAnimationHookFunctional(\n animations,\n ref,\n findDOMFromVNode(vNode, true) as Element,\n vNode.props,\n );\n }\n }\n}\n" }, { "path": "packages/inferno/src/DOM/patching.ts", "content": "import type { ContextObject, VNode } from '../core/types';\nimport { isFunction, isInvalid, isNull, isNullOrUndef } from 'inferno-shared';\nimport { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';\nimport {\n createVoidVNode,\n directClone,\n normalizeRoot,\n} from '../core/implementation';\nimport type { Component } from './../core/component';\nimport { mount, mountArrayChildren } from './mounting';\nimport {\n clearDOM,\n remove,\n removeAllChildren,\n unmount,\n unmountAllChildren,\n} from './unmounting';\nimport {\n type AnimationQueues,\n appendChild,\n callAllMoveAnimationHooks,\n createDerivedState,\n EMPTY_OBJ,\n findDOMFromVNode,\n moveVNodeDOM,\n removeChild,\n removeVNodeDOM,\n replaceChild,\n setTextContent,\n} from './utils/common';\nimport {\n isControlledFormElement,\n processElement,\n} from './wrappers/processElement';\nimport { patchProp } from './props';\nimport {\n renderFunctionalComponent,\n renderNewInput,\n} from './utils/componentUtil';\nimport { validateKeys } from '../core/validate';\nimport { mountRef, unmountRef } from '../core/refs';\n\nfunction replaceWithNewNode(\n lastVNode,\n nextVNode,\n parentDOM: Element,\n context: ContextObject,\n isSVG: boolean,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n unmount(lastVNode, animations);\n\n if ((nextVNode.flags & lastVNode.flags & VNodeFlags.DOMRef) !== 0) {\n mount(nextVNode, null, context, isSVG, null, lifecycle, animations);\n // Single DOM operation, when we have dom references available\n replaceChild(parentDOM, nextVNode.dom, lastVNode.dom);\n } else {\n mount(\n nextVNode,\n parentDOM,\n context,\n isSVG,\n findDOMFromVNode(lastVNode, true),\n lifecycle,\n animations,\n );\n removeVNodeDOM(lastVNode, parentDOM, animations);\n }\n}\n\nexport function patch(\n lastVNode: VNode,\n nextVNode: VNode,\n parentDOM: Element,\n context: ContextObject,\n isSVG: boolean,\n nextNode: Element | null,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n const nextFlags = (nextVNode.flags |= VNodeFlags.InUse);\n\n if (\n lastVNode.flags !== nextFlags ||\n lastVNode.type !== nextVNode.type ||\n lastVNode.key !== nextVNode.key ||\n nextFlags & VNodeFlags.ReCreate\n ) {\n if (lastVNode.flags & VNodeFlags.InUse) {\n replaceWithNewNode(\n lastVNode,\n nextVNode,\n parentDOM,\n context,\n isSVG,\n lifecycle,\n animations,\n );\n } else {\n // Last vNode is not in use, it has crashed at application level. Just mount nextVNode and ignore last one\n mount(\n nextVNode,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n }\n } else if (nextFlags & VNodeFlags.Element) {\n patchElement(lastVNode, nextVNode, context, isSVG, lifecycle, animations);\n } else if (nextFlags & VNodeFlags.ComponentClass) {\n patchClassComponent(\n lastVNode,\n nextVNode,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n } else if (nextFlags & VNodeFlags.ComponentFunction) {\n patchFunctionalComponent(\n lastVNode,\n nextVNode,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n } else if (nextFlags & VNodeFlags.Text) {\n patchText(lastVNode, nextVNode);\n } else if (nextFlags & VNodeFlags.Fragment) {\n patchFragment(\n lastVNode,\n nextVNode,\n parentDOM,\n context,\n isSVG,\n lifecycle,\n animations,\n );\n } else {\n patchPortal(lastVNode, nextVNode, context, lifecycle, animations);\n }\n}\n\nexport function patchSingleTextChild(\n lastChildren,\n nextChildren,\n parentDOM: Element,\n): void {\n if (lastChildren !== nextChildren) {\n if (lastChildren !== '') {\n (parentDOM.firstChild as Node).nodeValue = nextChildren;\n } else {\n setTextContent(parentDOM, nextChildren);\n }\n }\n}\n\nfunction patchContentEditableChildren(dom, nextChildren): void {\n if (dom.textContent !== nextChildren) {\n dom.textContent = nextChildren;\n }\n}\n\nfunction patchFragment(\n lastVNode: VNode,\n nextVNode: VNode,\n parentDOM: Element,\n context: ContextObject,\n isSVG: boolean,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n const lastChildren = lastVNode.children as VNode[];\n let nextChildren = nextVNode.children as any;\n const lastChildFlags = lastVNode.childFlags;\n let nextChildFlags = nextVNode.childFlags;\n let nextNode: Element | null = null;\n\n // When fragment is optimized for multiple children, check if there is no children and change flag to invalid\n // This is the only normalization always done, to keep optimization flags API same for fragments and regular elements\n if (\n nextChildFlags & ChildFlags.MultipleChildren &&\n nextChildren.length === 0\n ) {\n nextChildFlags = nextVNode.childFlags = ChildFlags.HasVNodeChildren;\n nextChildren = nextVNode.children = createVoidVNode();\n }\n\n const nextIsSingle: boolean =\n (nextChildFlags & ChildFlags.HasVNodeChildren) !== 0;\n\n if (lastChildFlags & ChildFlags.MultipleChildren) {\n const lastLen = lastChildren.length;\n\n // We need to know Fragment's edge node when\n if (\n // It uses keyed algorithm\n (lastChildFlags & ChildFlags.HasKeyedChildren &&\n nextChildFlags & ChildFlags.HasKeyedChildren) ||\n // It transforms from many to single\n nextIsSingle ||\n // It will append more nodes\n (!nextIsSingle && (nextChildren as VNode[]).length > lastLen)\n ) {\n // When fragment has multiple children there is always at least one vNode\n nextNode = (findDOMFromVNode(lastChildren[lastLen - 1], false) as Element)\n .nextSibling as Element | null;\n }\n }\n\n patchChildren(\n lastChildFlags,\n nextChildFlags,\n lastChildren,\n nextChildren,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lastVNode,\n lifecycle,\n animations,\n );\n}\n\nfunction patchPortal(\n lastVNode: VNode,\n nextVNode: VNode,\n context,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n const lastContainer = lastVNode.ref as Element;\n const nextContainer = nextVNode.ref as Element;\n const nextChildren = nextVNode.children as VNode;\n\n patchChildren(\n lastVNode.childFlags,\n nextVNode.childFlags,\n lastVNode.children as VNode,\n nextChildren,\n lastContainer,\n context,\n false,\n null,\n lastVNode,\n lifecycle,\n animations,\n );\n\n nextVNode.dom = lastVNode.dom;\n\n if (lastContainer !== nextContainer && !isInvalid(nextChildren)) {\n const node = nextChildren.dom as Element;\n\n removeChild(lastContainer, node);\n appendChild(nextContainer, node);\n }\n}\n\nexport function patchElement(\n lastVNode: VNode,\n nextVNode: VNode,\n context: ContextObject,\n isSVG: boolean,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n const dom = (nextVNode.dom = lastVNode.dom as Element);\n const lastProps = lastVNode.props;\n const nextProps = nextVNode.props;\n const nextFlags = nextVNode.flags;\n let isFormElement = false;\n let hasControlledValue = false;\n let nextPropsOrEmpty;\n\n isSVG = isSVG || (nextFlags & VNodeFlags.SvgElement) > 0;\n\n // inlined patchProps -- starts --\n if (lastProps !== nextProps) {\n const lastPropsOrEmpty = lastProps || EMPTY_OBJ;\n nextPropsOrEmpty = nextProps || EMPTY_OBJ;\n\n if (nextPropsOrEmpty !== EMPTY_OBJ) {\n isFormElement = (nextFlags & VNodeFlags.FormElement) > 0;\n if (isFormElement) {\n hasControlledValue = isControlledFormElement(nextPropsOrEmpty);\n }\n\n for (const prop in nextPropsOrEmpty) {\n const lastValue = lastPropsOrEmpty[prop];\n const nextValue = nextPropsOrEmpty[prop];\n if (lastValue !== nextValue) {\n patchProp(\n prop,\n lastValue,\n nextValue,\n dom,\n isSVG,\n hasControlledValue,\n lastVNode,\n animations,\n );\n }\n }\n }\n if (lastPropsOrEmpty !== EMPTY_OBJ) {\n for (const prop in lastPropsOrEmpty) {\n if (\n isNullOrUndef(nextPropsOrEmpty[prop]) &&\n !isNullOrUndef(lastPropsOrEmpty[prop])\n ) {\n patchProp(\n prop,\n lastPropsOrEmpty[prop],\n null,\n dom,\n isSVG,\n hasControlledValue,\n lastVNode,\n animations,\n );\n }\n }\n }\n }\n const nextChildren = nextVNode.children;\n const nextClassName = nextVNode.className;\n\n // inlined patchProps -- ends --\n if (lastVNode.className !== nextClassName) {\n if (isNullOrUndef(nextClassName)) {\n dom.removeAttribute('class');\n } else if (isSVG) {\n dom.setAttribute('class', nextClassName);\n } else {\n dom.className = nextClassName;\n }\n }\n\n if (process.env.NODE_ENV !== 'production') {\n validateKeys(nextVNode);\n }\n if (nextFlags & VNodeFlags.ContentEditable) {\n patchContentEditableChildren(dom, nextChildren);\n } else {\n patchChildren(\n lastVNode.childFlags,\n nextVNode.childFlags,\n lastVNode.children,\n nextChildren,\n dom,\n context,\n isSVG && nextVNode.type !== 'foreignObject',\n null,\n lastVNode,\n lifecycle,\n animations,\n );\n }\n\n if (isFormElement) {\n processElement(\n nextFlags,\n nextVNode,\n dom,\n nextPropsOrEmpty,\n false,\n hasControlledValue,\n );\n }\n\n const nextRef = nextVNode.ref;\n const lastRef = lastVNode.ref;\n\n if (lastRef !== nextRef) {\n unmountRef(lastRef);\n mountRef(nextRef, dom, lifecycle);\n }\n}\n\nfunction replaceOneVNodeWithMultipleVNodes(\n lastChildren,\n nextChildren,\n parentDOM,\n context,\n isSVG: boolean,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n unmount(lastChildren, animations);\n\n mountArrayChildren(\n nextChildren,\n parentDOM,\n context,\n isSVG,\n findDOMFromVNode(lastChildren, true),\n lifecycle,\n animations,\n );\n\n removeVNodeDOM(lastChildren, parentDOM, animations);\n}\n\nfunction commonChildrenSwitch(\n lastChildren,\n nextChildren,\n parentDOM: Element,\n context: ContextObject,\n isSVG: boolean,\n nextNode: Element | null,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n parentVNode: VNode,\n nextChildFlags:\n | ChildFlags.UnknownChildren\n | ChildFlags.HasNonKeyedChildren\n | ChildFlags.HasKeyedChildren\n | ChildFlags.MultipleChildren,\n lastChildFlags:\n | ChildFlags.UnknownChildren\n | ChildFlags.HasNonKeyedChildren\n | ChildFlags.HasKeyedChildren\n | ChildFlags.MultipleChildren,\n): void {\n const lastLength = lastChildren.length | 0;\n const nextLength = nextChildren.length | 0;\n\n // Fast path's for both algorithms\n if (lastLength === 0) {\n if (nextLength > 0) {\n mountArrayChildren(\n nextChildren,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n }\n } else if (nextLength === 0) {\n removeAllChildren(parentDOM, parentVNode, lastChildren, animations);\n } else if (\n nextChildFlags === ChildFlags.HasKeyedChildren &&\n lastChildFlags === ChildFlags.HasKeyedChildren\n ) {\n patchKeyedChildren(\n lastChildren,\n nextChildren,\n parentDOM,\n context,\n isSVG,\n lastLength,\n nextLength,\n nextNode,\n parentVNode,\n lifecycle,\n animations,\n );\n } else {\n patchNonKeyedChildren(\n lastChildren,\n nextChildren,\n parentDOM,\n context,\n isSVG,\n lastLength,\n nextLength,\n nextNode,\n lifecycle,\n animations,\n );\n }\n}\n\nfunction patchChildren(\n lastChildFlags: ChildFlags,\n nextChildFlags: ChildFlags,\n lastChildren,\n nextChildren,\n parentDOM: Element,\n context: ContextObject,\n isSVG: boolean,\n nextNode: Element | null,\n parentVNode: VNode,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n switch (lastChildFlags) {\n case ChildFlags.HasVNodeChildren:\n switch (nextChildFlags) {\n case ChildFlags.HasVNodeChildren:\n patch(\n lastChildren,\n nextChildren,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n break;\n case ChildFlags.HasInvalidChildren:\n remove(lastChildren, parentDOM, animations);\n break;\n case ChildFlags.HasTextChildren:\n unmount(lastChildren, animations);\n setTextContent(parentDOM, nextChildren);\n break;\n default:\n replaceOneVNodeWithMultipleVNodes(\n lastChildren,\n nextChildren,\n parentDOM,\n context,\n isSVG,\n lifecycle,\n animations,\n );\n break;\n }\n break;\n case ChildFlags.HasInvalidChildren:\n switch (nextChildFlags) {\n case ChildFlags.HasVNodeChildren:\n mount(\n nextChildren,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n break;\n case ChildFlags.HasInvalidChildren:\n break;\n case ChildFlags.HasTextChildren:\n setTextContent(parentDOM, nextChildren);\n break;\n default:\n mountArrayChildren(\n nextChildren,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n break;\n }\n break;\n case ChildFlags.HasTextChildren:\n switch (nextChildFlags) {\n case ChildFlags.HasTextChildren:\n patchSingleTextChild(lastChildren, nextChildren, parentDOM);\n break;\n case ChildFlags.HasVNodeChildren:\n clearDOM(parentDOM, lastChildren, animations);\n mount(\n nextChildren,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n break;\n case ChildFlags.HasInvalidChildren:\n clearDOM(parentDOM, lastChildren, animations);\n break;\n default:\n clearDOM(parentDOM, lastChildren, animations);\n mountArrayChildren(\n nextChildren,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n break;\n }\n break;\n default:\n switch (nextChildFlags) {\n case ChildFlags.HasTextChildren:\n unmountAllChildren(lastChildren, animations);\n setTextContent(parentDOM, nextChildren);\n break;\n case ChildFlags.HasVNodeChildren:\n removeAllChildren(parentDOM, parentVNode, lastChildren, animations);\n mount(\n nextChildren,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n break;\n case ChildFlags.HasInvalidChildren:\n removeAllChildren(parentDOM, parentVNode, lastChildren, animations);\n break;\n default:\n commonChildrenSwitch(\n lastChildren,\n nextChildren,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n parentVNode,\n nextChildFlags,\n lastChildFlags,\n );\n break;\n }\n break;\n }\n}\n\nfunction createDidUpdate(\n instance: Component,\n lastProps,\n lastState,\n snapshot,\n lifecycle: Array<() => void>,\n): void {\n lifecycle.push(() => {\n instance.componentDidUpdate!(lastProps, lastState, snapshot);\n });\n}\n\nexport function updateClassComponent(\n instance,\n nextState,\n nextProps,\n parentDOM: Element,\n context,\n isSVG: boolean,\n force: boolean,\n nextNode: Element | null,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n const lastState = instance.state;\n const lastProps = instance.props;\n const usesNewAPI = Boolean(instance.$N);\n const hasSCU = isFunction(instance.shouldComponentUpdate);\n\n if (usesNewAPI) {\n nextState = createDerivedState(\n instance,\n nextProps,\n nextState !== lastState ? { ...lastState, ...nextState } : nextState,\n );\n }\n\n if (\n force ||\n !hasSCU ||\n (hasSCU && instance.shouldComponentUpdate(nextProps, nextState, context))\n ) {\n if (!usesNewAPI && isFunction(instance.componentWillUpdate)) {\n instance.componentWillUpdate(nextProps, nextState, context);\n }\n\n instance.props = nextProps;\n instance.state = nextState;\n instance.context = context;\n let snapshot = null;\n const nextInput = renderNewInput(instance, nextProps, context);\n\n if (usesNewAPI && isFunction(instance.getSnapshotBeforeUpdate)) {\n snapshot = instance.getSnapshotBeforeUpdate(lastProps, lastState);\n }\n\n patch(\n instance.$LI,\n nextInput,\n parentDOM,\n instance.$CX,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n\n // Don't update Last input, until patch has been successfully executed\n instance.$LI = nextInput;\n\n if (isFunction(instance.componentDidUpdate)) {\n createDidUpdate(instance, lastProps, lastState, snapshot, lifecycle);\n }\n } else {\n instance.props = nextProps;\n instance.state = nextState;\n instance.context = context;\n }\n}\n\nfunction patchClassComponent(\n lastVNode,\n nextVNode,\n parentDOM,\n context,\n isSVG: boolean,\n nextNode: Element | null,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n const instance = (nextVNode.children = lastVNode.children);\n // If Component has crashed, ignore it to stay functional\n if (isNull(instance)) {\n return;\n }\n\n instance.$L = lifecycle;\n const nextProps = nextVNode.props || EMPTY_OBJ;\n const nextRef = nextVNode.ref;\n const lastRef = lastVNode.ref;\n let nextState = instance.state;\n\n if (!instance.$N) {\n if (isFunction(instance.componentWillReceiveProps)) {\n instance.$BR = true;\n instance.componentWillReceiveProps(nextProps, context);\n // If instance component was removed during its own update do nothing.\n if (instance.$UN) {\n return;\n }\n instance.$BR = false;\n }\n if (!isNull(instance.$PS)) {\n nextState = { ...nextState, ...instance.$PS };\n instance.$PS = null;\n }\n }\n\n updateClassComponent(\n instance,\n nextState,\n nextProps,\n parentDOM,\n context,\n isSVG,\n false,\n nextNode,\n lifecycle,\n animations,\n );\n\n if (lastRef !== nextRef) {\n unmountRef(lastRef);\n mountRef(nextRef, instance, lifecycle);\n }\n}\n\nfunction patchFunctionalComponent(\n lastVNode,\n nextVNode,\n parentDOM,\n context,\n isSVG: boolean,\n nextNode: Element | null,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n let shouldUpdate: boolean = true;\n const nextProps = nextVNode.props || EMPTY_OBJ;\n const nextRef = nextVNode.ref;\n const lastProps = lastVNode.props;\n const nextHooksDefined = !isNullOrUndef(nextRef);\n const lastInput = lastVNode.children;\n\n if (nextHooksDefined && isFunction(nextRef.onComponentShouldUpdate)) {\n shouldUpdate = nextRef.onComponentShouldUpdate(lastProps, nextProps);\n }\n\n if (shouldUpdate) {\n if (nextHooksDefined && isFunction(nextRef.onComponentWillUpdate)) {\n nextRef.onComponentWillUpdate(lastProps, nextProps);\n }\n const nextInput = normalizeRoot(\n renderFunctionalComponent(nextVNode, context),\n );\n\n patch(\n lastInput,\n nextInput,\n parentDOM,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n nextVNode.children = nextInput;\n if (nextHooksDefined && isFunction(nextRef.onComponentDidUpdate)) {\n nextRef.onComponentDidUpdate(lastProps, nextProps);\n }\n } else {\n nextVNode.children = lastInput;\n }\n}\n\nfunction patchText(lastVNode: VNode, nextVNode: VNode): void {\n const nextText = nextVNode.children as string;\n const dom = (nextVNode.dom = lastVNode.dom);\n\n if (nextText !== lastVNode.children) {\n (dom as Element).nodeValue = nextText;\n }\n}\n\nfunction patchNonKeyedChildren(\n lastChildren,\n nextChildren,\n dom,\n context: ContextObject,\n isSVG: boolean,\n lastChildrenLength: number,\n nextChildrenLength: number,\n nextNode: Element | null,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n const commonLength =\n lastChildrenLength > nextChildrenLength\n ? nextChildrenLength\n : lastChildrenLength;\n let i = 0;\n let nextChild;\n let lastChild;\n\n for (; i < commonLength; ++i) {\n nextChild = nextChildren[i];\n lastChild = lastChildren[i];\n\n if (nextChild.flags & VNodeFlags.InUse) {\n nextChild = nextChildren[i] = directClone(nextChild);\n }\n\n patch(\n lastChild,\n nextChild,\n dom,\n context,\n isSVG,\n nextNode,\n lifecycle,\n animations,\n );\n lastChildren[i] = nextChild;\n }\n if (lastChildrenLength < nextChildrenLength) {\n for (i = commonLength; i < nextChildrenLength; ++i) {\n nextChild = nextChildren[i];\n\n if (nextChild.flags & VNodeFlags.InUse) {\n nextChild = nextChildren[i] = directClone(nextChild);\n }\n mount(nextChild, dom, context, isSVG, nextNode, lifecycle, animations);\n }\n } else if (lastChildrenLength > nextChildrenLength) {\n for (i = commonLength; i < lastChildrenLength; ++i) {\n remove(lastChildren[i], dom, animations);\n }\n }\n}\n\nfunction patchKeyedChildren(\n a: VNode[],\n b: VNode[],\n dom,\n context,\n isSVG: boolean,\n aLength: number,\n bLength: number,\n outerEdge: Element | null,\n parentVNode: VNode,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n let aEnd = aLength - 1;\n let bEnd = bLength - 1;\n let j: number = 0;\n let aNode: VNode = a[j];\n let bNode: VNode = b[j];\n let nextPos: number;\n let nextNode;\n\n // Step 1\n outer: {\n // Sync nodes with the same key at the beginning.\n while (aNode.key === bNode.key) {\n if (bNode.flags & VNodeFlags.InUse) {\n b[j] = bNode = directClone(bNode);\n }\n patch(\n aNode,\n bNode,\n dom,\n context,\n isSVG,\n outerEdge,\n lifecycle,\n animations,\n );\n a[j] = bNode;\n ++j;\n if (j > aEnd || j > bEnd) {\n break outer;\n }\n aNode = a[j];\n bNode = b[j];\n }\n\n aNode = a[aEnd];\n bNode = b[bEnd];\n\n // Sync nodes with the same key at the end.\n while (aNode.key === bNode.key) {\n if (bNode.flags & VNodeFlags.InUse) {\n b[bEnd] = bNode = directClone(bNode);\n }\n patch(\n aNode,\n bNode,\n dom,\n context,\n isSVG,\n outerEdge,\n lifecycle,\n animations,\n );\n a[aEnd] = bNode;\n aEnd--;\n bEnd--;\n if (j > aEnd || j > bEnd) {\n break outer;\n }\n aNode = a[aEnd];\n bNode = b[bEnd];\n }\n }\n\n if (j > aEnd) {\n if (j <= bEnd) {\n nextPos = bEnd + 1;\n nextNode =\n nextPos < bLength ? findDOMFromVNode(b[nextPos], true) : outerEdge;\n\n while (j <= bEnd) {\n bNode = b[j];\n if (bNode.flags & VNodeFlags.InUse) {\n b[j] = bNode = directClone(bNode);\n }\n ++j;\n mount(bNode, dom, context, isSVG, nextNode, lifecycle, animations);\n }\n }\n } else if (j > bEnd) {\n while (j <= aEnd) {\n remove(a[j++], dom, animations);\n }\n } else {\n patchKeyedChildrenComplex(\n a,\n b,\n context,\n aLength,\n bLength,\n aEnd,\n bEnd,\n j,\n dom,\n isSVG,\n outerEdge,\n parentVNode,\n lifecycle,\n animations,\n );\n }\n}\n\nfunction patchKeyedChildrenComplex(\n a: VNode[],\n b: VNode[],\n context,\n aLength: number,\n bLength: number,\n aEnd: number,\n bEnd: number,\n j: number,\n dom: Element,\n isSVG: boolean,\n outerEdge: Element | null,\n parentVNode: VNode,\n lifecycle: Array<() => void>,\n animations: AnimationQueues,\n): void {\n let aNode: VNode;\n let bNode: VNode;\n // eslint-disable-next-line no-useless-assignment\n let nextPos: number = 0;\n // eslint-disable-next-line no-useless-assignment\n let i: number = 0;\n let aStart: number = j;\n const bStart: number = j;\n const aLeft: number = aEnd - j + 1;\n const bLeft: number = bEnd - j + 1;\n const sources = new Int32Array(bLeft + 1);\n // Keep track if it is possible to remove whole DOM using textContent = '';\n let canRemoveWholeContent: boolean = aLeft === aLength;\n let moved: boolean = false;\n let pos: number = 0;\n let patched: number = 0;\n\n // When sizes are small, just loop them through\n if (bLength < 4 || (aLeft | bLeft) < 32) {\n for (i = aStart; i <= aEnd; ++i) {\n aNode = a[i];\n if (patched < bLeft) {\n for (j = bStart; j <= bEnd; j++) {\n bNode = b[j];\n if (aNode.key === bNode.key) {\n sources[j - bStart] = i + 1;\n if (canRemoveWholeContent) {\n canRemoveWholeContent = false;\n while (aStart < i) {\n remove(a[aStart++], dom, animations);\n }\n }\n if (pos > j) {\n moved = true;\n } else {\n pos = j;\n }\n if (bNode.flags & VNodeFlags.InUse) {\n b[j] = bNode = directClone(bNode);\n }\n patch(\n aNode,\n bNode,\n dom,\n context,\n isSVG,\n outerEdge,\n lifecycle,\n animations,\n );\n ++patched;\n break;\n }\n }\n if (!canRemoveWholeContent && j > bEnd) {\n remove(aNode, dom, animations);\n }\n } else if (!canRemoveWholeContent) {\n remove(aNode, dom, animations);\n }\n }\n } else {\n const keyIndex: Record = {};\n\n // Map keys by their index\n for (i = bStart; i <= bEnd; ++i) {\n keyIndex[b[i].key as string | number] = i;\n }\n\n // Try to patch same keys\n for (i = aStart; i <= aEnd; ++i) {\n aNode = a[i];\n\n if (patched < bLeft) {\n j = keyIndex[aNode.key as string | number];\n\n if (j !== void 0) {\n if (canRemoveWholeContent) {\n canRemoveWholeContent = false;\n while (i > aStart) {\n remove(a[aStart++], dom, animations);\n }\n }\n sources[j - bStart] = i + 1;\n if (pos > j) {\n moved = true;\n } else {\n pos = j;\n }\n bNode = b[j];\n if (bNode.flags & VNodeFlags.InUse) {\n b[j] = bNode = directClone(bNode);\n }\n patch(\n aNode,\n bNode,\n dom,\n context,\n isSVG,\n outerEdge,\n lifecycle,\n animations,\n );\n ++patched;\n } else if (!canRemoveWholeContent) {\n remove(aNode, dom, animations);\n }\n } else if (!canRemoveWholeContent) {\n remove(aNode, dom, animations);\n }\n }\n }\n // fast-path: if nothing patched remove all old and add all new\n if (canRemoveWholeContent) {\n removeAllChildren(dom, parentVNode, a, animations);\n mountArrayChildren(\n b,\n dom,\n context,\n isSVG,\n outerEdge,\n lifecycle,\n animations,\n );\n } else if (moved) {\n const seq = lisAlgorithm(sources);\n j = seq.length - 1;\n for (i = bLeft - 1; i >= 0; i--) {\n if (sources[i] === 0) {\n pos = i + bStart;\n bNode = b[pos];\n if (bNode.flags & VNodeFlags.InUse) {\n b[pos] = bNode = directClone(bNode);\n }\n nextPos = pos + 1;\n mount(\n bNode,\n dom,\n context,\n isSVG,\n nextPos < bLength ? findDOMFromVNode(b[nextPos], true) : outerEdge,\n lifecycle,\n animations,\n );\n } else if (j < 0 || i !== seq[j]) {\n pos = i + bStart;\n bNode = b[pos];\n nextPos = pos + 1;\n\n // --- the DOM-node is moved by a call to insertAppend\n moveVNodeDOM(\n parentVNode,\n bNode,\n dom,\n nextPos < bLength ? findDOMFromVNode(b[nextPos], true) : outerEdge,\n animations,\n );\n } else {\n j--;\n }\n }\n // Invoke move animations when all moves have been calculated\n if (animations.componentWillMove.length > 0) {\n callAllMoveAnimationHooks(animations.componentWillMove);\n }\n } else if (patched !== bLeft) {\n // when patched count doesn't match b length we need to insert those new ones\n // loop backwards so we can use insertBefore\n for (i = bLeft - 1; i >= 0; i--) {\n if (sources[i] === 0) {\n pos = i + bStart;\n bNode = b[pos];\n if (bNode.flags & VNodeFlags.InUse) {\n b[pos] = bNode = directClone(bNode);\n }\n nextPos = pos + 1;\n mount(\n bNode,\n dom,\n context,\n isSVG,\n nextPos < bLength ? findDOMFromVNode(b[nextPos], true) : outerEdge,\n lifecycle,\n animations,\n );\n }\n }\n }\n}\n\nlet result: Int32Array;\nlet p: Int32Array;\nlet maxLen = 0;\n// https://en.wikipedia.org/wiki/Longest_increasing_subsequence\n\nfunction lisAlgorithm(arr: Int32Array): Int32Array {\n // Assigning number here tells JIT that these variables are numbers\n /* eslint-disable no-useless-assignment */\n let arrI = 0;\n let i = 0;\n let j = 0;\n let k = 0;\n let u = 0;\n let v = 0;\n let c = 0;\n const len = arr.length;\n /* eslint-enable no-useless-assignment */\n\n if (len > maxLen) {\n maxLen = len;\n result = new Int32Array(len);\n p = new Int32Array(len);\n }\n\n for (; i < len; ++i) {\n arrI = arr[i];\n\n if (arrI !== 0) {\n j = result[k];\n if (arr[j] < arrI) {\n p[i] = j;\n result[++k] = i;\n continue;\n }\n\n u = 0;\n v = k;\n\n while (u < v) {\n c = (u + v) >> 1;\n if (arr[result[c]] < arrI) {\n u = c + 1;\n } else {\n v = c;\n }\n }\n\n if (arrI < arr[result[u]]) {\n if (u > 0) {\n p[i] = result[u - 1];\n }\n result[u] = i;\n }\n }\n }\n\n u = k + 1;\n const seq = new Int32Array(u);\n v = result[u - 1];\n\n while (u-- > 0) {\n seq[u] = v;\n v = p[v];\n result[u] = 0;\n }\n\n return seq;\n}\n" }, { "path": "packages/inferno/src/DOM/props.ts", "content": "import type { VNode } from '../core/types';\nimport { namespaces } from './constants';\nimport { isNull, isNullOrUndef, isString, warning } from 'inferno-shared';\nimport { handleSyntheticEvent, syntheticEvents } from './events/delegation';\nimport { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';\nimport { isSameInnerHTML } from './utils/innerHTML';\nimport {\n type AnimationQueues,\n isLastValueSameLinkEvent,\n normalizeEventName,\n} from './utils/common';\nimport {\n addFormElementEventHandlers,\n isControlledFormElement,\n processElement,\n} from './wrappers/processElement';\nimport { unmount, unmountAllChildren } from './unmounting';\nimport { attachEvent } from './events/attachEvent';\nimport { isLinkEventObject } from './events/linkEvent';\n\nfunction wrapLinkEvent(nextValue): (e) => void {\n // This variable makes sure there is no \"this\" context in callback\n const ev = nextValue.event;\n\n return function (e): void {\n ev(nextValue.data, e);\n };\n}\n\nexport function patchEvent(name: string, lastValue, nextValue, dom): void {\n if (isLinkEventObject(nextValue)) {\n if (isLastValueSameLinkEvent(lastValue, nextValue)) {\n return;\n }\n nextValue = wrapLinkEvent(nextValue);\n }\n attachEvent(dom, normalizeEventName(name), nextValue);\n}\n\n// We are assuming here that we come from patchProp routine\n// -nextAttrValue cannot be null or undefined\nfunction patchStyle(lastAttrValue, nextAttrValue, dom): void {\n if (isNullOrUndef(nextAttrValue)) {\n dom.removeAttribute('style');\n return;\n }\n const domStyle = dom.style;\n let style;\n let value;\n if (isString(nextAttrValue)) {\n domStyle.cssText = nextAttrValue;\n return;\n }\n\n if (!isNullOrUndef(lastAttrValue) && !isString(lastAttrValue)) {\n for (style in nextAttrValue) {\n // do not add a hasOwnProperty check here, it affects performance\n value = nextAttrValue[style];\n if (value !== lastAttrValue[style]) {\n domStyle.setProperty(style, value);\n }\n }\n\n for (style in lastAttrValue) {\n if (isNullOrUndef(nextAttrValue[style])) {\n domStyle.removeProperty(style);\n }\n }\n } else {\n for (style in nextAttrValue) {\n value = nextAttrValue[style];\n domStyle.setProperty(style, value);\n }\n }\n}\n\nfunction patchDangerInnerHTML(\n lastValue,\n nextValue,\n lastVNode,\n dom,\n animations: AnimationQueues,\n): void {\n const lastHtml = lastValue?.__html || '';\n const nextHtml = nextValue?.__html || '';\n\n if (lastHtml !== nextHtml) {\n if (!isNullOrUndef(nextHtml) && !isSameInnerHTML(dom, nextHtml)) {\n if (!isNull(lastVNode)) {\n if (lastVNode.childFlags & ChildFlags.MultipleChildren) {\n unmountAllChildren(lastVNode.children as VNode[], animations);\n } else if (lastVNode.childFlags === ChildFlags.HasVNodeChildren) {\n unmount(lastVNode.children, animations);\n }\n lastVNode.children = null;\n lastVNode.childFlags = ChildFlags.HasInvalidChildren;\n }\n dom.innerHTML = nextHtml;\n }\n }\n}\n\nfunction patchDomProp(nextValue: unknown, dom: Element, prop: string): void {\n const value = isNullOrUndef(nextValue) ? '' : nextValue;\n if (dom[prop] !== value) {\n dom[prop] = value;\n }\n}\n\nexport function patchProp(\n prop: string,\n lastValue: any,\n nextValue: any,\n dom: Element,\n isSVG: boolean,\n hasControlledValue: boolean,\n lastVNode: VNode | null,\n animations: AnimationQueues,\n): void {\n switch (prop) {\n case 'children':\n case 'childrenType':\n case 'className':\n case 'defaultValue':\n case 'key':\n case 'multiple':\n case 'ref':\n case 'selectedIndex':\n break;\n case 'autoFocus':\n (dom as any).autofocus = !!nextValue;\n break;\n case 'allowfullscreen':\n case 'autoplay':\n case 'capture':\n case 'checked':\n case 'controls':\n case 'default':\n case 'disabled':\n case 'hidden':\n case 'indeterminate':\n case 'loop':\n case 'muted':\n case 'novalidate':\n case 'open':\n case 'readOnly':\n case 'required':\n case 'reversed':\n case 'scoped':\n case 'seamless':\n case 'selected':\n dom[prop] = !!nextValue;\n break;\n case 'defaultChecked':\n case 'value':\n case 'volume':\n if (hasControlledValue && prop === 'value') {\n break;\n }\n patchDomProp(nextValue, dom, prop);\n break;\n case 'style':\n patchStyle(lastValue, nextValue, dom);\n break;\n case 'dangerouslySetInnerHTML':\n patchDangerInnerHTML(lastValue, nextValue, lastVNode, dom, animations);\n break;\n default:\n if (syntheticEvents[prop]) {\n handleSyntheticEvent(prop, lastValue, nextValue, dom);\n } else if (prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110) {\n patchEvent(prop, lastValue, nextValue, dom);\n } else if (isNullOrUndef(nextValue)) {\n dom.removeAttribute(prop);\n } else if (isSVG && namespaces[prop]) {\n // We optimize for isSVG being false\n // If we end up in this path we can read property again\n dom.setAttributeNS(namespaces[prop], prop, nextValue);\n } else {\n if (process.env.NODE_ENV !== 'production') {\n if (\n prop === 'href' &&\n isString(nextValue) &&\n nextValue.startsWith('javascript:')\n ) {\n warning(\n 'Rendering links with javascript: URLs is not recommended. Use event handlers instead if you can. Inferno was passed \"' +\n nextValue +\n '\".',\n );\n }\n }\n dom.setAttribute(prop, nextValue);\n }\n break;\n }\n}\n\nexport function mountProps(\n vNode,\n flags,\n props,\n dom,\n isSVG,\n animations: AnimationQueues,\n): void {\n let hasControlledValue: boolean = false;\n const isFormElement = (flags & VNodeFlags.FormElement) > 0;\n if (isFormElement) {\n hasControlledValue = isControlledFormElement(props);\n if (hasControlledValue) {\n addFormElementEventHandlers(flags, dom, props);\n }\n }\n for (const prop in props) {\n // do not add a hasOwnProperty check here, it affects performance\n patchProp(\n prop,\n null,\n props[prop],\n dom,\n isSVG,\n hasControlledValue,\n null,\n animations,\n );\n }\n if (isFormElement) {\n processElement(flags, vNode, dom, props, true, hasControlledValue);\n }\n}\n" }, { "path": "packages/inferno/src/DOM/rendering.ts", "content": "import type {\n InfernoNode,\n VNode,\n ContextObject,\n ParentDOM,\n} from '../core/types';\nimport {\n isFunction,\n isInvalid,\n isNullOrUndef,\n throwError,\n warning,\n} from 'inferno-shared';\nimport { VNodeFlags } from 'inferno-vnode-flags';\nimport { directClone } from '../core/implementation';\nimport { mount } from './mounting';\nimport { patch } from './patching';\nimport { remove } from './unmounting';\nimport {\n AnimationQueues,\n callAll,\n callAllAnimationHooks,\n EMPTY_OBJ,\n renderCheck,\n} from './utils/common';\nimport { type DelegateEventTypes } from './events/delegation';\n\nconst hasDocumentAvailable: boolean = typeof document !== 'undefined';\n\nif (process.env.NODE_ENV !== 'production') {\n if (hasDocumentAvailable && !document.body) {\n warning(\n 'Inferno warning: you cannot initialize inferno without \"document.body\". Wait on \"DOMContentLoaded\" event, add script to bottom of body, or use async/defer attributes on script tag.',\n );\n }\n}\n\nlet documentBody: HTMLElement | null = null;\n\nif (hasDocumentAvailable) {\n documentBody = document.body;\n /*\n * Defining $EV and $V properties on Node.prototype\n * fixes v8 \"wrong map\" de-optimization\n */\n\n if (window.Node) {\n (Node.prototype as any).$EV = null as DelegateEventTypes | null;\n (Node.prototype as any).$V = null as DelegateEventTypes | null;\n }\n}\n\n// noinspection JSUnusedAssignment\nexport function renderInternal(\n input: VNode | InfernoNode,\n parentDOM: ParentDOM,\n callback: (() => void) | null,\n context: ContextObject,\n): void {\n // Development warning\n if (process.env.NODE_ENV !== 'production') {\n if (documentBody === parentDOM) {\n throwError(\n 'you cannot render() to the \"document.body\". Use an empty element as a container instead.',\n );\n }\n if (isInvalid(parentDOM)) {\n throwError(\n `render target ( DOM ) is mandatory, received ${\n parentDOM === null ? 'null' : typeof parentDOM\n }`,\n );\n }\n }\n const lifecycle: Array<() => void> = [];\n const animations: AnimationQueues = new AnimationQueues();\n const rootInput = (parentDOM as any).$V as VNode | null;\n\n renderCheck.v = true;\n\n if (isNullOrUndef(rootInput)) {\n if (!isNullOrUndef(input)) {\n if (((input as VNode).flags & VNodeFlags.InUse) !== 0) {\n input = directClone(input as VNode);\n }\n mount(\n input as VNode,\n parentDOM as Element,\n context,\n false,\n null,\n lifecycle,\n animations,\n );\n (parentDOM as any).$V = input;\n }\n } else {\n if (isNullOrUndef(input)) {\n remove(rootInput, parentDOM as Element, animations);\n (parentDOM as any).$V = null;\n } else {\n if ((input as VNode).flags & VNodeFlags.InUse) {\n input = directClone(input as VNode);\n }\n patch(\n rootInput,\n input as VNode,\n parentDOM as Element,\n context,\n false,\n null,\n lifecycle,\n animations,\n );\n (parentDOM as any).$V = input as VNode;\n }\n }\n callAll(lifecycle);\n callAllAnimationHooks(animations.componentDidAppear);\n\n renderCheck.v = false;\n if (isFunction(callback)) {\n callback();\n }\n}\n\nexport function render(\n input: VNode | InfernoNode,\n parentDOM: ParentDOM,\n callback: (() => void) | null = null,\n context: ContextObject = EMPTY_OBJ,\n): void {\n renderInternal(input, parentDOM, callback, context);\n}\n\nexport function createRenderer(parentDOM?: ParentDOM) {\n return function renderer(lastInput, nextInput, callback, context) {\n if (!parentDOM) {\n parentDOM = lastInput;\n }\n render(nextInput, parentDOM as ParentDOM, callback, context);\n };\n}\n" }, { "path": "packages/inferno/src/DOM/unmounting.ts", "content": "import type { VNode } from '../core/types';\nimport { isFunction, isNull, isNullOrUndef } from 'inferno-shared';\nimport { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';\nimport { syntheticEvents, unmountSyntheticEvent } from './events/delegation';\nimport {\n AnimationQueues,\n callAllAnimationHooks,\n clearVNodeDOM,\n EMPTY_OBJ,\n findDOMFromVNode,\n removeVNodeDOM,\n} from './utils/common';\nimport { unmountRef } from '../core/refs';\n\nexport function remove(\n vNode: VNode,\n parentDOM: Element,\n animations: AnimationQueues,\n): void {\n unmount(vNode, animations);\n removeVNodeDOM(vNode, parentDOM, animations);\n}\n\nexport function unmount(vNode, animations: AnimationQueues): void {\n const flags = vNode.flags;\n const children = vNode.children;\n let ref;\n\n if ((flags & VNodeFlags.Element) !== 0) {\n ref = vNode.ref;\n const props = vNode.props;\n\n unmountRef(ref);\n\n const childFlags = vNode.childFlags;\n\n if (!isNull(props)) {\n const keys = Object.keys(props);\n\n for (let i = 0, len = keys.length; i < len; i++) {\n const key = keys[i];\n if (syntheticEvents[key]) {\n unmountSyntheticEvent(key, vNode.dom);\n }\n }\n }\n\n if (childFlags & ChildFlags.MultipleChildren) {\n unmountAllChildren(children, animations);\n } else if (childFlags === ChildFlags.HasVNodeChildren) {\n unmount(children as VNode, animations);\n }\n } else if (children) {\n if (flags & VNodeFlags.ComponentClass) {\n if (isFunction(children.componentWillUnmount)) {\n // TODO: Possible entrypoint\n children.componentWillUnmount();\n }\n\n // If we have a componentWillDisappear on this component, block children from animating\n let childAnimations = animations;\n if (isFunction(children.componentWillDisappear)) {\n childAnimations = new AnimationQueues();\n addDisappearAnimationHook(\n animations,\n children,\n children.$LI.dom,\n flags,\n undefined,\n );\n }\n\n unmountRef(vNode.ref);\n children.$UN = true;\n unmount(children.$LI, childAnimations);\n } else if (flags & VNodeFlags.ComponentFunction) {\n // If we have a onComponentWillDisappear on this component, block children from animating\n let childAnimations = animations;\n ref = vNode.ref;\n if (!isNullOrUndef(ref)) {\n let domEl: Element | null = null;\n\n if (isFunction(ref.onComponentWillUnmount)) {\n domEl = findDOMFromVNode(vNode, true);\n ref.onComponentWillUnmount(domEl, vNode.props || EMPTY_OBJ);\n }\n if (isFunction(ref.onComponentWillDisappear)) {\n childAnimations = new AnimationQueues();\n domEl = domEl || findDOMFromVNode(vNode, true);\n addDisappearAnimationHook(\n animations,\n ref,\n domEl as Element,\n flags,\n vNode.props,\n );\n }\n }\n unmount(children, childAnimations);\n } else if (flags & VNodeFlags.Portal) {\n remove(children as VNode, vNode.ref, animations);\n } else if (flags & VNodeFlags.Fragment) {\n if (vNode.childFlags & ChildFlags.MultipleChildren) {\n unmountAllChildren(children, animations);\n }\n }\n }\n}\n\nexport function unmountAllChildren(\n children: VNode[],\n animations: AnimationQueues,\n): void {\n for (let i = 0, len = children.length; i < len; ++i) {\n unmount(children[i], animations);\n }\n}\n\nfunction createClearAllCallback(children, parentDOM) {\n return function () {\n // We need to remove children one by one because elements can be added during animation\n if (parentDOM) {\n for (let i = 0; i < children.length; i++) {\n const vNode = children[i];\n clearVNodeDOM(vNode, parentDOM, false);\n }\n }\n };\n}\nexport function clearDOM(\n parentDOM,\n children: VNode[],\n animations: AnimationQueues,\n): void {\n if (animations.componentWillDisappear.length > 0) {\n // Wait until animations are finished before removing actual dom nodes\n // Be aware that the element could be removed by a later operation\n callAllAnimationHooks(\n animations.componentWillDisappear,\n createClearAllCallback(children, parentDOM),\n );\n } else {\n // Optimization for clearing dom\n parentDOM.textContent = '';\n }\n}\n\nexport function removeAllChildren(\n dom: Element,\n vNode: VNode,\n children,\n animations: AnimationQueues,\n): void {\n unmountAllChildren(children, animations);\n\n if (vNode.flags & VNodeFlags.Fragment) {\n removeVNodeDOM(vNode, dom, animations);\n } else {\n clearDOM(dom, children, animations);\n }\n}\n\n// Only add animations to queue in browser\nfunction addDisappearAnimationHook(\n animations: AnimationQueues,\n instanceOrRef,\n dom: Element,\n flags: VNodeFlags,\n props,\n): void {\n // @ts-expect-error TODO: Here is something weird check this behavior\n animations.componentWillDisappear.push((callback) => {\n if (flags & VNodeFlags.ComponentClass) {\n instanceOrRef.componentWillDisappear(dom, callback);\n } else if (flags & VNodeFlags.ComponentFunction) {\n instanceOrRef.onComponentWillDisappear(dom, props, callback);\n }\n });\n}\n" }, { "path": "packages/inferno/src/DOM/utils/common.ts", "content": "import type {\n Inferno,\n InfernoNode,\n LinkedEvent,\n VNode,\n} from './../../core/types';\nimport { isFunction, isNull, isNullOrUndef, isUndefined } from 'inferno-shared';\nimport { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';\nimport { isLinkEventObject } from '../events/linkEvent';\n\n// We need EMPTY_OBJ defined in one place.\n// It's used for comparison, so we can't inline it into shared\nexport const EMPTY_OBJ = {};\n\n// @ts-expect-error hack for fragment type\nexport const Fragment: Inferno.ExoticComponent<{ children?: InfernoNode }> =\n '$F';\n\nexport interface MoveQueueItem {\n parent: Element;\n dom: Element;\n next: Element;\n fn: () => void;\n}\n\nexport class AnimationQueues {\n public componentDidAppear: Array<() => void> = [];\n public componentWillDisappear: Array<() => void> = [];\n public componentWillMove: MoveQueueItem[] = [];\n}\n\nif (process.env.NODE_ENV !== 'production') {\n Object.freeze(EMPTY_OBJ);\n}\n\nexport function normalizeEventName(name): keyof DocumentEventMap {\n return name.substring(2).toLowerCase();\n}\n\nexport function appendChild(parentDOM, dom): void {\n parentDOM.appendChild(dom);\n}\n\nexport function insertOrAppend(parentDOM: Element, newNode, nextNode): void {\n if (isNull(nextNode)) {\n appendChild(parentDOM, newNode);\n } else {\n parentDOM.insertBefore(newNode, nextNode);\n }\n}\n\nexport function documentCreateElement(tag, isSVG: boolean): Element {\n if (isSVG) {\n return document.createElementNS('http://www.w3.org/2000/svg', tag);\n }\n\n return document.createElement(tag);\n}\n\nexport function replaceChild(parentDOM: Element, newDom, lastDom): void {\n parentDOM.replaceChild(newDom, lastDom);\n}\n\nexport function removeChild(parentDOM: Element, childNode: Element): void {\n parentDOM.removeChild(childNode);\n}\n\nexport function callAll(arrayFn: Array<() => void>): void {\n for (let i = 0; i < arrayFn.length; i++) {\n arrayFn[i]();\n }\n}\n\nfunction findChildVNode(\n vNode: VNode,\n startEdge: boolean,\n flags: VNodeFlags,\n): InfernoNode {\n const children = vNode.children;\n\n if ((flags & VNodeFlags.ComponentClass) !== 0) {\n return (children as any).$LI;\n }\n\n if ((flags & VNodeFlags.Fragment) !== 0) {\n return vNode.childFlags === ChildFlags.HasVNodeChildren\n ? (children as VNode)\n : (children as VNode[])[startEdge ? 0 : (children as VNode[]).length - 1];\n }\n\n return children;\n}\n\nexport function findDOMFromVNode(\n vNode: VNode,\n startEdge: boolean,\n): Element | null {\n let flags: VNodeFlags;\n let v: VNode | null = vNode;\n\n while (!isNullOrUndef(v)) {\n flags = v.flags;\n\n if ((flags & VNodeFlags.DOMRef) !== 0) {\n return v.dom;\n }\n\n v = findChildVNode(v, startEdge, flags) as VNode | null;\n }\n\n return null;\n}\n\nexport function callAllAnimationHooks(\n animationQueue: Array<() => void>,\n callback?: () => void,\n): void {\n let animationsLeft: number = animationQueue.length;\n // Picking from the top because it is faster, invocation order should be irrelevant\n // since all animations are to be run, and we can't predict the order in which they complete.\n let fn;\n while ((fn = animationQueue.pop()) !== undefined) {\n fn(() => {\n if (--animationsLeft <= 0 && isFunction(callback)) {\n callback();\n }\n });\n }\n}\n\nexport function callAllMoveAnimationHooks(\n animationQueue: MoveQueueItem[],\n): void {\n // Start the animations.\n for (let i = 0; i < animationQueue.length; i++) {\n animationQueue[i].fn();\n }\n // Perform the actual DOM moves when all measurements of initial\n // position have been performed. The rest of the animations are done\n // async.\n for (let i = 0; i < animationQueue.length; i++) {\n const tmp = animationQueue[i];\n insertOrAppend(tmp.parent, tmp.dom, tmp.next);\n }\n animationQueue.splice(0, animationQueue.length);\n}\n\nexport function clearVNodeDOM(\n vNode: VNode | null,\n parentDOM: Element,\n deferredRemoval: boolean,\n): void {\n while (!isNullOrUndef(vNode)) {\n const flags = vNode.flags;\n\n if ((flags & VNodeFlags.DOMRef) !== 0) {\n // On deferred removals the node might disappear because of later operations\n if (!deferredRemoval || (vNode.dom as Element).parentNode === parentDOM) {\n removeChild(parentDOM, vNode.dom as Element);\n }\n return;\n }\n const children = vNode.children as any;\n\n if ((flags & VNodeFlags.ComponentClass) !== 0) {\n vNode = children.$LI;\n }\n if ((flags & VNodeFlags.ComponentFunction) !== 0) {\n vNode = children;\n }\n if ((flags & VNodeFlags.Fragment) !== 0) {\n if ((vNode as VNode).childFlags === ChildFlags.HasVNodeChildren) {\n vNode = children;\n } else {\n for (let i = 0, len = children.length; i < len; ++i) {\n clearVNodeDOM(children[i], parentDOM, false);\n }\n return;\n }\n }\n }\n}\n\nfunction createDeferComponentClassRemovalCallback(vNode, parentDOM) {\n return function () {\n // Mark removal as deferred to trigger check that node still exists\n clearVNodeDOM(vNode, parentDOM, true);\n };\n}\n\nexport function removeVNodeDOM(\n vNode: VNode,\n parentDOM: Element,\n animations: AnimationQueues,\n): void {\n if (animations.componentWillDisappear.length > 0) {\n // Wait until animations are finished before removing actual dom nodes\n callAllAnimationHooks(\n animations.componentWillDisappear,\n createDeferComponentClassRemovalCallback(vNode, parentDOM),\n );\n } else {\n clearVNodeDOM(vNode, parentDOM, false);\n }\n}\n\nfunction addMoveAnimationHook(\n animations: AnimationQueues,\n parentVNode,\n refOrInstance,\n dom: Element,\n parentDOM: Element,\n nextNode: Element,\n flags,\n props?,\n): void {\n animations.componentWillMove.push({\n dom,\n fn: () => {\n if ((flags & VNodeFlags.ComponentClass) !== 0) {\n refOrInstance.componentWillMove(parentVNode, parentDOM, dom);\n } else if ((flags & VNodeFlags.ComponentFunction) !== 0) {\n refOrInstance.onComponentWillMove(parentVNode, parentDOM, dom, props);\n }\n },\n next: nextNode,\n parent: parentDOM,\n });\n}\n\nexport function moveVNodeDOM(\n parentVNode,\n vNode,\n parentDOM,\n nextNode,\n animations: AnimationQueues,\n): void {\n let refOrInstance;\n let instanceProps;\n const instanceFlags = vNode.flags;\n\n while (!isNullOrUndef(vNode)) {\n const flags = vNode.flags;\n\n if ((flags & VNodeFlags.DOMRef) !== 0) {\n if (\n !isNullOrUndef(refOrInstance) &&\n (isFunction(refOrInstance.componentWillMove) ||\n isFunction(refOrInstance.onComponentWillMove))\n ) {\n addMoveAnimationHook(\n animations,\n parentVNode,\n refOrInstance,\n vNode.dom,\n parentDOM,\n nextNode,\n instanceFlags,\n instanceProps,\n );\n } else {\n // TODO: Should we delay this too to support mixing animated moves with regular?\n insertOrAppend(parentDOM, vNode.dom, nextNode);\n }\n return;\n }\n const children = vNode.children;\n\n if ((flags & VNodeFlags.ComponentClass) !== 0) {\n refOrInstance = vNode.children;\n // TODO: We should probably deprecate this in V9 since it is inconsitent with other class component hooks\n instanceProps = vNode.props;\n vNode = children.$LI;\n } else if ((flags & VNodeFlags.ComponentFunction) !== 0) {\n refOrInstance = vNode.ref;\n instanceProps = vNode.props;\n vNode = children;\n } else if ((flags & VNodeFlags.Fragment) !== 0) {\n if (vNode.childFlags === ChildFlags.HasVNodeChildren) {\n vNode = children;\n } else {\n for (let i = 0, len = children.length; i < len; ++i) {\n moveVNodeDOM(\n parentVNode,\n children[i],\n parentDOM,\n nextNode,\n animations,\n );\n }\n return;\n }\n }\n }\n}\n\nexport function getComponentName(instance: any): string {\n // TODO: Fallback for IE\n return (\n instance.name ??\n instance.displayName ??\n instance.constructor.name ??\n ((instance as any).toString().match(/^function\\s*([^\\s(]+)/) || [])[1]\n );\n}\n\nexport function createDerivedState(\n instance,\n nextProps,\n state: TState,\n): TState {\n if (isFunction(instance.constructor.getDerivedStateFromProps)) {\n return {\n ...state,\n ...instance.constructor.getDerivedStateFromProps(nextProps, state),\n };\n }\n\n return state;\n}\n\nexport const renderCheck = {\n v: false,\n};\n\nexport const options: {\n createVNode: ((vNode: VNode) => void) | null;\n reactStyles?: boolean;\n} = {\n createVNode: null,\n};\n\nexport function setTextContent(dom: Element, children): void {\n dom.textContent = children;\n}\n\n// Calling this function assumes, nextValue is linkEvent\nexport function isLastValueSameLinkEvent(lastValue, nextValue): boolean {\n return (\n isLinkEventObject(lastValue) &&\n lastValue.event === (nextValue as LinkedEvent).event &&\n lastValue.data === (nextValue as LinkedEvent).data\n );\n}\n\nexport function mergeUnsetProperties(\n to: TTo,\n from: TFrom,\n): TTo & TFrom {\n for (const propName in from) {\n // @ts-expect-error merge objects\n if (isUndefined(to[propName])) {\n // @ts-expect-error merge objects\n to[propName] = from[propName];\n }\n }\n\n // @ts-expect-error merge objects\n return to;\n}\n\nexport function safeCall1(\n method: Function | null | undefined,\n arg1: any,\n): boolean {\n return isFunction(method) && (method(arg1), true);\n}\n" }, { "path": "packages/inferno/src/DOM/utils/componentUtil.ts", "content": "import type { ContextObject, InfernoNode, VNode } from './../../core/types';\nimport type { Component } from './../../core/component';\nimport { isFunction, isNull, warning } from 'inferno-shared';\nimport { createDerivedState, EMPTY_OBJ, getComponentName } from './common';\nimport { VNodeFlags } from 'inferno-vnode-flags';\nimport { normalizeRoot } from '../../core/implementation';\n\nfunction warnAboutOldLifecycles(component: any): void {\n const oldLifecycles: string[] = [];\n\n // Don't warn about react polyfilled components.\n if (\n component.componentWillMount &&\n component.componentWillMount.__suppressDeprecationWarning !== true\n ) {\n oldLifecycles.push('componentWillMount');\n }\n\n if (\n component.componentWillReceiveProps &&\n component.componentWillReceiveProps.__suppressDeprecationWarning !== true\n ) {\n oldLifecycles.push('componentWillReceiveProps');\n }\n\n if (\n component.componentWillUpdate &&\n component.componentWillUpdate.__suppressDeprecationWarning !== true\n ) {\n oldLifecycles.push('componentWillUpdate');\n }\n\n if (oldLifecycles.length > 0) {\n warning(`\n Warning: Unsafe legacy lifecycles will not be called for components using new component APIs.\n ${getComponentName(component)} contains the following legacy lifecycles:\n ${oldLifecycles.join('\\n')}\n The above lifecycles should be removed.\n `);\n }\n}\n\nexport function renderNewInput(instance, props, context): VNode {\n const nextInput = normalizeRoot(\n instance.render(props, instance.state, context),\n );\n\n let childContext = context;\n if (isFunction(instance.getChildContext)) {\n childContext = { ...context, ...instance.getChildContext() };\n }\n instance.$CX = childContext;\n\n return nextInput;\n}\n\nexport function createClassComponentInstance(\n vNode: VNode,\n ComponentCtr,\n props,\n context: ContextObject,\n isSVG: boolean,\n lifecycle: Array<() => void>,\n): Component {\n const instance = new ComponentCtr(props, context);\n const usesNewAPI = (instance.$N = Boolean(\n ComponentCtr.getDerivedStateFromProps || instance.getSnapshotBeforeUpdate,\n ));\n\n instance.$SVG = isSVG;\n instance.$L = lifecycle;\n\n if (process.env.NODE_ENV !== 'production') {\n if (instance.getDerivedStateFromProps) {\n warning(\n `${getComponentName(\n instance,\n )} getDerivedStateFromProps() is defined as an instance method and will be ignored. Instead, declare it as a static method.`,\n );\n }\n if (usesNewAPI) {\n warnAboutOldLifecycles(instance);\n }\n }\n\n vNode.children = instance;\n instance.$BS = false;\n instance.context = context;\n if (instance.props === EMPTY_OBJ) {\n instance.props = props;\n }\n if (!usesNewAPI) {\n if (isFunction(instance.componentWillMount)) {\n instance.$BR = true;\n instance.componentWillMount();\n\n const pending = instance.$PS;\n\n if (!isNull(pending)) {\n const state = instance.state;\n\n if (isNull(state)) {\n instance.state = pending;\n } else {\n for (const key in pending) {\n state[key] = pending[key];\n }\n }\n instance.$PS = null;\n }\n\n instance.$BR = false;\n }\n } else {\n instance.state = createDerivedState(instance, props, instance.state);\n }\n\n instance.$LI = renderNewInput(instance, props, context);\n\n return instance;\n}\n\nexport function renderFunctionalComponent(\n vNode: VNode,\n context: ContextObject,\n): InfernoNode {\n const props = vNode.props || EMPTY_OBJ;\n return vNode.flags & VNodeFlags.ForwardRef\n ? vNode.type.render(props, vNode.ref, context)\n : vNode.type(props, context);\n}\n" }, { "path": "packages/inferno/src/DOM/utils/innerHTML.ts", "content": "export function isSameInnerHTML(dom: Element, innerHTML: string): boolean {\n const temp = document.createElement('i');\n\n temp.innerHTML = innerHTML;\n return temp.innerHTML === dom.innerHTML;\n}\n" }, { "path": "packages/inferno/src/DOM/wrappers/InputWrapper.ts", "content": "import { isNullOrUndef } from 'inferno-shared';\nimport { createWrappedFunction } from './wrapper';\nimport { attachEvent } from '../events/attachEvent';\n\nexport function isCheckedType(type): boolean {\n return type === 'checkbox' || type === 'radio';\n}\n\nconst onTextInputChange = createWrappedFunction('onInput', applyValueInput);\n\nconst wrappedOnChange = createWrappedFunction(\n ['onClick', 'onChange'],\n applyValueInput,\n);\n\nfunction stopPropagationWrapper(event) {\n event.stopPropagation();\n}\n(stopPropagationWrapper as any).wrapped = true;\n\nexport function inputEvents(dom, nextPropsOrEmpty): void {\n if (isCheckedType(nextPropsOrEmpty.type)) {\n attachEvent(dom, 'change', wrappedOnChange);\n attachEvent(dom, 'click', stopPropagationWrapper);\n } else {\n attachEvent(dom, 'input', onTextInputChange);\n }\n}\n\nexport function applyValueInput(nextPropsOrEmpty, dom): void {\n const type = nextPropsOrEmpty.type;\n const value = nextPropsOrEmpty.value;\n const checked = nextPropsOrEmpty.checked;\n const multiple = nextPropsOrEmpty.multiple;\n const defaultValue = nextPropsOrEmpty.defaultValue;\n const hasValue = !isNullOrUndef(value);\n\n if (type != null && type !== dom.type) {\n dom.setAttribute('type', type);\n }\n if (!isNullOrUndef(multiple) && multiple !== dom.multiple) {\n dom.multiple = multiple;\n }\n if (!isNullOrUndef(defaultValue) && !hasValue) {\n dom.defaultValue = defaultValue + '';\n }\n if (isCheckedType(type)) {\n if (hasValue) {\n dom.value = value;\n }\n if (!isNullOrUndef(checked)) {\n dom.checked = checked;\n }\n } else {\n if (hasValue && dom.value !== value) {\n dom.defaultValue = value;\n dom.value = value;\n } else if (!isNullOrUndef(checked)) {\n dom.checked = checked;\n }\n }\n}\n" }, { "path": "packages/inferno/src/DOM/wrappers/SelectWrapper.ts", "content": "import { isArray, isNullOrUndef, isNumber } from 'inferno-shared';\nimport { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';\nimport { EMPTY_OBJ } from '../utils/common';\nimport { createWrappedFunction } from './wrapper';\nimport { attachEvent } from '../events/attachEvent';\nimport { type VNode } from '../../core/types';\nimport { type Component } from '../../core/component';\n\nfunction updateChildOptions(vNode: VNode, value): void {\n if (vNode.type === 'option') {\n updateChildOption(vNode, value);\n } else {\n const children = vNode.children;\n const flags = vNode.flags;\n\n if ((flags & VNodeFlags.ComponentClass) !== 0) {\n updateChildOptions((children as Component).$LI, value);\n } else if ((flags & VNodeFlags.ComponentFunction) !== 0) {\n updateChildOptions(children as VNode, value);\n } else if (vNode.childFlags === ChildFlags.HasVNodeChildren) {\n updateChildOptions(children as VNode, value);\n } else if ((vNode.childFlags & ChildFlags.MultipleChildren) !== 0) {\n for (let i = 0, len = (children as VNode[]).length; i < len; ++i) {\n updateChildOptions((children as VNode[])[i], value);\n }\n }\n }\n}\n\nfunction updateChildOption(vNode: VNode, value: unknown): void {\n const props: any = vNode.props ?? EMPTY_OBJ;\n const propsValue = props.value;\n const dom = vNode.dom as any;\n\n // we do this as multiple prop may have changed\n dom.value = propsValue;\n\n if (propsValue === value || (isArray(value) && value.includes(propsValue))) {\n dom.selected = true;\n } else if (!isNullOrUndef(value) || !isNullOrUndef(props.selected)) {\n dom.selected = Boolean(props.selected);\n }\n}\n\nconst onSelectChange = createWrappedFunction('onChange', applyValueSelect);\n\nexport function selectEvents(dom): void {\n attachEvent(dom, 'change', onSelectChange);\n}\n\nexport function applyValueSelect(\n nextPropsOrEmpty,\n dom: any,\n mounting: boolean,\n vNode,\n): void {\n const multiplePropInBoolean = Boolean(nextPropsOrEmpty.multiple);\n if (\n !isNullOrUndef(nextPropsOrEmpty.multiple) &&\n multiplePropInBoolean !== dom.multiple\n ) {\n dom.multiple = multiplePropInBoolean;\n }\n const index = nextPropsOrEmpty.selectedIndex;\n if (index === -1) {\n dom.selectedIndex = -1;\n }\n const childFlags = vNode.childFlags;\n\n if (childFlags !== ChildFlags.HasInvalidChildren) {\n let value = nextPropsOrEmpty.value;\n if (isNumber(index) && index > -1 && !isNullOrUndef(dom.options[index])) {\n value = dom.options[index].value;\n }\n if (mounting && isNullOrUndef(value)) {\n value = nextPropsOrEmpty.defaultValue;\n }\n updateChildOptions(vNode, value);\n }\n}\n" }, { "path": "packages/inferno/src/DOM/wrappers/TextareaWrapper.ts", "content": "import { isFunction, isNullOrUndef } from 'inferno-shared';\nimport { createWrappedFunction } from './wrapper';\nimport { attachEvent } from '../events/attachEvent';\nimport { type NonEmptyProps } from '../../core/types';\n\nconst onTextareaInputChange = createWrappedFunction(\n 'onInput',\n applyValueTextArea,\n);\nconst wrappedOnChange = createWrappedFunction('onChange');\n\nexport function textAreaEvents(dom, nextPropsOrEmpty): void {\n attachEvent(dom, 'input', onTextareaInputChange);\n if (isFunction(nextPropsOrEmpty.onChange)) {\n attachEvent(dom, 'change', wrappedOnChange);\n }\n}\n\nexport function applyValueTextArea(\n nextPropsOrEmpty: NonEmptyProps,\n dom,\n mounting: boolean,\n): void {\n const value = nextPropsOrEmpty.value;\n const domValue = dom.value;\n\n if (isNullOrUndef(value)) {\n if (mounting) {\n const defaultValue = nextPropsOrEmpty.defaultValue;\n\n if (!isNullOrUndef(defaultValue) && defaultValue !== domValue) {\n dom.defaultValue = defaultValue;\n dom.value = defaultValue;\n }\n }\n } else if (domValue !== value) {\n /* There is value so keep it controlled */\n dom.defaultValue = value;\n dom.value = value;\n }\n}\n" }, { "path": "packages/inferno/src/DOM/wrappers/processElement.ts", "content": "import type { VNode } from '../../core/types';\nimport { isNullOrUndef } from 'inferno-shared';\nimport { VNodeFlags } from 'inferno-vnode-flags';\nimport { applyValueInput, inputEvents, isCheckedType } from './InputWrapper';\nimport { applyValueSelect, selectEvents } from './SelectWrapper';\nimport { applyValueTextArea, textAreaEvents } from './TextareaWrapper';\n\nexport function processElement(\n flags: VNodeFlags,\n vNode: VNode,\n dom: Element,\n nextPropsOrEmpty,\n mounting: boolean,\n isControlled: boolean,\n): void {\n if ((flags & VNodeFlags.InputElement) !== 0) {\n applyValueInput(nextPropsOrEmpty, dom);\n } else if ((flags & VNodeFlags.SelectElement) !== 0) {\n applyValueSelect(nextPropsOrEmpty, dom, mounting, vNode);\n } else if ((flags & VNodeFlags.TextareaElement) !== 0) {\n applyValueTextArea(nextPropsOrEmpty, dom, mounting);\n }\n if (isControlled) {\n (dom as any).$V = vNode;\n }\n}\n\nexport function addFormElementEventHandlers(\n flags: VNodeFlags,\n dom: Element,\n nextPropsOrEmpty,\n): void {\n if ((flags & VNodeFlags.InputElement) !== 0) {\n inputEvents(dom, nextPropsOrEmpty);\n } else if ((flags & VNodeFlags.SelectElement) !== 0) {\n selectEvents(dom);\n } else if ((flags & VNodeFlags.TextareaElement) !== 0) {\n textAreaEvents(dom, nextPropsOrEmpty);\n }\n}\n\nexport function isControlledFormElement(nextPropsOrEmpty): boolean {\n return isCheckedType(nextPropsOrEmpty.type)\n ? !isNullOrUndef(nextPropsOrEmpty.checked)\n : !isNullOrUndef(nextPropsOrEmpty.value);\n}\n" }, { "path": "packages/inferno/src/DOM/wrappers/wrapper.ts", "content": "import { isFunction, isNullOrUndef, isString } from 'inferno-shared';\nimport { EMPTY_OBJ } from '../utils/common';\nimport { type NonEmptyProps, type VNode } from '../../core/types';\n\nfunction triggerEventListener(\n props: NonEmptyProps,\n methodName: string,\n e: any,\n): void {\n const listener = props[methodName] as any;\n\n if (listener) {\n if (listener.event) {\n listener.event(listener.data, e);\n } else {\n listener(e);\n }\n } else {\n const nativeListenerName = methodName.toLowerCase();\n\n if (isFunction(props[nativeListenerName])) {\n (props[nativeListenerName] as (e) => void)(e);\n }\n }\n}\n\nexport function createWrappedFunction(\n methodName: string | string[],\n applyValue?: (\n newProps: NonEmptyProps,\n dom: any,\n isMounting: boolean,\n newVNode: VNode,\n ) => void,\n): (e: Event) => void {\n const fnWrapper = function fnWrapper(e: Event): void {\n const vNode = this.$V as VNode;\n // If vNode is gone by the time event fires, no-op\n if (isNullOrUndef(vNode)) {\n return;\n }\n const props = vNode.props ?? EMPTY_OBJ;\n const dom = vNode.dom;\n\n if (isString(methodName)) {\n triggerEventListener(props, methodName, e);\n } else {\n for (let i = 0; i < methodName.length; ++i) {\n triggerEventListener(props, methodName[i], e);\n }\n }\n\n if (isFunction(applyValue)) {\n const newVNode = this.$V;\n const newProps = newVNode.props ?? EMPTY_OBJ;\n\n applyValue(newProps, dom, false, newVNode);\n }\n };\n\n Object.defineProperty(fnWrapper, 'wrapped', {\n configurable: false,\n enumerable: false,\n value: true,\n writable: false,\n });\n\n return fnWrapper;\n}\n" }, { "path": "packages/inferno/src/core/component.ts", "content": "import type { Inferno, InfernoNode, IComponent, VNode } from './types';\nimport { isFunction, isNullOrUndef, throwError } from 'inferno-shared';\nimport { updateClassComponent } from '../DOM/patching';\nimport {\n AnimationQueues,\n callAll,\n callAllAnimationHooks,\n EMPTY_OBJ,\n findDOMFromVNode,\n renderCheck,\n} from '../DOM/utils/common';\n\nconst COMPONENTS_QUEUE: Array> = [];\n\nconst nextTick = Promise.resolve().then.bind(Promise.resolve());\nlet microTaskPending = false;\n\nfunction queueStateChanges(\n component: Component,\n newState: any,\n callback: (() => void) | undefined,\n force: boolean,\n): void {\n const pending = component.$PS;\n\n if (isFunction(newState)) {\n newState = newState(\n pending ? { ...component.state, ...pending } : component.state,\n component.props,\n component.context,\n );\n }\n\n if (isNullOrUndef(pending)) {\n component.$PS = newState;\n } else {\n for (const stateKey in newState) {\n pending[stateKey] = newState[stateKey];\n }\n }\n\n if (!component.$BR) {\n if (!renderCheck.v) {\n if (COMPONENTS_QUEUE.length === 0) {\n applyState(component, force);\n if (isFunction(callback)) {\n callback.call(component);\n }\n return;\n }\n }\n if (!COMPONENTS_QUEUE.includes(component)) {\n COMPONENTS_QUEUE.push(component);\n }\n if (force) {\n component.$F = true;\n }\n if (!microTaskPending) {\n microTaskPending = true;\n nextTick(rerender);\n }\n if (isFunction(callback)) {\n let QU = component.$QU;\n\n if (!QU) {\n QU = component.$QU = [] as Array<() => void>;\n }\n QU.push(callback);\n }\n } else if (isFunction(callback)) {\n (component.$L as Array<() => void>).push(callback.bind(component));\n }\n}\n\nfunction callSetStateCallbacks(component): void {\n const queue = component.$QU;\n\n for (let i = 0; i < queue.length; ++i) {\n queue[i].call(component);\n }\n\n component.$QU = null;\n}\n\nexport function rerender(): void {\n let component: Component | undefined;\n microTaskPending = false;\n\n while ((component = COMPONENTS_QUEUE.shift())) {\n if (!component.$UN) {\n const force = component.$F;\n component.$F = false;\n applyState(component, force);\n\n if (component.$QU) {\n callSetStateCallbacks(component);\n }\n }\n }\n}\n\nfunction applyState(component: Component, force: boolean): void {\n if (force || !component.$BR) {\n const pendingState = component.$PS;\n\n component.$PS = null;\n\n const lifecycle: Array<() => void> = [];\n const animations: AnimationQueues = new AnimationQueues();\n\n renderCheck.v = true;\n\n updateClassComponent(\n component,\n { ...component.state, ...pendingState },\n component.props,\n (findDOMFromVNode(component.$LI, true) as Element).parentNode as Element,\n component.context,\n component.$SVG,\n force,\n null,\n lifecycle,\n animations,\n );\n callAll(lifecycle);\n callAllAnimationHooks(animations.componentDidAppear);\n\n renderCheck.v = false;\n } else {\n component.state = component.$PS as any;\n component.$PS = null;\n }\n}\nexport type ComponentType

> =\n | typeof Component

\n | Inferno.StatelessComponent

;\n\nexport abstract class Component<\n P = Record,\n S = Record,\n> implements IComponent\n{\n // Public\n public state: Readonly = null;\n public props: Readonly<{ children?: InfernoNode }> & Readonly

;\n public context: any;\n public displayName?: string;\n\n // Internal properties\n public $BR: boolean = false; // BLOCK RENDER\n public $BS: boolean = true; // BLOCK STATE\n public $PS: Partial | null = null; // PENDING STATE (PARTIAL or FULL)\n public $LI: any = null; // LAST INPUT\n public $UN: boolean = false; // UNMOUNTED\n public $CX: any = null; // CHILDCONTEXT\n public $QU: Array<() => void> | null = null; // QUEUE\n public $N: boolean = false; // Uses new lifecycle API Flag\n public $SSR?: boolean; // Server side rendering flag, true when rendering on server, non existent on client\n public $L: Array<() => void> | null = null; // Current lifecycle of this component\n public $SVG: boolean = false; // Flag to keep track if component is inside SVG tree\n public $F: boolean = false; // Force update flag\n\n constructor(props?: P, context?: any) {\n this.props = (props || EMPTY_OBJ) as Readonly<{ children?: InfernoNode }> &\n Readonly

;\n this.context = context || EMPTY_OBJ; // context should not be mutable\n }\n\n public forceUpdate(callback?: (() => void) | undefined): void {\n if (this.$UN) {\n return;\n }\n // Do not allow double render during force update\n queueStateChanges(this, {} as any, callback, true);\n }\n\n public setState(\n newState:\n | ((\n prevState: Readonly,\n props: Readonly<{ children?: InfernoNode } & P>,\n ) => Pick | S | null)\n | (Pick | S | null),\n callback?: () => void,\n ): void {\n if (this.$UN) {\n return;\n }\n if (!this.$BS) {\n queueStateChanges(this, newState, callback, false);\n } else {\n // Development warning\n if (process.env.NODE_ENV !== 'production') {\n throwError(\n 'cannot update state via setState() in constructor. Instead, assign to `this.state` directly or define a `state = {};`',\n );\n }\n }\n }\n\n public componentDidMount?(): void;\n\n public componentWillMount?(): void;\n\n public componentWillReceiveProps?(\n nextProps: Readonly<{ children?: InfernoNode } & P>,\n nextContext: any,\n ): void;\n\n public shouldComponentUpdate?(\n nextProps: Readonly<{ children?: InfernoNode } & P>,\n nextState: Readonly,\n context: any,\n ): boolean;\n\n public componentWillUpdate?(\n nextProps: Readonly<{ children?: InfernoNode } & P>,\n nextState: Readonly,\n context: any,\n ): void;\n\n public componentDidUpdate?(\n prevProps: Readonly<{ children?: InfernoNode } & P>,\n prevState: Readonly,\n snapshot: any,\n ): void;\n\n public componentWillUnmount?(): void;\n\n public componentDidAppear?(domNode: Element): void;\n\n public componentWillDisappear?(domNode: Element, callback: () => void): void;\n\n public componentWillMove?(\n parentVNode: VNode,\n parentDOM: Element,\n dom: Element,\n ): void;\n\n public getChildContext?(): void;\n\n public getSnapshotBeforeUpdate?(\n prevProps: Readonly<{ children?: InfernoNode } & P>,\n prevState: Readonly,\n ): any;\n\n public static defaultProps?: Record | null = null;\n\n public static getDerivedStateFromProps?(nextProps: any, state: any): any;\n\n /* eslint-disable */\n // @ts-ignore\n public render(props: Readonly<{ children?: InfernoNode } & P>, state: Readonly, context: any): InfernoNode {\n return null;\n }\n}\n" }, { "path": "packages/inferno/src/core/implementation.ts", "content": "import type {\n ForwardRef,\n InfernoNode,\n ParentDOM,\n Ref,\n Refs,\n VNode,\n} from './types';\nimport { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';\nimport {\n isArray,\n isFunction,\n isInvalid,\n isNull,\n isNullOrUndef,\n isString,\n isStringOrNumber,\n throwError,\n} from 'inferno-shared';\nimport {\n throwIfObjectIsNotVNode,\n validateChildFlags,\n validateVNodeElementChildren,\n} from './validate';\nimport { Fragment, mergeUnsetProperties, options } from './../DOM/utils/common';\nimport { type Component, type ComponentType } from './component';\n\nconst keyPrefix = '$';\n\nfunction V(\n childFlags: ChildFlags,\n children,\n className: string | null | undefined,\n flags: VNodeFlags,\n key,\n props,\n ref,\n type,\n): void {\n if (process.env.NODE_ENV !== 'production') {\n this.isValidated = false;\n }\n this.childFlags = childFlags;\n this.children = children;\n this.className = className;\n this.dom = null;\n this.flags = flags;\n this.key = key === void 0 ? null : key;\n this.props = props === void 0 ? null : props;\n this.ref = ref === void 0 ? null : ref;\n this.type = type;\n}\n\nexport function createVNode

(\n flags: VNodeFlags,\n type: string,\n className?: string | null,\n children?: InfernoNode,\n childFlags?: ChildFlags,\n props?: Readonly

| null,\n key?: string | number | null,\n ref?: Ref | Refs

| null,\n): VNode {\n if (process.env.NODE_ENV !== 'production') {\n if (flags & VNodeFlags.Component) {\n throwError(\n 'Creating Component vNodes using createVNode is not allowed. Use Inferno.createComponentVNode method.',\n );\n }\n }\n const childFlag: ChildFlags =\n childFlags === void 0 ? ChildFlags.HasInvalidChildren : childFlags;\n const vNode = new V(\n childFlag,\n children,\n className,\n flags,\n key,\n props,\n ref,\n type,\n ) as VNode;\n\n if (options.createVNode) {\n options.createVNode(vNode);\n }\n\n if (childFlag === ChildFlags.UnknownChildren) {\n normalizeChildren(vNode, vNode.children);\n }\n\n if (process.env.NODE_ENV !== 'production') {\n if (childFlag !== ChildFlags.UnknownChildren) {\n validateChildFlags(vNode);\n }\n validateVNodeElementChildren(vNode);\n }\n\n return vNode;\n}\n\nfunction mergeDefaultHooks(flags, type, ref) {\n if (flags & VNodeFlags.ComponentClass) {\n return ref;\n }\n\n const defaultHooks = (flags & VNodeFlags.ForwardRef ? type.render : type)\n .defaultHooks;\n\n if (isNullOrUndef(defaultHooks)) {\n return ref;\n }\n\n if (isNullOrUndef(ref)) {\n return defaultHooks;\n }\n\n return mergeUnsetProperties(ref, defaultHooks);\n}\n\nfunction mergeDefaultProps(flags, type, props) {\n // set default props\n const defaultProps = (flags & VNodeFlags.ForwardRef ? type.render : type)\n .defaultProps;\n\n if (isNullOrUndef(defaultProps)) {\n return props;\n }\n\n if (isNullOrUndef(props)) {\n return { ...defaultProps };\n }\n\n return mergeUnsetProperties(props, defaultProps);\n}\n\nfunction resolveComponentFlags(flags: VNodeFlags, type): VNodeFlags {\n if (flags & VNodeFlags.ComponentKnown) {\n return flags;\n }\n\n if (type.prototype?.render) {\n return VNodeFlags.ComponentClass;\n }\n\n if (type.render) {\n return VNodeFlags.ForwardRefComponent;\n }\n\n return VNodeFlags.ComponentFunction;\n}\n\nexport function createComponentVNode

(\n flags: VNodeFlags,\n type:\n | Function\n | ComponentType

\n | Component\n | ForwardRef,\n props?: Readonly

| null,\n key?: null | string | number,\n ref?: Ref | Refs

| null,\n): VNode {\n if (process.env.NODE_ENV !== 'production') {\n if ((flags & VNodeFlags.HtmlElement) !== 0) {\n throwError(\n 'Creating element vNodes using createComponentVNode is not allowed. Use Inferno.createVNode method.',\n );\n }\n }\n\n flags = resolveComponentFlags(flags, type);\n\n const vNode = new V(\n ChildFlags.HasInvalidChildren,\n null,\n null,\n flags,\n key,\n mergeDefaultProps(flags, type, props),\n mergeDefaultHooks(flags, type, ref),\n type,\n ) as VNode;\n\n if (isFunction(options.createVNode)) {\n options.createVNode(vNode);\n }\n\n return vNode;\n}\n\nexport function createTextVNode(\n text?: string | boolean | null | number,\n key?: string | number | null,\n): VNode {\n return new V(\n ChildFlags.HasInvalidChildren,\n isNullOrUndef(text) || text === true || text === false ? '' : text,\n null,\n VNodeFlags.Text,\n key,\n null,\n null,\n null,\n ) as VNode;\n}\n\nexport function createFragment(\n children: any,\n childFlags: ChildFlags,\n key?: string | number | null,\n): VNode {\n const fragment = createVNode(\n VNodeFlags.Fragment,\n VNodeFlags.Fragment as any,\n null,\n children,\n childFlags,\n null,\n key,\n null,\n );\n\n switch (fragment.childFlags) {\n case ChildFlags.HasInvalidChildren:\n fragment.children = createVoidVNode();\n fragment.childFlags = ChildFlags.HasVNodeChildren;\n break;\n case ChildFlags.HasTextChildren:\n fragment.children = [createTextVNode(children)];\n fragment.childFlags = ChildFlags.HasNonKeyedChildren;\n break;\n default:\n break;\n }\n\n return fragment;\n}\n\nexport function normalizeProps(vNode: VNode): VNode {\n const props = vNode.props;\n\n if (props) {\n const flags = vNode.flags;\n\n if (flags & VNodeFlags.Element) {\n if (props.children !== void 0 && isNullOrUndef(vNode.children)) {\n normalizeChildren(vNode, props.children);\n }\n if (props.className !== void 0) {\n if (isNullOrUndef(vNode.className)) {\n vNode.className = props.className || null;\n }\n props.className = undefined;\n }\n }\n if (props.key !== void 0) {\n vNode.key = props.key;\n props.key = undefined;\n }\n if (props.ref !== void 0) {\n if (flags & VNodeFlags.ComponentFunction) {\n vNode.ref = { ...vNode.ref, ...props.ref };\n } else {\n vNode.ref = props.ref;\n }\n\n props.ref = undefined;\n }\n }\n\n return vNode;\n}\n\n/*\n * Fragment is different from normal vNode,\n * because when it needs to be cloned we need to clone its children too\n * But not normalize, because otherwise those possibly get KEY and re-mount\n */\nfunction cloneFragment(vNodeToClone: VNode): VNode {\n const oldChildren = vNodeToClone.children;\n const childFlags = vNodeToClone.childFlags;\n\n return createFragment(\n childFlags === ChildFlags.HasVNodeChildren\n ? directClone(oldChildren as VNode)\n : (oldChildren as VNode[]).map(directClone),\n childFlags,\n vNodeToClone.key,\n );\n}\n\nexport function directClone(vNodeToClone: VNode): VNode {\n const flags = vNodeToClone.flags & VNodeFlags.ClearInUse;\n let props = vNodeToClone.props;\n\n if (flags & VNodeFlags.Component) {\n if (!isNull(props)) {\n const propsToClone = props;\n props = {};\n for (const key in propsToClone) {\n props[key] = propsToClone[key];\n }\n }\n }\n if ((flags & VNodeFlags.Fragment) === 0) {\n return new V(\n vNodeToClone.childFlags,\n vNodeToClone.children,\n vNodeToClone.className,\n flags,\n vNodeToClone.key,\n props,\n vNodeToClone.ref,\n vNodeToClone.type,\n ) as VNode;\n }\n\n return cloneFragment(vNodeToClone);\n}\n\nexport function createVoidVNode(): VNode {\n return createTextVNode('', null);\n}\n\nexport function createPortal(children, container: ParentDOM): VNode {\n const normalizedRoot = normalizeRoot(children);\n\n return createVNode(\n VNodeFlags.Portal,\n VNodeFlags.Portal as any,\n null,\n normalizedRoot,\n ChildFlags.UnknownChildren,\n null,\n normalizedRoot.key,\n container as any, // Should there be own prop for this?\n );\n}\n\nexport function _normalizeVNodes(\n nodes: any[],\n result: VNode[],\n index: number,\n currentKey: string,\n): void {\n for (const len = nodes.length; index < len; index++) {\n let n = nodes[index];\n\n if (!isInvalid(n)) {\n const newKey: string = currentKey + keyPrefix + index;\n\n if (isArray(n)) {\n _normalizeVNodes(n, result, 0, newKey);\n } else {\n if (isStringOrNumber(n)) {\n n = createTextVNode(n, newKey);\n } else {\n if (process.env.NODE_ENV !== 'production') {\n throwIfObjectIsNotVNode(n);\n }\n const oldKey = n.key;\n const isPrefixedKey = isString(oldKey) && oldKey[0] === keyPrefix;\n\n if (n.flags & VNodeFlags.InUseOrNormalized || isPrefixedKey) {\n n = directClone(n);\n }\n\n n.flags |= VNodeFlags.Normalized;\n\n if (!isPrefixedKey) {\n if (isNull(oldKey)) {\n n.key = newKey;\n } else {\n n.key = currentKey + oldKey;\n }\n } else if (oldKey.substring(0, currentKey.length) !== currentKey) {\n n.key = currentKey + oldKey;\n }\n }\n\n result.push(n);\n }\n }\n }\n}\n\nexport function getFlagsForElementVnode(type: string): VNodeFlags {\n switch (type) {\n case 'svg':\n return VNodeFlags.SvgElement;\n case 'input':\n return VNodeFlags.InputElement;\n case 'select':\n return VNodeFlags.SelectElement;\n case 'textarea':\n return VNodeFlags.TextareaElement;\n // @ts-expect-error Fragment is special case\n case Fragment:\n return VNodeFlags.Fragment;\n default:\n return VNodeFlags.HtmlElement;\n }\n}\n\nexport function normalizeChildren(vNode: VNode, children): VNode {\n let newChildren;\n let newChildFlags: ChildFlags = ChildFlags.HasInvalidChildren;\n\n // Don't change children to match strict equal (===) true in patching\n if (isInvalid(children)) {\n newChildren = children;\n } else if (isStringOrNumber(children)) {\n newChildFlags = ChildFlags.HasTextChildren;\n newChildren = children;\n } else if (isArray(children)) {\n const len = children.length;\n\n for (let i = 0; i < len; ++i) {\n let n = children[i];\n\n if (isInvalid(n) || isArray(n)) {\n newChildren = newChildren || children.slice(0, i);\n\n _normalizeVNodes(children, newChildren, i, '');\n break;\n } else if (isStringOrNumber(n)) {\n newChildren = newChildren || children.slice(0, i);\n newChildren.push(createTextVNode(n, keyPrefix + i));\n } else {\n if (process.env.NODE_ENV !== 'production') {\n throwIfObjectIsNotVNode(n);\n }\n const key = n.key;\n const needsCloning: boolean =\n (n.flags & VNodeFlags.InUseOrNormalized) > 0;\n const isNullKey: boolean = isNull(key);\n const isPrefixed: boolean = isString(key) && key[0] === keyPrefix;\n\n if (needsCloning || isNullKey || isPrefixed) {\n newChildren = newChildren || children.slice(0, i);\n if (needsCloning || isPrefixed) {\n n = directClone(n);\n }\n if (isNullKey || isPrefixed) {\n n.key = keyPrefix + i;\n }\n newChildren.push(n);\n } else if (newChildren) {\n newChildren.push(n);\n }\n\n n.flags |= VNodeFlags.Normalized;\n }\n }\n newChildren = newChildren || children;\n if (newChildren.length === 0) {\n newChildFlags = ChildFlags.HasInvalidChildren;\n } else {\n newChildFlags = ChildFlags.HasKeyedChildren;\n }\n } else {\n newChildren = children;\n newChildren.flags |= VNodeFlags.Normalized;\n\n if (children.flags & VNodeFlags.InUseOrNormalized) {\n newChildren = directClone(children as VNode);\n }\n newChildFlags = ChildFlags.HasVNodeChildren;\n }\n\n vNode.children = newChildren;\n vNode.childFlags = newChildFlags;\n\n return vNode;\n}\n\nexport function normalizeRoot(input): VNode {\n if (isInvalid(input) || isStringOrNumber(input)) {\n return createTextVNode(input, null);\n }\n if (isArray(input)) {\n return createFragment(input, ChildFlags.UnknownChildren, null);\n }\n\n return input.flags & VNodeFlags.InUse ? directClone(input) : input;\n}\n" }, { "path": "packages/inferno/src/core/nativetypes.ts", "content": "// These types need to be in another file to not conflict with Inferno event type names\nexport type NativeClipboardEvent = ClipboardEvent;\nexport type NativeCompositionEvent = CompositionEvent;\nexport type NativeDragEvent = DragEvent;\nexport type NativeFocusEvent = FocusEvent;\n" }, { "path": "packages/inferno/src/core/refs.ts", "content": "import { isFunction, isNullOrUndef, warning } from 'inferno-shared';\nimport { safeCall1 } from '../DOM/utils/common';\nimport type { InfernoNode, Props, RefObject } from './types';\n\nexport function createRef(): RefObject {\n return {\n current: null,\n };\n}\n\n// TODO: Make this return value typed\nexport function forwardRef>(\n render: (\n props: Readonly<{ children?: InfernoNode }> & Readonly

,\n ref: RefObject,\n ) => InfernoNode,\n): any {\n if (process.env.NODE_ENV !== 'production') {\n if (!isFunction(render)) {\n warning(\n `forwardRef requires a render function but was given ${\n render === null ? 'null' : typeof render\n }.`,\n );\n\n return;\n }\n }\n\n return {\n render,\n };\n}\n\nexport function unmountRef(ref): void {\n if (!isNullOrUndef(ref)) {\n if (!safeCall1(ref, null) && (ref as RefObject).current) {\n ref.current = null;\n }\n }\n}\n\nexport function mountRef(ref, value, lifecycle: Array<() => void>): void {\n if (!isNullOrUndef(ref) && (isFunction(ref) || ref.current !== void 0)) {\n lifecycle.push(() => {\n if (!safeCall1(ref, value) && ref.current !== void 0) {\n ref.current = value;\n }\n });\n }\n}\n" }, { "path": "packages/inferno/src/core/types.ts", "content": "/* eslint-disable */\nimport type {\n NativeClipboardEvent,\n NativeCompositionEvent,\n NativeDragEvent,\n NativeFocusEvent,\n} from './nativetypes';\nimport type { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';\nimport type { PropertiesHyphen } from 'csstype';\n\nexport interface LinkedEvent {\n data: T;\n event: (data: T, event: E) => void;\n}\n\nexport type InfernoText = string | number;\nexport type InfernoChild = Inferno.InfernoElement | InfernoText;\n\ninterface InfernoNodeArray extends Array {}\n\nexport type InfernoFragment = {} | InfernoNodeArray;\nexport type InfernoSingleNode = InfernoChild | boolean | null | undefined;\nexport type InfernoNode = InfernoSingleNode | InfernoFragment;\nexport type InfernoKeyedNode = Inferno.InfernoElement & { key: string | number };\nexport type NonEmptyProps = Record;\nexport type ContextObject = Record;\nexport type ParentDOM =\n | Element\n | SVGAElement\n | ShadowRoot\n | DocumentFragment\n | HTMLElement\n | Node\n | null;\n\n// IComponent is defined here, instead of Component to de-couple implementation from interface\nexport interface IComponent {\n // Public\n state: S | null;\n props: Readonly<\n {\n children?: InfernoNode;\n } & P\n >;\n context?: any;\n displayName?: string;\n refs?: any;\n\n forceUpdate(callback?: Function);\n\n setState(\n newState:\n | ((\n prevState: Readonly,\n props: Readonly<{ children?: InfernoNode } & P>,\n ) => Pick | S | null)\n | (Pick | S | null),\n callback?: () => void,\n ): void;\n\n componentDidMount?(): void;\n\n componentWillMount?(): void;\n\n componentWillReceiveProps?(\n nextProps: Readonly<{ children?: InfernoNode } & P>,\n nextContext: any,\n ): void;\n\n shouldComponentUpdate?(\n nextProps: Readonly<{ children?: InfernoNode } & P>,\n nextState: Readonly,\n context: any,\n ): boolean;\n\n componentWillUpdate?(\n nextProps: Readonly<{ children?: InfernoNode } & P>,\n nextState: Readonly,\n context: any,\n ): void;\n\n componentDidUpdate?(\n prevProps: Readonly<{ children?: InfernoNode } & P>,\n prevState: Readonly,\n snapshot: any,\n ): void;\n\n componentWillUnmount?(): void;\n\n componentDidAppear?(domNode: Element): void;\n\n componentWillDisappear?(domNode: Element, callback: Function): void;\n\n componentWillMove?(\n parentVNode: VNode,\n parentDOM: Element,\n dom: Element,\n ): void;\n\n getChildContext?(): void;\n\n getSnapshotBeforeUpdate?(\n prevProps: Readonly<{ children?: InfernoNode } & P>,\n prevState: Readonly,\n ): any;\n\n render(\n nextProps: Readonly<{ children?: InfernoNode } & P>,\n nextState: Readonly,\n nextContext: any,\n ): InfernoNode;\n}\n\nexport interface SemiSyntheticEvent extends Event {\n /**\n * A reference to the element on which the event listener is registered.\n */\n currentTarget: EventTarget & T;\n isDefaultPrevented?: () => boolean;\n isPropagationStopped?: () => boolean;\n}\n\nexport type ClipboardEvent = SemiSyntheticEvent & NativeClipboardEvent;\nexport type CompositionEvent = SemiSyntheticEvent &\n NativeCompositionEvent;\nexport type DragEvent = InfernoMouseEvent & NativeDragEvent;\nexport type FocusEvent = SemiSyntheticEvent & NativeFocusEvent;\nexport interface FormEvent extends SemiSyntheticEvent {\n target: EventTarget & T;\n}\n\nexport interface ChangeEvent extends SemiSyntheticEvent {\n target: EventTarget & T;\n}\n\nexport type InfernoKeyboardEvent = SemiSyntheticEvent & KeyboardEvent;\nexport type InfernoMouseEvent = SemiSyntheticEvent &\n MouseEvent & {\n target: EventTarget & T;\n };\nexport type InfernoTouchEvent = SemiSyntheticEvent & TouchEvent;\nexport type InfernoPointerEvent = SemiSyntheticEvent & PointerEvent;\nexport type InfernoUIEvent = SemiSyntheticEvent & UIEvent;\nexport type InfernoWheelEvent = InfernoMouseEvent & WheelEvent;\nexport type InfernoAnimationEvent = SemiSyntheticEvent & AnimationEvent;\nexport type InfernoTransitionEvent = SemiSyntheticEvent & TransitionEvent;\ntype Booleanish = boolean | 'true' | 'false';\n\n//\n// Event Handler Types\n// ----------------------------------------------------------------------\n\nexport type EventHandler> =\n | { bivarianceHack(event: E): void }['bivarianceHack']\n | LinkedEvent\n | null;\n\nexport type InfernoEventHandler = EventHandler<\n SemiSyntheticEvent\n>;\n\nexport type ClipboardEventHandler = EventHandler<\n ClipboardEvent\n>;\nexport type CompositionEventHandler = EventHandler<\n CompositionEvent\n>;\nexport type DragEventHandler = EventHandler>;\nexport type FocusEventHandler = EventHandler>;\nexport type FormEventHandler = EventHandler>;\nexport type ChangeEventHandler = EventHandler>;\nexport type KeyboardEventHandler = EventHandler<\n InfernoKeyboardEvent\n>;\nexport type MouseEventHandler = EventHandler>;\nexport type TouchEventHandler = EventHandler>;\nexport type PointerEventHandler = EventHandler<\n InfernoPointerEvent\n>;\nexport type UIEventHandler = EventHandler>;\nexport type WheelEventHandler = EventHandler>;\nexport type AnimationEventHandler = EventHandler<\n InfernoAnimationEvent\n>;\nexport type TransitionEventHandler = EventHandler<\n InfernoTransitionEvent\n>;\n\nexport type Key = string | number | undefined | null;\n\ntype CrossOrigin = 'anonymous' | 'use-credentials' | '' | null | undefined;\n\nexport interface VNode {\n children: InfernoNode;\n childFlags: ChildFlags;\n dom: Element | null;\n className: string | null | undefined;\n flags: VNodeFlags;\n isValidated?: boolean;\n key: Key;\n props: any;\n ref: any;\n type: any;\n}\n\nexport interface RefObject {\n readonly current: T | null;\n}\n\nexport type Ref = {\n bivarianceHack(instance: T | null): any;\n}['bivarianceHack'];\n\nexport interface ForwardRef extends Inferno.StatelessComponent

{\n ref: Ref;\n}\n\nexport interface Refs

{\n onComponentDidMount?: (\n domNode: Element | null,\n nextProps: Readonly<{ children?: InfernoNode } & P>,\n ) => void;\n\n onComponentWillMount?(props: Readonly<{ children?: InfernoNode } & P>): void;\n\n onComponentShouldUpdate?(\n lastProps: Readonly<{ children?: InfernoNode } & P>,\n nextProps: Readonly<{ children?: InfernoNode } & P>,\n ): boolean;\n\n onComponentWillUpdate?(\n lastProps: Readonly<{ children?: InfernoNode } & P>,\n nextProps: Readonly<{ children?: InfernoNode } & P>,\n ): void;\n\n onComponentDidUpdate?(\n lastProps: Readonly<{ children?: InfernoNode } & P>,\n nextProps: Readonly<{ children?: InfernoNode } & P>,\n ): void;\n\n onComponentWillUnmount?(\n domNode: Element,\n nextProps: Readonly<{ children?: InfernoNode } & P>,\n ): void;\n\n onComponentDidAppear?(\n domNode: Element,\n props: Readonly<{ children?: InfernoNode } & P>,\n ): void;\n\n onComponentWillDisappear?(\n domNode: Element,\n props: Readonly<{ children?: InfernoNode } & P>,\n callback: Function,\n ): void;\n\n onComponentWillMove?(\n parentVNode: VNode,\n parentDOM: Element,\n dom: Element,\n props: Readonly<{ children?: InfernoNode } & P>,\n ): void;\n}\n\nexport interface Props {\n children?: InfernoNode;\n key?: Key;\n ref?: Ref | undefined;\n}\n\nexport declare namespace Inferno {\n //\n // Inferno Elements\n // ----------------------------------------------------------------------\n // tslint:disable-next-line:interface-over-type-literal\n type ComponentState = {};\n type ExoticComponent

= (props: P) => InfernoElement;\n\n interface Attributes {\n key?: Key;\n\n $ReCreate?: boolean;\n $HasVNodeChildren?: boolean;\n $HasNonKeyedChildren?: boolean;\n $HasKeyedChildren?: boolean;\n $HasTextChildren?: boolean;\n $ChildFlag?: number;\n }\n interface ClassAttributes extends Attributes {\n ref?: Ref | RefObject | null | undefined;\n }\n\n interface InfernoElement

{\n type: string | ComponentClass

| SFC

;\n props: P;\n key?: Key;\n }\n\n interface SFCElement

extends InfernoElement

{\n type: SFC

;\n }\n\n type CElement> = ComponentElement<\n P,\n T\n >;\n interface ComponentElement>\n extends InfernoElement

{\n type: ComponentClass

;\n ref?: Ref | undefined;\n }\n\n // string fallback for custom web-components\n interface DOMElement<\n P extends HTMLAttributes | SVGAttributes,\n T extends Element,\n > extends InfernoElement

{\n type: string;\n ref: Ref;\n }\n\n // InfernoHTML for InfernoHTMLElement\n interface InfernoHTMLElement\n extends DetailedInfernoHTMLElement, T> {}\n\n interface DetailedInfernoHTMLElement<\n P extends HTMLAttributes,\n T extends HTMLElement,\n > extends DOMElement {\n type: keyof InfernoHTML;\n }\n\n // InfernoSVG for InfernoSVGElement\n interface InfernoSVGElement\n extends DOMElement, SVGElement> {\n type: keyof InfernoSVG;\n }\n\n //\n // Factories\n // ----------------------------------------------------------------------\n\n type Factory

= (\n props?: Attributes & P,\n ...children: InfernoNode[]\n ) => InfernoElement

;\n\n type SFCFactory

= (\n props?: Attributes & P,\n ...children: InfernoNode[]\n ) => SFCElement

;\n\n type ComponentFactory> = (\n props?: ClassAttributes & P,\n ...children: InfernoNode[]\n ) => CElement;\n\n type CFactory> = ComponentFactory<\n P,\n T\n >;\n\n type DOMFactory

, T extends Element> = (\n props?: (ClassAttributes & P) | null,\n ...children: InfernoNode[]\n ) => DOMElement;\n\n interface HTMLFactory\n extends DetailedHTMLFactory, T> {}\n\n interface DetailedHTMLFactory<\n P extends HTMLAttributes,\n T extends HTMLElement,\n > extends DOMFactory {\n (\n props?: (ClassAttributes & P) | null,\n ...children: InfernoNode[]\n ): DetailedInfernoHTMLElement;\n }\n\n interface SVGFactory\n extends DOMFactory, SVGElement> {\n (\n props?: (ClassAttributes & SVGAttributes) | null,\n ...children: InfernoNode[]\n ): InfernoSVGElement;\n }\n\n //\n // Inferno Nodes\n // ----------------------------------------------------------------------\n\n const version: string;\n\n //\n // Component API\n // ----------------------------------------------------------------------\n\n interface ChildContextProvider {\n getChildContext(): CC;\n }\n\n //\n // Class Interfaces\n // ----------------------------------------------------------------------\n\n type SFC

= StatelessComponent

;\n interface StatelessComponent

{\n (\n props: {\n children?: InfernoNode;\n } & P &\n Refs

,\n context?: any,\n ): InfernoElement | null;\n defaultProps?: Partial

| undefined | null;\n defaultHooks?: Refs

| undefined | null;\n }\n\n interface ComponentClass

{\n new (\n props?: {\n children?: InfernoNode;\n } & P,\n context?: any,\n ): IComponent;\n defaultProps?: Partial

| undefined | null;\n }\n\n //\n // Props / DOM Attributes\n // ----------------------------------------------------------------------\n\n interface HTMLProps extends AllHTMLAttributes, ClassAttributes {}\n\n type DetailedHTMLProps, T> = ClassAttributes &\n E;\n\n interface SVGProps extends SVGAttributes, ClassAttributes {}\n\n interface DOMAttributes {\n children?: InfernoNode;\n dangerouslySetInnerHTML?:\n | {\n __html: string;\n }\n | null\n | undefined;\n\n // Clipboard Events\n onCopy?: ClipboardEventHandler | undefined;\n onCut?: ClipboardEventHandler | undefined;\n onPaste?: ClipboardEventHandler | undefined;\n\n // Composition Events\n onCompositionEnd?: CompositionEventHandler | undefined;\n onCompositionStart?: CompositionEventHandler | undefined;\n onCompositionUpdate?: CompositionEventHandler | undefined;\n\n // Focus Events\n onFocus?: FocusEventHandler | undefined;\n onBlur?: FocusEventHandler | undefined;\n\n // Form Events\n onChange?: FormEventHandler | undefined | null;\n onBeforeInput?: FormEventHandler | undefined;\n onInput?: FormEventHandler | undefined;\n onReset?: FormEventHandler | undefined;\n onSubmit?: FormEventHandler | undefined;\n onInvalid?: FormEventHandler | undefined;\n\n // Image Events\n onLoad?: InfernoEventHandler | undefined;\n onError?: InfernoEventHandler | undefined; // also a Media Event\n\n // Keyboard Events\n onKeyDown?: KeyboardEventHandler | undefined;\n onKeyPress?: KeyboardEventHandler | undefined;\n onKeyUp?: KeyboardEventHandler | undefined;\n\n // Media Events\n onAbort?: InfernoEventHandler | undefined;\n onCanPlay?: InfernoEventHandler | undefined;\n onCanPlayThrough?: InfernoEventHandler | undefined;\n onDurationChange?: InfernoEventHandler | undefined;\n onEmptied?: InfernoEventHandler | undefined;\n onEncrypted?: InfernoEventHandler | undefined;\n onEnded?: InfernoEventHandler | undefined;\n onLoadedData?: InfernoEventHandler | undefined;\n onLoadedMetadata?: InfernoEventHandler | undefined;\n onLoadStart?: InfernoEventHandler | undefined;\n onPause?: InfernoEventHandler | undefined;\n onPlay?: InfernoEventHandler | undefined;\n onPlaying?: InfernoEventHandler | undefined;\n onProgress?: InfernoEventHandler | undefined;\n onRateChange?: InfernoEventHandler | undefined;\n onSeeked?: InfernoEventHandler | undefined;\n onSeeking?: InfernoEventHandler | undefined;\n onStalled?: InfernoEventHandler | undefined;\n onSuspend?: InfernoEventHandler | undefined;\n onTimeUpdate?: InfernoEventHandler | undefined;\n onVolumeChange?: InfernoEventHandler | undefined;\n onWaiting?: InfernoEventHandler | undefined;\n\n // MouseEvents\n onAuxClick?: MouseEventHandler | undefined;\n onClick?: MouseEventHandler | undefined;\n onContextMenu?: MouseEventHandler | undefined;\n onDblClick?: MouseEventHandler | undefined;\n onDrag?: DragEventHandler | undefined;\n onDragEnd?: DragEventHandler | undefined;\n onDragEnter?: DragEventHandler | undefined;\n onDragExit?: DragEventHandler | undefined;\n onDragLeave?: DragEventHandler | undefined;\n onDragOver?: DragEventHandler | undefined;\n onDragStart?: DragEventHandler | undefined;\n onDrop?: DragEventHandler | undefined;\n onMouseDown?: MouseEventHandler | undefined;\n onMouseEnter?: MouseEventHandler | undefined;\n onMouseLeave?: MouseEventHandler | undefined;\n onMouseMove?: MouseEventHandler | undefined;\n onMouseOut?: MouseEventHandler | undefined;\n onMouseOver?: MouseEventHandler | undefined;\n onMouseUp?: MouseEventHandler | undefined;\n\n // Selection Events\n onSelect?: InfernoEventHandler | undefined;\n\n // Touch Events\n onTouchCancel?: TouchEventHandler | undefined;\n onTouchEnd?: TouchEventHandler | undefined;\n onTouchMove?: TouchEventHandler | undefined;\n onTouchStart?: TouchEventHandler | undefined;\n\n // Pointer Events\n onPointerDown?: PointerEventHandler | undefined;\n onPointerMove?: PointerEventHandler | undefined;\n onPointerUp?: PointerEventHandler | undefined;\n onPointerCancel?: PointerEventHandler | undefined;\n onPointerEnter?: PointerEventHandler | undefined;\n onPointerLeave?: PointerEventHandler | undefined;\n onPointerOver?: PointerEventHandler | undefined;\n onPointerOut?: PointerEventHandler | undefined;\n\n // UI Events\n onScroll?: UIEventHandler | undefined;\n\n // Wheel Events\n onWheel?: WheelEventHandler | undefined;\n\n // Animation Events\n onAnimationStart?: AnimationEventHandler | undefined;\n onAnimationEnd?: AnimationEventHandler | undefined;\n onAnimationIteration?: AnimationEventHandler | undefined;\n\n // Transition Events\n onTransitionEnd?: TransitionEventHandler | undefined;\n\n // NATIVE EVENTS\n // Clipboard Events\n oncopy?: ClipboardEventHandler | undefined;\n oncut?: ClipboardEventHandler | undefined;\n onpaste?: ClipboardEventHandler | undefined;\n\n // Composition Events\n oncompositionend?: CompositionEventHandler | undefined;\n oncompositionstart?: CompositionEventHandler | undefined;\n oncompositionupdate?: CompositionEventHandler | undefined;\n\n // Focus Events\n onfocus?: FocusEventHandler | undefined;\n onblur?: FocusEventHandler | undefined;\n\n // Form Events\n onchange?: FormEventHandler | undefined | null;\n onbeforeinput?: FormEventHandler | undefined;\n oninput?: FormEventHandler | undefined;\n onreset?: FormEventHandler | undefined;\n onsubmit?: FormEventHandler | undefined;\n oninvalid?: FormEventHandler | undefined;\n\n // Image Events\n onload?: InfernoEventHandler | undefined;\n onerror?: InfernoEventHandler | undefined; // also a Media Event\n\n // Keyboard Events\n onkeydown?: KeyboardEventHandler | undefined;\n onkeypress?: KeyboardEventHandler | undefined;\n onkeyup?: KeyboardEventHandler | undefined;\n\n // Media Events\n onabort?: InfernoEventHandler | undefined;\n oncanplay?: InfernoEventHandler | undefined;\n oncanplaythrough?: InfernoEventHandler | undefined;\n ondurationchange?: InfernoEventHandler | undefined;\n onemptied?: InfernoEventHandler | undefined;\n onencrypted?: InfernoEventHandler | undefined;\n onended?: InfernoEventHandler | undefined;\n onloadeddata?: InfernoEventHandler | undefined;\n onloadedmetadata?: InfernoEventHandler | undefined;\n onloadstart?: InfernoEventHandler | undefined;\n onpause?: InfernoEventHandler | undefined;\n onplay?: InfernoEventHandler | undefined;\n onplaying?: InfernoEventHandler | undefined;\n onprogress?: InfernoEventHandler | undefined;\n onratechange?: InfernoEventHandler | undefined;\n onseeked?: InfernoEventHandler | undefined;\n onseeking?: InfernoEventHandler | undefined;\n onstalled?: InfernoEventHandler | undefined;\n onsuspend?: InfernoEventHandler | undefined;\n ontimeupdate?: InfernoEventHandler | undefined;\n onvolumechange?: InfernoEventHandler | undefined;\n onwaiting?: InfernoEventHandler | undefined;\n\n // MouseEvents\n onauxclick?: MouseEventHandler | undefined;\n onclick?: MouseEventHandler | undefined;\n oncontextmenu?: MouseEventHandler | undefined;\n ondblclick?: MouseEventHandler | undefined;\n ondrag?: DragEventHandler | undefined;\n ondragend?: DragEventHandler | undefined;\n ondragenter?: DragEventHandler | undefined;\n ondragexit?: DragEventHandler | undefined;\n ondragLeave?: DragEventHandler | undefined;\n ondragover?: DragEventHandler | undefined;\n ondragstart?: DragEventHandler | undefined;\n ondrop?: DragEventHandler | undefined;\n onmousedown?: MouseEventHandler | undefined;\n onmouseenter?: MouseEventHandler | undefined;\n onmouseleave?: MouseEventHandler | undefined;\n onmousemove?: MouseEventHandler | undefined;\n onmouseout?: MouseEventHandler | undefined;\n onmouseover?: MouseEventHandler | undefined;\n onmouseup?: MouseEventHandler | undefined;\n\n // Selection Events\n onselect?: InfernoEventHandler | undefined;\n\n // Touch Events\n ontouchcancel?: TouchEventHandler | undefined;\n ontouchend?: TouchEventHandler | undefined;\n ontouchmove?: TouchEventHandler | undefined;\n ontouchstart?: TouchEventHandler | undefined;\n\n // Pointer Events\n onpointerdown?: PointerEventHandler | undefined;\n onpointermove?: PointerEventHandler | undefined;\n onpointerup?: PointerEventHandler | undefined;\n onpointercancel?: PointerEventHandler | undefined;\n onpointerenter?: PointerEventHandler | undefined;\n onpointerleave?: PointerEventHandler | undefined;\n onpointerover?: PointerEventHandler | undefined;\n onpointerout?: PointerEventHandler | undefined;\n\n // UI Events\n onscroll?: UIEventHandler | undefined;\n\n // Wheel Events\n onwheel?: WheelEventHandler | undefined;\n\n // Animation Events\n onanimationstart?: AnimationEventHandler | undefined;\n onanimationend?: AnimationEventHandler | undefined;\n onanimationiteration?: AnimationEventHandler | undefined;\n\n // Transition Events\n ontransitionend?: TransitionEventHandler | undefined;\n }\n\n // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/\n // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/\n interface AriaAttributes {\n /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */\n 'aria-activedescendant'?: string | null | undefined;\n /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */\n 'aria-atomic'?: Booleanish | null | undefined;\n /**\n * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\n * presented if they are made.\n */\n 'aria-autocomplete'?:\n | 'none'\n | 'inline'\n | 'list'\n | 'both'\n | null\n | undefined;\n /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */\n /**\n * Defines a string value that labels the current element, which is intended to be converted into Braille.\n * @see aria-label.\n */\n 'aria-braillelabel'?: string | null | undefined;\n /**\n * Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n * @see aria-roledescription.\n */\n 'aria-brailleroledescription'?: string | null | undefined;\n 'aria-busy'?: Booleanish | null | undefined;\n /**\n * Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n * @see aria-pressed @see aria-selected.\n */\n 'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | null | undefined;\n /**\n * Defines the total number of columns in a table, grid, or treegrid.\n * @see aria-colindex.\n */\n 'aria-colcount'?: number | null | undefined;\n /**\n * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n * @see aria-colcount @see aria-colspan.\n */\n 'aria-colindex'?: number | null | undefined;\n /**\n * Defines a human readable text alternative of aria-colindex.\n * @see aria-rowindextext.\n */\n 'aria-colindextext'?: string | null | undefined;\n /**\n * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n * @see aria-colindex @see aria-rowspan.\n */\n 'aria-colspan'?: number | null | undefined;\n /**\n * Identifies the element (or elements) whose contents or presence are controlled by the current element.\n * @see aria-owns.\n */\n 'aria-controls'?: string | null | undefined;\n /** Indicates the element that represents the current item within a container or set of related elements. */\n 'aria-current'?:\n | boolean\n | 'false'\n | 'true'\n | 'page'\n | 'step'\n | 'location'\n | 'date'\n | 'time'\n | null\n | undefined;\n /**\n * Identifies the element (or elements) that describes the object.\n * @see aria-labelledby\n */\n 'aria-describedby'?: string | null | undefined;\n /**\n * Defines a string value that describes or annotates the current element.\n * @see related aria-describedby.\n */\n 'aria-description'?: string | null | undefined;\n /**\n * Identifies the element that provides a detailed, extended description for the object.\n * @see aria-describedby.\n */\n 'aria-details'?: string | null | undefined;\n /**\n * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n * @see aria-hidden @see aria-readonly.\n */\n 'aria-disabled'?: Booleanish | null | undefined;\n /**\n * Indicates what functions can be performed when a dragged object is released on the drop target.\n * @deprecated in ARIA 1.1\n */\n 'aria-dropeffect'?:\n | 'none'\n | 'copy'\n | 'execute'\n | 'link'\n | 'move'\n | 'popup'\n | null\n | undefined;\n /**\n * Identifies the element that provides an error message for the object.\n * @see aria-invalid @see aria-describedby.\n */\n 'aria-errormessage'?: string | null | undefined;\n /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */\n 'aria-expanded'?: Booleanish | null | undefined;\n /**\n * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\n * allows assistive technology to override the general default of reading in document source order.\n */\n 'aria-flowto'?: string | null | undefined;\n /**\n * Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n * @deprecated in ARIA 1.1\n */\n 'aria-grabbed'?: Booleanish | null | undefined;\n /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */\n 'aria-haspopup'?:\n | boolean\n | 'false'\n | 'true'\n | 'menu'\n | 'listbox'\n | 'tree'\n | 'grid'\n | 'dialog'\n | null\n | undefined;\n /**\n * Indicates whether the element is exposed to an accessibility API.\n * @see aria-disabled.\n */\n 'aria-hidden'?: Booleanish | null | undefined;\n /**\n * Indicates the entered value does not conform to the format expected by the application.\n * @see aria-errormessage.\n */\n 'aria-invalid'?:\n | boolean\n | 'false'\n | 'true'\n | 'grammar'\n | 'spelling'\n | null\n | undefined;\n /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */\n 'aria-keyshortcuts'?: string | null | undefined;\n /**\n * Defines a string value that labels the current element.\n * @see aria-labelledby.\n */\n 'aria-label'?: string | null | undefined;\n /**\n * Identifies the element (or elements) that labels the current element.\n * @see aria-describedby.\n */\n 'aria-labelledby'?: string | null | undefined;\n /** Defines the hierarchical level of an element within a structure. */\n 'aria-level'?: number | null | undefined;\n /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */\n 'aria-live'?: 'off' | 'assertive' | 'polite' | null | undefined;\n /** Indicates whether an element is modal when displayed. */\n 'aria-modal'?: Booleanish | null | undefined;\n /** Indicates whether a text box accepts multiple lines of input or only a single line. */\n 'aria-multiline'?: Booleanish | null | undefined;\n /** Indicates that the user may select more than one item from the current selectable descendants. */\n 'aria-multiselectable'?: Booleanish | null | undefined;\n /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */\n 'aria-orientation'?: 'horizontal' | 'vertical' | null | undefined;\n /**\n * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\n * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n * @see aria-controls.\n */\n 'aria-owns'?: string | null | undefined;\n /**\n * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\n * A hint could be a sample value or a brief description of the expected format.\n */\n 'aria-placeholder'?: string | null | undefined;\n /**\n * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n * @see aria-setsize.\n */\n 'aria-posinset'?: number | null | undefined;\n /**\n * Indicates the current \"pressed\" state of toggle buttons.\n * @see aria-checked @see aria-selected.\n */\n 'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | null | undefined;\n /**\n * Indicates that the element is not editable, but is otherwise operable.\n * @see aria-disabled.\n */\n 'aria-readonly'?: Booleanish | null | undefined;\n /**\n * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n * @see aria-atomic.\n */\n 'aria-relevant'?:\n | 'additions'\n | 'additions removals'\n | 'additions text'\n | 'all'\n | 'removals'\n | 'removals additions'\n | 'removals text'\n | 'text'\n | 'text additions'\n | 'text removals'\n | null\n | undefined;\n /** Indicates that user input is required on the element before a form may be submitted. */\n 'aria-required'?: Booleanish | null | undefined;\n /** Defines a human-readable, author-localized description for the role of an element. */\n 'aria-roledescription'?: string | null | undefined;\n /**\n * Defines the total number of rows in a table, grid, or treegrid.\n * @see aria-rowindex.\n */\n 'aria-rowcount'?: number | null | undefined;\n /**\n * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n * @see aria-rowcount @see aria-rowspan.\n */\n 'aria-rowindex'?: number | null | undefined;\n /**\n * Defines a human readable text alternative of aria-rowindex.\n * @see aria-colindextext.\n */\n 'aria-rowindextext'?: string | null | undefined;\n /**\n * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n * @see aria-rowindex @see aria-colspan.\n */\n 'aria-rowspan'?: number | null | undefined;\n /**\n * Indicates the current \"selected\" state of various widgets.\n * @see aria-checked @see aria-pressed.\n */\n 'aria-selected'?: Booleanish | null | undefined;\n /**\n * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n * @see aria-posinset.\n */\n 'aria-setsize'?: number | null | undefined;\n /** Indicates if items in a table or grid are sorted in ascending or descending order. */\n 'aria-sort'?:\n | 'none'\n | 'ascending'\n | 'descending'\n | 'other'\n | null\n | undefined;\n /** Defines the maximum allowed value for a range widget. */\n 'aria-valuemax'?: number | null | undefined;\n /** Defines the minimum allowed value for a range widget. */\n 'aria-valuemin'?: number | null | undefined;\n /**\n * Defines the current value for a range widget.\n * @see aria-valuetext.\n */\n 'aria-valuenow'?: number | null | undefined;\n /** Defines the human readable text alternative of aria-valuenow for a range widget. */\n 'aria-valuetext'?: string | null | undefined;\n }\n\n // All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions\n type AriaRole =\n | 'alert'\n | 'alertdialog'\n | 'application'\n | 'article'\n | 'banner'\n | 'button'\n | 'cell'\n | 'checkbox'\n | 'columnheader'\n | 'combobox'\n | 'complementary'\n | 'contentinfo'\n | 'definition'\n | 'dialog'\n | 'directory'\n | 'document'\n | 'feed'\n | 'figure'\n | 'form'\n | 'grid'\n | 'gridcell'\n | 'group'\n | 'heading'\n | 'img'\n | 'link'\n | 'list'\n | 'listbox'\n | 'listitem'\n | 'log'\n | 'main'\n | 'marquee'\n | 'math'\n | 'menu'\n | 'menubar'\n | 'menuitem'\n | 'menuitemcheckbox'\n | 'menuitemradio'\n | 'navigation'\n | 'none'\n | 'note'\n | 'option'\n | 'presentation'\n | 'progressbar'\n | 'radio'\n | 'radiogroup'\n | 'region'\n | 'row'\n | 'rowgroup'\n | 'rowheader'\n | 'scrollbar'\n | 'search'\n | 'searchbox'\n | 'separator'\n | 'slider'\n | 'spinbutton'\n | 'status'\n | 'switch'\n | 'tab'\n | 'table'\n | 'tablist'\n | 'tabpanel'\n | 'term'\n | 'textbox'\n | 'timer'\n | 'toolbar'\n | 'tooltip'\n | 'tree'\n | 'treegrid'\n | 'treeitem'\n | (string & {});\n\n interface CssVariables {\n [key: `--${string}`]: string;\n }\n\n interface HTMLAttributes extends AriaAttributes, DOMAttributes {\n // Inferno-specific Attributes\n class?: string | null | undefined;\n defaultChecked?: boolean | null | undefined;\n defaultValue?: string | number | readonly string[] | null | undefined;\n\n // Standard HTML Attributes\n accessKey?: string | null | undefined;\n autoCapitalize?:\n | 'off'\n | 'none'\n | 'on'\n | 'sentences'\n | 'words'\n | 'characters'\n | null\n | undefined\n | (string & {});\n autoFocus?: boolean | null | undefined;\n className?: string | null | undefined;\n contentEditable?:\n | Booleanish\n | 'inherit'\n | 'plaintext-only'\n | null\n | undefined;\n contextMenu?: string | null | undefined;\n dir?: string | null | undefined;\n draggable?: Booleanish | null | undefined;\n enterKeyHint?:\n | 'enter'\n | 'done'\n | 'go'\n | 'next'\n | 'previous'\n | 'search'\n | 'send'\n | null\n | undefined;\n hidden?: boolean | null | undefined;\n id?: string | null | undefined;\n lang?: string | null | undefined;\n nonce?: string | null | undefined;\n slot?: string | null | undefined;\n spellCheck?: Booleanish | null | undefined;\n style?: PropertiesHyphen | string | null | undefined | CssVariables;\n tabIndex?: number | null | undefined;\n title?: string | null | undefined;\n translate?: 'yes' | 'no' | null | undefined;\n\n // Unknown\n radioGroup?: string | null | undefined; // , \n\n // WAI-ARIA\n role?: AriaRole | null | undefined;\n\n // RDFa Attributes\n about?: string | null | undefined;\n content?: string | null | undefined;\n datatype?: string | null | undefined;\n inlist?: any;\n prefix?: string | null | undefined;\n property?: string | null | undefined;\n rel?: string | null | undefined;\n resource?: string | null | undefined;\n rev?: string | null | undefined;\n typeof?: string | null | undefined;\n vocab?: string | null | undefined;\n\n // Non-standard Attributes\n autoCorrect?: string | null | undefined;\n autoSave?: string | null | undefined;\n color?: string | null | undefined;\n itemProp?: string | null | undefined;\n itemScope?: boolean | null | undefined;\n itemType?: string | null | undefined;\n itemID?: string | null | undefined;\n itemRef?: string | null | undefined;\n results?: number | null | undefined;\n security?: string | null | undefined;\n unselectable?: 'on' | 'off' | null | undefined;\n\n // Living Standard\n /**\n * Hints at the type of data that might be entered by the user while editing the element or its contents\n * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute}\n */\n inputMode?:\n | 'none'\n | 'text'\n | 'tel'\n | 'url'\n | 'email'\n | 'numeric'\n | 'decimal'\n | 'search'\n | null\n | undefined;\n /**\n * Specify that a standard HTML element should behave like a defined custom built-in element\n * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is}\n */\n is?: string | null | undefined;\n }\n interface AllHTMLAttributes extends HTMLAttributes {\n // Standard HTML Attributes\n accept?: string | null | undefined;\n acceptCharset?: string | null | undefined;\n action?: string | null | undefined;\n allowFullScreen?: boolean | null | undefined;\n allowTransparency?: boolean | null | undefined;\n alt?: string | null | undefined;\n as?: string | null | undefined;\n async?: boolean | null | undefined;\n autoComplete?: string | null | undefined;\n autoPlay?: boolean | null | undefined;\n capture?: boolean | 'user' | 'environment' | null | undefined;\n cellPadding?: number | string | null | undefined;\n cellSpacing?: number | string | null | undefined;\n charSet?: string | null | undefined;\n challenge?: string | null | undefined;\n checked?: boolean | null | undefined;\n cite?: string | null | undefined;\n classID?: string | null | undefined;\n cols?: number | null | undefined;\n colSpan?: number | null | undefined;\n controls?: boolean | null | undefined;\n coords?: string | null | undefined;\n crossOrigin?: CrossOrigin;\n data?: string | null | undefined;\n dateTime?: string | null | undefined;\n default?: boolean | null | undefined;\n defer?: boolean | null | undefined;\n disabled?: boolean | null | undefined;\n download?: any;\n encType?: string | null | undefined;\n form?: string | null | undefined;\n formAction?: string | null | undefined;\n formEncType?: string | null | undefined;\n formMethod?: string | null | undefined;\n formNoValidate?: boolean | null | undefined;\n formTarget?: string | null | undefined;\n frameBorder?: number | string | null | undefined;\n headers?: string | null | undefined;\n height?: number | string | null | undefined;\n high?: number | null | undefined;\n href?: string | null | undefined;\n hrefLang?: string | null | undefined;\n htmlFor?: string | null | undefined;\n httpEquiv?: string | null | undefined;\n integrity?: string | null | undefined;\n keyParams?: string | null | undefined;\n keyType?: string | null | undefined;\n kind?: string | null | undefined;\n label?: string | null | undefined;\n list?: string | null | undefined;\n loop?: boolean | null | undefined;\n low?: number | null | undefined;\n manifest?: string | null | undefined;\n marginHeight?: number | null | undefined;\n marginWidth?: number | null | undefined;\n max?: number | string | null | undefined;\n maxLength?: number | null | undefined;\n media?: string | null | undefined;\n mediaGroup?: string | null | undefined;\n method?: string | null | undefined;\n min?: number | string | null | undefined;\n minLength?: number | null | undefined;\n multiple?: boolean | null | undefined;\n muted?: boolean | null | undefined;\n name?: string | null | undefined;\n noValidate?: boolean | null | undefined;\n open?: boolean | null | undefined;\n optimum?: number | null | undefined;\n pattern?: string | null | undefined;\n placeholder?: string | null | undefined;\n playsInline?: boolean | null | undefined;\n poster?: string | null | undefined;\n preload?: string | null | undefined;\n readOnly?: boolean | null | undefined;\n required?: boolean | null | undefined;\n reversed?: boolean | null | undefined;\n rows?: number | null | undefined;\n rowSpan?: number | null | undefined;\n sandbox?: string | null | undefined;\n scope?: string | null | undefined;\n scoped?: boolean | null | undefined;\n scrolling?: string | null | undefined;\n seamless?: boolean | null | undefined;\n selected?: boolean | null | undefined;\n shape?: string | null | undefined;\n size?: number | null | undefined;\n sizes?: string | null | undefined;\n span?: number | null | undefined;\n src?: string | null | undefined;\n srcDoc?: string | null | undefined;\n srcLang?: string | null | undefined;\n srcSet?: string | null | undefined;\n start?: number | null | undefined;\n step?: number | string | null | undefined;\n summary?: string | null | undefined;\n target?: string | null | undefined;\n type?: string | null | undefined;\n useMap?: string | null | undefined;\n value?: string | readonly string[] | number | null | undefined;\n width?: number | string | null | undefined;\n wmode?: string | null | undefined;\n wrap?: string | null | undefined;\n }\n\n type HTMLAttributeReferrerPolicy =\n | ''\n | 'no-referrer'\n | 'no-referrer-when-downgrade'\n | 'origin'\n | 'origin-when-cross-origin'\n | 'same-origin'\n | 'strict-origin'\n | 'strict-origin-when-cross-origin'\n | 'unsafe-url';\n\n type HTMLAttributeAnchorTarget =\n | '_self'\n | '_blank'\n | '_parent'\n | '_top'\n | (string & {});\n\n interface AnchorHTMLAttributes extends HTMLAttributes {\n download?: any;\n href?: string | null | undefined;\n hrefLang?: string | null | undefined;\n media?: string | null | undefined;\n ping?: string | null | undefined;\n target?: HTMLAttributeAnchorTarget | null | undefined;\n type?: string | null | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | null | undefined;\n }\n\n interface AudioHTMLAttributes extends MediaHTMLAttributes {}\n\n interface AreaHTMLAttributes extends HTMLAttributes {\n alt?: string | null | undefined;\n coords?: string | null | undefined;\n download?: any;\n href?: string | null | undefined;\n hrefLang?: string | null | undefined;\n media?: string | null | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | null | undefined;\n shape?: string | null | undefined;\n target?: string | null | undefined;\n }\n\n interface BaseHTMLAttributes extends HTMLAttributes {\n href?: string | null | undefined;\n target?: string | null | undefined;\n }\n\n interface BlockquoteHTMLAttributes extends HTMLAttributes {\n cite?: string | null | undefined;\n }\n\n interface ButtonHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | null | undefined;\n form?: string | null | undefined;\n formAction?: string | null | undefined;\n formEncType?: string | null | undefined;\n formMethod?: string | null | undefined;\n formNoValidate?: boolean | null | undefined;\n formTarget?: string | null | undefined;\n name?: string | null | undefined;\n type?: 'submit' | 'reset' | 'button' | null | undefined;\n value?: string | readonly string[] | number | null | undefined;\n }\n\n interface CanvasHTMLAttributes extends HTMLAttributes {\n height?: number | string | null | undefined;\n width?: number | string | null | undefined;\n }\n\n interface ColHTMLAttributes extends HTMLAttributes {\n span?: number | null | undefined;\n width?: number | string | null | undefined;\n }\n\n interface ColgroupHTMLAttributes extends HTMLAttributes {\n span?: number | null | undefined;\n }\n\n interface DataHTMLAttributes extends HTMLAttributes {\n value?: string | readonly string[] | number | null | undefined;\n }\n\n interface DetailsHTMLAttributes extends HTMLAttributes {\n open?: boolean | null | undefined;\n onToggle?: InfernoEventHandler | null | undefined;\n name?: string | null | undefined;\n }\n\n interface DelHTMLAttributes extends HTMLAttributes {\n cite?: string | null | undefined;\n dateTime?: string | null | undefined;\n }\n\n interface DialogHTMLAttributes extends HTMLAttributes {\n onCancel?: InfernoEventHandler | null | undefined;\n onClose?: InfernoEventHandler | null | undefined;\n open?: boolean | null | undefined;\n }\n\n interface EmbedHTMLAttributes extends HTMLAttributes {\n height?: number | string | null | undefined;\n src?: string | null | undefined;\n type?: string | null | undefined;\n width?: number | string | null | undefined;\n }\n\n interface FieldsetHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | null | undefined;\n form?: string | null | undefined;\n name?: string | null | undefined;\n }\n\n interface FormHTMLAttributes extends HTMLAttributes {\n acceptCharset?: string | null | undefined;\n action?: string | null | undefined;\n autoComplete?: string | null | undefined;\n encType?: string | null | undefined;\n method?: string | null | undefined;\n name?: string | null | undefined;\n noValidate?: boolean | null | undefined;\n target?: string | null | undefined;\n }\n\n interface HtmlHTMLAttributes extends HTMLAttributes {\n manifest?: string | null | undefined;\n }\n\n interface IframeHTMLAttributes extends HTMLAttributes {\n allow?: string | null | undefined;\n allowFullScreen?: boolean | null | undefined;\n allowTransparency?: boolean | null | undefined;\n /** @deprecated */\n frameBorder?: number | string | null | undefined;\n height?: number | string | null | undefined;\n loading?: 'eager' | 'lazy' | null | undefined;\n /** @deprecated */\n marginHeight?: number | null | undefined;\n /** @deprecated */\n marginWidth?: number | null | undefined;\n name?: string | null | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | null | undefined;\n sandbox?: string | null | undefined;\n /** @deprecated */\n scrolling?: string | null | undefined;\n seamless?: boolean | null | undefined;\n src?: string | null | undefined;\n srcDoc?: string | null | undefined;\n width?: number | string | null | undefined;\n }\n\n interface ImgHTMLAttributes extends HTMLAttributes {\n alt?: string | null | undefined;\n crossOrigin?: CrossOrigin;\n decoding?: 'async' | 'auto' | 'sync' | null | undefined;\n fetchPriority?: 'high' | 'low' | 'auto';\n height?: number | string | null | undefined;\n loading?: 'eager' | 'lazy' | null | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | null | undefined;\n sizes?: string | null | undefined;\n src?: string | null | undefined;\n srcSet?: string | null | undefined;\n useMap?: string | null | undefined;\n width?: number | string | null | undefined;\n }\n\n interface InsHTMLAttributes extends HTMLAttributes {\n cite?: string | null | undefined;\n dateTime?: string | null | undefined;\n }\n\n type HTMLInputTypeAttribute =\n | 'button'\n | 'checkbox'\n | 'color'\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'file'\n | 'hidden'\n | 'image'\n | 'month'\n | 'number'\n | 'password'\n | 'radio'\n | 'range'\n | 'reset'\n | 'search'\n | 'submit'\n | 'tel'\n | 'text'\n | 'time'\n | 'url'\n | 'week'\n | (string & {});\n\n type AutoFillAddressKind = 'billing' | 'shipping';\n type AutoFillBase = '' | 'off' | 'on';\n type AutoFillContactField =\n | 'email'\n | 'tel'\n | 'tel-area-code'\n | 'tel-country-code'\n | 'tel-extension'\n | 'tel-local'\n | 'tel-local-prefix'\n | 'tel-local-suffix'\n | 'tel-national';\n type AutoFillContactKind = 'home' | 'mobile' | 'work';\n type AutoFillCredentialField = 'webauthn';\n type AutoFillNormalField =\n | 'additional-name'\n | 'address-level1'\n | 'address-level2'\n | 'address-level3'\n | 'address-level4'\n | 'address-line1'\n | 'address-line2'\n | 'address-line3'\n | 'bday-day'\n | 'bday-month'\n | 'bday-year'\n | 'cc-csc'\n | 'cc-exp'\n | 'cc-exp-month'\n | 'cc-exp-year'\n | 'cc-family-name'\n | 'cc-given-name'\n | 'cc-name'\n | 'cc-number'\n | 'cc-type'\n | 'country'\n | 'country-name'\n | 'current-password'\n | 'family-name'\n | 'given-name'\n | 'honorific-prefix'\n | 'honorific-suffix'\n | 'name'\n | 'new-password'\n | 'one-time-code'\n | 'organization'\n | 'postal-code'\n | 'street-address'\n | 'transaction-amount'\n | 'transaction-currency'\n | 'username';\n type OptionalPrefixToken = `${T} ` | '';\n type OptionalPostfixToken = ` ${T}` | '';\n type AutoFillField =\n | AutoFillNormalField\n | `${OptionalPrefixToken}${AutoFillContactField}`;\n type AutoFillSection = `section-${string}`;\n type AutoFill =\n | AutoFillBase\n | `${OptionalPrefixToken}${OptionalPrefixToken}${AutoFillField}${OptionalPostfixToken}`;\n type HTMLInputAutoCompleteAttribute = AutoFill | (string & {});\n\n interface InputHTMLAttributes extends HTMLAttributes {\n accept?: string | null | undefined;\n alt?: string | null | undefined;\n autoComplete?: HTMLInputAutoCompleteAttribute | null | undefined;\n capture?: boolean | 'user' | 'environment' | null | undefined; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute\n checked?: boolean | null | undefined;\n disabled?: boolean | null | undefined;\n form?: string | null | undefined;\n formAction?: string | null | undefined;\n formEncType?: string | null | undefined;\n formMethod?: string | null | undefined;\n formNoValidate?: boolean | null | undefined;\n formTarget?: string | null | undefined;\n height?: number | string | null | undefined;\n indeterminate?: boolean | null | undefined;\n list?: string | null | undefined;\n max?: number | string | null | undefined;\n maxLength?: number | null | undefined;\n min?: number | string | null | undefined;\n minLength?: number | null | undefined;\n multiple?: boolean | null | undefined;\n name?: string | null | undefined;\n pattern?: string | null | undefined;\n placeholder?: string | null | undefined;\n readOnly?: boolean | null | undefined;\n required?: boolean | null | undefined;\n size?: number | null | undefined;\n src?: string | null | undefined;\n step?: number | string | null | undefined;\n type?: HTMLInputTypeAttribute | null | undefined;\n value?: string | readonly string[] | number | null | undefined;\n width?: number | string | null | undefined;\n }\n\n interface KeygenHTMLAttributes extends HTMLAttributes {\n challenge?: string | null | undefined;\n disabled?: boolean | null | undefined;\n form?: string | null | undefined;\n keyType?: string | null | undefined;\n keyParams?: string | null | undefined;\n name?: string | null | undefined;\n }\n\n interface LabelHTMLAttributes extends HTMLAttributes {\n form?: string | null | undefined;\n htmlFor?: string | null | undefined;\n for?: string | null | undefined;\n }\n\n interface LiHTMLAttributes extends HTMLAttributes {\n value?: string | readonly string[] | number | null | undefined;\n }\n\n interface LinkHTMLAttributes extends HTMLAttributes {\n as?: string | null | undefined;\n crossOrigin?: CrossOrigin;\n fetchPriority?: 'high' | 'low' | 'auto';\n href?: string | null | undefined;\n hrefLang?: string | null | undefined;\n integrity?: string | null | undefined;\n media?: string | null | undefined;\n imageSrcSet?: string | null | undefined;\n imageSizes?: string | null | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | null | undefined;\n sizes?: string | null | undefined;\n type?: string | null | undefined;\n charSet?: string | null | undefined;\n }\n\n interface MapHTMLAttributes extends HTMLAttributes {\n name?: string | null | undefined;\n }\n\n interface MenuHTMLAttributes extends HTMLAttributes {\n type?: string | null | undefined;\n }\n\n interface MediaHTMLAttributes extends HTMLAttributes {\n autoPlay?: boolean | null | undefined;\n controls?: boolean | null | undefined;\n controlsList?: string | null | undefined;\n crossOrigin?: CrossOrigin;\n loop?: boolean | null | undefined;\n mediaGroup?: string | null | undefined;\n muted?: boolean | null | undefined;\n playsInline?: boolean | null | undefined;\n preload?: string | null | undefined;\n src?: string | null | undefined;\n }\n\n interface MetaHTMLAttributes extends HTMLAttributes {\n charSet?: string | null | undefined;\n content?: string | null | undefined;\n httpEquiv?: string | null | undefined;\n media?: string | null | undefined;\n name?: string | null | undefined;\n }\n\n interface MeterHTMLAttributes extends HTMLAttributes {\n form?: string | null | undefined;\n high?: number | null | undefined;\n low?: number | null | undefined;\n max?: number | string | null | undefined;\n min?: number | string | null | undefined;\n optimum?: number | null | undefined;\n value?: string | readonly string[] | number | null | undefined;\n }\n\n interface QuoteHTMLAttributes extends HTMLAttributes {\n cite?: string | null | undefined;\n }\n\n interface ObjectHTMLAttributes extends HTMLAttributes {\n classID?: string | null | undefined;\n data?: string | null | undefined;\n form?: string | null | undefined;\n height?: number | string | null | undefined;\n name?: string | null | undefined;\n type?: string | null | undefined;\n useMap?: string | null | undefined;\n width?: number | string | null | undefined;\n wmode?: string | null | undefined;\n }\n\n interface OlHTMLAttributes extends HTMLAttributes {\n reversed?: boolean | null | undefined;\n start?: number | null | undefined;\n type?: '1' | 'a' | 'A' | 'i' | 'I' | null | undefined;\n }\n\n interface OptgroupHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | null | undefined;\n label?: string | null | undefined;\n }\n\n interface OptionHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | null | undefined;\n label?: string | null | undefined;\n selected?: boolean | null | undefined;\n value?: string | readonly string[] | number | null | undefined;\n }\n\n interface OutputHTMLAttributes extends HTMLAttributes {\n form?: string | null | undefined;\n htmlFor?: string | null | undefined;\n name?: string | null | undefined;\n }\n\n interface ParamHTMLAttributes extends HTMLAttributes {\n name?: string | null | undefined;\n value?: string | readonly string[] | number | null | undefined;\n }\n\n interface ProgressHTMLAttributes extends HTMLAttributes {\n max?: number | string | null | undefined;\n value?: string | readonly string[] | number | null | undefined;\n }\n\n interface SlotHTMLAttributes extends HTMLAttributes {\n name?: string | null | undefined;\n }\n\n interface ScriptHTMLAttributes extends HTMLAttributes {\n async?: boolean | null | undefined;\n /** @deprecated */\n charSet?: string | null | undefined;\n crossOrigin?: CrossOrigin;\n defer?: boolean | null | undefined;\n integrity?: string | null | undefined;\n noModule?: boolean | null | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | null | undefined;\n src?: string | null | undefined;\n type?: string | null | undefined;\n }\n\n interface SelectHTMLAttributes extends HTMLAttributes {\n autoComplete?: string | null | undefined;\n disabled?: boolean | null | undefined;\n form?: string | null | undefined;\n multiple?: boolean | null | undefined;\n name?: string | null | undefined;\n required?: boolean | null | undefined;\n size?: number | null | undefined;\n value?: string | readonly string[] | number | null | undefined;\n selectedIndex?: number | null | undefined;\n }\n\n interface SourceHTMLAttributes extends HTMLAttributes {\n height?: number | string | null | undefined;\n media?: string | null | undefined;\n sizes?: string | null | undefined;\n src?: string | null | undefined;\n srcSet?: string | null | undefined;\n type?: string | null | undefined;\n width?: number | string | null | undefined;\n }\n\n interface StyleHTMLAttributes extends HTMLAttributes {\n media?: string | null | undefined;\n scoped?: boolean | null | undefined;\n type?: string | null | undefined;\n }\n\n interface TableHTMLAttributes extends HTMLAttributes {\n align?: 'left' | 'center' | 'right' | null | undefined;\n bgcolor?: string | null | undefined;\n border?: number | null | undefined;\n cellPadding?: number | string | null | undefined;\n cellSpacing?: number | string | null | undefined;\n frame?: boolean | null | undefined;\n rules?: 'none' | 'groups' | 'rows' | 'columns' | 'all' | null | undefined;\n summary?: string | null | undefined;\n width?: number | string | null | undefined;\n }\n\n interface TextareaHTMLAttributes extends HTMLAttributes {\n autoComplete?: string | null | undefined;\n autoFocus?: boolean | null | undefined;\n cols?: number | null | undefined;\n dirName?: string | null | undefined;\n disabled?: boolean | null | undefined;\n form?: string | null | undefined;\n maxLength?: number | null | undefined;\n minLength?: number | null | undefined;\n name?: string | null | undefined;\n placeholder?: string | null | undefined;\n readOnly?: boolean | null | undefined;\n required?: boolean | null | undefined;\n rows?: number | null | undefined;\n value?: string | readonly string[] | number | null | undefined;\n wrap?: string | null | undefined;\n }\n\n interface TdHTMLAttributes extends HTMLAttributes {\n align?: 'left' | 'center' | 'right' | 'justify' | 'char' | null | undefined;\n colSpan?: number | null | undefined;\n headers?: string | null | undefined;\n rowSpan?: number | null | undefined;\n scope?: string | null | undefined;\n abbr?: string | null | undefined;\n height?: number | string | null | undefined;\n width?: number | string | null | undefined;\n valign?: 'top' | 'middle' | 'bottom' | 'baseline' | null | undefined;\n }\n\n interface ThHTMLAttributes extends HTMLAttributes {\n align?: 'left' | 'center' | 'right' | 'justify' | 'char' | null | undefined;\n colSpan?: number | null | undefined;\n headers?: string | null | undefined;\n rowSpan?: number | null | undefined;\n scope?: string | null | undefined;\n abbr?: string | null | undefined;\n }\n\n interface TimeHTMLAttributes extends HTMLAttributes {\n dateTime?: string | null | undefined;\n }\n\n interface TrackHTMLAttributes extends HTMLAttributes {\n default?: boolean | null | undefined;\n kind?: string | null | undefined;\n label?: string | null | undefined;\n src?: string | null | undefined;\n srcLang?: string | null | undefined;\n }\n\n interface VideoHTMLAttributes extends MediaHTMLAttributes {\n type?: string | null | undefined;\n height?: number | string | null | undefined;\n playsInline?: boolean | null | undefined;\n poster?: string | null | undefined;\n width?: number | string | null | undefined;\n disablePictureInPicture?: boolean | null | undefined;\n disableRemotePlayback?: boolean | null | undefined;\n }\n\n // this list is \"complete\" in that it contains every SVG attribute\n //\n // The three broad type categories are (in order of restrictiveness):\n // - \"number | string\"\n // - \"string\"\n // - union of string literals\n interface SVGAttributes extends AriaAttributes, DOMAttributes {\n class?: string | null | undefined;\n\n // Attributes which also defined in HTMLAttributes\n // See comment in SVGDOMPropertyConfig.js\n className?: string | null | undefined;\n color?: string | null | undefined;\n height?: number | string | null | undefined;\n id?: string | null | undefined;\n lang?: string | null | undefined;\n max?: number | string | null | undefined;\n media?: string | null | undefined;\n method?: string | null | undefined;\n min?: number | string | null | undefined;\n name?: string | null | undefined;\n style?: any;\n target?: string | null | undefined;\n type?: string | null | undefined;\n width?: number | string | null | undefined;\n\n // Other HTML properties supported by SVG elements in browsers\n role?: AriaRole | null | undefined;\n tabIndex?: number | null | undefined;\n crossOrigin?: 'anonymous' | 'use-credentials' | '' | null | undefined;\n\n // SVG Specific attributes\n accentHeight?: number | string | null | undefined;\n 'accent-height'?: number | string | null | undefined;\n accumulate?: 'none' | 'sum' | null | undefined;\n additive?: 'replace' | 'sum' | null | undefined;\n alignmentBaseline?:\n | 'auto'\n | 'baseline'\n | 'before-edge'\n | 'text-before-edge'\n | 'middle'\n | 'central'\n | 'after-edge'\n | 'text-after-edge'\n | 'ideographic'\n | 'alphabetic'\n | 'hanging'\n | 'mathematical'\n | 'inherit'\n | null\n | undefined;\n 'alignment-baseline'?:\n | 'auto'\n | 'baseline'\n | 'before-edge'\n | 'text-before-edge'\n | 'middle'\n | 'central'\n | 'after-edge'\n | 'text-after-edge'\n | 'ideographic'\n | 'alphabetic'\n | 'hanging'\n | 'mathematical'\n | 'inherit'\n | null\n | undefined;\n allowReorder?: 'no' | 'yes' | null | undefined;\n alphabetic?: number | string | null | undefined;\n amplitude?: number | string | null | undefined;\n arabicForm?:\n | 'initial'\n | 'medial'\n | 'terminal'\n | 'isolated'\n | null\n | undefined;\n 'arabic-form'?:\n | 'initial'\n | 'medial'\n | 'terminal'\n | 'isolated'\n | null\n | undefined;\n ascent?: number | string | null | undefined;\n attributeName?: string | null | undefined;\n attributeType?: string | null | undefined;\n autoReverse?: Booleanish | null | undefined;\n azimuth?: number | string | null | undefined;\n baseFrequency?: number | string | null | undefined;\n baselineShift?: number | string | null | undefined;\n 'baseline-shift'?: number | string | null | undefined;\n baseProfile?: number | string | null | undefined;\n bbox?: number | string | null | undefined;\n begin?: number | string | null | undefined;\n bias?: number | string | null | undefined;\n by?: number | string | null | undefined;\n calcMode?: number | string | null | undefined;\n capHeight?: number | string | null | undefined;\n 'cap-height'?: number | string | null | undefined;\n clip?: number | string | null | undefined;\n clipPath?: string | null | undefined;\n 'clip-path'?: string | null | undefined;\n clipPathUnits?: number | string | null | undefined;\n clipRule?: number | string | null | undefined;\n 'clip-rule'?: number | string | null | undefined;\n colorInterpolation?: number | string | null | undefined;\n 'color-interpolation'?: number | string | null | undefined;\n colorInterpolationFilters?:\n | 'auto'\n | 'sRGB'\n | 'linearRGB'\n | 'inherit'\n | null\n | undefined;\n 'color-interpolation-filters'?:\n | 'auto'\n | 'sRGB'\n | 'linearRGB'\n | 'inherit'\n | null\n | undefined;\n colorProfile?: number | string | null | undefined;\n 'color-profile'?: number | string | null | undefined;\n colorRendering?: number | string | null | undefined;\n 'color-rendering'?: number | string | null | undefined;\n contentScriptType?: number | string | null | undefined;\n contentStyleType?: number | string | null | undefined;\n cursor?: number | string | null | undefined;\n cx?: number | string | null | undefined;\n cy?: number | string | null | undefined;\n d?: string | null | undefined;\n decelerate?: number | string | null | undefined;\n descent?: number | string | null | undefined;\n diffuseConstant?: number | string | null | undefined;\n direction?: number | string | null | undefined;\n display?: number | string | null | undefined;\n divisor?: number | string | null | undefined;\n dominantBaseline?: number | string | null | undefined;\n 'dominant-baseline'?: number | string | null | undefined;\n dur?: number | string | null | undefined;\n dx?: number | string | null | undefined;\n dy?: number | string | null | undefined;\n edgeMode?: number | string | null | undefined;\n elevation?: number | string | null | undefined;\n enableBackground?: number | string | null | undefined;\n 'enable-background'?: number | string | null | undefined;\n end?: number | string | null | undefined;\n exponent?: number | string | null | undefined;\n externalResourcesRequired?: Booleanish | null | undefined;\n fill?: string | null | undefined;\n fillOpacity?: number | string | null | undefined;\n 'fill-opacity'?: number | string | null | undefined;\n fillRule?: 'nonzero' | 'evenodd' | 'inherit' | null | undefined;\n 'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit' | null | undefined;\n filter?: string | null | undefined;\n filterRes?: number | string | null | undefined;\n filterUnits?: number | string | null | undefined;\n floodColor?: number | string | null | undefined;\n 'flood-color'?: number | string | null | undefined;\n floodOpacity?: number | string | null | undefined;\n 'flood-opacity'?: number | string | null | undefined;\n focusable?: Booleanish | 'auto' | null | undefined;\n fontFamily?: string | null | undefined;\n 'font-family'?: string | null | undefined;\n fontSize?: number | string | null | undefined;\n 'font-size'?: number | string | null | undefined;\n fontSizeAdjust?: number | string | null | undefined;\n 'font-size-adjust'?: number | string | null | undefined;\n fontStretch?: number | string | null | undefined;\n 'font-stretch'?: number | string | null | undefined;\n fontStyle?: number | string | null | undefined;\n 'font-style'?: number | string | null | undefined;\n fontVariant?: number | string | null | undefined;\n 'font-variant'?: number | string | null | undefined;\n fontWeight?: number | string | null | undefined;\n 'font-weight'?: number | string | null | undefined;\n format?: number | string | null | undefined;\n fr?: number | string | null | undefined;\n from?: number | string | null | undefined;\n fx?: number | string | null | undefined;\n fy?: number | string | null | undefined;\n g1?: number | string | null | undefined;\n g2?: number | string | null | undefined;\n glyphName?: number | string | null | undefined;\n 'glyph-name'?: number | string | null | undefined;\n glyphOrientationHorizontal?: number | string | null | undefined;\n 'glyph-orientation-horizontal'?: number | string | null | undefined;\n glyphOrientationVertical?: number | string | null | undefined;\n 'glyph-orientation-vertical'?: number | string | null | undefined;\n glyphRef?: number | string | null | undefined;\n gradientTransform?: string | null | undefined;\n gradientUnits?: string | null | undefined;\n hanging?: number | string | null | undefined;\n horizAdvX?: number | string | null | undefined;\n 'horiz-advX'?: number | string | null | undefined;\n horizOriginX?: number | string | null | undefined;\n 'horiz-origin-x'?: number | string | null | undefined;\n href?: string | null | undefined;\n ideographic?: number | string | null | undefined;\n imageRendering?: number | string | null | undefined;\n 'image-rendering'?: number | string | null | undefined;\n in2?: number | string | null | undefined;\n in?: string | null | undefined;\n intercept?: number | string | null | undefined;\n k1?: number | string | null | undefined;\n k2?: number | string | null | undefined;\n k3?: number | string | null | undefined;\n k4?: number | string | null | undefined;\n k?: number | string | null | undefined;\n kernelMatrix?: number | string | null | undefined;\n kernelUnitLength?: number | string | null | undefined;\n kerning?: number | string | null | undefined;\n keyPoints?: number | string | null | undefined;\n keySplines?: number | string | null | undefined;\n keyTimes?: number | string | null | undefined;\n lengthAdjust?: number | string | null | undefined;\n letterSpacing?: number | string | null | undefined;\n 'letter-spacing'?: number | string | null | undefined;\n lightingColor?: number | string | null | undefined;\n 'lighting-color'?: number | string | null | undefined;\n limitingConeAngle?: number | string | null | undefined;\n local?: number | string | null | undefined;\n markerEnd?: string | null | undefined;\n 'marker-end'?: string | null | undefined;\n markerHeight?: number | string | null | undefined;\n 'marker-height'?: number | string | null | undefined;\n markerMid?: string | null | undefined;\n 'marker-mid'?: string | null | undefined;\n markerStart?: string | null | undefined;\n 'marker-start'?: string | null | undefined;\n markerUnits?: number | string | null | undefined;\n markerWidth?: number | string | null | undefined;\n mask?: string | null | undefined;\n maskContentUnits?: number | string | null | undefined;\n maskUnits?: number | string | null | undefined;\n mathematical?: number | string | null | undefined;\n mode?: number | string | null | undefined;\n numOctaves?: number | string | null | undefined;\n offset?: number | string | null | undefined;\n opacity?: number | string | null | undefined;\n operator?: number | string | null | undefined;\n order?: number | string | null | undefined;\n orient?: number | string | null | undefined;\n orientation?: number | string | null | undefined;\n origin?: number | string | null | undefined;\n overflow?: number | string | null | undefined;\n overlinePosition?: number | string | null | undefined;\n 'overline-position'?: number | string | null | undefined;\n overlineThickness?: number | string | null | undefined;\n 'overline-thickness'?: number | string | null | undefined;\n paintOrder?: number | string | null | undefined;\n 'paint-order'?: number | string | null | undefined;\n panose1?: number | string | null | undefined;\n 'panose-1'?: number | string | null | undefined;\n path?: string | null | undefined;\n pathLength?: number | string | null | undefined;\n patternContentUnits?: string | null | undefined;\n patternTransform?: number | string | null | undefined;\n patternUnits?: string | null | undefined;\n pointerEvents?: number | string | null | undefined;\n 'pointer-events'?: number | string | null | undefined;\n points?: string | null | undefined;\n pointsAtX?: number | string | null | undefined;\n pointsAtY?: number | string | null | undefined;\n pointsAtZ?: number | string | null | undefined;\n preserveAlpha?: Booleanish | null | undefined;\n preserveAspectRatio?: string | null | undefined;\n primitiveUnits?: number | string | null | undefined;\n r?: number | string | null | undefined;\n radius?: number | string | null | undefined;\n refX?: number | string | null | undefined;\n refY?: number | string | null | undefined;\n renderingIntent?: number | string | null | undefined;\n 'rendering-intent'?: number | string | null | undefined;\n repeatCount?: number | string | null | undefined;\n repeatDur?: number | string | null | undefined;\n requiredExtensions?: number | string | null | undefined;\n requiredFeatures?: number | string | null | undefined;\n restart?: number | string | null | undefined;\n result?: string | null | undefined;\n rotate?: number | string | null | undefined;\n rx?: number | string | null | undefined;\n ry?: number | string | null | undefined;\n scale?: number | string | null | undefined;\n seed?: number | string | null | undefined;\n shapeRendering?: number | string | null | undefined;\n 'shape-rendering'?: number | string | null | undefined;\n slope?: number | string | null | undefined;\n spacing?: number | string | null | undefined;\n specularConstant?: number | string | null | undefined;\n specularExponent?: number | string | null | undefined;\n speed?: number | string | null | undefined;\n spreadMethod?: string | null | undefined;\n startOffset?: number | string | null | undefined;\n stdDeviation?: number | string | null | undefined;\n stemh?: number | string | null | undefined;\n stemv?: number | string | null | undefined;\n stitchTiles?: number | string | null | undefined;\n stopColor?: string | null | undefined;\n 'stop-color'?: string | null | undefined;\n stopOpacity?: number | string | null | undefined;\n 'stop-opacity'?: number | string | null | undefined;\n strikethroughPosition?: number | string | null | undefined;\n 'strikethrough-position'?: number | string | null | undefined;\n strikethroughThickness?: number | string | null | undefined;\n 'strikethrough-thickness'?: number | string | null | undefined;\n string?: number | string | null | undefined;\n stroke?: string | null | undefined;\n strokeDasharray?: string | number | null | undefined;\n 'stroke-dasharray'?: string | number | null | undefined;\n strokeDashoffset?: string | number | null | undefined;\n 'stroke-dashoffset'?: string | number | null | undefined;\n strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit' | null | undefined;\n 'stroke-linecap'?:\n | 'butt'\n | 'round'\n | 'square'\n | 'inherit'\n | null\n | undefined;\n strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit' | null | undefined;\n 'stroke-linejoin'?:\n | 'miter'\n | 'round'\n | 'bevel'\n | 'inherit'\n | null\n | undefined;\n strokeMiterlimit?: number | string | null | undefined;\n 'stroke-miterlimit'?: number | string | null | undefined;\n strokeOpacity?: number | string | null | undefined;\n 'stroke-opacity'?: number | string | null | undefined;\n strokeWidth?: number | string | null | undefined;\n 'stroke-width'?: number | string | null | undefined;\n surfaceScale?: number | string | null | undefined;\n systemLanguage?: number | string | null | undefined;\n tableValues?: number | string | null | undefined;\n targetX?: number | string | null | undefined;\n targetY?: number | string | null | undefined;\n textAnchor?: string | null | undefined;\n textDecoration?: number | string | null | undefined;\n 'text-decoration'?: number | string | null | undefined;\n textLength?: number | string | null | undefined;\n textRendering?: number | string | null | undefined;\n 'text-rendering'?: number | string | null | undefined;\n to?: number | string | null | undefined;\n transform?: string | null | undefined;\n u1?: number | string | null | undefined;\n u2?: number | string | null | undefined;\n underlinePosition?: number | string | null | undefined;\n 'underline-position'?: number | string | null | undefined;\n underlineThickness?: number | string | null | undefined;\n 'underline-thickness'?: number | string | null | undefined;\n unicode?: number | string | null | undefined;\n unicodeBidi?: number | string | null | undefined;\n 'unicode-bidi'?: number | string | null | undefined;\n unicodeRange?: number | string | null | undefined;\n 'unicode-range'?: number | string | null | undefined;\n unitsPerEm?: number | string | null | undefined;\n 'units-per-em'?: number | string | null | undefined;\n vAlphabetic?: number | string | null | undefined;\n 'v-alphabetic'?: number | string | null | undefined;\n values?: string | null | undefined;\n vectorEffect?: number | string | null | undefined;\n 'vector-effect'?: number | string | null | undefined;\n version?: string | null | undefined;\n vertAdvY?: number | string | null | undefined;\n 'vert-adv-y'?: number | string | null | undefined;\n vertOriginX?: number | string | null | undefined;\n 'vert-origin-x'?: number | string | null | undefined;\n vertOriginY?: number | string | null | undefined;\n 'vert-origin-y'?: number | string | null | undefined;\n vHanging?: number | string | null | undefined;\n 'v-hanging'?: number | string | null | undefined;\n vIdeographic?: number | string | null | undefined;\n 'v-ideographic'?: number | string | null | undefined;\n viewBox?: string | null | undefined;\n viewTarget?: number | string | null | undefined;\n visibility?: number | string | null | undefined;\n vMathematical?: number | string | null | undefined;\n 'v-mathematical'?: number | string | null | undefined;\n widths?: number | string | null | undefined;\n wordSpacing?: number | string | null | undefined;\n 'word-spacing'?: number | string | null | undefined;\n writingMode?: number | string | null | undefined;\n 'writing-mode'?: number | string | null | undefined;\n x1?: number | string | null | undefined;\n x2?: number | string | null | undefined;\n x?: number | string | null | undefined;\n xChannelSelector?: string | null | undefined;\n xHeight?: number | string | null | undefined;\n 'x-height'?: number | string | null | undefined;\n xlinkActuate?: string | null | undefined;\n 'xlink:actuate'?: string | null | undefined;\n xlinkArcrole?: string | null | undefined;\n 'xlink:arcrole'?: string | null | undefined;\n xlinkHref?: string | null | undefined;\n 'xlink:href'?: string | null | undefined;\n xlinkRole?: string | null | undefined;\n 'xlink:role'?: string | null | undefined;\n xlinkShow?: string | null | undefined;\n 'xlink:show'?: string | null | undefined;\n xlinkTitle?: string | null | undefined;\n 'xlink:title'?: string | null | undefined;\n xlinkType?: string | null | undefined;\n 'xlink:type'?: string | null | undefined;\n xmlBase?: string | null | undefined;\n 'xml:base'?: string | null | undefined;\n xmlLang?: string | null | undefined;\n 'xml:lang'?: string | null | undefined;\n xmlns?: string | null | undefined;\n xmlnsXlink?: string | null | undefined;\n 'xmlns:xlink'?: string | null | undefined;\n xmlSpace?: string | null | undefined;\n 'xml:space'?: string | null | undefined;\n y1?: number | string | null | undefined;\n y2?: number | string | null | undefined;\n y?: number | string | null | undefined;\n yChannelSelector?: string | null | undefined;\n z?: number | string | null | undefined;\n zoomAndPan?: string | null | undefined;\n }\n\n interface WebViewHTMLAttributes extends HTMLAttributes {\n allowFullScreen?: boolean | null | undefined;\n allowpopups?: boolean | null | undefined;\n autoFocus?: boolean | null | undefined;\n autosize?: boolean | null | undefined;\n blinkfeatures?: string | null | undefined;\n disableblinkfeatures?: string | null | undefined;\n disableguestresize?: boolean | null | undefined;\n disablewebsecurity?: boolean | null | undefined;\n guestinstance?: string | null | undefined;\n httpreferrer?: string | null | undefined;\n nodeintegration?: boolean | null | undefined;\n partition?: string | null | undefined;\n plugins?: boolean | null | undefined;\n preload?: string | null | undefined;\n src?: string | null | undefined;\n useragent?: string | null | undefined;\n webpreferences?: string | null | undefined;\n }\n\n //\n // Inferno.DOM\n // ----------------------------------------------------------------------\n\n interface InfernoHTML {\n a: DetailedHTMLFactory<\n AnchorHTMLAttributes,\n HTMLAnchorElement\n >;\n abbr: DetailedHTMLFactory, HTMLElement>;\n address: DetailedHTMLFactory, HTMLElement>;\n area: DetailedHTMLFactory<\n AreaHTMLAttributes,\n HTMLAreaElement\n >;\n article: DetailedHTMLFactory, HTMLElement>;\n aside: DetailedHTMLFactory, HTMLElement>;\n audio: DetailedHTMLFactory<\n AudioHTMLAttributes,\n HTMLAudioElement\n >;\n b: DetailedHTMLFactory, HTMLElement>;\n base: DetailedHTMLFactory<\n BaseHTMLAttributes,\n HTMLBaseElement\n >;\n bdi: DetailedHTMLFactory, HTMLElement>;\n bdo: DetailedHTMLFactory, HTMLElement>;\n big: DetailedHTMLFactory, HTMLElement>;\n blockquote: DetailedHTMLFactory<\n BlockquoteHTMLAttributes,\n HTMLQuoteElement\n >;\n body: DetailedHTMLFactory, HTMLBodyElement>;\n br: DetailedHTMLFactory, HTMLBRElement>;\n button: DetailedHTMLFactory<\n ButtonHTMLAttributes,\n HTMLButtonElement\n >;\n canvas: DetailedHTMLFactory<\n CanvasHTMLAttributes,\n HTMLCanvasElement\n >;\n caption: DetailedHTMLFactory, HTMLElement>;\n cite: DetailedHTMLFactory, HTMLElement>;\n code: DetailedHTMLFactory, HTMLElement>;\n col: DetailedHTMLFactory<\n ColHTMLAttributes,\n HTMLTableColElement\n >;\n colgroup: DetailedHTMLFactory<\n ColgroupHTMLAttributes,\n HTMLTableColElement\n >;\n data: DetailedHTMLFactory<\n DataHTMLAttributes,\n HTMLDataElement\n >;\n datalist: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLDataListElement\n >;\n dd: DetailedHTMLFactory, HTMLElement>;\n del: DetailedHTMLFactory, HTMLModElement>;\n details: DetailedHTMLFactory<\n DetailsHTMLAttributes,\n HTMLDetailsElement\n >;\n dfn: DetailedHTMLFactory, HTMLElement>;\n dialog: DetailedHTMLFactory<\n DialogHTMLAttributes,\n HTMLDialogElement\n >;\n div: DetailedHTMLFactory, HTMLDivElement>;\n dl: DetailedHTMLFactory, HTMLDListElement>;\n dt: DetailedHTMLFactory, HTMLElement>;\n em: DetailedHTMLFactory, HTMLElement>;\n embed: DetailedHTMLFactory<\n EmbedHTMLAttributes,\n HTMLEmbedElement\n >;\n fieldset: DetailedHTMLFactory<\n FieldsetHTMLAttributes,\n HTMLFieldSetElement\n >;\n figcaption: DetailedHTMLFactory, HTMLElement>;\n figure: DetailedHTMLFactory, HTMLElement>;\n footer: DetailedHTMLFactory, HTMLElement>;\n form: DetailedHTMLFactory<\n FormHTMLAttributes,\n HTMLFormElement\n >;\n h1: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLHeadingElement\n >;\n h2: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLHeadingElement\n >;\n h3: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLHeadingElement\n >;\n h4: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLHeadingElement\n >;\n h5: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLHeadingElement\n >;\n h6: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLHeadingElement\n >;\n head: DetailedHTMLFactory, HTMLHeadElement>;\n header: DetailedHTMLFactory, HTMLElement>;\n hgroup: DetailedHTMLFactory, HTMLElement>;\n hr: DetailedHTMLFactory, HTMLHRElement>;\n html: DetailedHTMLFactory<\n HtmlHTMLAttributes,\n HTMLHtmlElement\n >;\n i: DetailedHTMLFactory, HTMLElement>;\n iframe: DetailedHTMLFactory<\n IframeHTMLAttributes,\n HTMLIFrameElement\n >;\n img: DetailedHTMLFactory<\n ImgHTMLAttributes,\n HTMLImageElement\n >;\n input: DetailedHTMLFactory<\n InputHTMLAttributes,\n HTMLInputElement\n >;\n ins: DetailedHTMLFactory, HTMLModElement>;\n kbd: DetailedHTMLFactory, HTMLElement>;\n keygen: DetailedHTMLFactory, HTMLElement>;\n label: DetailedHTMLFactory<\n LabelHTMLAttributes,\n HTMLLabelElement\n >;\n legend: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLLegendElement\n >;\n li: DetailedHTMLFactory, HTMLLIElement>;\n link: DetailedHTMLFactory<\n LinkHTMLAttributes,\n HTMLLinkElement\n >;\n main: DetailedHTMLFactory, HTMLElement>;\n map: DetailedHTMLFactory, HTMLMapElement>;\n mark: DetailedHTMLFactory, HTMLElement>;\n menu: DetailedHTMLFactory, HTMLElement>;\n menuitem: DetailedHTMLFactory, HTMLElement>;\n meta: DetailedHTMLFactory<\n MetaHTMLAttributes,\n HTMLMetaElement\n >;\n meter: DetailedHTMLFactory<\n MeterHTMLAttributes,\n HTMLMeterElement\n >;\n nav: DetailedHTMLFactory, HTMLElement>;\n noscript: DetailedHTMLFactory, HTMLElement>;\n object: DetailedHTMLFactory<\n ObjectHTMLAttributes,\n HTMLObjectElement\n >;\n ol: DetailedHTMLFactory<\n OlHTMLAttributes,\n HTMLOListElement\n >;\n optgroup: DetailedHTMLFactory<\n OptgroupHTMLAttributes,\n HTMLOptGroupElement\n >;\n option: DetailedHTMLFactory<\n OptionHTMLAttributes,\n HTMLOptionElement\n >;\n output: DetailedHTMLFactory<\n OutputHTMLAttributes,\n HTMLOutputElement\n >;\n p: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLParagraphElement\n >;\n param: DetailedHTMLFactory<\n ParamHTMLAttributes,\n HTMLParamElement\n >;\n picture: DetailedHTMLFactory, HTMLElement>;\n pre: DetailedHTMLFactory, HTMLPreElement>;\n progress: DetailedHTMLFactory<\n ProgressHTMLAttributes,\n HTMLProgressElement\n >;\n q: DetailedHTMLFactory<\n QuoteHTMLAttributes,\n HTMLQuoteElement\n >;\n rp: DetailedHTMLFactory, HTMLElement>;\n rt: DetailedHTMLFactory, HTMLElement>;\n ruby: DetailedHTMLFactory, HTMLElement>;\n s: DetailedHTMLFactory, HTMLElement>;\n samp: DetailedHTMLFactory, HTMLElement>;\n slot: DetailedHTMLFactory<\n SlotHTMLAttributes,\n HTMLSlotElement\n >;\n script: DetailedHTMLFactory<\n ScriptHTMLAttributes,\n HTMLScriptElement\n >;\n section: DetailedHTMLFactory, HTMLElement>;\n select: DetailedHTMLFactory<\n SelectHTMLAttributes,\n HTMLSelectElement\n >;\n small: DetailedHTMLFactory, HTMLElement>;\n source: DetailedHTMLFactory<\n SourceHTMLAttributes,\n HTMLSourceElement\n >;\n span: DetailedHTMLFactory, HTMLSpanElement>;\n strong: DetailedHTMLFactory, HTMLElement>;\n style: DetailedHTMLFactory<\n StyleHTMLAttributes,\n HTMLStyleElement\n >;\n sub: DetailedHTMLFactory, HTMLElement>;\n summary: DetailedHTMLFactory, HTMLElement>;\n sup: DetailedHTMLFactory, HTMLElement>;\n table: DetailedHTMLFactory<\n TableHTMLAttributes,\n HTMLTableElement\n >;\n template: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLTemplateElement\n >;\n tbody: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLTableSectionElement\n >;\n td: DetailedHTMLFactory<\n TdHTMLAttributes,\n HTMLTableDataCellElement\n >;\n textarea: DetailedHTMLFactory<\n TextareaHTMLAttributes,\n HTMLTextAreaElement\n >;\n tfoot: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLTableSectionElement\n >;\n th: DetailedHTMLFactory<\n ThHTMLAttributes,\n HTMLTableHeaderCellElement\n >;\n thead: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLTableSectionElement\n >;\n time: DetailedHTMLFactory<\n TimeHTMLAttributes,\n HTMLTimeElement\n >;\n title: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLTitleElement\n >;\n tr: DetailedHTMLFactory<\n HTMLAttributes,\n HTMLTableRowElement\n >;\n track: DetailedHTMLFactory<\n TrackHTMLAttributes,\n HTMLTrackElement\n >;\n u: DetailedHTMLFactory, HTMLElement>;\n ul: DetailedHTMLFactory, HTMLUListElement>;\n var: DetailedHTMLFactory, HTMLElement>;\n video: DetailedHTMLFactory<\n VideoHTMLAttributes,\n HTMLVideoElement\n >;\n wbr: DetailedHTMLFactory, HTMLElement>;\n // webview: DetailedHTMLFactory, HTMLWebViewElement>;\n }\n\n interface InfernoSVG {\n animate: SVGFactory;\n circle: SVGFactory;\n clipPath: SVGFactory;\n defs: SVGFactory;\n desc: SVGFactory;\n ellipse: SVGFactory;\n feBlend: SVGFactory;\n feColorMatrix: SVGFactory;\n feComponentTransfer: SVGFactory;\n feComposite: SVGFactory;\n feConvolveMatrix: SVGFactory;\n feDiffuseLighting: SVGFactory;\n feDisplacementMap: SVGFactory;\n feDistantLight: SVGFactory;\n feDropShadow: SVGFactory;\n feFlood: SVGFactory;\n feFuncA: SVGFactory;\n feFuncB: SVGFactory;\n feFuncG: SVGFactory;\n feFuncR: SVGFactory;\n feGaussianBlur: SVGFactory;\n feImage: SVGFactory;\n feMerge: SVGFactory;\n feMergeNode: SVGFactory;\n feMorphology: SVGFactory;\n feOffset: SVGFactory;\n fePointLight: SVGFactory;\n feSpecularLighting: SVGFactory;\n feSpotLight: SVGFactory;\n feTile: SVGFactory;\n feTurbulence: SVGFactory;\n filter: SVGFactory;\n foreignObject: SVGFactory;\n g: SVGFactory;\n image: SVGFactory;\n line: SVGFactory;\n linearGradient: SVGFactory;\n marker: SVGFactory;\n mask: SVGFactory;\n metadata: SVGFactory;\n path: SVGFactory;\n pattern: SVGFactory;\n polygon: SVGFactory;\n polyline: SVGFactory;\n radialGradient: SVGFactory;\n rect: SVGFactory;\n stop: SVGFactory;\n svg: SVGFactory;\n switch: SVGFactory;\n symbol: SVGFactory;\n text: SVGFactory;\n textPath: SVGFactory;\n tspan: SVGFactory;\n use: SVGFactory;\n view: SVGFactory;\n }\n\n //\n // Browser Interfaces\n // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts\n // ----------------------------------------------------------------------\n\n interface AbstractView {\n styleMedia: StyleMedia;\n document: Document;\n }\n\n interface Touch {\n identifier: number;\n target: EventTarget;\n screenX: number;\n screenY: number;\n clientX: number;\n clientY: number;\n pageX: number;\n pageY: number;\n }\n\n interface TouchList {\n [index: number]: Touch;\n length: number;\n item(index: number): Touch;\n identifiedTouch(identifier: number): Touch;\n }\n}\n\ntype Defaultize = P extends any\n ? string extends keyof P\n ? P\n : Pick> &\n Partial>> &\n Partial>>\n : never;\n\ntype InfernoManagedAttributes = C extends { defaultProps: infer D }\n ? Defaultize\n : P;\n\ndeclare global {\n namespace JSX {\n interface ElementClass extends IComponent {\n render(nextProps, nextState, nextContext): InfernoNode;\n }\n interface ElementAttributesProperty {\n props: {};\n }\n interface ElementChildrenAttribute {\n children: {};\n }\n\n type LibraryManagedAttributes = InfernoManagedAttributes;\n\n interface IntrinsicAttributes extends Inferno.Attributes {}\n interface IntrinsicAttributes extends Inferno.Attributes, Refs {}\n interface IntrinsicClassAttributes extends Inferno.ClassAttributes {}\n\n interface IntrinsicElements {\n // HTML\n a: Inferno.DetailedHTMLProps<\n Inferno.AnchorHTMLAttributes,\n HTMLAnchorElement\n >;\n abbr: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n address: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n area: Inferno.DetailedHTMLProps<\n Inferno.AreaHTMLAttributes,\n HTMLAreaElement\n >;\n article: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n aside: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n audio: Inferno.DetailedHTMLProps<\n Inferno.AudioHTMLAttributes,\n HTMLAudioElement\n >;\n b: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n base: Inferno.DetailedHTMLProps<\n Inferno.BaseHTMLAttributes,\n HTMLBaseElement\n >;\n bdi: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n bdo: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n big: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n blockquote: Inferno.DetailedHTMLProps<\n Inferno.BlockquoteHTMLAttributes,\n HTMLQuoteElement\n >;\n body: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLBodyElement\n >;\n br: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLBRElement\n >;\n button: Inferno.DetailedHTMLProps<\n Inferno.ButtonHTMLAttributes,\n HTMLButtonElement\n >;\n canvas: Inferno.DetailedHTMLProps<\n Inferno.CanvasHTMLAttributes,\n HTMLCanvasElement\n >;\n caption: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n cite: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n code: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n col: Inferno.DetailedHTMLProps<\n Inferno.ColHTMLAttributes,\n HTMLTableColElement\n >;\n colgroup: Inferno.DetailedHTMLProps<\n Inferno.ColgroupHTMLAttributes,\n HTMLTableColElement\n >;\n data: Inferno.DetailedHTMLProps<\n Inferno.DataHTMLAttributes,\n HTMLDataElement\n >;\n datalist: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLDataListElement\n >;\n dd: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n del: Inferno.DetailedHTMLProps<\n Inferno.DelHTMLAttributes,\n HTMLModElement\n >;\n details: Inferno.DetailedHTMLProps<\n Inferno.DetailsHTMLAttributes,\n HTMLDetailsElement\n >;\n dfn: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n dialog: Inferno.DetailedHTMLProps<\n Inferno.DialogHTMLAttributes,\n HTMLDialogElement\n >;\n div: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLDivElement\n >;\n dl: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLDListElement\n >;\n dt: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n em: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n embed: Inferno.DetailedHTMLProps<\n Inferno.EmbedHTMLAttributes,\n HTMLEmbedElement\n >;\n fieldset: Inferno.DetailedHTMLProps<\n Inferno.FieldsetHTMLAttributes,\n HTMLFieldSetElement\n >;\n figcaption: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n figure: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n footer: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n form: Inferno.DetailedHTMLProps<\n Inferno.FormHTMLAttributes,\n HTMLFormElement\n >;\n h1: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLHeadingElement\n >;\n h2: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLHeadingElement\n >;\n h3: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLHeadingElement\n >;\n h4: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLHeadingElement\n >;\n h5: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLHeadingElement\n >;\n h6: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLHeadingElement\n >;\n head: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLHeadElement\n >;\n header: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n hgroup: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n hr: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLHRElement\n >;\n html: Inferno.DetailedHTMLProps<\n Inferno.HtmlHTMLAttributes,\n HTMLHtmlElement\n >;\n i: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n iframe: Inferno.DetailedHTMLProps<\n Inferno.IframeHTMLAttributes,\n HTMLIFrameElement\n >;\n img: Inferno.DetailedHTMLProps<\n Inferno.ImgHTMLAttributes,\n HTMLImageElement\n >;\n input: Inferno.DetailedHTMLProps<\n Inferno.InputHTMLAttributes,\n HTMLInputElement\n >;\n ins: Inferno.DetailedHTMLProps<\n Inferno.InsHTMLAttributes,\n HTMLModElement\n >;\n kbd: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n keygen: Inferno.DetailedHTMLProps<\n Inferno.KeygenHTMLAttributes,\n HTMLElement\n >;\n label: Inferno.DetailedHTMLProps<\n Inferno.LabelHTMLAttributes,\n HTMLLabelElement\n >;\n legend: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLLegendElement\n >;\n li: Inferno.DetailedHTMLProps<\n Inferno.LiHTMLAttributes,\n HTMLLIElement\n >;\n link: Inferno.DetailedHTMLProps<\n Inferno.LinkHTMLAttributes,\n HTMLLinkElement\n >;\n main: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n map: Inferno.DetailedHTMLProps<\n Inferno.MapHTMLAttributes,\n HTMLMapElement\n >;\n mark: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n media: Inferno.DetailedHTMLProps<\n Inferno.MediaHTMLAttributes,\n HTMLMediaElement\n >;\n menu: Inferno.DetailedHTMLProps<\n Inferno.MenuHTMLAttributes,\n HTMLElement\n >;\n menuitem: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n meta: Inferno.DetailedHTMLProps<\n Inferno.MetaHTMLAttributes,\n HTMLMetaElement\n >;\n meter: Inferno.DetailedHTMLProps<\n Inferno.MeterHTMLAttributes,\n HTMLMeterElement\n >;\n nav: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n noindex: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n noscript: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n object: Inferno.DetailedHTMLProps<\n Inferno.ObjectHTMLAttributes,\n HTMLObjectElement\n >;\n ol: Inferno.DetailedHTMLProps<\n Inferno.OlHTMLAttributes,\n HTMLOListElement\n >;\n optgroup: Inferno.DetailedHTMLProps<\n Inferno.OptgroupHTMLAttributes,\n HTMLOptGroupElement\n >;\n option: Inferno.DetailedHTMLProps<\n Inferno.OptionHTMLAttributes,\n HTMLOptionElement\n >;\n output: Inferno.DetailedHTMLProps<\n Inferno.OutputHTMLAttributes,\n HTMLOutputElement\n >;\n p: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLParagraphElement\n >;\n param: Inferno.DetailedHTMLProps<\n Inferno.ParamHTMLAttributes,\n HTMLParamElement\n >;\n picture: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n pre: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLPreElement\n >;\n progress: Inferno.DetailedHTMLProps<\n Inferno.ProgressHTMLAttributes,\n HTMLProgressElement\n >;\n q: Inferno.DetailedHTMLProps<\n Inferno.QuoteHTMLAttributes,\n HTMLQuoteElement\n >;\n rp: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n rt: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n ruby: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n s: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n samp: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n slot: Inferno.DetailedHTMLProps<\n Inferno.SlotHTMLAttributes,\n HTMLSlotElement\n >;\n script: Inferno.DetailedHTMLProps<\n Inferno.ScriptHTMLAttributes,\n HTMLScriptElement\n >;\n section: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n select: Inferno.DetailedHTMLProps<\n Inferno.SelectHTMLAttributes,\n HTMLSelectElement\n >;\n small: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n source: Inferno.DetailedHTMLProps<\n Inferno.SourceHTMLAttributes,\n HTMLSourceElement\n >;\n span: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLSpanElement\n >;\n strong: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n style: Inferno.DetailedHTMLProps<\n Inferno.StyleHTMLAttributes,\n HTMLStyleElement\n >;\n sub: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n summary: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n sup: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n table: Inferno.DetailedHTMLProps<\n Inferno.TableHTMLAttributes,\n HTMLTableElement\n >;\n template: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLTemplateElement\n >;\n tbody: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLTableSectionElement\n >;\n td: Inferno.DetailedHTMLProps<\n Inferno.TdHTMLAttributes,\n HTMLTableDataCellElement\n >;\n textarea: Inferno.DetailedHTMLProps<\n Inferno.TextareaHTMLAttributes,\n HTMLTextAreaElement\n >;\n tfoot: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLTableSectionElement\n >;\n th: Inferno.DetailedHTMLProps<\n Inferno.ThHTMLAttributes,\n HTMLTableHeaderCellElement\n >;\n thead: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLTableSectionElement\n >;\n time: Inferno.DetailedHTMLProps<\n Inferno.TimeHTMLAttributes,\n HTMLTimeElement\n >;\n title: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLTitleElement\n >;\n tr: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLTableRowElement\n >;\n track: Inferno.DetailedHTMLProps<\n Inferno.TrackHTMLAttributes,\n HTMLTrackElement\n >;\n u: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n ul: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLUListElement\n >;\n var: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n video: Inferno.DetailedHTMLProps<\n Inferno.VideoHTMLAttributes,\n HTMLVideoElement\n >;\n wbr: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n HTMLElement\n >;\n // webview: Inferno.DetailedHTMLProps, HTMLWebViewElement>;\n\n // SVG\n svg: Inferno.SVGProps;\n\n animate: Inferno.SVGProps;\n animateMotion: Inferno.SVGProps;\n animateTransform: Inferno.SVGProps;\n circle: Inferno.SVGProps;\n clipPath: Inferno.SVGProps;\n defs: Inferno.SVGProps;\n desc: Inferno.SVGProps;\n ellipse: Inferno.SVGProps;\n feBlend: Inferno.SVGProps;\n feColorMatrix: Inferno.SVGProps;\n feComponentTransfer: Inferno.SVGProps;\n feComposite: Inferno.SVGProps;\n feConvolveMatrix: Inferno.SVGProps;\n feDiffuseLighting: Inferno.SVGProps;\n feDisplacementMap: Inferno.SVGProps;\n feDistantLight: Inferno.SVGProps;\n feDropShadow: Inferno.SVGProps;\n feFlood: Inferno.SVGProps;\n feFuncA: Inferno.SVGProps;\n feFuncB: Inferno.SVGProps;\n feFuncG: Inferno.SVGProps;\n feFuncR: Inferno.SVGProps;\n feGaussianBlur: Inferno.SVGProps;\n feImage: Inferno.SVGProps;\n feMerge: Inferno.SVGProps;\n feMergeNode: Inferno.SVGProps;\n feMorphology: Inferno.SVGProps;\n feOffset: Inferno.SVGProps;\n fePointLight: Inferno.SVGProps;\n feSpecularLighting: Inferno.SVGProps;\n feSpotLight: Inferno.SVGProps;\n feTile: Inferno.SVGProps;\n feTurbulence: Inferno.SVGProps;\n filter: Inferno.SVGProps;\n foreignObject: Inferno.SVGProps;\n g: Inferno.SVGProps;\n image: Inferno.SVGProps;\n line: Inferno.SVGProps;\n linearGradient: Inferno.SVGProps;\n marker: Inferno.SVGProps;\n mask: Inferno.SVGProps;\n metadata: Inferno.SVGProps;\n mpath: Inferno.SVGProps;\n path: Inferno.SVGProps;\n pattern: Inferno.SVGProps;\n polygon: Inferno.SVGProps;\n polyline: Inferno.SVGProps;\n radialGradient: Inferno.SVGProps;\n rect: Inferno.SVGProps;\n stop: Inferno.SVGProps;\n switch: Inferno.SVGProps;\n symbol: Inferno.SVGProps;\n text: Inferno.SVGProps;\n textPath: Inferno.SVGProps;\n tspan: Inferno.SVGProps;\n use: Inferno.SVGProps;\n view: Inferno.SVGProps;\n\n // MathML\n maction: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n math: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n menclose: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n merror: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mfenced: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mfrac: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mi: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mmultiscripts: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mn: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mo: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mover: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mpadded: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mphantom: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mroot: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mrow: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n ms: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mspace: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n msqrt: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mstyle: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n msub: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n msubsup: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n msup: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mtable: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mtd: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mtext: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n mtr: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n munder: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n munderover: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n semantics: Inferno.DetailedHTMLProps<\n Inferno.HTMLAttributes,\n MathMLElement\n >;\n }\n }\n\n var SKIP_INFERNO_WARNINGS: string;\n}\n" }, { "path": "packages/inferno/src/core/validate.ts", "content": "import type { VNode } from './types';\nimport {\n isArray,\n isInvalid,\n isNullOrUndef,\n isNumber,\n isStringOrNumber,\n throwError\n} from 'inferno-shared';\nimport { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';\nimport { getComponentName } from '../DOM/utils/common';\n\nfunction getTagName(input): string {\n let tagName;\n\n if (isArray(input)) {\n const arrayText =\n input.length > 3\n ? input.slice(0, 3).toString() + ',...'\n : input.toString();\n\n tagName = 'Array(' + arrayText + ')';\n } else if (isStringOrNumber(input)) {\n tagName = 'Text(' + input + ')';\n } else if (isInvalid(input)) {\n tagName = 'InvalidVNode(' + input + ')';\n } else {\n const flags = input?.flags;\n\n if (!isNumber(flags)) {\n try {\n tagName = `Object(${JSON.stringify(input)})`;\n } catch {\n tagName = `Object(${String(input)})`;\n }\n\n return '>> ' + tagName + '\\n';\n }\n\n if (flags & VNodeFlags.Element) {\n tagName = `<${input.type}${\n input.className ? ' class=\"' + input.className + '\"' : ''\n }>`;\n } else if (flags & VNodeFlags.Text) {\n tagName = `Text(${input.children})`;\n } else if (flags & VNodeFlags.Portal) {\n tagName = `Portal*`;\n } else {\n tagName = `<${getComponentName(input.type)} />`;\n }\n }\n\n return '>> ' + tagName + '\\n';\n}\n\nfunction DEV_VALIDATE_KEYS(vNodeTree, childKeys): string | null {\n if ((childKeys & ChildFlags.HasNonKeyedChildren) !== 0) {\n return null;\n }\n\n const foundKeys: Record = {};\n const forceKeyed = (childKeys & ChildFlags.HasKeyedChildren) !== 0;\n\n let foundKeyCount = 0;\n\n for (let i = 0, len = vNodeTree.length; i < len; ++i) {\n const childNode = vNodeTree[i];\n\n if (isArray(childNode)) {\n return (\n 'Encountered ARRAY in mount, array must be flattened, or normalize used. Location: \\n' +\n getTagName(childNode)\n );\n }\n\n if (isInvalid(childNode)) {\n if (forceKeyed) {\n return (\n 'Encountered invalid node when preparing to keyed algorithm. Location: \\n' +\n getTagName(childNode)\n );\n } else if (foundKeyCount !== 0) {\n return (\n 'Encountered invalid node with mixed keys. Location: \\n' +\n getTagName(childNode)\n );\n }\n continue;\n }\n if (typeof (childNode as VNode) === 'object') {\n if (childNode.isValidated) {\n continue;\n }\n childNode.isValidated = true;\n }\n\n // Key can be undefined, null too. But typescript complains for no real reason\n const key: string | number = childNode.key as string | number;\n\n if (!isNullOrUndef(key) && !isStringOrNumber(key)) {\n return (\n 'Encountered child vNode where key property is not string or number. Location: \\n' +\n getTagName(childNode)\n );\n }\n\n const children = childNode.children;\n const childFlags = childNode.childFlags;\n if (!isInvalid(children)) {\n let val;\n if (childFlags & ChildFlags.MultipleChildren) {\n val = DEV_VALIDATE_KEYS(\n children,\n (childFlags & ChildFlags.HasKeyedChildren) !== 0,\n );\n } else if (childFlags === ChildFlags.HasVNodeChildren) {\n val = DEV_VALIDATE_KEYS([children], false);\n }\n if (val) {\n val += getTagName(childNode);\n\n return val;\n }\n }\n if (forceKeyed && isNullOrUndef(key)) {\n return (\n 'Encountered child without key during keyed algorithm. If this error points to Array make sure children is flat list. Location: \\n' +\n getTagName(childNode)\n );\n } else if (isNullOrUndef(key)) {\n if (foundKeyCount !== 0) {\n return (\n 'Encountered children with key missing. Location: \\n' +\n getTagName(childNode)\n );\n }\n continue;\n }\n if (foundKeys[key]) {\n return (\n 'Encountered two children with same key: {' +\n key +\n '}. Location: \\n' +\n getTagName(childNode)\n );\n }\n foundKeys[key] = true;\n foundKeyCount++;\n }\n\n return null;\n}\n\nexport function validateVNodeElementChildren(vNode): void {\n if (process.env.NODE_ENV !== 'production') {\n if (vNode.childFlags === ChildFlags.HasInvalidChildren) {\n return;\n }\n if (vNode.flags & VNodeFlags.InputElement) {\n throwError(\"input elements can't have children.\");\n }\n if (vNode.flags & VNodeFlags.TextareaElement) {\n throwError(\"textarea elements can't have children.\");\n }\n if (vNode.flags & VNodeFlags.Element) {\n const tag = vNode.type.toLowerCase();\n\n switch (tag) {\n case 'media':\n case 'area':\n case 'base':\n case 'br':\n case 'col':\n case 'command':\n case 'embed':\n case 'hr':\n case 'img':\n case 'input':\n case 'keygen':\n case 'link':\n case 'meta':\n case 'param':\n case 'source':\n case 'track':\n case 'wbr':\n throwError(`${tag} elements can't have children.`);\n break;\n default:\n break;\n }\n }\n }\n}\n\nexport function validateKeys(vNode): void {\n if (process.env.NODE_ENV !== 'production') {\n // Checks if there is any key missing or duplicate keys\n if (\n !vNode.isValidated &&\n vNode.children &&\n vNode.flags & VNodeFlags.Element\n ) {\n const error = DEV_VALIDATE_KEYS(\n Array.isArray(vNode.children) ? vNode.children : [vNode.children],\n vNode.childFlags\n );\n\n if (error) {\n throwError(error + getTagName(vNode));\n }\n }\n vNode.isValidated = true;\n }\n}\n\nfunction getChildFlagsName(childFlags: ChildFlags): string {\n switch (childFlags) {\n case ChildFlags.HasInvalidChildren:\n return 'ChildFlags.HasInvalidChildren';\n case ChildFlags.HasVNodeChildren:\n return 'ChildFlags.HasVNodeChildren';\n case ChildFlags.HasNonKeyedChildren:\n return 'ChildFlags.HasNonKeyedChildren';\n case ChildFlags.HasKeyedChildren:\n return 'ChildFlags.HasKeyedChildren';\n case ChildFlags.HasTextChildren:\n return 'ChildFlags.HasTextChildren';\n case ChildFlags.UnknownChildren:\n return 'ChildFlags.UnknownChildren';\n default:\n return `ChildFlags.Unknown(${childFlags})`;\n }\n}\n\nexport function validateChildFlags(vNode: VNode): void {\n if (process.env.NODE_ENV === 'production') {\n return;\n }\n\n const childFlags = vNode.childFlags;\n const children = vNode.children as any;\n const parentTag = getTagName(vNode);\n\n switch (childFlags) {\n case ChildFlags.UnknownChildren:\n case ChildFlags.HasInvalidChildren:\n return;\n case ChildFlags.HasTextChildren:\n if (isStringOrNumber(children)) {\n return;\n }\n if (\n children &&\n isNumber(children.flags) &&\n children.flags & VNodeFlags.Text\n ) {\n throwError(\n `${getChildFlagsName(childFlags)} expects children to be a bare string, not a Text VNode. Location: \\n${getTagName(children)}${parentTag}`,\n );\n }\n throwError(\n `${getChildFlagsName(childFlags)} expects children to be a string. Location: \\n${getTagName(children)}${parentTag}`,\n );\n return;\n case ChildFlags.HasVNodeChildren:\n if (isInvalid(children) || isArray(children) || isStringOrNumber(children)) {\n throwError(\n `${getChildFlagsName(childFlags)} expects children to be a VNode. Location: \\n${getTagName(children)}${parentTag}`,\n );\n }\n throwIfObjectIsNotVNode(children);\n return;\n case ChildFlags.HasNonKeyedChildren:\n case ChildFlags.HasKeyedChildren:\n if (!isArray(children)) {\n throwError(\n `${getChildFlagsName(childFlags)} expects children to be an array of VNodes. Location: \\n${getTagName(children)}${parentTag}`,\n );\n }\n\n for (let i = 0; i < children.length; i++) {\n if (!(i in children)) {\n throwError(\n `${getChildFlagsName(childFlags)} expects children to be a flat array without holes; found a hole at index ${i}. Location: \\n${parentTag}`,\n );\n }\n\n const child = children[i];\n if (isArray(child)) {\n throwError(\n `${getChildFlagsName(childFlags)} expects children to be a flat array; found a nested array at index ${i}. Location: \\n${getTagName(child)}${parentTag}`,\n );\n }\n if (isInvalid(child)) {\n throwError(\n `${getChildFlagsName(childFlags)} expects children to be VNodes; found invalid child at index ${i}. Location: \\n${getTagName(child)}${parentTag}`,\n );\n }\n if (isStringOrNumber(child)) {\n throwError(\n `${getChildFlagsName(childFlags)} expects children to be VNodes; found text at index ${i}. Location: \\n${getTagName(child)}${parentTag}`,\n );\n }\n\n throwIfObjectIsNotVNode(child);\n\n if (childFlags === ChildFlags.HasKeyedChildren) {\n if (isNullOrUndef(child.key)) {\n throwError(\n `${getChildFlagsName(childFlags)} expects all children to have keys; missing key at index ${i}. Location: \\n${getTagName(child)}${parentTag}`,\n );\n }\n }\n }\n return;\n default:\n return;\n }\n}\n\nexport function throwIfObjectIsNotVNode(input): void {\n if (!isNumber(input.flags)) {\n throwError(\n `normalization received an object that's not a valid VNode, you should stringify it first or fix createVNode flags. Object: \"${JSON.stringify(\n input,\n )}\".`,\n );\n }\n}\n" }, { "path": "packages/inferno/src/index.ts", "content": "import { warning } from 'inferno-shared';\nimport {\n createComponentVNode,\n createFragment,\n createPortal,\n createTextVNode,\n createVNode,\n directClone,\n getFlagsForElementVnode,\n normalizeProps,\n normalizeRoot,\n} from './core/implementation';\nimport { linkEvent } from './DOM/events/linkEvent';\nimport { renderInternal, createRenderer, render } from './DOM/rendering';\nimport {\n AnimationQueues,\n EMPTY_OBJ,\n findDOMFromVNode,\n Fragment,\n options,\n} from './DOM/utils/common';\nimport { Component, type ComponentType, rerender } from './core/component';\nimport { mountProps } from './DOM/props';\nimport {\n createClassComponentInstance,\n renderFunctionalComponent,\n} from './DOM/utils/componentUtil';\nimport {\n mount,\n mountClassComponentCallbacks,\n mountElement,\n mountFunctionalComponentCallbacks,\n} from './DOM/mounting';\nimport { createRef, forwardRef, mountRef } from './core/refs';\nexport * from './core/types';\n\nif (process.env.NODE_ENV !== 'production') {\n const skipWarnings =\n typeof SKIP_INFERNO_WARNINGS !== 'undefined' ||\n (typeof process === 'object' &&\n (process.env?.SKIP_INFERNO_WARNINGS !== undefined ||\n process.env?.JEST_WORKER_ID !== undefined));\n\n if (!skipWarnings) {\n const testFunc = function testFn() {};\n\n if (\n !((testFunc as Function).name || testFunc.toString()).includes('testFn')\n ) {\n warning(\n \"It looks like you're using a minified copy of the development build \" +\n 'of Inferno. When deploying Inferno apps to production, make sure to use ' +\n 'the production build which skips development warnings and is faster. ' +\n 'See https://infernojs.org for more details.',\n );\n }\n }\n}\n\nconst version = process.env.INFERNO_VERSION;\n\nexport {\n AnimationQueues,\n Component,\n type ComponentType,\n Fragment,\n EMPTY_OBJ,\n createComponentVNode,\n createFragment,\n createPortal,\n createRef,\n createRenderer,\n createTextVNode,\n createVNode,\n forwardRef,\n directClone,\n findDOMFromVNode,\n getFlagsForElementVnode,\n linkEvent,\n normalizeProps,\n options,\n render,\n rerender,\n version,\n // Internal methods, used by hydration\n createClassComponentInstance as _CI,\n normalizeRoot as _HI, // used by inferno-mobx\n mount as _M,\n mountClassComponentCallbacks as _MCCC,\n mountElement as _ME,\n mountFunctionalComponentCallbacks as _MFCC,\n mountRef as _MR,\n mountProps as _MP,\n renderInternal,\n renderFunctionalComponent as _RFC,\n};\n" }, { "path": "packages/inferno-animation/__tests__/animatedAllComponent.spec.tsx", "content": "import { type InfernoNode, render } from 'inferno';\nimport { renderToString } from 'inferno-server';\nimport {\n AnimatedAllComponent,\n componentDidAppear,\n componentWillDisappear,\n componentWillMove,\n} from 'inferno-animation';\n\ndescribe('inferno-animation AnimatedAllComponent', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n function waitForAnimationAndContinue(condition, callback, arg1?: any): void {\n if (container.textContent !== condition) {\n setTimeout(\n waitForAnimationAndContinue.bind(null, condition, callback, arg1),\n 10,\n );\n return;\n }\n\n callback(arg1);\n }\n\n function afterEachClear(done): void {\n container.innerHTML = '';\n document.body.removeChild(container);\n done();\n }\n\n afterEach(function (done) {\n render(null, container);\n waitForAnimationAndContinue('', afterEachClear, done);\n });\n\n it('should render class component extending AnimatedAllComponent into DOM', () => {\n class MyComponent extends AnimatedAllComponent {\n public render({ children }): InfernoNode {\n return

{children}
;\n }\n }\n\n render(1, container);\n expect(container.textContent).toBe('1');\n });\n\n it('should remove class component extending AnimatedAllComponent from DOM', (done) => {\n class My extends AnimatedAllComponent {\n public render({ children }): InfernoNode {\n return
{children}
;\n }\n }\n\n render(\n
\n 1\n 2\n 3\n
,\n container,\n );\n expect(container.textContent).toBe('123');\n\n render(\n
\n 1\n 3\n
,\n container,\n );\n\n /**\n * The reason for recursively calling checkRenderComplete_XXX instead of\n * using a simpler setTimeout is due to a couple of async calls during the animations\n * hooks of AnimatedAllComponent. These can cause a setTimeout in the test to\n * trigger prior to the animation callbacks and thus remove operations haven't yet\n * been completed. As long as the render operation eventually completes correctly,\n * the test should be considered successful.\n */\n\n waitForAnimationAndContinue('13', function () {\n render(\n
\n 1\n 4\n
,\n container,\n );\n\n waitForAnimationAndContinue('14', function () {\n done();\n });\n });\n });\n\n it('should move class component extending AnimatedAllComponent from DOM', (done) => {\n class My extends AnimatedAllComponent {\n public render({ children }): InfernoNode {\n return
{children}
;\n }\n }\n\n render(\n
\n 1\n 2\n 3\n
,\n container,\n );\n expect(container.textContent).toBe('123');\n\n render(\n
\n 1\n 3\n 2\n
,\n container,\n );\n\n /**\n * The reason for recursively calling checkRenderComplete_XXX instead of\n * using a simpler setTimeout is due to a couple of async calls during the animations\n * hooks of AnimatedAllComponent. These can cause a setTimeout in the test to\n * trigger prior to the animation callbacks and thus remove operations haven't yet\n * been completed. As long as the render operation eventually completes correctly,\n * the test should be considered successful.\n */\n // Disappear animations complete async\n\n waitForAnimationAndContinue('132', function () {\n render(\n
\n 4\n 1\n
,\n container,\n );\n\n waitForAnimationAndContinue('41', function () {\n render(null, container);\n done();\n });\n });\n });\n\n it('should render class component extending AnimatedAllComponent to a string', () => {\n class MyComponent extends AnimatedAllComponent {\n public render({ children }): InfernoNode {\n return
{children}
;\n }\n }\n\n const outputStr = renderToString(1);\n expect(outputStr).toBe('
1
');\n });\n});\n\ndescribe('inferno-animation animated functional component', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n function waitForAnimationAndContinue(condition, callback, arg1?): void {\n if (container.textContent !== condition) {\n setTimeout(\n waitForAnimationAndContinue.bind(null, condition, callback, arg1),\n 10,\n );\n return;\n }\n\n callback(arg1);\n }\n\n function afterEachClear(done): void {\n container.innerHTML = '';\n document.body.removeChild(container);\n done();\n }\n\n afterEach(function (done) {\n render(null, container);\n waitForAnimationAndContinue('', afterEachClear, done);\n });\n\n it('should render functional component extending AnimatedAllComponent into DOM', () => {\n const MyComponent = ({ children }): InfernoNode => {\n return
{children}
;\n };\n\n render(\n \n 1\n ,\n container,\n );\n expect(container.textContent).toBe('1');\n });\n\n it('should remove functional component extending AnimatedAllComponent from DOM', (done) => {\n const My = ({ children }): InfernoNode => {\n return
{children}
;\n };\n\n const anim = {\n onComponentDidAppear: componentDidAppear,\n onComponentWillDisappear: componentWillDisappear,\n onComponentWillMove: componentWillMove,\n };\n\n render(\n
\n \n 1\n \n \n 2\n \n \n 3\n \n
,\n container,\n );\n expect(container.textContent).toBe('123');\n\n render(\n
\n \n 1\n \n \n 3\n \n
,\n container,\n );\n\n /**\n * The reason for recursively calling checkRenderComplete_XXX instead of\n * using a simpler setTimeout is due to a couple of async calls during the animations\n * hooks of AnimatedAllComponent. These can cause a setTimeout in the test to\n * trigger prior to the animation callbacks and thus remove operations haven't yet\n * been completed. As long as the render operation eventually completes correctly,\n * the test should be considered successful.\n */\n\n waitForAnimationAndContinue('13', function () {\n render(\n
\n \n 1\n \n \n 4\n \n
,\n container,\n );\n\n waitForAnimationAndContinue('14', function () {\n done();\n });\n });\n });\n\n it('should move functional component extending AnimatedAllComponent from DOM', (done) => {\n const My = ({ children }): InfernoNode => {\n return
{children}
;\n };\n\n const anim = {\n onComponentDidAppear: componentDidAppear,\n onComponentWillDisappear: componentWillDisappear,\n onComponentWillMove: componentWillMove,\n };\n\n render(\n
\n \n 1\n \n \n 2\n \n \n 3\n \n
,\n container,\n );\n expect(container.textContent).toBe('123');\n\n render(\n
\n \n 1\n \n \n 3\n \n \n 2\n \n
,\n container,\n );\n\n /**\n * The reason for recursively calling checkRenderComplete_XXX instead of\n * using a simpler setTimeout is due to a couple of async calls during the animations\n * hooks of AnimatedAllComponent. These can cause a setTimeout in the test to\n * trigger prior to the animation callbacks and thus remove operations haven't yet\n * been completed. As long as the render operation eventually completes correctly,\n * the test should be considered successful.\n */\n // Disappear animations complete async\n\n waitForAnimationAndContinue('132', function () {\n render(\n
\n \n 4\n \n \n 1\n \n
,\n container,\n );\n\n waitForAnimationAndContinue('41', function () {\n render(null, container);\n done();\n });\n });\n });\n\n it('should render class component extending AnimatedAllComponent to a string', () => {\n const MyComponent = ({ children }): InfernoNode => {\n return
{children}
;\n };\n\n const anim = {\n onComponentDidAppear: componentDidAppear,\n onComponentWillDisappear: componentWillDisappear,\n onComponentWillMove: componentWillMove,\n };\n\n const outputStr = renderToString(1);\n expect(outputStr).toBe('
1
');\n });\n});\n" }, { "path": "packages/inferno-animation/__tests__/animatedComponent.spec.tsx", "content": "import { type InfernoNode, render } from 'inferno';\nimport { renderToString } from 'inferno-server';\nimport {\n AnimatedComponent,\n componentDidAppear,\n componentWillDisappear,\n} from 'inferno-animation';\n\ndescribe('inferno-animation AnimatedComponent', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n function waitForAnimationAndContinue(condition, callback, arg1?): void {\n if (container.textContent !== condition) {\n setTimeout(\n waitForAnimationAndContinue.bind(null, condition, callback, arg1),\n 10,\n );\n return;\n }\n\n callback(arg1);\n }\n\n function afterEachClear(done): void {\n container.innerHTML = '';\n document.body.removeChild(container);\n done();\n }\n\n afterEach(function (done) {\n render(null, container);\n waitForAnimationAndContinue('', afterEachClear, done);\n });\n\n it('should render class component extending AnimatedComponent into DOM', () => {\n class MyComponent extends AnimatedComponent {\n public render({ children }): InfernoNode {\n return
{children}
;\n }\n }\n\n render(1, container);\n expect(container.textContent).toBe('1');\n });\n\n it('should remove class component extending AnimatedComponent from DOM', (done) => {\n class My extends AnimatedComponent {\n public render({ children }): void {\n return
{children}
;\n }\n }\n\n render(\n
\n 1\n 2\n 3\n
,\n container,\n );\n expect(container.textContent).toBe('123');\n\n render(\n
\n 1\n 3\n
,\n container,\n );\n\n /**\n * The reason for recursively calling checkRenderComplete_XXX instead of\n * using a simpler setTimeout is due to a couple of async calls during the animations\n * hooks of AnimatedComponent. These can cause a setTimeout in the test to\n * trigger prior to the animation callbacks and thus remove operations haven't yet\n * been completed. As long as the render operation eventually completes correctly,\n * the test should be considered successful.\n */\n\n waitForAnimationAndContinue('13', function () {\n render(\n
\n 1\n 4\n
,\n container,\n );\n\n waitForAnimationAndContinue('14', function () {\n done();\n });\n });\n });\n\n it('should move class component extending AnimatedComponent from DOM', (done) => {\n class My extends AnimatedComponent {\n public render({ children }): void {\n return
{children}
;\n }\n }\n\n render(\n
\n 1\n 2\n 3\n
,\n container,\n );\n expect(container.textContent).toBe('123');\n\n render(\n
\n 1\n 3\n 2\n
,\n container,\n );\n\n /**\n * The reason for recursively calling checkRenderComplete_XXX instead of\n * using a simpler setTimeout is due to a couple of async calls during the animations\n * hooks of AnimatedComponent. These can cause a setTimeout in the test to\n * trigger prior to the animation callbacks and thus remove operations haven't yet\n * been completed. As long as the render operation eventually completes correctly,\n * the test should be considered successful.\n */\n // Disappear animations complete async\n\n waitForAnimationAndContinue('132', function () {\n render(\n
\n 4\n 1\n
,\n container,\n );\n\n waitForAnimationAndContinue('41', function () {\n render(null, container);\n done();\n });\n });\n });\n\n it('should render class component extending AnimatedComponent to a string', () => {\n class MyComponent extends AnimatedComponent {\n public render({ children }): InfernoNode {\n return
{children}
;\n }\n }\n\n const outputStr = renderToString(1);\n expect(outputStr).toBe('
1
');\n });\n});\n\ndescribe('inferno-animation animated functional component', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n function waitForAnimationAndContinue(condition, callback, arg1?): void {\n if (container.textContent !== condition) {\n setTimeout(\n waitForAnimationAndContinue.bind(null, condition, callback, arg1),\n 10,\n );\n return;\n }\n\n callback(arg1);\n }\n\n function afterEachClear(done): void {\n container.innerHTML = '';\n document.body.removeChild(container);\n done();\n }\n\n afterEach(function (done) {\n render(null, container);\n waitForAnimationAndContinue('', afterEachClear, done);\n });\n\n it('should render class component extending AnimatedComponent into DOM', () => {\n const MyComponent = ({ children }): InfernoNode => {\n return
{children}
;\n };\n\n render(\n \n 1\n ,\n container,\n );\n expect(container.textContent).toBe('1');\n });\n\n it('should remove class component extending AnimatedComponent from DOM', (done) => {\n const My = ({ children }): InfernoNode => {\n return
{children}
;\n };\n\n const anim = {\n onComponentDidAppear: componentDidAppear,\n onComponentWillDisappear: componentWillDisappear,\n };\n\n render(\n
\n \n 1\n \n \n 2\n \n \n 3\n \n
,\n container,\n );\n expect(container.textContent).toBe('123');\n\n render(\n
\n \n 1\n \n \n 3\n \n
,\n container,\n );\n\n /**\n * The reason for recursively calling checkRenderComplete_XXX instead of\n * using a simpler setTimeout is due to a couple of async calls during the animations\n * hooks of AnimatedComponent. These can cause a setTimeout in the test to\n * trigger prior to the animation callbacks and thus remove operations haven't yet\n * been completed. As long as the render operation eventually completes correctly,\n * the test should be considered successful.\n */\n\n waitForAnimationAndContinue('13', function () {\n render(\n
\n \n 1\n \n \n 4\n \n
,\n container,\n );\n\n waitForAnimationAndContinue('14', function () {\n done();\n });\n });\n });\n\n it('should move class component extending AnimatedComponent from DOM', (done) => {\n const My = ({ children }): InfernoNode => {\n return
{children}
;\n };\n\n const anim = {\n onComponentDidAppear: componentDidAppear,\n onComponentWillDisappear: componentWillDisappear,\n };\n\n render(\n
\n \n 1\n \n \n 2\n \n \n 3\n \n
,\n container,\n );\n expect(container.textContent).toBe('123');\n\n render(\n
\n \n 1\n \n \n 3\n \n \n 2\n \n
,\n container,\n );\n\n /**\n * The reason for recursively calling checkRenderComplete_XXX instead of\n * using a simpler setTimeout is due to a couple of async calls during the animations\n * hooks of AnimatedComponent. These can cause a setTimeout in the test to\n * trigger prior to the animation callbacks and thus remove operations haven't yet\n * been completed. As long as the render operation eventually completes correctly,\n * the test should be considered successful.\n */\n // Disappear animations complete async\n\n waitForAnimationAndContinue('132', function () {\n render(\n
\n \n 4\n \n \n 1\n \n
,\n container,\n );\n\n waitForAnimationAndContinue('41', function () {\n render(null, container);\n done();\n });\n });\n });\n\n it('should render class component extending AnimatedComponent to a string', () => {\n const MyComponent = ({ children }): InfernoNode => {\n return
{children}
;\n };\n\n const anim = {\n onComponentDidAppear: componentDidAppear,\n onComponentWillDisappear: componentWillDisappear,\n };\n\n const outputStr = renderToString(1);\n expect(outputStr).toBe('
1
');\n });\n});\n" }, { "path": "packages/inferno-animation/__tests__/animatedComponentTypings.tsx", "content": "import { type InfernoNode, render } from 'inferno';\nimport { AnimatedComponent } from 'inferno-animation';\n\ndescribe('inferno-animation AnimatedComponent', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n afterEach(function () {\n render(null, container);\n });\n\n it('Should be possible to define typed props for AnimatedComponent', () => {\n interface MyProps {\n number: number;\n }\n\n class MyComponent extends AnimatedComponent {\n public render(props): InfernoNode {\n return
{props.number}
;\n }\n }\n\n render(, container);\n\n expect(container.innerHTML).toBe('
1
');\n });\n});\n" }, { "path": "packages/inferno-animation/__tests__/animatedMoveComponent.spec.tsx", "content": "import { render, type InfernoNode } from 'inferno';\nimport { renderToString } from 'inferno-server';\nimport { AnimatedMoveComponent, componentWillMove } from 'inferno-animation';\n\ndescribe('inferno-animation AnimatedMoveComponent', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n function waitForAnimationAndContinue(condition, callback, arg1?): void {\n if (container.textContent !== condition) {\n setTimeout(\n waitForAnimationAndContinue.bind(null, condition, callback, arg1),\n 10,\n );\n return;\n }\n\n callback(arg1);\n }\n\n function afterEachClear(done): void {\n container.innerHTML = '';\n document.body.removeChild(container);\n done();\n }\n\n afterEach(function (done) {\n render(null, container);\n waitForAnimationAndContinue('', afterEachClear, done);\n });\n\n it('should render class component extending AnimatedMoveComponent into DOM', () => {\n class MyComponent extends AnimatedMoveComponent {\n public render({ children }): InfernoNode {\n return
{children}
;\n }\n }\n\n render(1, container);\n expect(container.textContent).toBe('1');\n });\n\n it('should remove class component extending AnimatedMoveComponent from DOM', (done) => {\n class My extends AnimatedMoveComponent {\n public render({ children }): InfernoNode {\n return
{children}
;\n }\n }\n\n render(\n
\n 1\n 2\n 3\n
,\n container,\n );\n expect(container.textContent).toBe('123');\n\n render(\n
\n 1\n 3\n
,\n container,\n );\n\n /**\n * The reason for recursively calling checkRenderComplete_XXX instead of\n * using a simpler setTimeout is due to a couple of async calls during the animations\n * hooks of AnimatedMoveComponent. These can cause a setTimeout in the test to\n * trigger prior to the animation callbacks and thus remove operations haven't yet\n * been completed. As long as the render operation eventually completes correctly,\n * the test should be considered successful.\n */\n\n waitForAnimationAndContinue('13', function () {\n render(\n
\n 1\n 4\n
,\n container,\n );\n\n waitForAnimationAndContinue('14', function () {\n done();\n });\n });\n });\n\n it('should move class component extending AnimatedMoveComponent from DOM', (done) => {\n class My extends AnimatedMoveComponent {\n public render({ children }): InfernoNode {\n return
{children}
;\n }\n }\n\n render(\n
\n 1\n 2\n 3\n
,\n container,\n );\n expect(container.textContent).toBe('123');\n\n render(\n
\n 1\n 3\n 2\n
,\n container,\n );\n\n /**\n * The reason for recursively calling checkRenderComplete_XXX instead of\n * using a simpler setTimeout is due to a couple of async calls during the animations\n * hooks of AnimatedMoveComponent. These can cause a setTimeout in the test to\n * trigger prior to the animation callbacks and thus remove operations haven't yet\n * been completed. As long as the render operation eventually completes correctly,\n * the test should be considered successful.\n */\n // Disappear animations complete async\n\n waitForAnimationAndContinue('132', function () {\n render(\n
\n 4\n 1\n
,\n container,\n );\n\n waitForAnimationAndContinue('41', function () {\n render(null, container);\n done();\n });\n });\n });\n\n it('should render class component extending AnimatedMoveComponent to a string', () => {\n class MyComponent extends AnimatedMoveComponent {\n public render({ children }): InfernoNode {\n return
{children}
;\n }\n }\n\n const outputStr = renderToString(1);\n expect(outputStr).toBe('
1
');\n });\n});\n\ndescribe('inferno-animation animated functional component', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n function waitForAnimationAndContinue(condition, callback, arg1?): void {\n if (container.textContent !== condition) {\n setTimeout(\n waitForAnimationAndContinue.bind(null, condition, callback, arg1),\n 10,\n );\n return;\n }\n\n callback(arg1);\n }\n\n function afterEachClear(done): void {\n container.innerHTML = '';\n document.body.removeChild(container);\n done();\n }\n\n afterEach(function (done) {\n render(null, container);\n waitForAnimationAndContinue('', afterEachClear, done);\n });\n\n it('should render class component extending AnimatedMoveComponent into DOM', () => {\n const MyComponent = ({ children }): InfernoNode => {\n return
{children}
;\n };\n\n render(\n 1,\n container,\n );\n expect(container.textContent).toBe('1');\n });\n\n it('should remove class component extending AnimatedMoveComponent from DOM', (done) => {\n const My = ({ children }): InfernoNode => {\n return
{children}
;\n };\n\n const anim = {\n onComponentWillMove: componentWillMove,\n };\n\n render(\n
\n \n 1\n \n \n 2\n \n \n 3\n \n
,\n container,\n );\n expect(container.textContent).toBe('123');\n\n render(\n
\n \n 1\n \n \n 3\n \n
,\n container,\n );\n\n /**\n * The reason for recursively calling checkRenderComplete_XXX instead of\n * using a simpler setTimeout is due to a couple of async calls during the animations\n * hooks of AnimatedMoveComponent. These can cause a setTimeout in the test to\n * trigger prior to the animation callbacks and thus remove operations haven't yet\n * been completed. As long as the render operation eventually completes correctly,\n * the test should be considered successful.\n */\n\n waitForAnimationAndContinue('13', function () {\n render(\n
\n \n 1\n \n \n 4\n \n
,\n container,\n );\n\n waitForAnimationAndContinue('14', function () {\n done();\n });\n });\n });\n\n it('should move class component extending AnimatedMoveComponent from DOM', (done) => {\n const My = ({ children }): InfernoNode => {\n return
{children}
;\n };\n\n const anim = {\n onComponentWillMove: componentWillMove,\n };\n\n render(\n
\n \n 1\n \n \n 2\n \n \n 3\n \n
,\n container,\n );\n expect(container.textContent).toBe('123');\n\n render(\n
\n \n 1\n \n \n 3\n \n \n 2\n \n
,\n container,\n );\n\n /**\n * The reason for recursively calling checkRenderComplete_XXX instead of\n * using a simpler setTimeout is due to a couple of async calls during the animations\n * hooks of AnimatedMoveComponent. These can cause a setTimeout in the test to\n * trigger prior to the animation callbacks and thus remove operations haven't yet\n * been completed. As long as the render operation eventually completes correctly,\n * the test should be considered successful.\n */\n // Disappear animations complete async\n\n waitForAnimationAndContinue('132', function () {\n render(\n
\n \n 4\n \n \n 1\n \n
,\n container,\n );\n\n waitForAnimationAndContinue('41', function () {\n render(null, container);\n done();\n });\n });\n });\n\n it('should render class component extending AnimatedMoveComponent to a string', () => {\n const MyComponent = ({ children }): InfernoNode => {\n return
{children}
;\n };\n\n const anim = {\n onComponentWillMove: componentWillMove,\n };\n\n const outputStr = renderToString(1);\n expect(outputStr).toBe('
1
');\n });\n});\n" }, { "path": "packages/inferno-animation/__tests__/index.spec.tsx", "content": "import { AnimatedComponent, utils } from 'inferno-animation';\n\ndescribe('inferno-animation public API', () => {\n it('should expose AnimatedComponent', () => {\n expect(AnimatedComponent).not.toBeUndefined();\n });\n it('should expose utils', () => {\n const {\n addClassName,\n removeClassName,\n registerTransitionListener,\n forceReflow,\n clearDimensions,\n getDimensions,\n setDimensions,\n setDisplay,\n } = utils;\n expect(addClassName).not.toBeUndefined();\n expect(removeClassName).not.toBeUndefined();\n expect(registerTransitionListener).not.toBeUndefined();\n expect(forceReflow).not.toBeUndefined();\n expect(clearDimensions).not.toBeUndefined();\n expect(getDimensions).not.toBeUndefined();\n expect(setDimensions).not.toBeUndefined();\n expect(setDisplay).not.toBeUndefined();\n });\n});\n" }, { "path": "packages/inferno-animation/__tests__/utils.spec.tsx", "content": "import {\n addClassName,\n clearDimensions,\n forceReflow,\n getDimensions,\n registerTransitionListener,\n removeClassName,\n setDimensions,\n setDisplay,\n} from '../src/utils';\n\ndescribe('inferno-animation utils', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n afterEach(function () {\n container.innerHTML = '';\n document.body.removeChild(container);\n });\n\n function renderTemplate(dom): void {\n dom.innerHTML = '
content
';\n }\n\n it('addClassName', () => {\n renderTemplate(container);\n const el = document.querySelector('.target') as HTMLElement;\n addClassName(el, 'test');\n addClassName(el, '');\n expect(el.className).toEqual('target test');\n });\n\n it('removeClassName', () => {\n renderTemplate(container);\n const el = document.querySelector('.target') as HTMLElement;\n removeClassName(el, 'target');\n removeClassName(el, '');\n expect(el.className).toEqual('');\n });\n\n it('forceReflow', () => {\n renderTemplate(container);\n const res = forceReflow();\n expect(res).not.toBeUndefined();\n });\n\n it('setDisplay', () => {\n renderTemplate(container);\n const el = document.querySelector('.target') as HTMLElement;\n setDisplay(el, 'block');\n setDisplay(el, 'block');\n expect(el.style.getPropertyValue('display')).toEqual('block');\n\n // Removes style prop\n setDisplay(el, undefined);\n // NOTE: For some reason we get a lingering 'style' attribute in on the DOM\n // element. This is the recomended though\n // https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute\n expect(el.outerHTML).toEqual('
content
');\n\n // Just clear display prop\n\n setDisplay(el, 'block');\n setDimensions(el, 10, 10);\n setDisplay(el, undefined);\n expect(el.style.getPropertyValue('display')).toEqual('');\n });\n\n it('getDimensions', () => {\n renderTemplate(container);\n const el = document.querySelector('.target') as HTMLElement;\n const res = getDimensions(el);\n expect(res).not.toEqual(undefined);\n\n el.style.display = 'none';\n const res2 = getDimensions(el);\n expect(res2).not.toEqual(undefined);\n });\n\n it('setDimensions', () => {\n renderTemplate(container);\n const el = document.querySelector('.target') as HTMLElement;\n setDimensions(el, 10, 10);\n const width = el.style.getPropertyValue('width');\n const height = el.style.getPropertyValue('height');\n expect(width).toEqual('10px');\n expect(height).toEqual('10px');\n });\n\n it('clearDimensions', () => {\n renderTemplate(container);\n const el = document.querySelector('.target') as HTMLElement;\n setDimensions(el, 10, 10);\n clearDimensions(el);\n const width = el.style.getPropertyValue('width');\n const height = el.style.getPropertyValue('height');\n expect(width).toEqual('');\n expect(height).toEqual('');\n });\n\n it('registerTransitionListener', (done) => {\n renderTemplate(container);\n const el = document.querySelector('.target') as HTMLElement;\n\n registerTransitionListener([el], () => {\n // We should always get a callback\n done();\n });\n });\n\n it('registerTransitionListener for IMG', (done) => {\n container.innerHTML = '
';\n const el = document.querySelector('.target') as HTMLElement;\n\n registerTransitionListener([el], () => {\n // We should always get a callback\n done();\n });\n el.dispatchEvent(new Event('load'));\n });\n});\n" }, { "path": "packages/inferno-animation/index.cjs", "content": "'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./dist/index.min.cjs');\n} else {\n module.exports = require('./dist/index.cjs');\n}\n" }, { "path": "packages/inferno-animation/index.css", "content": ":root {\n --infernoAnimationEnter: all 0.3s ease-out;\n --infernoAnimationLeave: all 0.2s ease-out;\n}\n\n.inferno-animation-leave {\n /* Leave animation start state */\n opacity: 1;\n}\n\n.inferno-animation-leave-active {\n /* Leave animation transitions */\n overflow: hidden;\n transition: var(--infernoAnimationLeave);\n}\n\n.inferno-animation-leave-end {\n /* Leave animation end state */\n opacity: 0;\n height: 0;\n padding-top: 0;\n padding-bottom: 0;\n margin-top: 0;\n margin-bottom: 0;\n border-top-width: 0;\n border-bottom-width: 0;\n}\n\n.inferno-animation-enter {\n /* Enter animation start state */\n opacity: 0;\n height: 0;\n padding-top: 0;\n padding-bottom: 0;\n margin-top: 0;\n margin-bottom: 0;\n border-top-width: 0;\n border-bottom-width: 0;\n}\n\n.inferno-animation-enter-active {\n /* Enter animation transitions */\n transition: var(--infernoAnimationEnter);\n}\n\n.inferno-animation-enter-end {\n /* Enter animation end state */\n opacity: 1;\n}\n" }, { "path": "packages/inferno-animation/package.json", "content": "{\n \"name\": \"inferno-animation\",\n \"version\": \"9.0.11\",\n \"license\": \"MIT\",\n \"type\": \"module\",\n \"description\": \"Animation helpers inferno. This package can be used to reuse server side rendered html\",\n \"author\": {\n \"name\": \"Sebastian Ware\",\n \"email\": \"sebastian@urbantalk.se\",\n \"url\": \"https://github.com/jhsware\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/infernojs/inferno.git\",\n \"directory\": \"packages/inferno-animation\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/infernojs/inferno/issues\"\n },\n \"homepage\": \"https://github.com/infernojs/inferno#readme\",\n \"files\": [\n \"index.cjs\",\n \"index.css\",\n \"dist/\",\n \"README.md\",\n \"package.json\"\n ],\n \"exports\": {\n \".\": {\n \"import\": \"./dist/index.mjs\",\n \"require\": \"./index.cjs\",\n \"types\": \"./dist/index.d.ts\"\n },\n \"./dist/index.dev.mjs\": \"./dist/index.dev.mjs\",\n \"./dist/index.mjs\": \"./dist/index.mjs\"\n },\n \"module\": \"dist/index.mjs\",\n \"dev:module\": \"dist/index.dev.mjs\",\n \"typings\": \"dist/index.d.ts\",\n \"keywords\": [\n \"babel\",\n \"react\",\n \"inferno\",\n \"framework\",\n \"interfaces\",\n \"user interfaces\",\n \"vdom\",\n \"animation\",\n \"css\"\n ],\n \"dependencies\": {\n \"inferno\": \"9.0.11\"\n },\n \"devDependencies\": {\n \"inferno-create-element\": \"9.0.11\",\n \"inferno-shared\": \"9.0.11\",\n \"inferno-utils\": \"9.0.11\",\n \"inferno-vnode-flags\": \"9.0.11\"\n },\n \"rollup\": {\n \"bundledDependencies\": [\n \"inferno-shared\",\n \"inferno-vnode-flags\"\n ],\n \"moduleName\": \"Inferno.Animation\",\n \"moduleGlobals\": {\n \"inferno\": \"Inferno\"\n }\n }\n}\n" }, { "path": "packages/inferno-animation/readme.md", "content": "# inferno-animation\n\nHelper components and utils to add smooth CSS-animations to your Inferno apps. Extend from `` and include the css from index.css in this package to get default animation on opacity and height. Requires setting `box-sizing: border-box;` on the animated element.\n\nIf you want to customise your animations, just use index.css as a template and replace \"inferno-animation\" prefix in the CSS-class names with your custom animation name (i.e. mySuperAnimation). Then pass that name to your animated component as an attribute `` and your customised animation will be used.\n\nFor examples of what animations look like you can try inferno/docs/animations/index.html.\n\n## Install\n\n```\nnpm install inferno-animation\n```\n\n## Usage\n\nThere are three base components you can extend from to get animations in a straightforward way without any wiring.\n\n- AnimatedComponent -- animates on add/remove\n- AnimatedMoveComponent -- animates on move (within the same parent)\n- AnimatedAllComponent -- animates on add/remove and move (within the same parent)\n\nYou can also animate functional components. There are a couple of examples of animations in the main repos in the `docs/animations` and `docs/animations-demo` folder.\n\nIf you don't want to extend from one of the pre-wired components, look att src/AnimatedAllComponent.ts to see\nhow to wire up the three animation hooks:\n\n- componentDidAppear\n- componentWillDisappear\n- componentWillMove\n\nUsing AnimatedAllComponent is just like working with ordinary components. Don't forget to\nadd the CSS or you can get strange results:\n\napp.js\n\n```js\nimport { Component } from 'inferno';\nimport { AnimatedAllComponent } from 'inferno-animation';\nimport './app.css';\n\n// Animate on add/remove\nclass MyAnimated extends AnimatedAllComponent {\n render() {\n return
  • {this.props.children}
    • ;\n }\n}\n\nclass MyList extends Component {\n constructor() {\n super();\n this.state = {\n items: [1, 2, 3, 4, 5],\n };\n }\n\n render() {\n return (\n
      \n {this.state.items.map((item) => (\n {item}\n ))}\n
    \n );\n }\n}\n```\n\napp.css\n\n```css\n@import '~inferno-animation/index.css';\nul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\nli.test {\n box-sizing: border-box;\n font-size: 2em;\n background: #ddd;\n border-bottom: 1px solid white;\n}\n```\n\nThe syntax for hooking up a function component is straight forward too:\n\n```js\nimport {\n componentDidAppear,\n componentWillDisappear,\n componentWillMove,\n} from 'inferno-animation';\n\n\n ...\n;\n```\n\nIMPORTANT! Always use the provided helper methods instead of implementing the hooks yourself. There\nmight be optimisations and/or changes to how the animation hooks are implemented in future versions\nof Inferno that you want to benefit from.\n\n### Global animations\n\nGlobal animations allow you to animate a component between positions on two different \"pages\". Technincally this means they don't have the same parent element. When you mount one page imediately after unmounting the other page, inferno-animation will perform a FLIP-animation between the two positions. To match the elements you use the attribute `globalAnimationKey` which accept a string.\n\nGlobal animations are very simple to use, [check this example.](https://github.com/infernojs/inferno/blob/master/docs/animations-global-demo/app.js)\n\n### Bootstrap style modal animation\n\nThis is an example of how you could implement a Bootstrap style Modal animation using inferno-animation. These two animations are used both for the backdrop and the modal and the purpose is to support the CSS-rules without modification.\n\n- always use the inferno-animation utility functions\n- implementation is straight forward\n- `callback` in animateModalOnWillDisappear triggers the dom-removal in Inferno and is crucial!\n\nCustom animations won't be coordinated with the standard animations to reduce reflow, but performance is not an issue with just a few animations running simultaneously. Use the standard animations for grid or list items.\n\nCall these helper methods from `componentDidAppear` and `componentWillDisapper` of your backdrop and content component when you build a Bootstrap style modal.\n\n```js\nimport { utils } from 'inferno-animation';\nconst {\n addClassName,\n removeClassName,\n registerTransitionListener,\n forceReflow,\n setDisplay,\n} = utils;\n\nexport function animateModalOnWillDisappear(dom, callback, onClosed) {\n registerTransitionListener([dom], () => {\n // Always call the dom removal callback first!\n callback && callback();\n onClosed && onClosed();\n });\n\n setTimeout(() => {\n removeClassName(dom, 'show');\n }, 5);\n}\n\nexport function animateModalOnDidAppear(dom, onOpened) {\n setDisplay(dom, 'none');\n addClassName(dom, 'fade');\n forceReflow(dom);\n setDisplay(dom, undefined);\n\n registerTransitionListener([dom, dom.children[0]], function () {\n // *** Cleanup ***\n setDisplay(dom, undefined);\n onOpened && onOpened(dom);\n });\n\n addClassName(dom, 'show');\n}\n```\n" }, { "path": "packages/inferno-animation/src/AnimatedAllComponent.ts", "content": "import { Component, type InfernoNode, type ParentDOM } from 'inferno';\nimport {\n type AnimationClass,\n componentDidAppear,\n componentWillDisappear,\n componentWillMove,\n} from './animations';\n\ninterface AnimationProp {\n animation?: string | AnimationClass;\n children?: InfernoNode;\n}\n\nexport abstract class AnimatedAllComponent extends Component<\n AnimationProp & P,\n S\n> {\n public componentDidAppear(dom: HTMLElement | SVGElement): void {\n componentDidAppear(dom, this.props);\n }\n\n public componentWillDisappear(\n dom: HTMLElement | SVGElement,\n callback: () => void,\n ): void {\n componentWillDisappear(dom, this.props, callback);\n }\n\n public componentWillMove(\n parentVNode,\n parent: ParentDOM,\n dom: HTMLElement | SVGElement,\n ): void {\n componentWillMove(parentVNode, parent, dom, this.props);\n }\n}\n" }, { "path": "packages/inferno-animation/src/AnimatedComponent.ts", "content": "import { Component, type InfernoNode } from 'inferno';\nimport {\n type AnimationClass,\n componentDidAppear,\n componentWillDisappear,\n} from './animations';\n\ninterface AnimationProp {\n animation?: string | AnimationClass;\n children?: InfernoNode;\n}\n\nexport abstract class AnimatedComponent extends Component<\n AnimationProp & P,\n S\n> {\n public componentDidAppear(dom: HTMLElement): void {\n componentDidAppear(dom, this.props);\n }\n\n public componentWillDisappear(\n dom: HTMLElement | SVGElement,\n callback: () => void,\n ): void {\n componentWillDisappear(dom, this.props, callback);\n }\n}\n" }, { "path": "packages/inferno-animation/src/AnimatedMoveComponent.ts", "content": "import { Component, type InfernoNode } from 'inferno';\nimport { type AnimationClass, componentWillMove } from './animations';\n\ninterface AnimationProp {\n animation?: string | AnimationClass;\n children?: InfernoNode;\n}\n\nexport abstract class AnimatedMoveComponent extends Component<\n AnimationProp & P,\n S\n> {\n public componentWillMove(\n parentVNode,\n parent: HTMLElement | SVGElement,\n dom: HTMLElement | SVGElement,\n ): void {\n componentWillMove(parentVNode, parent, dom, this.props);\n }\n}\n" }, { "path": "packages/inferno-animation/src/animationCoordinator.ts", "content": "import { forceReflow } from './utils';\n\n// This is only used for development and should be set to false for release\n// eslint-disable-next-line no-constant-binary-expression\nconst _DBG_COORD_ = false && process.env.NODE_ENV !== 'production';\n\nexport const enum AnimationPhase {\n INITIALIZE,\n MEASURE,\n SET_START_STATE,\n ACTIVATE_TRANSITIONS,\n REGISTER_LISTENERS,\n ACTIVATE_ANIMATION,\n length, // This will equal length of actual phases since TS converts this to a zero based list of ints\n}\n\ntype GlobalAnimationKey = string;\nexport interface GlobalAnimationState {\n width: number;\n height: number;\n x: number;\n y: number;\n ticks: number;\n}\nconst _globalAnimationSources: Record<\n GlobalAnimationKey,\n GlobalAnimationState\n> = {};\n\nexport function _globalAnimationGC(): void {\n let entriesLeft = false;\n\n for (const key in _globalAnimationSources) {\n if (--_globalAnimationSources[key].ticks < 0) {\n delete _globalAnimationSources[key];\n } else entriesLeft = true;\n }\n\n if (entriesLeft) {\n requestAnimationFrame(_globalAnimationGC);\n }\n}\n\nexport function addGlobalAnimationSource(\n key: GlobalAnimationKey,\n state: GlobalAnimationState,\n): void {\n state.ticks = 5;\n _globalAnimationSources[key] = state;\n\n if (_globalAnimationGC === null) {\n requestAnimationFrame(_globalAnimationGC);\n }\n}\n\nexport function consumeGlobalAnimationSource(\n key: GlobalAnimationKey,\n): GlobalAnimationState {\n const tmp = _globalAnimationSources[key];\n if (tmp !== undefined) {\n delete _globalAnimationSources[key];\n }\n return tmp;\n}\n\nlet _animationQueue: Array<(phase: AnimationPhase) => void> = [];\nlet _animationActivationQueue: Array<(phase: AnimationPhase) => void> = [];\nconst IDLE = 0;\nlet _nextAnimationFrame: number = IDLE;\nlet _nextActivateAnimationFrame: number = IDLE;\n\nfunction _runActivateAnimationPhase(): void {\n _nextActivateAnimationFrame = IDLE;\n // Get animations to execute\n const animationQueue = _animationActivationQueue;\n // Clear global queue\n _animationActivationQueue = [];\n\n for (let i = 0; i < animationQueue.length; i++) {\n animationQueue[i](AnimationPhase.ACTIVATE_ANIMATION);\n }\n}\n\nfunction _runAnimationPhases(): void {\n _nextAnimationFrame = IDLE;\n\n // Get animations to execute\n const animationQueue = _animationQueue;\n // Clear global queue\n _animationQueue = [];\n\n // So what this does is run the animation phases in order. Most of the phases are invoked\n // by a simple call to all the registered callbacks. However:\n //\n // - ACTIVATE_TRANSITIONS require a reflow in order to not\n // interfere with the previous setting of the animation start class\n //\n // - ACTIVATE_ANIMATION needs to be called async so the transitions actually fire,\n // we choose to use an animation frame.\n //\n for (let i = 0; i < AnimationPhase.length; i++) {\n const phase = i as AnimationPhase;\n switch (phase) {\n case AnimationPhase.ACTIVATE_ANIMATION:\n // Final phase - Activate animations\n // This is a special case and is executed differently from others\n _animationActivationQueue =\n _animationActivationQueue.concat(animationQueue);\n if (_nextActivateAnimationFrame === IDLE) {\n // Animations are activated on the next animation frame\n _nextActivateAnimationFrame = requestAnimationFrame(\n _runActivateAnimationPhase,\n );\n }\n break;\n default:\n if (phase === AnimationPhase.ACTIVATE_TRANSITIONS) {\n // Force reflow before executing ACTIVATE_TRANSITIONS\n forceReflow();\n }\n for (let j = 0; j < animationQueue.length; j++) {\n animationQueue[j](phase);\n }\n }\n }\n}\n\nfunction _debugAnimationPhases(\n phase: AnimationPhase,\n animationQueue: Array<(phase: AnimationPhase) => void>,\n): AnimationPhase {\n // When debugging we call _runAnimationPhases once for each phase\n // so only set to idle when done\n if (phase === AnimationPhase.length - 1) {\n _nextAnimationFrame = IDLE;\n }\n\n switch (phase) {\n case AnimationPhase.ACTIVATE_ANIMATION:\n // Final phase - Activate animations\n // This is a special case and is executed differently from others\n _animationActivationQueue =\n _animationActivationQueue.concat(animationQueue);\n if (_nextActivateAnimationFrame === IDLE) {\n // Animations are activated on the next animation frame\n _nextActivateAnimationFrame = requestAnimationFrame(\n _runActivateAnimationPhase,\n );\n }\n break;\n default:\n if (phase === AnimationPhase.ACTIVATE_TRANSITIONS) {\n // Force reflow before executing ACTIVATE_TRANSITIONS\n forceReflow();\n }\n for (let j = 0; j < animationQueue.length; j++) {\n animationQueue[j](phase);\n }\n }\n return phase + 1;\n}\n\nexport function queueAnimation(\n callback: (phase: AnimationPhase) => void,\n): void {\n _animationQueue.push(callback);\n if (_nextAnimationFrame === IDLE) {\n if (!_DBG_COORD_) {\n _nextAnimationFrame = requestAnimationFrame(_runAnimationPhases);\n } else {\n /** ** DEV DEBUGGING code path ****/\n // Run animation phases one at a time when debugging\n // to allow visually inspecting changes.\n let _animationDebugQueue = _animationQueue;\n const _runPhase = (startPhase: AnimationPhase): void => {\n _nextAnimationFrame = requestAnimationFrame(() => {\n // Reset the global animation queue so any changes\n // added during this animation round is queued\n if (_animationDebugQueue === _animationQueue) {\n _animationQueue = [];\n }\n\n const nextStartPhase = _debugAnimationPhases(\n startPhase,\n _animationDebugQueue,\n );\n if (\n nextStartPhase !== undefined &&\n nextStartPhase < AnimationPhase.length\n ) {\n _runPhase(nextStartPhase);\n } else if (_animationQueue.length > 0) {\n // All phases done, check if the queue has been repopulated\n // and rerun if it has\n _animationDebugQueue = _animationQueue;\n _runPhase(0);\n }\n });\n };\n // TODO: We could create hooks to show a simply UI to control\n // animation execution. For now you need to set a break point\n _runPhase(0);\n /** ** /end DEV DEBUGGING ****/\n }\n }\n}\n\n// This is needed for tests. Coordinated animations are run on\n// next animation frame, so we need to make sure we wait for them to finish.\nexport function hasPendingAnimations(): boolean {\n return _nextAnimationFrame !== IDLE || _nextActivateAnimationFrame !== IDLE;\n}\n" }, { "path": "packages/inferno-animation/src/animations.ts", "content": "import {\n addClassName,\n clearDimensions,\n clearTransform,\n decrementMoveCbCount,\n forceReflow,\n getDimensions,\n getGeometry,\n incrementMoveCbCount,\n registerTransitionListener,\n removeClassName,\n resetDisplay,\n setDimensions,\n setDisplay,\n setTransform,\n} from './utils';\nimport {\n addGlobalAnimationSource,\n AnimationPhase,\n consumeGlobalAnimationSource,\n type GlobalAnimationState,\n queueAnimation,\n} from './animationCoordinator';\nimport { isNull, isNullOrUndef } from 'inferno-shared';\nimport { type ParentDOM } from 'inferno';\n\nexport interface AnimationClass {\n active: string;\n end: string;\n start: string;\n}\n\nfunction getAnimationClass(\n animationProp: AnimationClass | string | undefined | null,\n prefix: string,\n): AnimationClass {\n let animCls: AnimationClass;\n\n if (!isNullOrUndef(animationProp) && typeof animationProp === 'object') {\n animCls = animationProp;\n } else {\n const animationName = animationProp || 'inferno-animation';\n const placeholder = animationName + prefix;\n animCls = {\n active: placeholder + '-active',\n end: placeholder + '-end',\n start: placeholder,\n };\n }\n\n return animCls;\n}\n\nexport function componentDidAppear(dom: HTMLElement | SVGElement, props): void {\n // Get dimensions and unpack class names\n const cls = getAnimationClass(props.animation, '-enter');\n\n // Moved measuring to pre_initialize. It causes a reflow for each component beacuse of the setDisplay of previous component.\n const dimensions = {};\n const display = setDisplay(dom, 'none');\n const sourceState =\n props.globalAnimationKey === undefined\n ? null\n : consumeGlobalAnimationSource(props.globalAnimationKey);\n queueAnimation((phase: AnimationPhase) => {\n _didAppear(phase, dom, cls, dimensions, display, sourceState);\n });\n}\n\nfunction _getDidAppearTransitionCallback(dom, cls) {\n return () => {\n // 5. Remove the element\n clearDimensions(dom);\n removeClassName(dom, cls.active + ' ' + cls.end);\n // 6. Call callback to allow stuff to happen\n // Not currently used but this is where one could\n // add a call to something like this.didAppearDone\n };\n}\n\nfunction _didAppear(\n phase: AnimationPhase,\n dom: HTMLElement | SVGElement,\n cls: AnimationClass,\n dimensions,\n display: string,\n sourceState: GlobalAnimationState | null,\n): void {\n switch (phase) {\n case AnimationPhase.INITIALIZE:\n // Needs to be done in a single pass to avoid reflows\n // We set display: none whilst waiting for an animation frame to avoid flicker\n resetDisplay(dom, display);\n return;\n case AnimationPhase.MEASURE:\n // In case of img element that hasn't been loaded, just trigger reflow\n if (dom.tagName !== 'IMG' || (dom as any).complete) {\n const tmp = getDimensions(dom);\n dimensions.x = tmp.x;\n dimensions.y = tmp.y;\n dimensions.width = tmp.width;\n dimensions.height = tmp.height;\n } else {\n forceReflow();\n }\n return;\n case AnimationPhase.SET_START_STATE:\n // 1. Set start of animation\n if (\n !isNullOrUndef(sourceState) &&\n dimensions.width !== 0 &&\n dimensions.height !== 0\n ) {\n // const diffX = (sourceState.width - dimensions.width) / 2;\n // const diffY = (sourceState.height - dimensions.height) / 2;\n const dx = sourceState.x - dimensions.x;\n const dy = sourceState.y - dimensions.y;\n const scaleX = sourceState.width / dimensions.width;\n const scaleY = sourceState.height / dimensions.height;\n setTransform(dom, dx, dy, scaleX, scaleY);\n }\n addClassName(dom, cls.start);\n return;\n case AnimationPhase.ACTIVATE_TRANSITIONS:\n // 2. Activate transition (after a reflow)\n addClassName(dom, cls.active);\n return;\n case AnimationPhase.REGISTER_LISTENERS:\n // 3. Set an animation listener, code at end\n // Needs to be done after activating so timeout is calculated correctly\n registerTransitionListener(\n // *** Cleanup is broken out as micro optimisation ***\n [dom],\n _getDidAppearTransitionCallback(dom, cls),\n );\n return;\n case AnimationPhase.ACTIVATE_ANIMATION:\n // 4. Activate target state (called async via requestAnimationFrame)\n if (\n !isNullOrUndef(sourceState) &&\n dimensions.width !== 0 &&\n dimensions.height !== 0\n ) {\n clearTransform(dom);\n }\n setDimensions(dom, dimensions.width, dimensions.height);\n removeClassName(dom, cls.start);\n addClassName(dom, cls.end);\n }\n}\n\nexport function componentWillDisappear(\n dom: HTMLElement | SVGElement,\n props,\n callback: () => void,\n): void {\n // Get dimensions and unpack class names\n const cls = getAnimationClass(props.animation, '-leave');\n const dimensions = getDimensions(dom);\n queueAnimation((phase) => {\n _willDisappear(phase, dom, callback, cls, dimensions);\n });\n if (props.globalAnimationKey !== undefined) {\n addGlobalAnimationSource(\n props.globalAnimationKey,\n dimensions as GlobalAnimationState,\n );\n dom.style.setProperty('visibility', 'hidden');\n }\n}\n\nfunction _willDisappear(\n phase: AnimationPhase,\n dom: HTMLElement | SVGElement,\n callback: () => void,\n cls: AnimationClass,\n dimensions,\n): void {\n switch (phase) {\n case AnimationPhase.MEASURE:\n // 1. Set animation start state and dimensions\n setDimensions(dom, dimensions.width, dimensions.height);\n addClassName(dom, cls.start);\n return;\n case AnimationPhase.ACTIVATE_TRANSITIONS:\n // 2. Activate transition (after a reflow)\n addClassName(dom, cls.active);\n return;\n case AnimationPhase.REGISTER_LISTENERS:\n // 3. Set an animation listener, code at end\n // Needs to be done after activating so timeout is calculated correctly\n registerTransitionListener(\n // Unlike _didAppear, no cleanup needed since node is removed.\n // Just passing the componentWillDisappear callback so Inferno can\n // remove the nodes.\n [dom],\n callback,\n );\n return;\n case AnimationPhase.ACTIVATE_ANIMATION:\n // 4. Activate target state (called async via requestAnimationFrame)\n addClassName(dom, cls.end);\n removeClassName(dom, cls.start);\n clearDimensions(dom);\n }\n}\n\nexport function componentWillMove(\n parentVNode,\n parent: ParentDOM,\n _dom: HTMLElement | SVGElement,\n props: any,\n): void {\n // Measure all siblings of moved node once before any mutations are done\n let els;\n if (!parentVNode.$MV) {\n parentVNode.$MV = true;\n els = [];\n // @ts-expect-error parent is not supposed to be null\n let tmpEl = parent.firstChild as HTMLElement | SVGElement;\n while (!isNull(tmpEl)) {\n els.push({\n dx: 0,\n dy: 0,\n geometry: getGeometry(tmpEl),\n moved: false,\n node: tmpEl,\n });\n tmpEl = tmpEl.nextSibling as HTMLElement | SVGElement;\n }\n }\n\n // Get animation class names\n const cls = getAnimationClass(props.animation, '-move');\n\n const animState = {\n els,\n isMaster: !isNullOrUndef(els),\n parentVNode,\n };\n queueAnimation((phase) => {\n _willMove(phase, cls, animState);\n });\n}\n\nfunction _willMove(\n phase: AnimationPhase,\n cls: AnimationClass,\n animState,\n): void {\n const { els, isMaster, parentVNode } = animState;\n\n switch (phase) {\n case AnimationPhase.MEASURE:\n // If we are responsible for triggering measures, we check all the target positions\n if (isMaster) {\n for (let i = 0; i < els.length; i++) {\n const tmpItem = els[i];\n // Make sure we can measure target properly\n removeClassName(tmpItem.node, cls.active);\n // Measure\n const geometry = getGeometry(tmpItem.node);\n const deltaX = tmpItem.geometry.x - geometry.x;\n const deltaY = tmpItem.geometry.y - geometry.y;\n if (deltaX !== 0 || deltaY !== 0) {\n tmpItem.moved = true;\n tmpItem.dx = deltaX;\n tmpItem.dy = deltaY;\n }\n // TODO: Check dimensions\n }\n }\n return;\n case AnimationPhase.SET_START_STATE:\n /**\n * At this state we have measure the size of the moving node\n * both at source and target so now we let the source placeholder\n * fill the source space and move the node to start position\n * by transform\n */\n if (isMaster) {\n for (let i = 0; i < els.length; i++) {\n const tmpItem = els[i];\n if (tmpItem.moved) {\n setTransform(tmpItem.node, tmpItem.dx, tmpItem.dy, 1, 1);\n }\n // TODO: Set dimensions\n }\n }\n return;\n case AnimationPhase.ACTIVATE_TRANSITIONS:\n // A reflow is triggered prior to this step\n if (isMaster) {\n for (let i = 0; i < els.length; i++) {\n const tmpItem = els[i];\n if (tmpItem.moved) {\n addClassName(tmpItem.node, cls.active);\n }\n }\n }\n return;\n case AnimationPhase.REGISTER_LISTENERS:\n if (isMaster) {\n for (let i = 0; i < els.length; i++) {\n const tmpItem = els[i];\n if (tmpItem.moved) {\n registerTransitionListener(\n // How to know if this is a compound move?\n [tmpItem.node],\n _getWillMoveTransitionCallback(tmpItem.node, cls),\n );\n // Keep track of how many callbacks will be fired\n incrementMoveCbCount(tmpItem.node);\n }\n }\n }\n return;\n case AnimationPhase.ACTIVATE_ANIMATION:\n // 10. Apply target geometry of node to target\n if (isMaster) {\n for (let i = 0; i < els.length; i++) {\n const tmpItem = els[i];\n if (tmpItem.moved) {\n setTransform(tmpItem.node, 0, 0, 1, 1);\n }\n }\n }\n // TODO: Set dimensions\n if (parentVNode.$MV) parentVNode.$MV = false;\n }\n}\n\nfunction _getWillMoveTransitionCallback(\n dom: HTMLElement | SVGElement,\n cls: AnimationClass,\n) {\n return () => {\n // Only remove these if the translate has completed\n const cbCount = decrementMoveCbCount(dom);\n if (cbCount === 0) {\n clearDimensions(dom);\n clearTransform(dom);\n removeClassName(dom, cls.active);\n }\n };\n}\n" }, { "path": "packages/inferno-animation/src/index.ts", "content": "import {\n addClassName,\n clearDimensions,\n forceReflow,\n getDimensions,\n registerTransitionListener,\n removeClassName,\n setDimensions,\n setDisplay,\n} from './utils';\n\nexport { AnimatedAllComponent } from './AnimatedAllComponent';\nexport { AnimatedComponent } from './AnimatedComponent';\nexport { AnimatedMoveComponent } from './AnimatedMoveComponent';\nexport {\n componentDidAppear,\n componentWillDisappear,\n componentWillMove,\n type AnimationClass,\n} from './animations';\nexport { hasPendingAnimations } from './animationCoordinator';\n\nexport const utils = {\n addClassName,\n clearDimensions,\n forceReflow,\n getDimensions,\n registerTransitionListener,\n removeClassName,\n setDimensions,\n setDisplay,\n};\n" }, { "path": "packages/inferno-animation/src/utils.ts", "content": "import { isFunction } from 'inferno-shared';\n\nexport interface Dimensions {\n height: number;\n width: number;\n x: number;\n y: number;\n}\n\nfunction filterEmpty(c: string): boolean {\n return c !== '';\n}\n\nfunction getClassNameList(className: string): string[] {\n return className.split(' ').filter(filterEmpty);\n}\n\nexport function addClassName(\n node: HTMLElement | SVGElement,\n className: string,\n): void {\n const classNameList = getClassNameList(className);\n\n for (let i = 0; i < classNameList.length; i++) {\n node.classList.add(classNameList[i]);\n }\n}\n\nexport function removeClassName(\n node: HTMLElement | SVGElement,\n className: string,\n): void {\n const classNameList = getClassNameList(className);\n\n for (let i = 0; i < classNameList.length; i++) {\n node.classList.remove(classNameList[i]);\n }\n}\n\nexport function forceReflow(): number {\n return document.body.clientHeight;\n}\n\n// A quicker version used in pre_initialize\nexport function resetDisplay(\n node: HTMLElement | SVGElement,\n value?: string,\n): void {\n if (value !== undefined) {\n node.style.setProperty('display', value);\n } else {\n node.style.removeProperty('display');\n _cleanStyle(node);\n }\n}\n\nexport function setDisplay(\n node: HTMLElement | SVGElement,\n value?: string,\n): string {\n const oldVal = node.style.getPropertyValue('display');\n\n if (oldVal !== value) {\n if (value !== undefined) {\n node.style.setProperty('display', value);\n } else {\n node.style.removeProperty('display');\n _cleanStyle(node);\n }\n }\n return oldVal;\n}\n\nfunction _cleanStyle(node: HTMLElement | SVGElement): void {\n if (!node.style) {\n // https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute\n node.removeAttribute('style');\n }\n}\n\nexport function getDimensions(node: HTMLElement | SVGElement): Dimensions {\n const tmpDisplay = node.style.getPropertyValue('display');\n\n // The `display: none;` workaround was added to support Bootstrap animations in\n // https://github.com/jhsware/inferno-bootstrap/blob/be4a17bff5e785b993a66a2927846cd463fecae3/src/Modal/AnimateModal.js\n // we should consider deprecating this, or providing a different solution for\n // those who only do normal animations.\n const isDisplayNone =\n window.getComputedStyle(node).getPropertyValue('display') === 'none';\n if (isDisplayNone) {\n node.style.setProperty('display', 'block');\n }\n\n const tmp = node.getBoundingClientRect();\n\n if (isDisplayNone) {\n // node.style.display = tmpDisplay\n node.style.setProperty('display', tmpDisplay);\n _cleanStyle(node);\n }\n\n return {\n height: tmp.height,\n width: tmp.width,\n x: tmp.x,\n y: tmp.y,\n };\n}\n\nexport function getGeometry(node: HTMLElement | SVGElement): DOMRect {\n return node.getBoundingClientRect();\n}\n\nexport function setTransform(\n node: HTMLElement | SVGElement,\n x: number,\n y: number,\n scaleX: number = 1,\n scaleY: number = 1,\n): void {\n const doScale = scaleX !== 1 || scaleY !== 1;\n if (doScale) {\n node.style.transformOrigin = '0 0';\n node.style.transform = `translate(${x}px,${y}px) scale(${scaleX},${scaleY})`;\n } else {\n node.style.transform = `translate(${x}px,${y}px)`;\n }\n}\n\nexport function clearTransform(node: HTMLElement | SVGElement): void {\n node.style.transform = '';\n node.style.transformOrigin = '';\n}\n\nexport function setDimensions(\n node: HTMLElement | SVGElement,\n width: number,\n height: number,\n): void {\n node.style.width = width + 'px';\n node.style.height = height + 'px';\n}\n\nexport function clearDimensions(node: HTMLElement | SVGElement): void {\n node.style.width = node.style.height = '';\n}\n\nfunction _getMaxTransitionDuration(nodes): {\n maxDuration: number;\n nrofTransitions: number;\n} {\n let nrofTransitions = 0;\n let maxDuration = 0;\n for (let i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n if (!node) continue;\n\n const cs = window.getComputedStyle(node);\n const dur = cs.getPropertyValue('transition-duration').split(',');\n const del = cs.getPropertyValue('transition-delay').split(',');\n const props = cs.getPropertyValue('transition-property').split(',');\n\n for (const prop of props) {\n const fixedProp = prop.trim();\n if (fixedProp[0] === '-') {\n const tmp = fixedProp.split('-').splice(2).join('-');\n // Since I increase number of transition events to expect by\n // number of durations found I need to remove browser prefix\n // variations of the same property\n if (fixedProp.includes(tmp)) {\n nrofTransitions--;\n }\n }\n }\n\n let animTimeout = 0;\n for (let j = 0; j < dur.length; j++) {\n const duration = dur[j];\n const delay = del[j];\n\n const tp = parseFloat(duration) + parseFloat(delay);\n if (tp > animTimeout) animTimeout = tp;\n }\n\n nrofTransitions += dur.length;\n // Max duration should be equal to the longest animation duration\n // of all found transitions including delay\n if (animTimeout > maxDuration) {\n maxDuration = animTimeout;\n }\n }\n\n return {\n maxDuration,\n nrofTransitions,\n };\n}\n\nfunction setAnimationTimeout(onTransitionEnd, rootNode, maxDuration): void {\n if (rootNode.nodeName === 'IMG' && !rootNode.complete) {\n // Image animations should wait for loaded until the timeout is started, otherwise animation will be cut short\n // due to loading delay\n rootNode.addEventListener('load', () => {\n setTimeout(\n () => onTransitionEnd({ target: rootNode, timeout: true }),\n maxDuration === 0 ? 0 : Math.round(maxDuration * 1000) + 100,\n );\n });\n } else {\n setTimeout(\n () => onTransitionEnd({ target: rootNode, timeout: true }),\n maxDuration === 0 ? 0 : Math.round(maxDuration * 1000) + 100,\n );\n }\n}\n\n/**\n * You need to pass the root element and ALL animated children that have transitions,\n * if there are any, so the timeout is set to the longest duration. Otherwise there\n * will be animations that fail to complete before the timeout is triggered.\n *\n * @param nodes a list of nodes that have transitions that are part of this animation\n * @param callback callback when all transitions of participating nodes are completed\n */\nexport function registerTransitionListener(\n nodes: Array,\n callback: () => void,\n): void {\n const rootNode = nodes[0];\n\n /**\n * Here comes the transition event listener\n */\n const transitionDuration = _getMaxTransitionDuration(nodes);\n const maxDuration = transitionDuration.maxDuration;\n let nrofTransitionsLeft = transitionDuration.nrofTransitions;\n let done = false;\n\n const onTransitionEnd = (event): void => {\n // Make sure this is an actual event\n if (!event || done) {\n return;\n }\n\n if (!event.timeout) {\n // Make sure it isn't a child that is triggering the event\n let goAhead = false;\n for (let i = 0; i < nodes.length; i++) {\n // Note: Check for undefined nodes (happens when an animated el doesn't have children)\n if (nodes[i] !== undefined && event.target === nodes[i]) {\n goAhead = true;\n break;\n }\n }\n if (!goAhead) return;\n\n // Wait for all transitions\n if (--nrofTransitionsLeft > 0) {\n return;\n }\n }\n\n // This is it...\n done = true;\n\n /**\n * Perform cleanup\n */\n rootNode.removeEventListener('transitioncancel', onTransitionEnd, false);\n rootNode.removeEventListener('transitionend', onTransitionEnd, false);\n if (isFunction(callback)) {\n callback();\n }\n };\n\n // if element gets removed from the DOM before transition is triggered, browser will raise transitioncancel event\n rootNode.addEventListener('transitioncancel', onTransitionEnd, false);\n rootNode.addEventListener('transitionend', onTransitionEnd, false);\n\n setAnimationTimeout(onTransitionEnd, rootNode, maxDuration);\n}\n\nexport function incrementMoveCbCount(node): number {\n let curr = parseInt(node.dataset.moveCbCount, 10);\n if (isNaN(curr)) {\n curr = 1;\n } else {\n curr++;\n }\n node.dataset.moveCbCount = curr;\n return curr;\n}\n\nexport function decrementMoveCbCount(node): number {\n let curr = parseInt(node.dataset.moveCbCount, 10);\n if (isNaN(curr)) {\n curr = 0;\n } else {\n curr--;\n if (curr === 0) {\n node.dataset.moveCbCount = '';\n } else {\n node.dataset.moveCbCount = curr;\n }\n }\n return curr;\n}\n" }, { "path": "packages/inferno-clone-vnode/README.md", "content": "# Inferno-clone-vnode\n\nThis package can be used to clone Inferno virtual nodes. This package can also be aliased to `React.cloneElement`.\n\n```\nimport { cloneVNode } from 'inferno-clone-vnode';\n\nconst cloned = cloneVNode(\n vNode,\n [props],\n [...children]\n)\n```\n\nClone and return a new Inferno vNode using element as the starting point.\nThe resulting element will have the original element’s props with the new props merged in shallowly.\nNew children will replace existing children. key and ref from the original element will be preserved.\n" }, { "path": "packages/inferno-clone-vnode/__tests__/cloneVNode.spec.tsx", "content": "import { cloneVNode } from 'inferno-clone-vnode';\nimport {\n Component,\n createTextVNode,\n Fragment,\n InfernoNode,\n type InfernoSingleNode,\n render,\n type VNode,\n} from 'inferno';\n\ndescribe('cloneVNode (JSX)', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n });\n\n it('should clone a tag', () => {\n const node = cloneVNode(, null);\n render(node, container);\n expect(container.innerHTML).toBe('');\n });\n\n it('should clone with third argument array', () => {\n const node = cloneVNode(
    , null, []);\n render(node, container);\n expect(container.innerHTML).toBe('
    ');\n });\n\n it('should clone with third argument overriding props and cloned node children', () => {\n const node = cloneVNode(
    f
    , { children: 'x' }, [1]);\n render(node, container);\n expect(container.innerHTML).toBe('');\n });\n\n it('should clone with third argument overriding props and cloned node children', () => {\n const node = cloneVNode(
    f
    , { children: 'x' }, [undefined]);\n render(node, container);\n expect(container.innerHTML).toBe('
    ');\n });\n\n it('should clone OPT_ELEMENT', () => {\n const noop = () => {};\n // noinspection HtmlUnknownAttribute\n const node = cloneVNode(\n // @ts-expect-error\n // eslint-disable-next-line inferno/no-unknown-property\n
    ,\n { children: [] }\n );\n render(node, container);\n expect(container.innerHTML).toBe('
    ');\n });\n\n it('should clone a basic element with array children', () => {\n const node = cloneVNode(
    , { children: [] });\n render(node, container);\n expect(container.innerHTML).toBe('
    ');\n });\n\n it('should clone a basic element with children in props and as third argument', () => {\n const node1 = cloneVNode(\n
    ,\n { children: arr1a },\n arr2b,\n );\n render(node1, container);\n expect(container.innerHTML).toBe('
    arr2b
    ');\n\n const node2 = cloneVNode(\n
    ,\n { children: [arr2a] },\n arr2b,\n );\n render(node2, container);\n expect(container.innerHTML).toBe('
    arr2b
    ');\n\n const node3 = cloneVNode(
    , { children: [arr3a] }, [\n arr3b,\n ]);\n render(node3, container);\n expect(container.innerHTML).toBe('
    arr3b
    ');\n });\n\n it('Should support multiple parameters as children', () => {\n // @ts-ignore\n const node = cloneVNode(\n
    ,\n null,\n arr3a,\n arr3b,\n arr3c,\n );\n render(node, container);\n expect(container.innerHTML).toBe(\n '
    arr3aarr3barr3c
    ',\n );\n });\n\n it('Should support multiple nodes as children inside array', () => {\n const node = cloneVNode(
    , null, [\n arr3a,\n arr3b,\n arr3c,\n ]);\n render(node, container);\n expect(container.innerHTML).toBe(\n '
    arr3aarr3barr3c
    ',\n );\n });\n\n it('Should support single node as children', () => {\n const node = cloneVNode(
    , null, arr3a);\n render(node, container);\n expect(container.innerHTML).toBe('
    arr3a
    ');\n });\n\n it('Should support single node as children inside array', () => {\n const node = cloneVNode(
    , null, [arr3a]);\n render(node, container);\n expect(container.innerHTML).toBe('
    arr3a
    ');\n });\n\n it('should clone a basic element with null children', () => {\n const node = cloneVNode(
    , { children: null });\n render(node, container);\n expect(container.innerHTML).toBe('
    ');\n });\n\n it('should clone a basic element with key and ref', () => {\n const ref = () => {};\n const node = cloneVNode(
    , { key: 'foo', ref });\n\n expect(node.key).toBe('foo');\n expect(node.ref).toBe(ref);\n });\n\n it('should clone a basic element with different children and props', () => {\n const node1 =
    Hello world
    ;\n render(node1, container);\n expect(container.innerHTML).toBe('
    Hello world
    ');\n\n const node2 = cloneVNode(node1, null, 'Hello world 2!');\n render(node2, container);\n expect(container.innerHTML).toBe('
    Hello world 2!
    ');\n\n const node3 = cloneVNode(node2, { className: 'foo' }, 'Hello world 2!');\n render(node3, container);\n expect(container.innerHTML).toBe('
    Hello world 2!
    ');\n\n const node4 = cloneVNode(node1, { className: 'foo' }, 'Hello world 3!');\n render(node4, container);\n expect(container.innerHTML).toBe('
    Hello world 3!
    ');\n });\n\n function StatelessComponent(props) {\n return
    ;\n }\n\n it('should clone a basic stateless component with different children and props', () => {\n const node1 = ;\n\n render(node1, container);\n expect(container.innerHTML).toBe('
    Hello world
    ');\n const node2 = cloneVNode(node1, { children: 'Hello world 2!' });\n\n render(node2, container);\n expect(container.innerHTML).toBe('
    Hello world 2!
    ');\n const node3 = cloneVNode(node1, {\n children: 'Hello world 3!',\n className: 'yo',\n });\n\n render(node3, container);\n expect(container.innerHTML).toBe('
    Hello world 3!
    ');\n });\n\n it('Should prefer falsy children (undefined) if its provided over existing children', () => {\n const node1 =
    1
    ;\n const clone = cloneVNode(node1, null, [undefined]);\n\n render(clone, container);\n\n expect(container.innerHTML).toEqual('
    ');\n });\n\n it('Should clone Component with vNode div children', () => {\n class Com extends Component<{ children?: InfernoNode }> {\n public render({ children }) {\n return children;\n }\n }\n const com1 = (\n \n
    abc
    \n     \n );\n const clone = cloneVNode(com1);\n\n render(clone, container);\n\n expect(container.innerHTML).toEqual('
    abc
    ');\n });\n\n it('Should clone Component with no props at all', () => {\n class Com extends Component<{ children?: InfernoNode }> {\n public render({ children }) {\n return children;\n }\n }\n const com1 = ;\n const clone = cloneVNode(com1);\n\n render(clone, container);\n\n expect(container.innerHTML).toEqual('');\n });\n\n it('Should clone vNode with no props at all', () => {\n const span = ;\n const clone = cloneVNode(span);\n\n render(clone, container);\n\n expect(container.innerHTML).toEqual('');\n });\n\n it('Should clone Component with vNode text children', () => {\n class Com extends Component {\n public render() {\n return 'Text';\n }\n }\n const com1 = (\n \n
    1
    \n     \n );\n const clone = cloneVNode(com1);\n\n render(clone, container);\n\n expect(container.innerHTML).toEqual('Text');\n });\n\n it('Should clone textVNode', () => {\n const textNode = createTextVNode('foobar');\n const clone = cloneVNode(textNode);\n\n render(clone, container);\n\n expect(container.innerHTML).toEqual('foobar');\n });\n\n it('Should clone textVnode with new content', () => {\n const textNode = createTextVNode('foobar');\n const clone = cloneVNode(textNode, null, 'foo');\n\n render(clone, container);\n\n expect(container.innerHTML).toEqual('foo');\n });\n\n it('Should prefer children in order', () => {\n function Bar({ children }) {\n return
    {children}
    ;\n }\n\n const nodeToClone = First;\n\n render(nodeToClone, container);\n\n expect(container.innerHTML).toBe('
    First
    ');\n\n render(cloneVNode(nodeToClone, { children: 'Second' }), container);\n\n expect(container.innerHTML).toBe('
    Second
    ');\n\n render(cloneVNode(nodeToClone, { children: 'Second' }, 'Third'), container);\n\n expect(container.innerHTML).toBe('
    Third
    ');\n\n // @ts-ignore\n render(\n cloneVNode(nodeToClone, { children: 'Second' }, 'Third', 'Fourth'),\n container,\n );\n\n expect(container.innerHTML).toBe('
    ThirdFourth
    ');\n });\n\n it('Should prefer children in order #2', () => {\n function Bar({ children }) {\n return
    {children}
    ;\n }\n\n const nodeToClone = First;\n\n render(nodeToClone, container);\n\n expect(container.innerHTML).toBe('
    First
    ');\n\n render(cloneVNode(nodeToClone, null), container);\n\n expect(container.innerHTML).toBe('
    First
    ');\n\n render(cloneVNode(nodeToClone, null, null), container);\n\n expect(container.innerHTML).toBe('
    ');\n });\n\n describe('Cloning className', () => {\n it('Should prefer new props over cloned object', () => {\n const node =
    ;\n\n render(node, container);\n\n expect(container.firstChild.className).toEqual('test');\n\n const newNode = cloneVNode(node, {\n className: 'foo',\n });\n\n render(newNode, container);\n // expect(newNode.props.className).toBe(undefined); , This depends on if we are running inferno-compat or not\n // expect(newNode.props.hasOwnProperty('className')).toBe(false);\n\n expect(container.firstChild.className).toBe('foo');\n expect(container.innerHTML).toEqual('
    ');\n });\n\n it('Should remove className if new one is empty', () => {\n const node =
    ;\n\n render(node, container);\n\n expect(container.firstChild.className).toEqual('test');\n\n const newNode = cloneVNode(node, {\n className: null,\n });\n\n render(newNode, container);\n\n expect(container.firstChild.className).toBe('');\n expect(container.innerHTML).toEqual('
    ');\n });\n\n it('Should keep previous className when new props dont have that property at all', () => {\n const node =
    ;\n\n render(node, container);\n\n expect(container.firstChild.className).toEqual('test');\n\n const newNode = cloneVNode(node, {\n id: 'wow',\n });\n\n render(newNode, container);\n\n expect(Object.prototype.hasOwnProperty.call(newNode.props, 'id')).toBe(\n true,\n );\n // expect(newNode.props.className).toBe(undefined);\n // expect(newNode.props.hasOwnProperty('className')).toBe(false);\n\n expect(container.firstChild.className).toBe('test');\n expect(container.firstChild.getAttribute('id')).toBe('wow');\n expect(container.innerHTML).toEqual('
    ');\n });\n\n it('Should be possible to add props to children', () => {\n function Foobar(props) {\n return
    {cloneVNode(props.children, { foo: 'bar' })}
    ;\n }\n\n function ChildCom(props) {\n return
    {props.foo}
    ;\n }\n\n render(\n \n \n ,\n container,\n );\n\n expect(container.innerHTML).toEqual('
    bar
    ');\n });\n });\n\n describe('Cloning key', () => {\n it('Should prefer new props over cloned object', () => {\n const node =
    ;\n\n expect(node.key).toEqual('test');\n\n render(node, container);\n expect(container.innerHTML).toEqual('
    ');\n\n const newNode = cloneVNode(node, {\n key: 'foo',\n });\n\n expect(newNode.key).toEqual('foo');\n expect(newNode.props.ref).toBe(undefined);\n // expect(newNode.props.hasOwnProperty('key')).toBe(false);\n render(newNode, container);\n expect(container.innerHTML).toEqual('
    ');\n });\n\n it('Should remove key if new one is empty', () => {\n const node =
    ;\n\n expect(node.key).toEqual('test');\n\n render(node, container);\n expect(container.innerHTML).toEqual('
    ');\n\n const newNode = cloneVNode(node, {\n key: null,\n });\n\n expect(newNode.key).toEqual(null);\n\n render(newNode, container);\n expect(newNode.props.key).toBe(undefined);\n // expect(newNode.props.hasOwnProperty('key')).toBe(false);\n expect(container.innerHTML).toEqual('
    ');\n });\n\n it('Should keep previous key when new props dont have that property at all', () => {\n const node =
    ;\n\n expect(node.key).toEqual('test');\n\n render(node, container);\n expect(container.innerHTML).toEqual('
    ');\n\n const newNode = cloneVNode(node, {\n className: null,\n });\n\n expect(newNode.key).toEqual('test');\n expect(newNode.props.key).toBe(undefined);\n expect(newNode.props.className).toBe(undefined);\n // expect(newNode.props.hasOwnProperty('key')).toBe(false);\n // expect(newNode.props.hasOwnProperty('className')).toBe(false);\n render(newNode, container);\n expect(container.innerHTML).toEqual('
    ');\n });\n });\n\n describe('Cloning Ref', () => {\n function initialFunc() {}\n\n it('Should prefer new props over cloned object', () => {\n const node =
    ;\n\n expect(node.ref).toEqual(initialFunc);\n\n render(node, container);\n expect(container.innerHTML).toEqual('
    ');\n\n function newFunction() {}\n\n const newNode = cloneVNode(node, {\n ref: newFunction,\n });\n\n expect(newNode.ref).toEqual(newFunction);\n // expect(newNode.props.hasOwnProperty('ref')).toBe(false);\n expect(newNode.props.ref).toBe(undefined);\n render(newNode, container);\n expect(container.innerHTML).toEqual('
    ');\n });\n\n it('Should remove ref if new one is empty', () => {\n const node =
    ;\n\n expect(node.ref).toEqual(initialFunc);\n\n render(node, container);\n expect(container.innerHTML).toEqual('
    ');\n\n const newNode = cloneVNode(node, {\n ref: null,\n });\n\n expect(newNode.ref).toEqual(null);\n // expect(newNode.props.hasOwnProperty('ref')).toBe(false);\n expect(newNode.props.ref).toBe(undefined);\n render(newNode, container);\n expect(container.innerHTML).toEqual('
    ');\n });\n\n it('Should keep previous ref when new props dont have that property at all', () => {\n const node =
    ;\n\n expect(node.ref).toEqual(initialFunc);\n\n render(node, container);\n expect(container.innerHTML).toEqual('
    ');\n\n const newNode = cloneVNode(node, {\n className: null,\n });\n\n expect(newNode.ref).toEqual(initialFunc);\n // expect(newNode.props.hasOwnProperty('className')).toBe(false);\n expect(newNode.props.className).toBe(undefined);\n expect(newNode.className).toBe(null);\n render(newNode, container);\n expect(container.innerHTML).toEqual('
    ');\n });\n });\n\n describe('without children specified', () => {\n it('should render children one level deep', () => {\n interface NameContainerProps {\n children: InfernoSingleNode[];\n }\n class NameContainer extends Component {\n public render() {\n const children = this.props.children.map((c) =>\n cloneVNode(c as VNode, {\n name: 'Henry',\n }),\n );\n\n return {children};\n }\n }\n\n const NameViewer = () => {\n return (\n \n
    \n A child that should render after the clone\n
    \n
    \n A child that should render after the clone\n
    \n     \n );\n };\n\n render(, container);\n\n expect(container.innerHTML)\n .toBe(`
    A child that should render after \\\nthe clone
    A child that should render after the clone
    `);\n });\n\n it('should render children two levels deep', () => {\n const items = [\n { name: 'Mike Brady' },\n { name: 'Carol Brady' },\n { name: 'Greg Brady' },\n { name: 'Marcia Brady' },\n ];\n const items2 = [{ age: 28 }, { age: 26 }, { age: 16 }, { age: 15 }];\n\n interface Wrapper1Props {\n children: InfernoSingleNode;\n }\n\n class Wrapper1 extends Component {\n public render() {\n const children = cloneVNode(this.props.children as VNode, { items });\n return
    {children}
    ;\n }\n }\n\n interface Wrapper2Props {\n items2: Array<{ age: number }>;\n items: Array<{ name: string }>;\n children: NormalItem[];\n }\n\n class Wrapper2 extends Component {\n public render() {\n const children = this.props.children.map((c) => {\n return cloneVNode(c as any, {\n age:\n (c.props && c.props.index) != null\n ? this.props.items2[c.props.index as number].age\n : 'default-age',\n name:\n (c.props && c.props.index) != null\n ? this.props.items[c.props.index as number].name\n : 'default-name',\n propsIndex: c.props && c.props.index,\n });\n });\n\n return
    {children}
    ;\n }\n }\n\n interface ItemProps {\n index?: number;\n name?: string;\n age?: string;\n }\n\n class Item extends Component {\n public render() {\n return (\n \n item {this.props.name} - age: {this.props.age}\n \n );\n }\n }\n\n interface NormalItemProps {\n index?: number;\n name?: string;\n age?: string;\n }\n class NormalItem extends Component {\n public render() {\n return (\n \n Normal Item {this.props.name} - age: {this.props.age}\n \n );\n }\n }\n\n class App extends Component {\n public render() {\n const content: NormalItem[] = [, ];\n\n for (const _d of items) {\n const idx = items.indexOf(_d);\n content.push();\n }\n\n return (\n \n \n {content}\n \n \n );\n }\n }\n\n render(, container);\n\n expect(container.innerHTML)\n .toBe(`
    Normal Item default-name \\\n- age: default-ageNormal Item default-name - age: default-ageitem Mike Brady - age: \\\n28item Carol Brady - age: 26item Greg Brady - age: 16item Marcia Brady \\\n- age: 15
    `);\n });\n });\n\n it('Should not clone all children of Component', () => {\n // React fiddle of cloneElement https://jsfiddle.net/5wh3cfn0/\n class Hello extends Component<{ name?: string }> {\n public render() {\n return
    Hello {this.props.name}
    ;\n }\n }\n\n const node1 = (\n \n 1\n \n );\n const cloned1 = cloneVNode(node1);\n\n expect(node1.props.children).toBe(cloned1.props.children);\n expect(node1).not.toBe(cloned1);\n expect(node1.props).not.toBe(cloned1.props);\n\n const node = (\n
    {[null,
    1
    , [
    1
    ,
    2
    ]]}
    \n );\n const cloned = cloneVNode(node);\n\n // Following assertion depends on if Inferno-compat is used or not\n // expect(node.props.children).toBe(cloned.props.children);\n expect(node).not.toBe(cloned);\n expect(node.props).not.toBe(cloned.props);\n });\n\n it('Should be possible to clone fragment', () => {\n const frag = (\n \n 1\n 2\n \n );\n\n render(cloneVNode(frag), container);\n\n expect(container.innerHTML).toBe('12');\n\n const firstChild = container.firstChild;\n\n render(cloneVNode(frag), container);\n\n expect(firstChild).toBe(container.firstChild);\n\n expect(container.innerHTML).toBe('12');\n });\n});\n" }, { "path": "packages/inferno-clone-vnode/index.cjs", "content": "'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./dist/index.min.cjs');\n} else {\n module.exports = require('./dist/index.cjs');\n}\n" }, { "path": "packages/inferno-clone-vnode/package.json", "content": "{\n \"name\": \"inferno-clone-vnode\",\n \"version\": \"9.0.11\",\n \"license\": \"MIT\",\n \"type\": \"module\",\n \"description\": \"provides helper function to clone Inferno's vNodes\",\n \"author\": {\n \"name\": \"Sampo KivistΓΆ\",\n \"email\": \"sampo.kivisto@live.fi\",\n \"url\": \"https://github.com/havunen\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/infernojs/inferno.git\",\n \"directory\": \"packages/inferno-clone-vnode\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/infernojs/inferno/issues\"\n },\n \"homepage\": \"https://github.com/infernojs/inferno#readme\",\n \"files\": [\n \"index.cjs\",\n \"dist/\",\n \"README.md\",\n \"package.json\"\n ],\n \"exports\": {\n \".\": {\n \"import\": \"./dist/index.mjs\",\n \"require\": \"./index.cjs\",\n \"types\": \"./dist/index.d.ts\"\n },\n \"./dist/index.dev.mjs\": \"./dist/index.dev.mjs\",\n \"./dist/index.mjs\": \"./dist/index.mjs\"\n },\n \"module\": \"dist/index.mjs\",\n \"dev:module\": \"dist/index.dev.mjs\",\n \"typings\": \"dist/index.d.ts\",\n \"keywords\": [\n \"babel\",\n \"react\",\n \"inferno\",\n \"framework\",\n \"interfaces\",\n \"user interfaces\",\n \"class\",\n \"vdom\"\n ],\n \"dependencies\": {\n \"inferno\": \"9.0.11\"\n },\n \"devDependencies\": {\n \"inferno-shared\": \"9.0.11\",\n \"inferno-vnode-flags\": \"9.0.11\"\n },\n \"rollup\": {\n \"bundledDependencies\": [\n \"inferno-shared\"\n ],\n \"moduleName\": \"Inferno\"\n }\n}\n" }, { "path": "packages/inferno-clone-vnode/src/index.ts", "content": "import {\n createComponentVNode,\n createFragment,\n createTextVNode,\n createVNode,\n EMPTY_OBJ,\n normalizeProps,\n type VNode,\n} from 'inferno';\nimport { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';\n\n/*\n directClone is preferred over cloneVNode and used internally also.\n This function makes Inferno backwards compatible.\n And can be tree-shaked by modern bundlers\n*/\n\n/**\n * Clones given virtual node by creating new instance of it\n * @param {VNode} vNodeToClone virtual node to be cloned\n * @param {Props=} props additional props for new virtual node\n * @param {...*} childArgs new children for new virtual node\n * @returns {VNode} new virtual node\n */\nexport function cloneVNode(vNodeToClone: VNode, props?, ...childArgs): VNode {\n const flags = vNodeToClone.flags;\n let children =\n flags & VNodeFlags.Component\n ? vNodeToClone.props?.children\n : vNodeToClone.children;\n const childLen = childArgs.length;\n let className = vNodeToClone.className;\n let key = vNodeToClone.key;\n let ref = vNodeToClone.ref;\n if (props) {\n if (props.className !== void 0) {\n className = props.className as string;\n }\n if (props.ref !== void 0) {\n ref = props.ref;\n }\n if (props.key !== void 0) {\n key = props.key;\n }\n if (props.children !== void 0) {\n children = props.children;\n }\n } else {\n props = {};\n }\n\n if (childLen === 1) {\n children = childArgs[0];\n } else if (childLen > 1) {\n children = [];\n\n for (let i = 0; i < childLen; i++) {\n children.push(childArgs[i]);\n }\n }\n\n props.children = children;\n\n if (flags & VNodeFlags.Component) {\n return createComponentVNode(\n flags,\n vNodeToClone.type,\n !vNodeToClone.props && !props\n ? EMPTY_OBJ\n : { ...vNodeToClone.props, ...props },\n key,\n ref,\n );\n }\n\n if (flags & VNodeFlags.Text) {\n return createTextVNode(children);\n }\n\n if (flags & VNodeFlags.Fragment) {\n return createFragment(\n childLen === 1 ? [children] : children,\n ChildFlags.UnknownChildren,\n key,\n );\n }\n\n return normalizeProps(\n createVNode(\n flags,\n vNodeToClone.type,\n className,\n null,\n ChildFlags.HasInvalidChildren,\n { ...vNodeToClone.props, ...props },\n key,\n ref,\n ),\n );\n}\n" }, { "path": "packages/inferno-compat/README.md", "content": "# inferno-compat\n\nThis module is a compatibility layer that makes React-based modules work with Inferno, without any code changes.\n\nIt provides the same exports as `react` and `react-dom`, meaning you can use your build tool of choice to drop it in where React is being depended on.\n\nDo note however, as with almost all compatability layer libraries, there is an associated cost of extra overhead. As such, you should never expect native Inferno performance when using `inferno-compat`.\n\nYou might not always need the `inferno-compat` package. Just the alias to Inferno might be enough.\n\n**Inferno-compat** adds the following features:\n\nAs in React:\n\n- ClassName is copied to props\n- Children is copied to props (for html vNodes too)\n- styles are converted from camelCase to hyphen-case runtime. You can turn off this feature by setting: `options.reactStyles = false;`\n- Empty props are always created for element vNodes\n- You can create Components based on string\n- `findDOMNOde` -method is available\n- Iterable data structures are supported\n- `Children.(map/forEach/count/only/toArray)` - methods are available\n- Html properties are transformed to inferno compatible format\n- Some form events (fe: onChange) are transformed to native alternative\n- PureComponent is available\n- `unstable_renderSubtreeIntoContainer` - method is available\n- `DOM` - factory is available\n- `unmountComponentAtNode` - method is available its same as \"render(null, container)\"\n\n## How to install?\n\nInferno-compat does not automatically install all its features. For example: If you need createElement support you should also install `inferno-create-element`.\n\nAll packages:\n\n```\nnpm install --save inferno\nnpm install --save inferno-compat\nnpm install --save inferno-clone-vnode\nnpm install --save inferno-create-element\n\n```\n\nIf you use React/lib/ReactCSSTransitionGroup.ts\n\ninstall `inferno-transition-group` package.\n\nIf you use React/lib/ReactCSSTransitionGroup.ts\n\ninstall `rc-css-transition-group-modern` package.\n\n## What is currently supported?\n\n### `react`\n\n- `React.createElement`\n- `React.cloneElement`\n- `React.Component`\n- `React.PureComponent`\n- `React.PropTypes`\n- `React.Children`\n- `React.isValidElement`\n\nNote: Inferno will not currently validate `PropTypes`\n\n### `react-dom`\n\n- `ReactDOM.render`\n- `ReactDOM.hydrate`\n- `ReactDOM.unmountComponentAtNode`\n- `ReactDOM.findDOMNode`\n- `React.DOM`\n- `React.createFactory`\n\n## Usage with Webpack\n\nUsing `inferno-compat` with Webpack is easy.\n\nAll you have to do is add an alias for `react` and `react-dom`:\n\n```js\n{\n\tresolve: {\n\t\talias: {\n\t\t\t'react': 'inferno-compat',\n\t\t\t'react-dom': 'inferno-compat'\n\t\t}\n\t}\n}\n```\n\n## Usage with Babel\n\nInstall the Babel plugin for module aliasing: `npm install --save-dev babel-plugin-module-resolver`.\n\nBabel can now alias `react` and `react-dom` to `inferno` by adding the following to your `.babelrc` file:\n\n```js\n{\n \"plugins\": [\n [\"module-resolver\", {\n \"root\": [\".\"],\n \"alias\": {\n \"react\": \"inferno-compat\",\n \"react-dom\": \"inferno-compat\"\n }\n }]\n ]\n}\n```\n\n## Usage with Browserify\n\nUsing `inferno-compat` with Browserify is as simple as installing and configuring [aliasify](http://npm.im/aliasify).\n\nFirst, install it: `npm install --save-dev aliasify`\n\n... then in your `package.json`, configure aliasify to alias `react` and `react-dom`:\n\n```js\n{\n // ...\n \"aliasify\": {\n \"aliases\": {\n \"react\": \"inferno-compat\",\n \"react-dom\": \"inferno-compat\"\n }\n }\n // ...\n}\n```\n\n## Once Aliased\n\nWith the above Webpack or Browserify aliases in place, existing React modules should work nicely:\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nclass Foo extends React.Component {\n propTypes = {\n a: React.PropTypes.string.isRequired,\n };\n render() {\n let { a, b, children } = this.props;\n return
    {children}
    ;\n }\n}\n\nReactDOM.render(test, document.getElementById('app'));\n```\n" }, { "path": "packages/inferno-compat/__tests__/ReactChildren.spec.jsx", "content": "/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @emails react-core\n */\n\nimport React from 'inferno-compat';\n\ndescribe('ReactChildren', function () {\n let ReactChildren;\n\n beforeEach(function () {\n ReactChildren = React.Children;\n });\n\n it('should support identity for simple', function () {\n const callback = jasmine.createSpy().and.callFake(function (kid, index) {\n return kid;\n });\n\n const simpleKid = ;\n\n // First pass children into a component to fully simulate what happens when\n // using structures that arrive from transforms.\n\n const instance = (\n
    \n \n
    \n );\n ReactChildren.forEach(instance.children, callback);\n expect(callback).toHaveBeenCalledWith(simpleKid, 0, jasmine.any(Array));\n callback.calls.reset();\n ReactChildren.map(instance.children, callback);\n expect(callback).toHaveBeenCalledWith(simpleKid, 0, jasmine.any(Array));\n // expect(mappedChildren[0]).toEqual();\n });\n\n it('should treat single arrayless child as being in array', function () {\n const callback = jasmine.createSpy().and.callFake(function (kid, index) {\n return kid;\n });\n\n const simpleKid = ;\n const instance = (\n
    \n \n
    \n );\n ReactChildren.forEach(instance.children, callback);\n expect(callback).toHaveBeenCalledWith(simpleKid, 0, jasmine.any(Array));\n callback.calls.reset();\n ReactChildren.map(instance.children, callback);\n expect(callback).toHaveBeenCalledWith(simpleKid, 0, jasmine.any(Array));\n // expect(mappedChildren[0]).toEqual();\n });\n\n it('should treat single child in array as expected', function () {\n const callback = jasmine.createSpy().and.callFake(function (kid, index) {\n return kid;\n });\n\n const simpleKid = ;\n // Use optimization flag to avoid normalization to keep flags same... for below assertion\n const instance =
    {[]}
    ;\n ReactChildren.forEach(instance.children, callback);\n expect(callback).toHaveBeenCalledWith(simpleKid, 0, jasmine.any(Array)); // Third param is the array\n callback.calls.reset();\n\n ReactChildren.map(instance.children, callback);\n expect(callback).toHaveBeenCalledWith(simpleKid, 0, jasmine.any(Array));\n // expect(mappedChildren[0]).toEqual();\n // Flags dont match because its implementation detail in Inferno\n });\n\n it('should pass key to returned component', function () {\n const mapFn = function (kid, index) {\n return
    {kid}
    ;\n };\n const instance = (\n
    \n \n
    \n );\n\n const mappedChildren = ReactChildren.map(instance.children, mapFn);\n\n expect(ReactChildren.count(mappedChildren)).toBe(1);\n expect(mappedChildren[0].children.key).toBe('simple');\n });\n\n it('should invoke callback with the right context', function () {\n let lastContext;\n const callback = function (kid, index) {\n lastContext = this;\n return this;\n };\n\n const scopeTester = { fooScope: 'barScope' };\n\n const simpleKid = ;\n const instance =
    {simpleKid}
    ;\n ReactChildren.forEach(instance.children, callback, scopeTester);\n expect(lastContext).toEqual(scopeTester);\n\n const mappedChildren = ReactChildren.map(\n instance.children,\n callback,\n scopeTester,\n );\n\n expect(ReactChildren.count(mappedChildren)).toBe(1);\n expect(mappedChildren[0]).toEqual(scopeTester);\n });\n\n it('ForEach should not fail if null children is provided', () => {\n expect(React.Children.forEach(null, null, null)).toBe(undefined);\n });\n\n it('should not throw if key provided is a dupe with array key', function () {\n const zero =
    ;\n const one =
    ;\n\n const mapFn = function () {\n return null;\n };\n\n const instance = (\n
    \n {zero}\n {one}\n
    \n );\n\n expect(function () {\n ReactChildren.map(instance.props.children, mapFn);\n }).not.toThrow();\n });\n\n it('should return 0 for null children', function () {\n const numberOfChildren = ReactChildren.count(null);\n expect(numberOfChildren).toBe(0);\n });\n\n it('should return 0 for undefined children', function () {\n const numberOfChildren = ReactChildren.count(undefined);\n expect(numberOfChildren).toBe(0);\n });\n\n it('should return 1 for single child', function () {\n const simpleKid = ;\n const instance =
    {simpleKid}
    ;\n const numberOfChildren = ReactChildren.count(instance.children);\n expect(numberOfChildren).toBe(1);\n });\n\n it('should count the number of children in flat structure', function () {\n const zero =
    ;\n const one = null;\n const two =
    ;\n const three = null;\n const four =
    ;\n\n const instance = (\n
    \n {zero}\n {one}\n {two}\n {three}\n {four}\n
    \n );\n const numberOfChildren = ReactChildren.count(instance.children);\n expect(numberOfChildren).toBe(3); // Nulls are removed in Inferno\n });\n\n // it('should count the number of children in nested structure', function() {\n // var zero =
    ;\n // var one = null;\n // var two =
    ;\n // var three = null;\n // var four =
    ;\n // var five =
    ;\n // // five is placed into a JS object with a key that is joined to the\n // // component key attribute.\n // // Precedence is as follows:\n // // 1. If grouped in an Object, the object key combined with `key` prop\n // // 2. If grouped in an Array, the `key` prop, falling back to array index\n\n // var instance = (\n //
    {\n // [\n // ReactFragment.create({\n // firstHalfKey: [zero, one, two],\n // secondHalfKey: [three, four],\n // keyFive: five,\n // }),\n // null,\n // ]\n // }
    \n // );\n // var numberOfChildren = ReactChildren.count(instance.props.children);\n // expect(numberOfChildren).toBe(5);\n // });\n\n it('should flatten children to an array', function () {\n expect(ReactChildren.toArray(undefined)).toEqual([]);\n expect(ReactChildren.toArray(null)).toEqual([]);\n\n expect(ReactChildren.toArray(
    ).length).toBe(1);\n expect(ReactChildren.toArray([
    ]).length).toBe(1);\n expect(ReactChildren.toArray(
    )[0].key).toBe(\n ReactChildren.toArray([
    ])[0].key,\n );\n\n const flattened = ReactChildren.toArray([\n [
    ,
    ,
    ],\n [
    ,
    ,
    ],\n ]);\n expect(flattened.length).toBe(6);\n expect(flattened[1].key).toContain('banana');\n expect(flattened[3].key).toContain('banana');\n // Inferno will do this when it normalizes children\n // // expect(flattened[1].key).not.toBe(flattened[3].key);\n //\n // var reversed = ReactChildren.toArray([\n // [
    ,
    ,
    ],\n // [
    ,
    ,
    ],\n // ]);\n // expect(flattened[0].key).toBe(reversed[2].key);\n // expect(flattened[1].key).toBe(reversed[1].key);\n // expect(flattened[2].key).toBe(reversed[0].key);\n // expect(flattened[3].key).toBe(reversed[5].key);\n // expect(flattened[4].key).toBe(reversed[4].key);\n // expect(flattened[5].key).toBe(reversed[3].key);\n //\n // // null/undefined/bool are all omitted\n // expect(ReactChildren.toArray([1, 'two', null, undefined, true])).toEqual(\n // [1, 'two']\n // );\n });\n\n it('should normalize children in forEach', function () {\n const children = [];\n const callback = function (child) {\n children.push(child);\n };\n\n ReactChildren.forEach([false, true, undefined], callback);\n expect(children).toEqual([null, null, null]);\n });\n});\n" }, { "path": "packages/inferno-compat/__tests__/ReactComponent.spec.jsx", "content": "/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @emails react-core\n */\n\nimport React from 'inferno-compat';\nimport { createComponentVNode } from 'inferno';\nimport { Wrapper } from 'inferno-test-utils';\nimport { VNodeFlags } from 'inferno-vnode-flags';\n\nconst ReactDOM = React;\nlet mocks;\n\ndescribe('ReactComponent', function () {\n let container;\n\n function renderIntoDocument(input) {\n return React.render(\n createComponentVNode(VNodeFlags.ComponentClass, Wrapper, {\n children: input,\n }),\n container,\n );\n }\n\n beforeEach(() => {\n mocks = {\n getMockFunction: function () {\n return jasmine.createSpy();\n },\n };\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n afterEach(() => {\n React.render(null, container);\n container.innerHTML = '';\n document.body.removeChild(container);\n });\n\n it('should throw on invalid render targets', function () {\n const container = document.createElement('div');\n // jQuery objects are basically arrays; people often pass them in by mistake\n expect(function () {\n ReactDOM.render(
    , [container]);\n }).toThrow();\n\n expect(function () {\n ReactDOM.render(
    , null);\n }).toThrow();\n });\n\n it('should support new-style refs', function () {\n const innerObj = {};\n const outerObj = {};\n\n class Wrapper extends React.Component {\n getObject() {\n return this.props.object;\n }\n\n render() {\n return
    {this.props.children}
    ;\n }\n }\n\n let mounted = false;\n class Component extends React.Component {\n render() {\n const inner = (\n (this.innerRef = c)} />\n );\n const outer = (\n (this.outerRef = c)}>\n {inner}\n \n );\n return outer;\n }\n\n componentDidMount() {\n expect(this.innerRef.getObject()).toEqual(innerObj);\n expect(this.outerRef.getObject()).toEqual(outerObj);\n mounted = true;\n }\n }\n\n const instance = ;\n renderIntoDocument(instance);\n expect(mounted).toBe(true);\n });\n\n it('fires the callback after a component is rendered', function () {\n const callback = mocks.getMockFunction();\n const container = document.createElement('div');\n ReactDOM.render(
    , container, callback);\n expect(callback.calls.count()).toBe(1);\n ReactDOM.render(
    , container, callback);\n expect(callback.calls.count()).toBe(2);\n ReactDOM.render(, container, callback);\n expect(callback.calls.count()).toBe(3);\n });\n\n it('throws usefully when rendering badly-typed elements', function () {\n // spyOn(console, 'error');\n\n const X = undefined;\n expect(() => renderIntoDocument()).toThrow();\n\n const Z = {};\n expect(() => renderIntoDocument()).toThrow();\n\n // One warning for each element creation\n // expect(console.error.calls.count()).toBe(3);\n });\n\n // other\n it('should pass context to children when not owner', function () {\n class Parent extends React.Component {\n render() {\n return (\n \n \n \n );\n }\n }\n\n class Child extends React.Component {\n static childContextTypes = {\n foo: React.PropTypes.string,\n };\n\n getChildContext() {\n return {\n foo: 'bar',\n };\n }\n\n render() {\n return React.Children.only(this.props.children);\n }\n }\n\n class Grandchild extends React.Component {\n contextTypes = {\n foo: React.PropTypes.string,\n };\n\n render() {\n return
    {this.context.foo}
    ;\n }\n }\n\n const component = renderIntoDocument();\n expect(ReactDOM.findDOMNode(component).innerHTML).toBe('bar');\n });\n});\n" }, { "path": "packages/inferno-compat/__tests__/ReactComponentLifeCycle.spec.jsx", "content": "/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @emails react-core\n */\n\nimport React from 'inferno-compat';\nimport { createComponentVNode } from 'inferno';\nimport { Wrapper } from 'inferno-test-utils';\nimport { VNodeFlags } from 'inferno-vnode-flags';\n\nconst ReactDOM = React;\n\nconst clone = function (o) {\n return JSON.parse(JSON.stringify(o));\n};\n\nconst GET_INIT_STATE_RETURN_VAL = {\n hasWillMountCompleted: false,\n hasRenderCompleted: false,\n hasDidMountCompleted: false,\n hasWillUnmountCompleted: false,\n};\n\nconst INIT_RENDER_STATE = {\n hasWillMountCompleted: true,\n hasRenderCompleted: false,\n hasDidMountCompleted: false,\n hasWillUnmountCompleted: false,\n};\n\nconst DID_MOUNT_STATE = {\n hasWillMountCompleted: true,\n hasRenderCompleted: true,\n hasDidMountCompleted: false,\n hasWillUnmountCompleted: false,\n};\n\nconst NEXT_RENDER_STATE = {\n hasWillMountCompleted: true,\n hasRenderCompleted: true,\n hasDidMountCompleted: true,\n hasWillUnmountCompleted: false,\n};\n\nconst WILL_UNMOUNT_STATE = {\n hasWillMountCompleted: true,\n hasDidMountCompleted: true,\n hasRenderCompleted: true,\n hasWillUnmountCompleted: false,\n};\n\nconst POST_WILL_UNMOUNT_STATE = {\n hasWillMountCompleted: true,\n hasDidMountCompleted: true,\n hasRenderCompleted: true,\n hasWillUnmountCompleted: true,\n};\n\n/**\n * Every React component is in one of these life cycles.\n */\nconst ComponentLifeCycle = {\n /**\n * Mounted components have a DOM node representation and are capable of\n * receiving new props.\n */\n MOUNTED: 'MOUNTED',\n /**\n * Unmounted components are inactive and cannot receive new props.\n */\n UNMOUNTED: 'UNMOUNTED',\n};\n\ndescribe('ReactComponentLifeCycle', function () {\n let container;\n\n function renderIntoDocument(input) {\n return React.render(\n createComponentVNode(VNodeFlags.ComponentClass, Wrapper, {\n children: input,\n }),\n container,\n );\n }\n\n beforeEach(() => {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n afterEach(() => {\n React.render(null, container);\n container.innerHTML = '';\n document.body.removeChild(container);\n });\n\n it('should not reuse an instance when it has been unmounted', function () {\n const container = document.createElement('div');\n class StatefulComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n render() {\n return
    ;\n }\n }\n const element = ;\n\n const firstInstance = ReactDOM.render(element, container);\n ReactDOM.unmountComponentAtNode(container);\n const secondInstance = ReactDOM.render(element, container);\n expect(firstInstance).not.toBe(secondInstance);\n });\n\n /**\n * If a state update triggers rerendering that in turn fires an onDOMReady,\n * that second onDOMReady should not fail.\n */\n it('it should fire onDOMReady when already in onDOMReady', function (done) {\n const _testJournal = [];\n\n class Child extends React.Component {\n componentDidMount() {\n _testJournal.push('Child:onDOMReady');\n }\n\n render() {\n return
    ;\n }\n }\n\n class SwitcherParent extends React.Component {\n constructor(props) {\n super(props);\n _testJournal.push('SwitcherParent:ctr');\n this.state = { showHasOnDOMReadyComponent: false };\n }\n\n componentDidMount() {\n _testJournal.push('SwitcherParent:onDOMReady');\n this.switchIt();\n }\n\n switchIt() {\n this.setState({ showHasOnDOMReadyComponent: true });\n }\n\n render() {\n return (\n
    \n {this.state.showHasOnDOMReadyComponent ? :
    }\n
    \n );\n }\n }\n\n const instance = ;\n renderIntoDocument(instance);\n setTimeout(() => {\n expect(_testJournal).toEqual([\n 'SwitcherParent:ctr',\n 'SwitcherParent:onDOMReady',\n 'Child:onDOMReady',\n ]);\n done();\n }, 20);\n });\n\n it('should allow update state inside of componentWillMount', function () {\n class StatefulComponent extends React.Component {\n componentWillMount() {\n this.setState({ stateField: 'something' });\n }\n\n render() {\n return
    ;\n }\n }\n\n const instance = ;\n expect(function () {\n renderIntoDocument(instance);\n }).not.toThrow();\n });\n\n it('should not throw when updating an auxiliary component', function () {\n class Tooltip extends React.Component {\n render() {\n return
    {this.props.children}
    ;\n }\n\n componentDidMount() {\n this.container = document.createElement('div');\n this.updateTooltip();\n }\n\n componentDidUpdate() {\n this.updateTooltip();\n }\n\n updateTooltip() {\n // Even though this.props.tooltip has an owner, updating it shouldn't\n // throw here because it's mounted as a root component\n ReactDOM.render(this.props.tooltip, this.container);\n }\n }\n\n class Component extends React.Component {\n render() {\n return (\n {this.props.tooltipText}
    }>\n {this.props.text}\n \n );\n }\n }\n\n const container = document.createElement('div');\n ReactDOM.render(, container);\n\n // Since `instance` is a root component, we can set its props. This also\n // makes Tooltip rerender the tooltip component, which shouldn't throw.\n ReactDOM.render(, container);\n });\n\n it('should allow state updates in componentDidMount', function (done) {\n /**\n * calls setState in an componentDidMount.\n */\n class SetStateInComponentDidMount extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n stateField: this.props.valueToUseInitially,\n };\n }\n\n componentDidMount() {\n this.setState({ stateField: this.props.valueToUseInOnDOMReady });\n }\n\n render() {\n return
    ;\n }\n }\n\n let instance = (\n \n );\n instance = renderIntoDocument(instance);\n\n setTimeout(() => {\n expect(instance.$LI.children.state.stateField).toBe('goodbye');\n done();\n }, 25);\n });\n\n it('should call nested lifecycle methods in the right order', function () {\n let log;\n const logger = function (msg) {\n return function () {\n // return true for shouldComponentUpdate\n log.push(msg);\n return true;\n };\n };\n class Outer extends React.Component {\n render() {\n return (\n
    \n \n
    \n );\n }\n\n componentWillMount() {\n log.push('outer componentWillMount');\n }\n\n componentDidMount() {\n log.push('outer componentDidMount');\n }\n\n componentWillReceiveProps() {\n log.push('outer componentWillReceiveProps');\n }\n\n shouldComponentUpdate() {\n log.push('outer shouldComponentUpdate');\n\n return true;\n }\n\n componentWillUpdate() {\n log.push('outer componentWillUpdate');\n }\n\n componentDidUpdate() {\n log.push('outer componentDidUpdate');\n }\n\n componentWillUnmount() {\n log.push('outer componentWillUnmount');\n }\n }\n\n class Inner extends React.Component {\n render() {\n return {this.props.x};\n }\n\n componentWillMount() {\n log.push('inner componentWillMount');\n }\n\n componentDidMount() {\n log.push('inner componentDidMount');\n }\n\n componentWillReceiveProps() {\n log.push('inner componentWillReceiveProps');\n }\n\n shouldComponentUpdate() {\n log.push('inner shouldComponentUpdate');\n\n return true;\n }\n\n componentWillUpdate() {\n log.push('inner componentWillUpdate');\n }\n\n componentDidUpdate() {\n log.push('inner componentDidUpdate');\n }\n\n componentWillUnmount() {\n log.push('inner componentWillUnmount');\n }\n }\n\n const container = document.createElement('div');\n log = [];\n ReactDOM.render(, container);\n expect(log).toEqual([\n 'outer componentWillMount',\n 'inner componentWillMount',\n 'inner componentDidMount',\n 'outer componentDidMount',\n ]);\n\n log = [];\n ReactDOM.render(, container);\n expect(log).toEqual([\n 'outer componentWillReceiveProps',\n 'outer shouldComponentUpdate',\n 'outer componentWillUpdate',\n 'inner componentWillReceiveProps',\n 'inner shouldComponentUpdate',\n 'inner componentWillUpdate',\n 'inner componentDidUpdate',\n 'outer componentDidUpdate',\n ]);\n\n log = [];\n ReactDOM.unmountComponentAtNode(container);\n expect(log).toEqual([\n 'outer componentWillUnmount',\n 'inner componentWillUnmount',\n ]);\n });\n});\n" }, { "path": "packages/inferno-compat/__tests__/ReactCompositeComponentState.spec.jsx", "content": "/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @emails react-core\n */\n\nimport React from 'inferno-compat';\n\nconst ReactDOM = React;\n\ndescribe('ReactCompositeComponent-state', function () {\n it('should batch unmounts', function () {\n let outer;\n class Inner extends React.Component {\n render() {\n return
    ;\n }\n\n componentWillUnmount() {\n // This should get silently ignored (maybe with a warning), but it\n // shouldn't break React.\n outer.setState({ showInner: false });\n }\n }\n\n class Outer extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = { showInner: true };\n }\n\n render() {\n return
    {this.state.showInner && }
    ;\n }\n }\n\n const container = document.createElement('div');\n outer = ReactDOM.render(, container);\n expect(() => {\n ReactDOM.unmountComponentAtNode(container);\n }).not.toThrow();\n });\n});\n" }, { "path": "packages/inferno-compat/__tests__/ReactDOM.spec.jsx", "content": "/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @emails react-core\n */\n\nimport React from 'inferno-compat';\nimport { createComponentVNode } from 'inferno';\nimport { Wrapper } from 'inferno-test-utils';\nimport { VNodeFlags } from 'inferno-vnode-flags';\n\nconst ReactDOM = React;\nconst div = React.createFactory('div');\n\ndescribe('ReactDOM', function () {\n let container;\n\n function renderIntoDocument(input) {\n return React.render(\n createComponentVNode(VNodeFlags.ComponentClass, Wrapper, {\n children: input,\n }),\n container,\n );\n }\n\n beforeEach(() => {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n afterEach(() => {\n React.render(null, container);\n container.innerHTML = '';\n document.body.removeChild(container);\n });\n\n it('allows a DOM element to be used with a string', function () {\n const element = React.createElement('div', { className: 'foo' });\n const instance = renderIntoDocument(element);\n expect(ReactDOM.findDOMNode(instance).tagName).toBe('DIV');\n });\n\n it('should allow children to be passed as an argument', function () {\n const argDiv = renderIntoDocument(div(null, 'child'));\n const argNode = ReactDOM.findDOMNode(argDiv);\n expect(argNode.innerHTML).toBe('child');\n });\n\n it('should overwrite props.children with children argument', function () {\n const conflictDiv = renderIntoDocument(\n div({ children: 'fakechild' }, 'child'),\n );\n const conflictNode = ReactDOM.findDOMNode(conflictDiv);\n expect(conflictNode.innerHTML).toBe('child');\n });\n\n /**\n * We need to make sure that updates occur to the actual node that's in the\n * DOM, instead of a stale cache.\n */\n it('should purge the DOM cache when removing nodes', function () {\n let myDiv = renderIntoDocument(\n
    \n
    \n
    \n
    ,\n );\n // Warm the cache with theDog\n myDiv = renderIntoDocument(\n
    \n
    \n
    \n
    ,\n );\n // Remove theDog - this should purge the cache\n myDiv = renderIntoDocument(\n
    \n
    \n
    ,\n );\n // Now, put theDog back. It's now a different DOM node.\n myDiv = renderIntoDocument(\n
    \n
    \n
    \n
    ,\n );\n // Change the className of theDog. It will use the same element\n myDiv = renderIntoDocument(\n
    \n
    \n
    \n
    ,\n );\n\n const root = ReactDOM.findDOMNode(myDiv);\n const dog = root.childNodes[0];\n expect(dog.className).toBe('bigdog');\n });\n\n it('allow React.DOM factories to be called without warnings', function () {\n spyOn(console, 'error');\n const element = div();\n expect(element.type).toBe('div');\n expect(console.error.calls.count()).toBe(0);\n });\n});\n" }, { "path": "packages/inferno-compat/__tests__/ReactDOMComponent.spec.jsx", "content": "/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @emails react-core\n */\n\nimport React from 'inferno-compat';\n\nconst ReactDOM = React;\n\nif (global?.usingJSDOM) {\n describe('ReactDOMComponent', function () {\n describe('updateDOM', function () {\n it('should handle className', function () {\n const container = document.createElement('div');\n ReactDOM.render(
    , container);\n\n ReactDOM.render(
    , container);\n expect(container.firstChild.className).toEqual('foo');\n ReactDOM.render(
    , container);\n expect(container.firstChild.className).toEqual('bar');\n ReactDOM.render(
    , container);\n expect(container.firstChild.className).toEqual('');\n });\n\n it('should gracefully handle various style value types', function () {\n const container = document.createElement('div');\n ReactDOM.render(
    , container);\n const stubStyle = container.firstChild.style;\n\n // set initial style\n const setup = {\n display: 'block',\n left: '1px',\n top: '2px',\n 'font-family': 'Arial',\n };\n ReactDOM.render(
    , container);\n expect(stubStyle.display).toEqual('block');\n expect(stubStyle.left).toEqual('1px');\n expect(stubStyle.fontFamily).toEqual('Arial');\n\n // reset the style to their default state\n const reset = { display: '', left: null, top: null, fontFamily: null };\n ReactDOM.render(
    , container);\n expect(stubStyle.display).toEqual('');\n expect(stubStyle.left).toEqual('');\n expect(stubStyle.top).toEqual('');\n expect(stubStyle.fontFamily).toEqual('');\n });\n\n it('should update styles if initially null', function () {\n let styles = null;\n const container = document.createElement('div');\n ReactDOM.render(
    , container);\n\n const stubStyle = container.firstChild.style;\n\n styles = { display: 'block' };\n\n ReactDOM.render(
    , container);\n expect(stubStyle.display).toEqual('block');\n });\n\n it('should update styles if updated to null multiple times', function () {\n let styles = null;\n const container = document.createElement('div');\n ReactDOM.render(
    , container);\n\n styles = { display: 'block' };\n const stubStyle = container.firstChild.style;\n\n ReactDOM.render(
    , container);\n expect(stubStyle.display).toEqual('block');\n\n ReactDOM.render(
    , container);\n expect(stubStyle.display).toEqual('');\n\n ReactDOM.render(
    , container);\n expect(stubStyle.display).toEqual('block');\n\n ReactDOM.render(
    , container);\n expect(stubStyle.display).toEqual('');\n });\n\n it('should remove attributes', function () {\n const container = document.createElement('div');\n ReactDOM.render(, container);\n\n expect(container.firstChild.hasAttribute('height')).toBe(true);\n ReactDOM.render(, container);\n expect(container.firstChild.hasAttribute('height')).toBe(false);\n });\n\n it('should remove properties', function () {\n const container = document.createElement('div');\n ReactDOM.render(
    , container);\n\n expect(container.firstChild.className).toEqual('monkey');\n ReactDOM.render(
    , container);\n expect(container.firstChild.className).toEqual('');\n });\n\n it('should clear a single style prop when changing `style`', function () {\n let styles = { display: 'none', color: 'red' };\n const container = document.createElement('div');\n ReactDOM.render(
    , container);\n\n const stubStyle = container.firstChild.style;\n\n styles = { color: 'green' };\n ReactDOM.render(
    , container);\n expect(stubStyle.display).toEqual('');\n expect(stubStyle.color).toEqual('green');\n });\n\n it('should update arbitrary attributes for tags containing dashes', function () {\n const container = document.createElement('div');\n\n const beforeUpdate = React.createElement('x-foo-component', {}, null);\n ReactDOM.render(beforeUpdate, container);\n\n const afterUpdate = ;\n ReactDOM.render(afterUpdate, container);\n\n expect(container.childNodes[0].getAttribute('myattr')).toBe('myval');\n });\n\n it('should clear all the styles when removing `style`', function () {\n const styles = { display: 'none', color: 'red' };\n const container = document.createElement('div');\n ReactDOM.render(
    , container);\n\n const stubStyle = container.firstChild.style;\n\n ReactDOM.render(
    , container);\n expect(stubStyle.display).toEqual('');\n expect(stubStyle.color).toEqual('');\n });\n\n it('should update styles when `style` changes from null to object', function () {\n const container = document.createElement('div');\n const styles = { color: 'red' };\n ReactDOM.render(
    , container);\n ReactDOM.render(
    , container);\n ReactDOM.render(
    , container);\n\n const stubStyle = container.firstChild.style;\n expect(stubStyle.color).toEqual('red');\n });\n\n it('should empty element when removing innerHTML', function () {\n const container = document.createElement('div');\n ReactDOM.render(\n
    ,\n container,\n );\n\n expect(container.firstChild.innerHTML).toEqual(':)');\n ReactDOM.render(
    , container);\n expect(container.firstChild.innerHTML).toEqual('');\n });\n\n it('should transition from string content to innerHTML', function () {\n const container = document.createElement('div');\n ReactDOM.render(
    hello
    , container);\n\n expect(container.firstChild.innerHTML).toEqual('hello');\n ReactDOM.render(\n
    ,\n container,\n );\n expect(container.firstChild.innerHTML).toEqual('goodbye');\n });\n\n it('should transition from innerHTML to string content', function () {\n const container = document.createElement('div');\n ReactDOM.render(\n
    ,\n container,\n );\n\n expect(container.firstChild.innerHTML).toEqual('bonjour');\n ReactDOM.render(
    adieu
    , container);\n expect(container.firstChild.innerHTML).toEqual('adieu');\n });\n\n it('should transition from innerHTML to children in nested el', function () {\n const container = document.createElement('div');\n ReactDOM.render(\n
    \n
    \n
    ,\n container,\n );\n\n expect(container.textContent).toEqual('bonjour');\n ReactDOM.render(\n
    \n
    \n adieu\n
    \n
    ,\n container,\n );\n expect(container.textContent).toEqual('adieu');\n });\n\n it('should transition from children to innerHTML in nested el', function () {\n const container = document.createElement('div');\n ReactDOM.render(\n
    \n
    \n adieu\n
    \n
    ,\n container,\n );\n\n expect(container.textContent).toEqual('adieu');\n ReactDOM.render(\n
    \n
    \n
    ,\n container,\n );\n expect(container.textContent).toEqual('bonjour');\n });\n\n it('should ignore attribute whitelist for elements with the \"is: attribute', function () {\n const container = document.createElement('div');\n ReactDOM.render(
    ',\n );\n });\n\n it('Second render (update with state change)', (done) => {\n render(tpl79713834(TEST), container);\n render(tpl79713834(TEST), container);\n const buttons = container.querySelectorAll('button');\n\n for (const button of buttons) {\n button.click();\n }\n\n setTimeout(() => {\n expect(container.innerHTML).toBe(\n '
    VISIBLE
    ',\n );\n done();\n }, 25);\n });\n });\n\n describe('should render a component with a list of divs', () => {\n const BaseView = function (v0, v1) {\n return createElement(\n 'div',\n { class: 'login-view' },\n createElement('button', { onclick: v0 }, 'ADD'),\n createElement('br', null),\n v1,\n );\n };\n\n const Looper = function (v0) {\n return createElement('div', null, createElement('h1', null, v0));\n };\n\n const starter = function (v0) {\n return createElement(v0, null);\n };\n\n class SomeError extends Component {\n constructor(props) {\n super(props);\n this.state = {\n list: ['SS', 'SS1'],\n };\n }\n\n render() {\n /* eslint new-cap:0 */\n return BaseView(\n undefined,\n function () {\n return this.state.list.map(function (result) {\n return Looper(result);\n });\n }.call(this),\n );\n }\n }\n\n it('Initial render (creation)', () => {\n render(starter(SomeError), container);\n\n expect(container.innerHTML).toBe(\n '

    SS

    SS1

    ',\n );\n\n render(starter(SomeError), container);\n\n expect(container.innerHTML).toBe(\n '

    SS

    SS1

    ',\n );\n });\n });\n\n describe('should render a component with a list of text nodes', () => {\n const root = function (children) {\n return createElement('div', null, children);\n };\n\n const header = function (children) {\n return createElement('div', null, children);\n };\n\n const view = function (state) {\n return root([state ? header(['Foo']) : header(['Bar', 'Qux'])]);\n };\n\n it('Initial render (creation)', () => {\n render(view(true), container);\n expect(container.innerHTML).toBe('
    Foo
    ');\n });\n it('Second render (update)', () => {\n render(view(true), container);\n render(view(false), container);\n expect(container.innerHTML).toBe('
    BarQux
    ');\n });\n });\n\n describe('SetState function callback', () => {\n it('Should have state, props, and context as parameters', (done) => {\n function checkParams(state, props, context) {\n expect(state).toEqual({ btnstate: 'btnstate' });\n expect(props).toEqual({ buttonProp: 'magic', children: 'btn' });\n expect(context).toEqual({ color: 'purple' });\n done();\n }\n\n class Button extends Component {\n constructor(props) {\n super(props);\n this.state = {\n btnstate: 'btnstate',\n };\n }\n\n click() {\n this.setState(checkParams);\n }\n\n render() {\n return createElement(\n 'button',\n {\n onClick: this.click.bind(this),\n style: {\n background: this.context.color,\n },\n },\n this.props.children,\n );\n }\n }\n\n class Message extends Component<{ text: string }> {\n render() {\n return createElement('div', null, [\n this.props.text,\n createElement(Button, { buttonProp: 'magic' }, 'btn'),\n ]);\n }\n }\n\n class MessageList extends Component<{ messages: { text: string }[] }> {\n getChildContext() {\n return { color: 'purple' };\n }\n\n render() {\n const children = this.props.messages.map(function (message) {\n return createElement(Message, { text: message.text });\n });\n\n return createElement('div', null, children);\n }\n }\n\n render(\n createElement(MessageList, {\n messages: [{ text: 'eka' }, { text: 'toka' }],\n }),\n container,\n );\n\n container.querySelector('button').click();\n });\n });\n }\n});\n" }, { "path": "packages/inferno-create-element/__tests__/components1.spec.tsx", "content": "import { Component, render } from 'inferno';\n\ndescribe('Components 1 (JSX)', () => {\n let container;\n let attachedListener: () => void = () => {};\n let renderedName: string | null = null;\n\n interface InnerProps {\n onClick: () => void;\n name: null | string;\n }\n\n class Inner extends Component {\n render() {\n attachedListener = this.props.onClick;\n renderedName = this.props.name;\n return
    ;\n }\n }\n\n beforeEach(function () {\n attachedListener = () => {};\n renderedName = null;\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n afterEach(function () {\n render(null, container);\n document.body.removeChild(container);\n });\n\n class BasicComponent1 extends Component<{ name: any; title: any }> {\n render() {\n return (\n
    \n \n The title is {this.props.title}\n \n
    \n );\n }\n }\n\n it('should render a basic component jsx', () => {\n render(\n
    \n \n
    ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    The title is abc
    ',\n );\n\n render(\n
    \n \n
    ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    The title is abc
    ',\n );\n\n const attrs = { title: 'abc', name: 'basic-render2', foo: 'bar' };\n\n // JSX Spread Attribute\n render(\n
    \n \n
    ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    The title is abc
    ',\n );\n });\n\n class BasicComponent1b extends Component<{\n isChecked: boolean | null;\n title: string;\n }> {\n render() {\n return (\n
    \n \n
    \n );\n }\n }\n\n it('should render a basic component with inputs', () => {\n render(\n
    \n \n
    ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    ',\n );\n expect(container.querySelector('input').checked).toBe(true);\n\n render(\n
    \n \n
    ,\n container,\n );\n expect(container.innerHTML).toBe(\n '
    ',\n );\n expect(container.querySelector('input').checked).toBe(false);\n\n render(\n
    \n \n
    ,\n container,\n );\n\n render(
    , container);\n\n render(\n
    \n \n
    ,\n container,\n );\n expect(container.querySelector('input').checked).toBe(true);\n });\n\n it('should render a basic component and remove property if null', () => {\n render(\n
    \n \n
    ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    The title is abc
    ',\n );\n\n render(
    , container);\n render(\n
    \n \n
    ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    The title is Hello, World!
    ',\n );\n\n render(\n
    \n \n
    ,\n container,\n );\n expect(container.innerHTML).toBe(\n '
    The title is 123
    ',\n );\n render(\n
    \n \n
    ,\n container,\n );\n expect(container.innerHTML).toBe(\n '
    The title is
    ',\n );\n\n render(\n
    \n \n
    ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    The title is
    ',\n );\n\n render(\n
    \n \n
    ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    The title is abc
    ',\n );\n\n render(\n
    \n \n
    ,\n container,\n );\n expect(container.innerHTML).toBe(\n '
    The title is 123
    ',\n );\n });\n\n it('should render a basic root component', () => {\n render(, container);\n\n expect(container.firstChild.getAttribute('class')).toBe('basic');\n\n render(, container);\n\n expect(container.firstChild.getAttribute('class')).toBe('basic');\n\n render(, container);\n expect(container.innerHTML).toBe(\n '
    The title is 123
    ',\n );\n });\n\n class BasicComponent2 extends Component<{ name: string; title: string }> {\n render() {\n return (\n
    \n \n The title is {this.props.title}\n \n {this.props.children}\n
    \n );\n }\n }\n\n it('should render a basic component with children', () => {\n render(\n
    \n \n Im a child\n \n
    ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    The title is abcIm a child
    ',\n );\n\n render(\n
    \n \n Im a child\n \n
    ,\n container,\n );\n expect(container.innerHTML).toBe(\n '
    The title is 123Im a child
    ',\n );\n });\n\n it('should render multiple components', () => {\n render(\n
    \n \n \n
    ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    The title is component 1
    ' +\n '
    The title is component 2
    ',\n );\n\n render(\n
    \n \n
    ,\n container,\n );\n expect(container.innerHTML).toBe(\n '
    The title is component 1
    ',\n );\n });\n\n class BasicComponent3 extends Component<{ title?: string; styles?: any }> {\n render() {\n return (\n
    \n The title is {this.props.title}\n
    \n );\n }\n }\n\n it('should render a basic component with styling', () => {\n render(\n ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    The title is styled!
    ',\n );\n\n render(, container);\n\n render(\n ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    The title is styled (again)!
    ',\n );\n });\n\n it('should render a basic component and remove styling', () => {\n render(\n ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    The title is styled!
    ',\n );\n\n render(\n ,\n container,\n );\n\n expect([null, '']).toContain(container.firstChild.getAttribute('style'));\n expect(container.firstChild.tagName).toEqual('DIV');\n expect(container.firstChild.firstChild.innerHTML).toEqual(\n 'The title is styles are removed!',\n );\n });\n\n interface SuperState {\n organizations: { name: string; key: string }[];\n }\n\n class SuperComponent extends Component {\n state: SuperState;\n\n constructor(props) {\n super(props);\n this.state = {\n organizations: [\n { name: 'test1', key: '1' },\n { name: 'test2', key: '2' },\n { name: 'test3', key: '3' },\n { name: 'test4', key: '4' },\n { name: 'test5', key: '5' },\n { name: 'test6', key: '6' },\n ],\n };\n }\n\n render() {\n return (\n
      \n {this.state.organizations.map((result) => {\n return
    • {result.name}
      • ;\n })}\n
    \n );\n }\n }\n\n it('should render a basic component with a list of values from state', () => {\n render(, container);\n expect(container.innerHTML).toBe(\n '
    • test1
    • test2
    • test3
    • test4
    • test5
    • test6
    ',\n );\n });\n\n it('should render a basic component with an element and components as children', () => {\n class Navbar extends Component {\n render() {\n return (\n
      \n
    • Nav1
      • \n
    \n );\n }\n }\n\n class Main extends Component {\n render() {\n return (\n
    \n \n
    \n
    \n );\n }\n }\n\n render(
    , container);\n });\n\n function test(element, expectedTag, expectedClassName, callback) {\n render(element, container, () => {\n expect(container.firstChild).not.toBe(null);\n expect(container.firstChild.tagName).toBe(expectedTag);\n expect(container.firstChild.className).toBe(expectedClassName);\n callback();\n });\n }\n\n it('should only render once when setting state in componentWillMount', function (done) {\n let renderCount = 0;\n\n interface FooState {\n bar: string | null;\n }\n\n class Foo extends Component<{ initialValue: string | null }, FooState> {\n state: FooState;\n\n constructor(props) {\n super(props);\n this.state = { bar: props.initialValue };\n }\n\n componentWillMount() {\n this.setState({ bar: 'bar' });\n }\n\n render() {\n renderCount++;\n return ;\n }\n }\n\n test(, 'SPAN', 'bar', () => {\n test(, 'SPAN', 'bar', () => {\n expect(renderCount).toBe(2);\n done();\n });\n });\n });\n\n it('should render with null in the initial state property', function (done) {\n class Foo extends Component {\n constructor(props) {\n super(props);\n this.state = null;\n }\n\n render() {\n return ;\n }\n }\n\n test(, 'SPAN', '', done);\n });\n\n it('should setState through an event handler', (done) => {\n interface FooState {\n bar: string | null;\n }\n\n class Foo extends Component<{ initialValue: string | null }, FooState> {\n state: FooState;\n\n constructor(props) {\n super(props);\n this.state = { bar: props.initialValue };\n }\n\n handleClick() {\n this.setState({ bar: 'bar' });\n }\n\n render() {\n return (\n \n );\n }\n }\n\n test(, 'DIV', 'foo', () => {\n expect(renderedName).toBe('foo');\n attachedListener();\n setTimeout(() => {\n expect(renderedName).toBe('bar');\n done();\n }, 10);\n });\n });\n\n it('should render using forceUpdate even when there is no state', (done) => {\n class Foo extends Component<{ initialValue: string | null }> {\n private mutativeValue: string;\n\n constructor(props) {\n super(props);\n this.mutativeValue = props.initialValue;\n }\n\n handleClick() {\n this.mutativeValue = 'bar';\n this.forceUpdate();\n }\n\n render() {\n return (\n \n );\n }\n }\n\n test(, 'DIV', 'foo', function () {\n attachedListener();\n expect(renderedName).toBe('bar');\n done();\n });\n });\n\n describe('should render a component with a list of children that dynamically update via setState', () => {\n interface CounterState {\n count: number;\n }\n\n interface CounterProps {\n car: string;\n }\n\n class Counter extends Component {\n state: CounterState;\n\n constructor(props) {\n super(props);\n this.state = {\n count: 0,\n };\n this.incrementCount = this.incrementCount.bind(this);\n }\n\n incrementCount() {\n this.setState({\n count: this.state.count + 1,\n });\n }\n\n render() {\n return (\n
    \n

    \n {this.props.car} {this.state.count}\n

    \n \n
    \n );\n }\n }\n\n class Wrapper extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (\n
    \n {['Saab', 'Volvo', 'BMW'].map(function (c) {\n return ;\n })}\n
    \n );\n }\n }\n\n it('Initial render (creation)', () => {\n render(, container);\n\n expect(container.innerHTML).toBe(\n '

    Saab 0

    Volvo 0

    BMW 0

    ',\n );\n });\n\n it('Second render (update) #1', (done) => {\n render(, container);\n const buttons = container.querySelectorAll('button');\n for (const button of buttons) {\n button.click();\n }\n\n setTimeout(() => {\n expect(container.innerHTML).toBe(\n '

    Saab 1

    Volvo 1

    BMW 1

    ',\n );\n done();\n }, 25);\n });\n });\n\n describe('should render a component with a conditional state item', () => {\n interface SomeErrorState {\n show: boolean;\n }\n\n class SomeError extends Component {\n state: SomeErrorState;\n\n constructor(props) {\n super(props);\n\n this.state = {\n show: false,\n };\n\n this.toggle = this.toggle.bind(this);\n }\n\n toggle() {\n this.setState({\n show: !this.state.show,\n });\n }\n\n render() {\n return (\n
    \n \n
    \n {function () {\n if (this.state.show === true) {\n return

    This is cool!

    ;\n } else {\n return

    Not so cool

    ;\n }\n }.call(this)}\n
    \n );\n }\n }\n\n it('Initial render (creation)', () => {\n render(, container);\n\n expect(container.innerHTML).toBe(\n '

    Not so cool

    ',\n );\n });\n\n it('Second render (update with state change) #2', () => {\n render(, container);\n const buttons = container.querySelectorAll('button');\n for (const button of buttons) {\n button.click();\n }\n\n expect(container.innerHTML).toBe(\n '

    This is cool!

    ',\n );\n });\n });\n\n describe('should render a stateless component with a conditional state item', () => {\n interface TestingState {\n show: boolean;\n }\n\n const StatelessComponent = (props) =>

    {props.name}

    ;\n\n class Testing extends Component {\n state: TestingState;\n // @ts-ignore\n private name: string = 'Kalle';\n\n constructor(props) {\n super(props);\n\n this.state = {\n show: false,\n };\n\n this.toggle = this.toggle.bind(this);\n }\n\n toggle() {\n this.setState({\n show: !this.state.show,\n });\n }\n\n render() {\n return (\n
    \n {function () {\n if (this.state.show === true) {\n return ;\n } else {\n return

    Hello folks

    ;\n }\n }.call(this)}\n \n
    \n );\n }\n }\n\n it('Initial render (creation)', () => {\n render(null, container);\n\n render(, container);\n\n expect(container.innerHTML).toBe(\n '

    Hello folks

    ',\n );\n });\n\n it('Second render (update with state change) #3', (done) => {\n render(, container);\n const buttons = container.querySelectorAll('button');\n for (const button of buttons) {\n button.click();\n }\n\n setTimeout(() => {\n expect(container.innerHTML).toBe(\n '

    Kalle

    ',\n );\n done();\n }, 25);\n });\n });\n});\n" }, { "path": "packages/inferno-create-element/__tests__/components2b.spec.tsx", "content": "import { Component, render } from 'inferno';\nimport { createElement } from 'inferno-create-element';\n\ndescribe('Components 2 (TSX)', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n afterEach(function () {\n render(null, container);\n document.body.removeChild(container);\n });\n\n describe('recursive component', () => {\n it('Should be possible to pass props recursively', () => {\n interface ListProps {\n data: Array<{\n key: string;\n data: string | Array<{ key: string; data: string }>;\n }>;\n }\n class List extends Component {\n render() {\n const children = this.props.data.map((entity) => {\n const { key, data } = entity;\n const child = Array.isArray(data) ? (\n \n ) : (\n \n );\n\n return
  • {child}
    • ;\n });\n\n return
      {children}
    ;\n }\n }\n\n interface TextProps {\n data: string;\n }\n\n class Text extends Component {\n render() {\n return {this.props.data};\n }\n }\n\n const data = [\n { key: '0', data: 'Foo' },\n {\n key: '1',\n data: [\n { key: '1/1', data: 'a' },\n { key: '1/2', data: 'b' },\n ],\n },\n ];\n\n render(, container);\n expect(container.innerHTML).toBe(\n '
    • Foo
      • a
      • b
    ',\n );\n });\n\n it('Should be possible to pass props recursively AT BEGINNING (JSX plugin change required)', () => {\n interface ListProps {\n data: Array<{\n key: string;\n data: string | Array<{ key: string; data: string }>;\n }>;\n }\n class List extends Component {\n render() {\n const children = this.props.data.map((entity) => {\n const { key, data } = entity;\n const child = Array.isArray(data) ? (\n \n ) : (\n \n );\n\n return
  • {child}
    • ;\n });\n\n return
      {children}
    ;\n }\n }\n\n interface TextProps {\n data: string;\n }\n\n class Text extends Component {\n render() {\n return {this.props.data};\n }\n }\n\n const data = [\n { key: '0', data: 'Foo' },\n {\n key: '1',\n data: [\n { key: '1/1', data: 'a' },\n { key: '1/2', data: 'b' },\n ],\n },\n ];\n\n render(, container);\n expect(container.innerHTML).toBe(\n '
    • Foo
      • a
      • b
    ',\n );\n });\n });\n\n it('Should render (github #117)', (done) => {\n interface MakeXState {\n x: boolean;\n }\n\n class MakeX extends Component {\n state: MakeXState;\n\n constructor(props) {\n super(props);\n this.state = { x: false };\n }\n\n componentWillMount() {\n setTimeout(() => {\n this.setState({ x: true });\n }, 10);\n }\n\n render() {\n return
    {!this.state.x ? : }
    ;\n }\n }\n\n class MakeY extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return
    Y
    ;\n }\n }\n\n interface MakeAState {\n z: boolean;\n }\n\n class MakeA extends Component {\n state: MakeAState;\n\n constructor(props) {\n super(props);\n this.state = { z: false };\n }\n\n componentWillMount() {\n setTimeout(() => {\n this.setState({ z: true });\n }, 20);\n }\n\n render() {\n if (!this.state.z) {\n return
    A
    ;\n }\n\n return ;\n }\n }\n\n class MakeB extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return
    B
    ;\n }\n }\n\n render(, container);\n setTimeout(function () {\n done();\n }, 50);\n });\n\n it('Events should propagate between components (github #135)', (done) => {\n interface LabelProps {\n text: string;\n }\n class Label extends Component {\n render() {\n const style = {\n 'background-color': 'red',\n padding: '0 20px',\n fontSize: '40px',\n };\n return {this.props.text};\n }\n }\n\n let btnFlag = false;\n let containerFlag = false;\n\n class Button extends Component {\n onClick(_event) {\n btnFlag = !btnFlag;\n }\n\n render() {\n const { text } = this.props;\n return (\n \n );\n }\n }\n\n class Container extends Component {\n onClick(_event) {\n containerFlag = !containerFlag;\n }\n\n render() {\n return (\n
    \n
    \n );\n }\n }\n\n render(, container);\n\n expect(btnFlag).toBe(false);\n expect(containerFlag).toBe(false);\n\n const spans = container.querySelectorAll('span');\n for (const span of spans) {\n span.click();\n }\n\n expect(btnFlag).toBe(true);\n expect(containerFlag).toBe(true);\n done();\n });\n\n it('Should be possible to stop propagation', (done) => {\n interface LabelProps {\n text: string;\n }\n\n class Label extends Component {\n render() {\n const style = {\n 'background-color': 'red',\n padding: '0 20px',\n fontSize: '40px',\n };\n return {this.props.text};\n }\n }\n\n let btnFlag = false;\n let containerFlag = false;\n\n class Button extends Component {\n onClick(event) {\n event.stopPropagation();\n btnFlag = !btnFlag;\n }\n\n render() {\n const { text } = this.props;\n return (\n \n );\n }\n }\n\n class Container extends Component {\n onClick(_event) {\n containerFlag = !containerFlag;\n }\n\n render() {\n return (\n
    \n
    \n );\n }\n }\n\n render(, container);\n\n expect(btnFlag).toBe(false);\n expect(containerFlag).toBe(false);\n\n const spans = container.querySelectorAll('span');\n for (const span of spans) {\n span.click();\n }\n\n expect(btnFlag).toBe(true);\n expect(containerFlag).toBe(false);\n done();\n });\n\n describe('Inheritance should work', () => {\n it('Should render div', () => {\n class A extends Component {\n constructor(props) {\n super(props);\n }\n }\n\n class B extends A {\n constructor(props) {\n super(props);\n }\n }\n\n class C extends B {\n constructor(props) {\n super(props);\n }\n\n render() {\n return
    ;\n }\n }\n\n render(, container);\n expect(container.innerHTML).toBe('
    ');\n });\n });\n\n describe('A component rendering a component should work as expected', () => {\n let forceUpdate;\n let forceUpdate2;\n\n class Bar extends Component {\n constructor() {\n super();\n forceUpdate = this.forceUpdate.bind(this);\n }\n\n render() {\n return
    Hello world
    ;\n }\n }\n class Foo extends Component {\n constructor() {\n super();\n forceUpdate2 = this.forceUpdate.bind(this);\n }\n\n render() {\n return ;\n }\n }\n\n it('should render the div correctly', () => {\n render(, container);\n expect(container.firstChild.innerHTML).toBe('Hello world');\n });\n\n it('should update correctly', () => {\n render(, container);\n render(, container);\n expect(container.firstChild.innerHTML).toBe('Hello world');\n });\n\n it('should update correctly via forceUpdate', () => {\n render(, container);\n forceUpdate();\n forceUpdate2();\n render(, container);\n forceUpdate2();\n forceUpdate();\n expect(container.firstChild.innerHTML).toBe('Hello world');\n });\n });\n\n it('Should trigger ref lifecycle after patch', (done) => {\n let updater;\n const obj = {\n fn() {},\n };\n\n spyOn(obj, 'fn');\n\n interface BarState {\n bool: boolean;\n }\n\n class Bar extends Component {\n state: BarState;\n\n constructor(props) {\n super(props);\n\n this.state = {\n bool: true,\n };\n\n this.changeDOM = this.changeDOM.bind(this);\n updater = this.changeDOM;\n }\n\n changeDOM() {\n this.setState({\n bool: !this.state.bool,\n });\n }\n\n render() {\n if (this.state.bool === true) {\n return
    Hello world
    ;\n } else {\n return (\n
    \n
    Hello world2
    \n
    \n );\n }\n }\n }\n\n render(, container);\n expect(container.innerHTML).toBe('
    Hello world
    ');\n expect(obj.fn).not.toHaveBeenCalled();\n\n updater();\n setTimeout(() => {\n expect(container.innerHTML).toBe('
    Hello world2
    ');\n expect(obj.fn).toHaveBeenCalledTimes(1);\n done();\n }, 10);\n });\n\n describe('Should be able to swap between invalid node and valid node', () => {\n it('Should be able to swap between invalid node and valid node', () => {\n let updater;\n\n interface BarState {\n bool: boolean;\n }\n\n class Bar extends Component {\n state: BarState;\n\n constructor(props) {\n super(props);\n\n this.state = {\n bool: true,\n };\n\n this.changeDOM = this.changeDOM.bind(this);\n updater = this.changeDOM;\n }\n\n changeDOM() {\n this.setState({\n bool: !this.state.bool,\n });\n }\n\n render() {\n if (this.state.bool === true) {\n return null;\n } else {\n return
    Rendered!
    ;\n }\n }\n }\n\n render(, container);\n expect(container.innerHTML).toBe('');\n\n updater();\n expect(container.innerHTML).toBe('
    Rendered!
    ');\n\n updater();\n expect(container.innerHTML).toBe('');\n\n updater();\n expect(container.innerHTML).toBe('
    Rendered!
    ');\n\n updater();\n expect(container.innerHTML).toBe('');\n\n updater();\n expect(container.innerHTML).toBe('
    Rendered!
    ');\n });\n });\n\n it('Should be able to swap between text node and html node', () => {\n let updater;\n\n interface BarState {\n bool: boolean;\n }\n\n class Bar extends Component {\n state: BarState;\n\n constructor(props) {\n super(props);\n\n this.state = {\n bool: true,\n };\n\n this.changeDOM = this.changeDOM.bind(this);\n updater = this.changeDOM;\n }\n\n changeDOM() {\n this.setState({\n bool: !this.state.bool,\n });\n }\n\n render() {\n return (\n
    \n {this.state.bool ? span : 'text'}\n
    div
    \n
    \n );\n }\n }\n\n render(, container);\n expect(container.innerHTML).toBe(\n '
    span
    div
    ',\n );\n\n updater();\n expect(container.innerHTML).toBe('
    text
    div
    ');\n\n updater();\n expect(container.innerHTML).toBe(\n '
    span
    div
    ',\n );\n\n updater();\n expect(container.innerHTML).toBe('
    text
    div
    ');\n });\n\n it('Should be able to swap between text node and html node #2', (done) => {\n let updater;\n\n interface BarState {\n bool: boolean;\n }\n\n class Bar extends Component {\n state: BarState;\n\n constructor(props) {\n super(props);\n\n this.state = {\n bool: false,\n };\n\n this.changeDOM = this.changeDOM.bind(this);\n updater = this.changeDOM;\n }\n\n changeDOM() {\n this.setState({\n bool: !this.state.bool,\n });\n }\n\n render() {\n return (\n
    \n {this.state.bool ? span : ''}\n
    div
    \n
    \n );\n }\n }\n\n render(, container);\n expect(container.innerHTML).toBe('
    div
    ');\n\n updater();\n setTimeout(() => {\n expect(container.innerHTML).toBe(\n '
    span
    div
    ',\n );\n updater();\n setTimeout(() => {\n expect(container.innerHTML).toBe('
    div
    ');\n updater();\n setTimeout(() => {\n expect(container.innerHTML).toBe(\n '
    span
    div
    ',\n );\n done();\n }, 10);\n }, 10);\n }, 10);\n });\n\n describe('handling of sCU', () => {\n let instance;\n let shouldUpdate = false;\n\n interface Test2Props {\n foo: string;\n }\n\n class Test extends Component {\n shouldComponentUpdate() {\n return shouldUpdate;\n }\n\n render() {\n instance = this;\n return
    {this.props.foo}
    ;\n }\n }\n\n class Test2 extends Component {\n shouldComponentUpdate() {\n return shouldUpdate;\n }\n\n render() {\n instance = this;\n return createElement('div', { contenteditable: true }, this.props.foo);\n }\n }\n\n it('should correctly render once but never again', () => {\n shouldUpdate = false;\n render(, container);\n expect(container.innerHTML).toBe('
    bar
    ');\n render(, container);\n expect(container.innerHTML).toBe('
    bar
    ');\n instance.setState({ foo: 'woo' });\n expect(container.innerHTML).toBe('
    bar
    ');\n render(null, container);\n expect(container.innerHTML).toBe('');\n });\n\n it('Should not fail if text node has external change Github#1207 - createElement', () => {\n shouldUpdate = false;\n render(, container);\n expect(container.innerHTML).toBe('
    bar
    ');\n render(, container);\n expect(container.innerHTML).toBe('
    bar
    ');\n\n container.firstChild.removeChild(container.firstChild.firstChild); // When div is contentEditable user can remove whole text content\n expect(container.innerHTML).toBe('
    ');\n\n shouldUpdate = true;\n render(, container);\n expect(container.innerHTML).toBe('
    foo
    ');\n render(null, container);\n expect(container.innerHTML).toBe('');\n });\n\n it('Should not fail if text node has external change Github#1207', () => {\n shouldUpdate = false;\n render(, container);\n expect(container.innerHTML).toBe('
    bar
    ');\n render(, container);\n expect(container.innerHTML).toBe('
    bar
    ');\n\n container.firstChild.removeChild(container.firstChild.firstChild); // When div is contentEditable user can remove whole text content\n expect(container.innerHTML).toBe('
    ');\n\n shouldUpdate = true;\n render(, container);\n expect(container.innerHTML).toBe('
    foo
    ');\n render(null, container);\n expect(container.innerHTML).toBe('');\n });\n\n it('Should not fail if text node has external change Github#1207 (variation - 2)', () => {\n shouldUpdate = false;\n render(, container);\n expect(container.innerHTML).toBe('
    bar
    ');\n render(, container);\n expect(container.innerHTML).toBe('
    bar
    ');\n\n container.firstChild.removeChild(container.firstChild.firstChild); // When div is contentEditable user can remove whole text content\n expect(container.innerHTML).toBe('
    ');\n\n shouldUpdate = true;\n render(, container);\n expect(container.innerHTML).toBe('
    ');\n render(null, container);\n expect(container.innerHTML).toBe('');\n });\n });\n describe('handling of different primatives', () => {\n it('Should correctly handle boolean values (github#255)', () => {\n const Todo = ({ todo }) => (\n \n {todo.id}\n {todo.desc}\n {todo.done}\n \n );\n\n render(, container);\n expect(container.innerHTML).toBe('');\n render(, container);\n expect(container.innerHTML).toBe('');\n });\n });\n\n describe('handling JSX spread attributes', () => {\n it('should properly handle multiple attributes using spread', () => {\n class Input extends Component {\n constructor() {\n super();\n this.handleBlur = this.handleBlur.bind(this);\n }\n\n handleBlur(_event) {}\n\n render() {\n const props = {\n onBlur: this.handleBlur,\n className: 'foo',\n id: 'test',\n };\n\n return ;\n }\n }\n\n render(, container);\n expect(container.innerHTML).toBe('');\n });\n });\n\n describe('Swapping Component to DOM node', () => {\n it('Should be able to swap statefull component to DOM list when doing setState', () => {\n let change1;\n let unMountCalled = false;\n\n class FooBar extends Component {\n constructor(props) {\n super(props);\n }\n\n componentWillUnmount() {\n unMountCalled = true;\n }\n\n render() {\n return (\n
    \n foo1\n foo2\n foo3\n foo4\n
    \n );\n }\n }\n\n interface TesterState {\n toggle1: boolean;\n }\n\n class Tester extends Component {\n state: TesterState;\n\n constructor(props) {\n super(props);\n\n this.state = {\n toggle1: false,\n };\n\n change1 = this.toggle1.bind(this);\n }\n\n toggle1() {\n this.setState({\n toggle1: !this.state.toggle1,\n });\n }\n\n renderContent() {\n if (this.state.toggle1) {\n return ;\n } else {\n return (\n
    \n

    foo

    \n
    \n );\n }\n }\n\n render() {\n return
    {this.renderContent()}
    ;\n }\n }\n\n render(, container);\n expect(container.innerHTML).toBe(\n '

    foo

    ',\n );\n expect(unMountCalled).toEqual(false);\n change1();\n expect(unMountCalled).toEqual(false);\n expect(container.innerHTML).toBe(\n '
    foo1foo2foo3foo4
    ',\n );\n change1();\n expect(unMountCalled).toEqual(true);\n expect(container.innerHTML).toBe(\n '

    foo

    ',\n );\n });\n\n it('Should be able to swap stateless component to DOM list when doing setState', () => {\n let change1;\n\n const FooBar = () => (\n
    \n foo1\n foo2\n foo3\n foo4\n
    \n );\n\n interface TesterState {\n toggle1: boolean;\n }\n\n class Tester extends Component {\n state: TesterState;\n\n constructor(props) {\n super(props);\n\n this.state = {\n toggle1: false,\n };\n\n change1 = this.toggle1.bind(this);\n }\n\n toggle1() {\n this.setState({\n toggle1: !this.state.toggle1,\n });\n }\n\n renderContent() {\n if (this.state.toggle1) {\n return ;\n } else {\n return (\n
    \n

    foo

    \n
    \n );\n }\n }\n\n render() {\n return
    {this.renderContent()}
    ;\n }\n }\n\n render(, container);\n expect(container.innerHTML).toBe(\n '

    foo

    ',\n );\n change1();\n expect(container.innerHTML).toBe(\n '
    foo1foo2foo3foo4
    ',\n );\n change1();\n expect(container.innerHTML).toBe(\n '

    foo

    ',\n );\n });\n });\n\n describe('handling componentWillReceiveProps lifecycle event', () => {\n it('should correctly handle setState within the lifecycle function', () => {\n let renderCount = 0;\n interface Comp1State {\n foo: number;\n }\n\n class Comp1 extends Component {\n state: Comp1State;\n\n constructor(props) {\n super(props);\n this.state = {\n foo: 0,\n };\n }\n\n componentWillReceiveProps() {\n this.setState({ foo: 1 });\n }\n\n render() {\n renderCount++;\n return
    {this.state.foo}
    ;\n }\n }\n\n render(, container);\n expect(container.innerHTML).toBe('
    0
    ');\n render(, container);\n expect(container.innerHTML).toBe('
    1
    ');\n expect(renderCount).toBe(2);\n });\n });\n\n it('mixing JSX components with non-JSX components', () => {\n function Comp() {\n return createElement('div', {});\n }\n\n function Comp2() {\n return createElement('span', {});\n }\n\n function Comp3() {\n return
    ;\n }\n\n render(\n
    \n \n
    ,\n container,\n );\n expect(container.innerHTML).toBe('
    ');\n render(\n
    \n \n
    ,\n container,\n );\n expect(container.innerHTML).toBe('
    ');\n render(\n \n \n ,\n container,\n );\n expect(container.innerHTML).toBe('
    ');\n render(createElement('span', null, ), container);\n expect(container.innerHTML).toBe('
    ');\n });\n\n describe('components should be able to use defaultProps', () => {\n interface Comp1Props {\n a?: string;\n b?: string;\n c?: string;\n }\n\n class Comp1 extends Component {\n constructor(props) {\n super(props);\n }\n\n static defaultProps = {\n a: 'A',\n b: 'B',\n };\n\n render() {\n return (\n
    \n Hello {this.props.c}!\n
    \n );\n }\n }\n\n class Comp2 extends Component {\n constructor(props) {\n super(props);\n }\n\n static defaultProps = {\n a: 'aye',\n b: 'bee',\n };\n\n render() {\n return (\n
    \n Hello {this.props.c}!\n
    \n );\n }\n }\n\n it('should mount component with defaultProps', () => {\n render(, container);\n expect(container.innerHTML).toBe('
    Hello C!
    ');\n });\n\n it('should mount child component with its defaultProps', () => {\n const Parent = (props) =>
    {props.children.props.a}
    ;\n render(\n \n \n ,\n container,\n );\n expect(container.innerHTML).toBe('
    A
    ');\n });\n\n it('should patch component with defaultProps', () => {\n render(, container);\n render(, container);\n expect(container.innerHTML).toBe('
    Hello C2!
    ');\n });\n it('should patch component with defaultProps #2', () => {\n render(, container);\n render(, container);\n expect(container.innerHTML).toBe(\n '
    Hello C1!
    ',\n );\n render(, container);\n expect(container.innerHTML).toBe('
    Hello C2!
    ');\n });\n\n it('should as per React: Have childrens defaultProps set before children is mounted', () => {\n let childrenPropertABeforeMount = 'A';\n class Parent extends Component {\n render() {\n expect((this.props.children as any).props.a).toBe(\n childrenPropertABeforeMount,\n );\n\n return
    {this.props.children}
    ;\n }\n }\n\n render(\n \n \n ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    Hello !
    ',\n );\n\n childrenPropertABeforeMount = 'ABCD';\n\n render(\n \n \n ,\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    Hello !
    ',\n );\n });\n });\n\n describe('when calling setState with a function', () => {\n let reference;\n\n interface Comp1State {\n foo: string;\n }\n\n class Comp1 extends Component {\n state: Comp1State;\n\n constructor(props) {\n super(props);\n this.state = {\n foo: 'yar',\n };\n reference = this.update.bind(this);\n }\n\n update() {\n this.setState(() => ({\n foo: 'bar',\n }));\n }\n\n render() {\n return
    {this.state.foo}
    ;\n }\n }\n\n it('the state should update properly', (done) => {\n render(, container);\n expect(container.innerHTML).toBe('
    yar
    ');\n reference();\n setTimeout(() => {\n expect(container.innerHTML).toBe('
    bar
    ');\n done();\n }, 10);\n });\n });\n\n describe('node change in updateComponent', () => {\n it('Should not crash when invalid node returned - statefull', () => {\n interface Comp1Props {\n foo?: boolean;\n }\n\n class Comp1 extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n if (this.props.foo) {\n return null;\n }\n\n return
    rendered
    ;\n }\n }\n\n render(, container);\n expect(container.innerHTML).toEqual('
    rendered
    ');\n render(, container);\n expect(container.innerHTML).toEqual('');\n });\n\n it('Should not crash when invalid node returned - stateless', () => {\n interface Comp1Props {\n foo?: boolean;\n }\n\n const Comp1 = ({ foo }: Comp1Props) => {\n if (foo) {\n return null;\n }\n\n return
    rendered
    ;\n };\n\n render(, container);\n expect(container.innerHTML).toEqual('
    rendered
    ');\n render(, container);\n expect(container.innerHTML).toEqual('');\n });\n });\n\n describe('Root handling issues #1', () => {\n let div;\n\n interface AState {\n n: boolean;\n }\n\n class A extends Component {\n state: AState;\n private onClick: () => void;\n constructor(props) {\n super(props);\n this.state = { n: false };\n\n this.onClick = () => {\n this.setState({ n: !this.state.n });\n };\n }\n\n render() {\n if (this.state.n) {\n return (\n
    (div = dom)} onClick={this.onClick}>\n DIV\n
    \n );\n }\n return SPAN;\n }\n }\n\n class B extends Component {\n shouldComponentUpdate() {\n return false;\n }\n\n render() {\n return     ;\n }\n }\n\n interface TestState {\n reverse: boolean;\n }\n\n class Test extends Component {\n state: TestState;\n constructor(props) {\n super(props);\n this.state = {\n reverse: false,\n };\n }\n\n render() {\n const children = [,
    ROW
    ];\n if (this.state.reverse) {\n children.reverse();\n }\n\n return (\n
    \n {\n this.setState({ reverse: !this.state.reverse });\n }}\n >\n Swap Rows\n \n
    {children}
    \n
    \n );\n }\n }\n\n // this test is to replicate https://jsfiddle.net/localvoid/r070sgrq/2/\n it('should correct swap rows', () => {\n render(, container);\n expect(container.innerHTML).toEqual(\n '
    SPAN
    ROW
    ',\n );\n // click on \"SPAN\"\n container.querySelector('span').click();\n // \"SPAN\" should now be \"DIV\"\n expect(container.innerHTML).toEqual(\n '
    DIV
    ROW
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n expect(container.innerHTML).toEqual(\n '
    ROW
    DIV
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n expect(container.innerHTML).toEqual(\n '
    DIV
    ROW
    ',\n );\n // click on \"DIV\"\n div.click();\n // \"DIV\" should now be \"SPAN\"\n expect(container.innerHTML).toEqual(\n '
    SPAN
    ROW
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n expect(container.innerHTML).toEqual(\n '
    ROW
    SPAN
    ',\n );\n });\n });\n\n describe('Root handling issues #2', () => {\n let div;\n\n interface AState {\n n: boolean;\n }\n\n class A extends Component {\n state: AState;\n private onClick: () => void;\n constructor(props) {\n super(props);\n this.state = { n: false };\n\n this.onClick = () => {\n this.setState({ n: !this.state.n });\n };\n }\n\n render() {\n if (this.state.n) {\n return (\n
    (div = dom)} onClick={this.onClick}>\n DIV\n
    \n );\n }\n return SPAN;\n }\n }\n\n function F() {\n return     ;\n }\n\n class B extends Component {\n shouldComponentUpdate() {\n return false;\n }\n\n render() {\n return ;\n }\n }\n\n interface TestState {\n reverse: boolean;\n }\n\n class Test extends Component {\n state: TestState;\n constructor(props) {\n super(props);\n this.state = {\n reverse: false,\n };\n }\n\n render() {\n const children = [,
    ROW
    ];\n if (this.state.reverse) {\n children.reverse();\n }\n\n return (\n
    \n {\n this.setState({ reverse: !this.state.reverse });\n }}\n >\n Swap Rows\n \n
    {children}
    \n
    \n );\n }\n }\n\n // this test is to replicate https://jsfiddle.net/localvoid/r070sgrq/2/\n it('should correct swap rows', () => {\n render(, container);\n expect(container.innerHTML).toEqual(\n '
    SPAN
    ROW
    ',\n );\n // click on \"SPAN\"\n container.querySelector('span').click();\n // \"SPAN\" should now be \"DIV\"\n expect(container.innerHTML).toEqual(\n '
    DIV
    ROW
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n expect(container.innerHTML).toEqual(\n '
    ROW
    DIV
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n expect(container.innerHTML).toEqual(\n '
    DIV
    ROW
    ',\n );\n // click on \"DIV\"\n div.click();\n // \"DIV\" should now be \"SPAN\"\n expect(container.innerHTML).toEqual(\n '
    SPAN
    ROW
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n expect(container.innerHTML).toEqual(\n '
    ROW
    SPAN
    ',\n );\n });\n });\n\n describe('Root handling issues #3', () => {\n let div;\n\n interface AState {\n n: boolean;\n }\n\n class A extends Component {\n state: AState;\n private onClick: () => void;\n constructor(props) {\n super(props);\n this.state = { n: false };\n\n this.onClick = () => {\n this.setState({ n: !this.state.n });\n };\n }\n\n render() {\n if (this.state.n) {\n return (\n
    (div = dom)} onClick={this.onClick}>\n DIV\n
    \n );\n }\n return SPAN;\n }\n }\n\n function F() {\n return     ;\n }\n\n function B() {\n return false} />;\n }\n\n interface TestState {\n reverse: boolean;\n }\n\n class Test extends Component {\n state: TestState;\n constructor(props) {\n super(props);\n this.state = {\n reverse: false,\n };\n }\n\n render() {\n const children = [\n false} />,\n
    ROW
    ,\n ];\n if (this.state.reverse) {\n children.reverse();\n }\n\n return (\n
    \n {\n this.setState({ reverse: !this.state.reverse });\n }}\n >\n Swap Rows\n \n
    {children}
    \n
    \n );\n }\n }\n\n // this test is to replicate https://jsfiddle.net/localvoid/r070sgrq/2/\n it('should correct swap rows', () => {\n render(, container);\n expect(container.innerHTML).toEqual(\n '
    SPAN
    ROW
    ',\n );\n // click on \"SPAN\"\n container.querySelector('span').click();\n // \"SPAN\" should now be \"DIV\"\n expect(container.innerHTML).toEqual(\n '
    DIV
    ROW
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n expect(container.innerHTML).toEqual(\n '
    ROW
    DIV
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n expect(container.innerHTML).toEqual(\n '
    DIV
    ROW
    ',\n );\n // click on \"DIV\"\n div.click();\n\n // \"DIV\" should now be \"SPAN\"\n expect(container.innerHTML).toEqual(\n '
    SPAN
    ROW
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n expect(container.innerHTML).toEqual(\n '
    ROW
    SPAN
    ',\n );\n\n render(null, container);\n });\n });\n\n describe('Root handling issues #4', () => {\n interface AState {\n n: boolean;\n }\n\n class A extends Component {\n state: AState;\n private onClick: () => void;\n constructor(props) {\n super(props);\n this.state = { n: false };\n\n this.onClick = () => {\n this.setState({ n: !this.state.n });\n };\n }\n\n render() {\n if (this.state.n) {\n return
    DIV
    ;\n }\n return SPAN;\n }\n }\n\n class B extends Component {\n shouldComponentUpdate() {\n return false;\n }\n\n render() {\n return this.props.children;\n }\n }\n\n interface TestState {\n reverse: boolean;\n }\n\n class Test extends Component {\n state: TestState;\n\n constructor(props) {\n super(props);\n this.state = {\n reverse: false,\n };\n }\n\n render() {\n const children = [\n \n     \n ,\n
    A
    ,\n ];\n if (this.state.reverse) {\n children.reverse();\n }\n\n return (\n
    \n {\n this.setState({ reverse: !this.state.reverse });\n }}\n >\n Swap Rows\n \n
    {children}
    \n
    {children}
    \n
    \n );\n }\n }\n\n it('should correct swap rows', () => {\n render(, container);\n expect(container.innerHTML).toEqual(\n '
    SPAN
    A
    SPAN
    A
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n expect(container.innerHTML).toEqual(\n '
    A
    SPAN
    A
    SPAN
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n expect(container.innerHTML).toEqual(\n '
    SPAN
    A
    SPAN
    A
    ',\n );\n });\n });\n\n describe('Root handling issues #5', () => {\n interface AState {\n n: boolean;\n }\n\n class A extends Component {\n state: AState;\n private onClick: () => void;\n\n constructor(props) {\n super(props);\n this.state = { n: false };\n\n this.onClick = () => {\n this.setState({ n: !this.state.n });\n };\n }\n\n render() {\n if (this.state.n) {\n return
    DIV
    ;\n }\n return SPAN;\n }\n }\n\n const hoisted =     ;\n\n class B extends Component {\n shouldComponentUpdate() {\n return false;\n }\n\n render() {\n return hoisted;\n }\n }\n\n interface TestState {\n reverse: boolean;\n }\n\n class Test extends Component {\n state: TestState;\n constructor(props) {\n super(props);\n this.state = {\n reverse: false,\n };\n }\n\n render() {\n const children = [,
    A
    ];\n if (this.state.reverse) {\n children.reverse();\n }\n Object.freeze(children);\n\n return (\n
    \n {\n this.setState({ reverse: !this.state.reverse });\n }}\n >\n Swap Rows\n \n
    {children}
    \n
    {children}
    \n
    \n );\n }\n }\n\n it('should correct swap rows', () => {\n render(, container);\n expect(container.innerHTML).toEqual(\n '
    SPAN
    A
    SPAN
    A
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n expect(container.innerHTML).toEqual(\n '
    A
    SPAN
    A
    SPAN
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n expect(container.innerHTML).toEqual(\n '
    SPAN
    A
    SPAN
    A
    ',\n );\n });\n });\n\n describe('Root handling issues #6', () => {\n let i;\n\n beforeEach(function () {\n i = 1;\n });\n\n class B extends Component {\n constructor(props) {\n super(props);\n }\n\n shouldComponentUpdate() {\n return false;\n }\n\n render() {\n return
    {i}
    ;\n }\n }\n\n class Test extends Component {\n render() {\n return (\n
    \n {\n i++;\n this.setState({});\n }}\n >\n Replace\n \n
    \n \n
    \n
    \n );\n }\n }\n\n it('should replace keyed component if key changes', () => {\n render(, container);\n expect(container.innerHTML).toEqual(\n '
    1
    ',\n );\n // click \"Replace\"\n container.querySelector('button').click();\n expect(container.innerHTML).toEqual(\n '
    2
    ',\n );\n });\n });\n\n describe('Cloned children issues #1', () => {\n interface TestState {\n reverse: boolean;\n }\n\n class Test extends Component {\n state: TestState;\n\n constructor(props) {\n super(props);\n this.state = {\n reverse: false,\n };\n }\n\n render() {\n const a =
    B
    ;\n const b =
    A
    ;\n\n return (\n
    \n {\n this.setState({ reverse: !this.state.reverse });\n }}\n >\n Swap Rows\n \n
    {this.state.reverse ? [a, b].reverse() : [a, b]}
    \n
    {this.state.reverse ? [a, b].reverse() : [a, b]}
    \n
    \n );\n }\n }\n\n // this test is to replicate https://jsfiddle.net/localvoid/fmznjwxv/\n it('should correct swap rows', () => {\n render(, container);\n expect(container.innerHTML).toEqual(\n '
    B
    A
    B
    A
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n });\n });\n describe('Cloned children issues #2', () => {\n interface TestState {\n reverse: boolean;\n }\n\n class Test extends Component {\n state: TestState;\n\n constructor(props) {\n super(props);\n this.state = {\n reverse: false,\n };\n }\n\n render() {\n const children = [
    B
    ,
    A
    ];\n if (this.state.reverse) {\n children.reverse();\n }\n\n return (\n
    \n {\n this.setState({ reverse: !this.state.reverse });\n }}\n >\n Swap Rows\n \n
    {children}
    \n
    {children}
    \n
    \n );\n }\n }\n\n // this test is to replicate https://jsfiddle.net/localvoid/fmznjwxv/\n it('should correct swap rows', () => {\n render(, container);\n expect(container.innerHTML).toEqual(\n '
    B
    A
    B
    A
    ',\n );\n // click \"SWAP ROWS\"\n container.querySelector('button').click();\n });\n });\n\n describe('Asynchronous setStates', () => {\n it('Should not fail when parent component calls setState on unmounting children', (done) => {\n interface ParentProps {\n toggle: boolean;\n }\n\n interface ParentState {\n text: string;\n }\n\n class Parent extends Component {\n state: ParentState;\n\n constructor(props) {\n super(props);\n\n this.state = {\n text: 'bar',\n };\n\n this.changeState = this.changeState.bind(this);\n }\n\n changeState() {\n this.setState({\n text: 'foo',\n });\n }\n\n render() {\n return (\n
    \n {this.state.text}\n {this.props.toggle ? (\n []\n ) : (\n \n tester\n \n )}\n
    \n );\n }\n }\n\n class Tester extends Component<{ call: () => void; toggle: boolean }> {\n constructor(props) {\n super(props);\n }\n\n componentWillUnmount() {\n // parent will do setState\n this.props.call();\n }\n\n render() {\n return (\n
    \n \n foo\n \n
    \n );\n }\n }\n\n render(, container);\n\n expect(container.innerHTML).toEqual(\n '
    bar
    foo
    ',\n );\n\n render(, container);\n\n setTimeout(() => {\n done();\n }, 40);\n });\n });\n});\n" }, { "path": "packages/inferno-create-element/__tests__/components3.spec.tsx", "content": "import { Component, InfernoChild, render, rerender } from 'inferno';\n\ndescribe('Components 3 (TSX)', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n afterEach(function () {\n render(null, container);\n document.body.removeChild(container);\n });\n\n describe('should render a repeating counter component with component children', () => {\n interface ValueProps {\n value: number;\n }\n\n class Value extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return
    {this.props.value}
    ;\n }\n }\n\n interface RepeaterProps {\n value: number;\n }\n\n class Repeater extends Component {\n render() {\n const children: InfernoChild[] = [];\n for (let i = 0; i < 3; i++) {\n children.push();\n }\n\n return
    {children}
    ;\n }\n }\n\n it('should correctly render as values increase', () => {\n let value = 0;\n\n render(, container);\n expect(container.innerHTML).toBe(\n '
    0
    0
    0
    ',\n );\n\n value++;\n render(, container);\n expect(container.innerHTML).toBe(\n '
    1
    1
    1
    ',\n );\n\n value++;\n render(, container);\n expect(container.innerHTML).toBe(\n '
    2
    2
    2
    ',\n );\n });\n });\n\n describe('should render a component with component children as the only child', () => {\n class Jaska extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (\n
    \n

    Okdokfwoe

    \n

    odkodwq

    \n
    \n );\n }\n }\n\n class Container extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return
    {this.props.children}
    ;\n }\n }\n\n class TestingProps extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (\n
    \n \n \n \n
    \n );\n }\n }\n\n it('should correctly render', () => {\n render(, container);\n expect(container.innerHTML).toBe(\n '

    Okdokfwoe

    odkodwq

    ',\n );\n });\n });\n\n describe('should render a component with with mapped text nodes', () => {\n interface MyComponent99Props {\n isok: boolean;\n }\n\n interface MyComponent98State {\n isok: boolean;\n }\n\n class MyComponent98 extends Component {\n state: MyComponent98State;\n\n constructor(props) {\n super(props);\n this.state = {\n isok: false,\n };\n }\n\n componentDidMount() {\n this.setState({ isok: true });\n }\n\n render() {\n return ;\n }\n }\n\n class MyComponent99 extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (\n
    \n isok=\n {this.props.isok ? 'true' : 'false'}\n
    \n {this.props.isok &&\n ['a', 'b'].map((x) => {\n return {x};\n })}\n
    \n
    \n );\n }\n }\n\n it('should correctly render', () => {\n render(, container);\n\n expect(container.innerHTML).toBe('
    isok=false
    ');\n\n rerender();\n\n expect(container.innerHTML).toBe(\n '
    isok=true
    ab
    ',\n );\n });\n });\n\n describe('should render a component with conditional boolean text nodes', () => {\n interface MyComponent98State {\n isok: boolean;\n }\n\n interface MyComponent99Props {\n isok: boolean;\n }\n\n class MyComponent98 extends Component {\n state: MyComponent98State;\n\n constructor(props) {\n super(props);\n this.state = {\n isok: false,\n };\n }\n\n componentDidMount() {\n this.setState({ isok: true });\n }\n\n render() {\n return ;\n }\n }\n\n class MyComponent99 extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n const z = function (v) {\n if (v) {\n return a;\n } else {\n return b;\n }\n };\n\n return (\n
    \n
    {z(this.props.isok)}
    \n
    \n );\n }\n }\n\n it('should correctly render', (done) => {\n render(, container);\n setTimeout(() => {\n expect(container.innerHTML).toBe(\n '
    a
    ',\n );\n done();\n }, 25);\n });\n });\n\n const StatelessComponent2 = (props) =>
    {props.name}
    ;\n\n it('should render stateless component', () => {\n render(, container);\n expect(container.textContent).toBe('A');\n });\n\n it('should unmount stateless component', function () {\n render(, container);\n expect(container.textContent).toBe('A');\n\n render(null, container);\n expect(container.textContent).toBe('');\n });\n\n it('should support module pattern components', function () {\n function Child({ test }) {\n return
    {test}
    ;\n }\n\n render(, container);\n\n expect(container.textContent).toBe('test');\n });\n\n describe('should render a component with a conditional list that changes upon toggle', () => {\n class BuggyRender extends Component {\n state: { empty: boolean };\n\n constructor(props) {\n super(props);\n\n this.state = {\n empty: true,\n };\n\n this.toggle = this.toggle.bind(this);\n }\n\n toggle() {\n this.setState({\n empty: !this.state.empty,\n });\n }\n\n render() {\n return (\n
    \n \n
      \n {(() => {\n if (this.state.empty === true) {\n return
    • No cars!
      • ;\n } else {\n return ['BMW', 'Volvo', 'Saab'].map(function (car) {\n return
    • {car}
      • ;\n });\n }\n })()}\n
    \n
    \n );\n }\n }\n\n it('should correctly render', () => {\n render(, container);\n expect(container.innerHTML).toBe(\n '
    • No cars!
    ',\n );\n });\n\n it('should handle update upon click', () => {\n render(, container);\n const buttons = container.querySelectorAll('button');\n\n for (const button of buttons) {\n button.click();\n }\n\n expect(container.innerHTML).toBe(\n '
    • BMW
    • Volvo
    • Saab
    ',\n );\n });\n });\n\n describe('should render a component with a list that instantly changes', () => {\n interface ChangeChildrenCountState {\n list: string[];\n }\n class ChangeChildrenCount extends Component<\n object,\n ChangeChildrenCountState\n > {\n state: ChangeChildrenCountState;\n\n constructor(props) {\n super(props);\n\n this.state = {\n list: ['1', '2', '3', '4'],\n };\n\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick() {\n this.setState({\n list: ['1'],\n });\n }\n\n render() {\n return (\n
    \n \n {this.state.list.map(function (_x, i) {\n return
    {i}
    ;\n })}\n
    \n );\n }\n }\n\n it('should correctly render', () => {\n render(, container);\n expect(container.innerHTML).toBe(\n '
    0
    1
    2
    3
    ',\n );\n });\n\n it('should handle update upon click', (done) => {\n render(, container);\n const buttons = container.querySelectorAll('button');\n\n for (const button of buttons) {\n button.click();\n }\n\n setTimeout(() => {\n expect(container.innerHTML).toBe(\n '
    0
    ',\n );\n done();\n }, 10);\n });\n });\n\n describe('should render a stateless component with context', () => {\n const StatelessComponent3 = ({ value }, { fortyTwo }) => (\n

    \n {value}-{fortyTwo || 'ERROR'}\n

    \n );\n\n interface FirstState {\n counter: number;\n }\n\n class First extends Component {\n state: FirstState;\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n counter: 0,\n };\n\n this._onClick = this._onClick.bind(this);\n }\n\n _onClick() {\n this.setState({\n counter: 1,\n });\n }\n\n getChildContext() {\n return {\n fortyTwo: 42,\n };\n }\n\n render() {\n return (\n
    \n \n \n
    \n );\n }\n }\n\n it('should correctly render', () => {\n render(, container);\n expect(container.innerHTML).toBe(\n '

    0-42

    ',\n );\n });\n\n it('should handle update upon click', (done) => {\n render(, container);\n const buttons = container.querySelectorAll('button');\n\n for (const button of buttons) {\n button.click();\n }\n\n setTimeout(() => {\n expect(container.innerHTML).toBe(\n '

    1-42

    ',\n );\n done();\n }, 10);\n });\n });\n\n describe('should render a conditional stateless component', () => {\n const StatelessComponent4 = ({ value }) =>

    {value}

    ;\n\n interface FirstState {\n counter: number;\n }\n\n class First extends Component {\n state: FirstState;\n private condition: boolean;\n\n constructor(props) {\n super(props);\n\n this.state = {\n counter: 0,\n };\n\n this.condition = true;\n this._onClick = this._onClick.bind(this);\n }\n\n _onClick() {\n this.setState({\n counter: 1,\n });\n }\n\n render() {\n return (\n
    \n \n {this.condition ? (\n \n ) : null}\n
    \n );\n }\n }\n\n it('should correctly render', () => {\n render(, container);\n expect(container.innerHTML).toBe(\n '

    0

    ',\n );\n });\n\n it('should handle update upon click', (done) => {\n render(, container);\n const buttons = container.querySelectorAll('button');\n\n for (const button of buttons) {\n button.click();\n }\n\n setTimeout(() => {\n expect(container.innerHTML).toBe(\n '

    1

    ',\n );\n done();\n }, 10);\n });\n });\n\n describe('should render stateless component correctly when changing states', () => {\n let firstDiv, secondDiv;\n\n beforeEach(function () {\n firstDiv = document.createElement('div');\n secondDiv = document.createElement('div');\n\n container.appendChild(firstDiv);\n container.appendChild(secondDiv);\n });\n\n afterEach(function () {\n render(null, firstDiv);\n render(null, secondDiv);\n });\n\n const StatelessComponent = ({ value }) =>

    {value}

    ;\n\n interface FirstState {\n counter: number;\n }\n\n class First extends Component<{ name: string }, FirstState> {\n state: FirstState;\n private condition: boolean;\n\n constructor(props) {\n super(props);\n\n this.state = {\n counter: 0,\n };\n\n this.condition = true;\n this._onClick = this._onClick.bind(this);\n }\n\n _onClick() {\n this.setState({\n counter: 1,\n });\n }\n\n render() {\n return (\n
    \n \n {this.condition ? (\n \n ) : null}\n
    \n );\n }\n }\n\n it('should correctly render', () => {\n render(, firstDiv);\n render(, secondDiv);\n\n expect(container.innerHTML).toBe(\n '

    0

    0

    ',\n );\n });\n\n it('should handle update when changing first component', (done) => {\n render(, firstDiv);\n render(, secondDiv);\n\n const buttons = firstDiv.querySelectorAll('button');\n for (const button of buttons) {\n button.click();\n }\n\n setTimeout(() => {\n expect(container.innerHTML).toBe(\n '

    1

    0

    ',\n );\n done();\n }, 10);\n });\n\n it('should handle update when changing second component', (done) => {\n render(, firstDiv);\n render(, secondDiv);\n\n const buttons = secondDiv.querySelectorAll('button');\n for (const button of buttons) {\n button.click();\n }\n\n setTimeout(() => {\n expect(container.innerHTML).toBe(\n '

    0

    1

    ',\n );\n done();\n }, 10);\n });\n });\n\n describe('updating child should not cause rendering parent to fail', () => {\n it('should render parent correctly after child changes', (done) => {\n let updateParent, updateChild;\n\n interface ParentState {\n x: boolean;\n }\n\n class Parent extends Component {\n state: ParentState;\n\n constructor(props) {\n super(props);\n this.state = { x: false };\n\n updateParent = () => {\n this.setState({ x: true });\n };\n }\n\n render() {\n return (\n
    \n

    parent

    \n {!this.state.x ? : }\n
    \n );\n }\n }\n\n class ChildB extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return
    Y
    ;\n }\n }\n\n interface ChildAState {\n z: boolean;\n }\n\n class ChildA extends Component {\n state: ChildAState;\n\n constructor(props) {\n super(props);\n this.state = { z: false };\n\n updateChild = () => {\n this.setState({ z: true });\n };\n }\n\n render() {\n if (!this.state.z) {\n return
    A
    ;\n }\n return ;\n }\n }\n\n class SubChild extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return
    B
    ;\n }\n }\n\n render(, container);\n expect(container.innerHTML).toBe('

    parent

    A
    ');\n updateChild();\n setTimeout(() => {\n expect(container.innerHTML).toBe(\n '

    parent

    B
    ',\n );\n updateParent();\n setTimeout(() => {\n expect(container.innerHTML).toBe(\n '

    parent

    Y
    ',\n );\n done();\n }, 10);\n }, 10);\n });\n });\n});\n" }, { "path": "packages/inferno-create-element/__tests__/createElement.fragment.spec.ts", "content": "import {\n Component,\n createFragment,\n createPortal,\n Fragment,\n render,\n rerender,\n VNode,\n} from 'inferno';\nimport { createElement } from 'inferno-create-element';\nimport { ChildFlags } from 'inferno-vnode-flags';\n\ndescribe('CreateElement (non-JSX)', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n afterEach(function () {\n render(null, container);\n container.innerHTML = '';\n document.body.removeChild(container);\n });\n\n describe('Fragments', () => {\n it('Should render and unmount fragment', () => {\n const Example = class Example extends Component {\n render() {\n return createFragment(\n [\n createElement('div', null, 'First'),\n createElement('div', null, 'second'),\n ],\n ChildFlags.HasNonKeyedChildren,\n );\n }\n };\n\n render(createElement(Example, null), container);\n\n expect(container.innerHTML).toBe('
    First
    second
    ');\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should render nested fragment', () => {\n const Example = class Example extends Component {\n render() {\n return createFragment(\n [\n createElement('div', null, 'First'),\n createFragment(\n [\n createElement('div', null, 'Sub1'),\n createElement('div', null, 'Sub2'),\n ],\n ChildFlags.HasNonKeyedChildren,\n ),\n createElement('div', null, 'second'),\n ],\n ChildFlags.HasNonKeyedChildren,\n );\n }\n };\n\n render(createElement(Example, null), container);\n\n expect(container.innerHTML).toBe(\n '
    First
    Sub1
    Sub2
    second
    ',\n );\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should be to replace component with fragment with another component', () => {\n const Example = class Example extends Component {\n render() {\n return createFragment(\n [\n createElement('div', null, 'First'),\n createFragment(\n [\n createElement('div', null, 'Sub1'),\n createElement('div', null, 'Sub2'),\n ],\n ChildFlags.HasNonKeyedChildren,\n ),\n createElement('div', null, 'second'),\n ],\n ChildFlags.HasNonKeyedChildren,\n );\n }\n };\n\n function FunctionalComp() {\n return createFragment(\n [createElement('div', null, 'Functional')],\n ChildFlags.HasNonKeyedChildren,\n );\n }\n\n render(createElement(Example, null), container);\n\n expect(container.innerHTML).toBe(\n '
    First
    Sub1
    Sub2
    second
    ',\n );\n\n render(createElement(FunctionalComp, null), container);\n\n expect(container.innerHTML).toBe('
    Functional
    ');\n\n render(createElement(Example, null), container);\n\n expect(container.innerHTML).toBe(\n '
    First
    Sub1
    Sub2
    second
    ',\n );\n\n render(createElement(FunctionalComp, null), container);\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should be possible to move fragments', () => {\n const fragmentA = () =>\n createFragment(\n [\n createElement('div', { id: 'a1' }, 'A1'),\n createElement('div', null, 'A2'),\n ],\n ChildFlags.HasNonKeyedChildren,\n 'A',\n );\n\n const fragmentB = () =>\n createFragment(\n [createElement('div', { id: 'b1' }, 'B1')],\n ChildFlags.HasNonKeyedChildren,\n 'B',\n );\n\n const fragmentC = () =>\n createFragment(\n [\n createElement('div', { id: 'c1' }, 'C1'),\n createElement('div', null, 'C2'),\n createElement('div', null, 'C3'),\n ],\n ChildFlags.HasNonKeyedChildren,\n 'C',\n );\n\n render(\n createElement('div', null, fragmentA(), fragmentB(), fragmentC()),\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    A1
    A2
    B1
    C1
    C2
    C3
    ',\n );\n\n const A1 = container.querySelector('#a1');\n const B1 = container.querySelector('#b1');\n const C1 = container.querySelector('#c1');\n\n // Switch order\n render(\n createElement('div', null, fragmentC(), fragmentA(), fragmentB()),\n container,\n );\n\n // Verify dom has changed and nodes are the same\n expect(container.innerHTML).toBe(\n '
    C1
    C2
    C3
    A1
    A2
    B1
    ',\n );\n\n expect(container.querySelector('#a1')).toBe(A1);\n expect(container.querySelector('#b1')).toBe(B1);\n expect(container.querySelector('#c1')).toBe(C1);\n\n // Switch order again\n render(createElement('div', null, fragmentB(), fragmentC()), container);\n\n // Verify dom has changed and nodes are the same\n expect(container.innerHTML).toBe(\n '
    B1
    C1
    C2
    C3
    ',\n );\n\n expect(container.querySelector('#a1')).toBe(null);\n expect(container.querySelector('#b1')).toBe(B1);\n expect(container.querySelector('#c1')).toBe(C1);\n });\n\n it('Should clone fragment children if they are passed as reference', () => {\n const fragmentA = createFragment(\n [\n createElement('div', { id: 'a1' }, 'A1'),\n createElement('div', null, 'A2'),\n ],\n ChildFlags.HasNonKeyedChildren,\n 'A',\n );\n const fragmentB = createFragment(\n [createElement('div', { id: 'b1' }, 'B1')],\n ChildFlags.HasNonKeyedChildren,\n 'B',\n );\n const fragmentC = createFragment(\n [\n createElement('div', { id: 'c1' }, 'C1'),\n createElement('div', null, 'C2'),\n createElement('div', null, 'C3'),\n ],\n ChildFlags.HasNonKeyedChildren,\n 'C',\n );\n\n const content = [fragmentC];\n\n function SFC() {\n return createElement(\n Fragment,\n null,\n createElement('span', null, '1'),\n createElement(Fragment, null, content),\n createElement('span', null, '2'),\n );\n }\n\n render(\n createElement(\n Fragment,\n null,\n fragmentA,\n createElement(SFC, { key: 'sfc' }),\n fragmentB,\n fragmentC,\n ),\n container,\n );\n\n const FragmentAHtml = '
    A1
    A2
    ';\n const FragmentBHtml = '
    B1
    ';\n const FragmentCHtml = '
    C1
    C2
    C3
    ';\n const SFCHtml = '1' + FragmentCHtml + '2';\n\n expect(container.innerHTML).toBe(\n FragmentAHtml + SFCHtml + FragmentBHtml + FragmentCHtml,\n );\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should be possible to move component with fragment root', () => {\n const fragmentA = createFragment(\n [\n createElement('div', { id: 'a1' }, 'A1'),\n createElement('div', null, 'A2'),\n ],\n ChildFlags.HasNonKeyedChildren,\n 'A',\n );\n const fragmentB = createFragment(\n [createElement('div', { id: 'b1' }, 'B1')],\n ChildFlags.HasNonKeyedChildren,\n 'B',\n );\n const fragmentC = createFragment(\n [\n createElement('div', { id: 'c1' }, 'C1'),\n createElement('div', null, 'C2'),\n createElement('div', null, 'C3'),\n ],\n ChildFlags.HasNonKeyedChildren,\n 'C',\n );\n\n const content = [fragmentC];\n\n function SFC() {\n return createElement(\n Fragment,\n null,\n createElement('span', null, '1'),\n createElement(Fragment, null, content),\n createElement('span', null, '2'),\n );\n }\n\n render(\n createElement(\n Fragment,\n null,\n fragmentA,\n createElement(SFC, { key: 'sfc' }),\n fragmentB,\n fragmentC,\n ),\n container,\n );\n\n const FragmentAHtml = '
    A1
    A2
    ';\n const FragmentBHtml = '
    B1
    ';\n const FragmentCHtml = '
    C1
    C2
    C3
    ';\n const SFCHtml = '1' + FragmentCHtml + '2';\n\n expect(container.innerHTML).toBe(\n FragmentAHtml + SFCHtml + FragmentBHtml + FragmentCHtml,\n );\n\n // Switch order\n render(\n createElement(\n Fragment,\n null,\n fragmentA,\n fragmentC,\n createElement(SFC, { key: 'sfc' }),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe(FragmentAHtml + FragmentCHtml + SFCHtml);\n\n // Switch order again\n render(\n createElement(\n Fragment,\n null,\n createElement('div', { key: '1' }, '1'),\n createElement(SFC, { key: 'sfc' }),\n fragmentA,\n fragmentC,\n createElement('div', { key: '1' }, '2'),\n ),\n container,\n );\n\n // Verify dom has changed and nodes are the same\n expect(container.innerHTML).toBe(\n '
    1
    ' +\n SFCHtml +\n FragmentAHtml +\n FragmentCHtml +\n '
    2
    ',\n );\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should be possible to move component with fragment root #2', () => {\n const fragmentA = createFragment(\n [\n createElement('div', { id: 'a1' }, 'A1'),\n createElement('div', null, 'A2'),\n ],\n ChildFlags.HasNonKeyedChildren,\n 'A',\n );\n const fragmentB = createFragment(\n [createElement('div', { id: 'b1' }, 'B1')],\n ChildFlags.HasNonKeyedChildren,\n 'B',\n );\n const fragmentC = createFragment(\n [\n createElement('div', { id: 'c1' }, 'C1'),\n createElement('div', null, 'C2'),\n createElement('div', null, 'C3'),\n ],\n ChildFlags.HasNonKeyedChildren,\n 'C',\n );\n\n const content = [fragmentC];\n\n function SFC() {\n return createElement(\n Fragment,\n null,\n createElement('span', null, '1'),\n createElement(Fragment, null, content),\n createElement('span', null, '2'),\n );\n }\n\n render(\n createElement(\n Fragment,\n null,\n fragmentA,\n createElement(SFC, { key: 'sfc1' }),\n fragmentB,\n createElement(SFC, { key: 'sfc2' }),\n fragmentC,\n createElement(SFC, { key: 'sfc3' }),\n ),\n container,\n );\n\n const FragmentAHtml = '
    A1
    A2
    ';\n const FragmentBHtml = '
    B1
    ';\n const FragmentCHtml = '
    C1
    C2
    C3
    ';\n const SFCHtml = '1' + FragmentCHtml + '2';\n\n expect(container.innerHTML).toBe(\n FragmentAHtml +\n SFCHtml +\n FragmentBHtml +\n SFCHtml +\n FragmentCHtml +\n SFCHtml,\n );\n\n // Switch order\n render(\n createElement(\n Fragment,\n null,\n createElement(SFC, { key: 'sfc3' }),\n fragmentA,\n createElement(SFC, { key: 'sfc1' }),\n fragmentC,\n createElement(SFC, { key: 'sfc2' }),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe(\n SFCHtml + FragmentAHtml + SFCHtml + FragmentCHtml + SFCHtml,\n );\n\n // Switch order again\n render(\n createElement(\n Fragment,\n null,\n createElement('div', { key: '1' }, '1'),\n createElement(SFC, { key: 'sfc1' }),\n createElement(SFC, { key: 'sfc2' }),\n fragmentA,\n fragmentC,\n createElement('div', { key: '1' }, '2'),\n createElement(SFC, { key: 'sfc3' }),\n ),\n container,\n );\n\n // Verify dom has changed and nodes are the same\n expect(container.innerHTML).toBe(\n '
    1
    ' +\n SFCHtml +\n SFCHtml +\n FragmentAHtml +\n FragmentCHtml +\n '
    2
    ' +\n SFCHtml,\n );\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should be possible to render fragments JSX way', () => {\n function Fragmenter({ first, mid, last, changeOrder }) {\n if (changeOrder) {\n return createElement(\n Fragment,\n null,\n createElement('div', null, first),\n createElement(\n Fragment,\n null,\n 'More',\n null,\n 'Hey!',\n createElement(\n Fragment,\n null,\n createElement(Fragment, null, 'Large ', last),\n createElement(Fragment, null, 'And Small'),\n ),\n createElement(Fragment, null, 'Nesting'),\n mid,\n ),\n createElement('span', null, 'bar'),\n null,\n );\n }\n return createElement(\n Fragment,\n null,\n createElement('div', null, first),\n 'Hey!',\n createElement(\n Fragment,\n null,\n 'More',\n createElement(Fragment, null, 'Nesting'),\n mid,\n createElement(\n Fragment,\n null,\n createElement(Fragment, null, 'Large ', last),\n createElement(Fragment, null, 'And Small'),\n ),\n ),\n createElement('span', null, 'bar'),\n );\n }\n\n let mountCounter = 0;\n let unmountCounter = 0;\n\n const FoobarCom = class FoobarCom extends Component<{\n node: HTMLDivElement;\n }> {\n componentWillMount() {\n mountCounter++;\n }\n\n componentWillUnmount() {\n unmountCounter++;\n }\n\n render(props) {\n return createElement(\n Fragment,\n null,\n props.children,\n createPortal(\n createElement('div', null, 'InvisiblePortalCreator'),\n props.node,\n ),\n null,\n 'Try out some crazy stuff',\n );\n }\n };\n\n const portalNode = document.createElement('div');\n\n render(\n createElement(\n FoobarCom,\n { node: portalNode },\n createElement(Fragmenter, {\n first: 'first',\n mid: 'MID',\n last: createElement('div', null, 'Why?'),\n changeOrder: false,\n }),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    first
    Hey!MoreNestingMIDLarge
    Why?
    And SmallbarTry out some crazy stuff',\n );\n expect(portalNode.innerHTML).toBe('
    InvisiblePortalCreator
    ');\n\n render(\n createElement(\n FoobarCom,\n { node: portalNode },\n createElement(Fragmenter, {\n first: createElement('span', null, 'GoGo'),\n mid: 'MID',\n last: createElement('div', null, 'Why?'),\n changeOrder: true,\n }),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    GoGo
    MoreHey!Large
    Why?
    And SmallNestingMIDbarTry out some crazy stuff',\n );\n expect(portalNode.innerHTML).toBe('
    InvisiblePortalCreator
    ');\n\n render(\n createElement(\n FoobarCom,\n { node: portalNode },\n createElement(Fragmenter, {\n first: 'first',\n mid: 'MID',\n last: createElement('div', null, 'Why?'),\n changeOrder: false,\n }),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    first
    Hey!MoreNestingMIDLarge
    Why?
    And SmallbarTry out some crazy stuff',\n );\n expect(portalNode.innerHTML).toBe('
    InvisiblePortalCreator
    ');\n });\n\n it('Should render deeply nested fragment', () => {\n function Fragmenter2() {\n return createElement(\n Fragment,\n null,\n createElement(\n Fragment,\n null,\n createElement(\n Fragment,\n null,\n createElement(\n Fragment,\n null,\n createElement(\n Fragment,\n null,\n createElement(\n Fragment,\n null,\n createElement(\n Fragment,\n null,\n createElement(Fragment, null, 'Okay!'),\n ),\n ),\n ),\n ),\n ),\n ),\n );\n }\n\n render(createElement(Fragmenter2, null), container);\n\n expect(container.innerHTML).toBe('Okay!');\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should append DOM nodes to correct position when component root Fragmnet change', () => {\n const TestRoot = class TestRoot extends Component {\n render() {\n return createElement(Fragment, null, this.props.children);\n }\n };\n\n render(\n createElement(\n 'div',\n null,\n createElement(\n TestRoot,\n null,\n createElement('div', null, '1'),\n createElement('div', null, '2'),\n ),\n createElement(\n TestRoot,\n null,\n createElement('span', null, 'Ok'),\n createElement('span', null, 'Test'),\n ),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    1
    2
    OkTest
    ',\n );\n\n render(\n createElement(\n 'div',\n null,\n createElement(\n TestRoot,\n null,\n createElement('div', null, '1'),\n createElement('div', null, '2'),\n createElement('div', null, '3'),\n createElement('div', null, '4'),\n ),\n createElement(TestRoot, null, createElement('div', null, 'Other')),\n ),\n container,\n );\n expect(container.innerHTML).toBe(\n '
    1
    2
    3
    4
    Other
    ',\n );\n });\n\n it('Should not clear whole parent element when fragment children are cleared', () => {\n const TestRoot = class TestRoot extends Component {\n render() {\n return createElement(Fragment, null, this.props.children);\n }\n };\n\n render(\n createElement(\n 'div',\n null,\n createElement(\n TestRoot,\n null,\n createElement('div', null, '1'),\n createElement('div', null, '2'),\n ),\n createElement(\n TestRoot,\n null,\n createElement('span', null, 'Ok'),\n createElement('span', null, 'Test'),\n ),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe(\n '
    1
    2
    OkTest
    ',\n );\n\n render(\n createElement(\n 'div',\n null,\n createElement(\n TestRoot,\n null,\n createElement('div', null, '1'),\n createElement('div', null, '2'),\n createElement('div', null, '3'),\n createElement('div', null, '4'),\n ),\n createElement(TestRoot, null),\n ),\n container,\n );\n expect(container.innerHTML).toBe(\n '
    1
    2
    3
    4
    ',\n );\n });\n\n it('Should move fragment and all its contents when using Fragment long syntax with keys', () => {\n let unmountCounter = 0;\n let mountCounter = 0;\n\n const TestLifecycle = class TestLifecycle extends Component {\n componentWillUnmount() {\n unmountCounter++;\n }\n\n componentWillMount() {\n mountCounter++;\n }\n\n render() {\n return createElement(Fragment, null, this.props.children);\n }\n };\n\n render(\n createElement(\n 'div',\n null,\n createElement(\n Fragment,\n { key: '1' },\n createElement(TestLifecycle, null, '1a'),\n createElement(TestLifecycle, null, '1b'),\n ),\n createElement(\n Fragment,\n { key: '2' },\n createElement(TestLifecycle, null, '2a'),\n createElement(TestLifecycle, null, '2b'),\n ),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('
    1a1b2a2b
    ');\n expect(unmountCounter).toBe(0);\n expect(mountCounter).toBe(4);\n\n render(\n createElement(\n 'div',\n null,\n createElement(\n Fragment,\n { key: '2' },\n createElement(TestLifecycle, null, '2a'),\n createElement(TestLifecycle, null, '2b'),\n createElement(TestLifecycle, null, '2c'),\n ),\n createElement(\n Fragment,\n { key: '1' },\n createElement(TestLifecycle, null, '1a'),\n createElement(TestLifecycle, null, '1b'),\n ),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('
    2a2b2c1a1b
    ');\n expect(unmountCounter).toBe(0);\n expect(mountCounter).toBe(5);\n\n render(\n createElement(\n 'div',\n null,\n createElement(\n Fragment,\n { key: '3' },\n createElement(TestLifecycle, null, '3a'),\n createElement(TestLifecycle, null, '3b'),\n createElement(TestLifecycle, null, '3c'),\n ),\n createElement(\n Fragment,\n { key: '2' },\n createElement(TestLifecycle, null, '2a'),\n createElement(TestLifecycle, null, '2Patched'),\n ),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('
    3a3b3c2a2Patched
    ');\n expect(unmountCounter).toBe(3);\n expect(mountCounter).toBe(8);\n });\n\n it('Should unmount empty fragments', () => {\n render(\n createElement(Fragment, null, createElement(Fragment, null)),\n container,\n );\n\n expect(container.innerHTML).toBe('');\n\n render(\n createElement(Fragment, null, createElement('div', null)),\n container,\n );\n\n expect(container.innerHTML).toBe('
    ');\n\n render(\n createElement(Fragment, null, createElement(Fragment, null)),\n container,\n );\n\n expect(container.innerHTML).toBe('');\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should be possible to replace last element in fragment', () => {\n render(\n createElement(\n Fragment,\n null,\n createElement(\n Fragment,\n null,\n createElement('span', null, '1a'),\n createElement('span', null, '1b'),\n createElement('div', null, '1c'),\n ),\n createElement(\n Fragment,\n null,\n createElement('span', null, '2a'),\n createElement('span', null, '2b'),\n createElement('span', null, '2c'),\n ),\n createElement(Fragment, null),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe(\n '1a1b
    1c
    2a2b2c',\n );\n\n render(\n createElement(\n Fragment,\n null,\n createElement(\n Fragment,\n null,\n createElement('span', null, '1a'),\n createElement('span', null, '1c'),\n ),\n createElement(\n Fragment,\n null,\n createElement('span', null, '2a'),\n createElement('span', null, '2b'),\n createElement('span', null, '2c'),\n ),\n createElement(Fragment, null),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe(\n '1a1c2a2b2c',\n );\n\n render(\n createElement(Fragment, null, createElement(Fragment, null)),\n container,\n );\n\n expect(container.innerHTML).toBe('');\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should mount Fragment with invalid children', () => {\n render(createElement(Fragment, null, null, undefined), container);\n\n expect(container.innerHTML).toBe('');\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should mount Fragment with invalid children #2', () => {\n function Foobar() {\n return null;\n }\n\n render(\n createElement(\n Fragment,\n null,\n null,\n createElement(Foobar, null),\n undefined,\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('');\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should mount Fragment with invalid children #2', () => {\n let add = false;\n\n function Foobar() {\n if (add) {\n return createElement('div', null, 'Ok');\n }\n return null;\n }\n\n render(\n createElement(\n Fragment,\n null,\n null,\n createElement(Foobar, null),\n undefined,\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('');\n\n add = true;\n\n render(\n createElement(\n Fragment,\n null,\n null,\n createElement(Foobar, null),\n undefined,\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('
    Ok
    ');\n });\n\n it('Should be possible to update from 0 to 1', () => {\n function Foobar() {\n return createElement('div', null, 'Ok');\n }\n\n let content: (VNode | null)[] = [null];\n\n render(\n createElement(\n Fragment,\n null,\n createElement('span', null, '1'),\n createElement(Fragment, null, content),\n createElement('span', null, '2'),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('12');\n\n content = [createElement(Foobar, null)];\n\n render(\n createElement(\n Fragment,\n null,\n createElement('span', null, '1'),\n createElement(Fragment, null, content),\n createElement('span', null, '2'),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe(\n '1
    Ok
    2',\n );\n });\n\n it('Should be possible to update from 0 to 1 fragment -> fragment', () => {\n function Foobar() {\n return createElement('div', null, 'Ok');\n }\n\n let content: (VNode | null)[] = [];\n\n render(\n createElement(\n Fragment,\n null,\n createElement('span', null, '1'),\n createElement(Fragment, null, content),\n createElement('span', null, '2'),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('12');\n\n content = [createElement(Fragment, null, createElement(Foobar, null))];\n\n render(\n createElement(\n Fragment,\n null,\n createElement('span', null, '1'),\n createElement(Fragment, null, content),\n createElement('span', null, '2'),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe(\n '1
    Ok
    2',\n );\n });\n\n it('Should be possible to mount and patch single component fragment children', () => {\n let counter = 0;\n\n const Foobar = class Foobar extends Component {\n componentWillMount() {\n counter++;\n }\n\n render() {\n return null;\n }\n };\n\n render(createElement(Fragment, null), container);\n\n render(\n createElement(Fragment, null, createElement(Foobar, null)),\n container,\n );\n\n expect(container.innerHTML).toBe('');\n expect(counter).toBe(1);\n\n render(\n createElement(\n Fragment,\n null,\n createElement('div', null, 'Ok'),\n createElement(Foobar, null),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('
    Ok
    ');\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should be possible to mount and patch single component fragment children - variation 2', () => {\n let counter = 0;\n\n const Foobar = class Foobar extends Component {\n componentWillMount() {\n counter++;\n }\n\n render() {\n return null;\n }\n };\n\n let nodes: (VNode | null)[] = [];\n\n render(createElement(Fragment, null, nodes), container);\n\n nodes = [createElement(Foobar, null)];\n\n render(createElement(Fragment, null, nodes), container);\n\n nodes = [\n createElement(Foobar, null),\n createElement(Foobar, null),\n createElement(Foobar, null),\n ];\n\n render(createElement(Fragment, null, nodes), container);\n\n nodes = [];\n\n render(createElement(Fragment, null, nodes), container);\n\n expect(container.innerHTML).toBe('');\n expect(counter).toBe(3);\n\n render(\n createElement(\n Fragment,\n null,\n createElement('div', null, 'Ok'),\n createElement(Foobar, null),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('
    Ok
    ');\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should be possible to patch single fragment child component', () => {\n let counter = 0;\n\n const Foobar = class Foobar extends Component {\n componentWillMount() {\n counter++;\n }\n\n render() {\n return null;\n }\n };\n\n render(\n createElement(\n Fragment,\n null,\n createElement(Fragment, null, createElement(Foobar, null)),\n createElement(Fragment, null, createElement(Foobar, null)),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('');\n expect(counter).toBe(2);\n\n render(\n createElement(\n Fragment,\n null,\n createElement(Fragment, null),\n createElement(Fragment, null, createElement(Foobar, null)),\n createElement(Fragment, null, createElement(Foobar, null)),\n createElement(Fragment, null),\n createElement(Foobar, null),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('');\n expect(counter).toBe(4);\n\n render(\n createElement(\n Fragment,\n null,\n createElement('div', null, 'Ok'),\n createElement(Foobar, null),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('
    Ok
    ');\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should be possible to mount and patch single component fragment children', () => {\n const Foobar = class Foobar extends Component {\n render() {\n return null;\n }\n };\n\n render(\n createElement(Fragment, null, createElement(Foobar, null)),\n container,\n );\n\n render(\n createElement(Fragment, null, createElement(Foobar, null)),\n container,\n );\n\n expect(container.innerHTML).toBe('');\n\n render(\n createElement(\n Fragment,\n null,\n createElement('div', null, 'Ok'),\n createElement(Foobar, null),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('
    Ok
    ');\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should be possible to mount and patch single component fragment children #2', () => {\n const Foobar = class Foobar extends Component {\n render() {\n return null;\n }\n };\n\n render(createElement(Fragment, null, null), container);\n\n render(\n createElement(Fragment, null, createElement(Foobar, null)),\n container,\n );\n\n expect(container.innerHTML).toBe('');\n\n render(\n createElement(\n Fragment,\n null,\n createElement('div', null, 'Ok'),\n createElement(Foobar, null),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('
    Ok
    ');\n\n render(null, container);\n\n expect(container.innerHTML).toBe('');\n });\n\n it('Should mount fragment children to correct position Github #1412', () => {\n const f = (...xs) => createFragment(xs, 0);\n\n interface ArticlesState {\n articles: string[];\n sections: string[];\n }\n\n class Articles extends Component {\n state: ArticlesState;\n\n constructor() {\n super();\n this.state = {\n articles: ['id2', 'id3'],\n sections: ['id0', 'id1'],\n };\n }\n\n componentDidMount() {\n expect(container.innerHTML).toEqual(\n '

    App

    id0

    id2
    id3

    id1

    id2
    id3
    2018
    ',\n );\n\n this.setState({ sections: [] });\n\n rerender();\n\n expect(container.innerHTML).toEqual(\n '

    App

    2018
    ',\n );\n\n this.setState({ articles: ['id2', 'id3'], sections: ['id0', 'id1'] });\n\n rerender();\n\n expect(container.innerHTML).toEqual(\n '

    App

    id0

    id2
    id3

    id1

    id2
    id3
    2018
    ',\n );\n }\n\n render() {\n return f(\n this.state.sections.map((section) =>\n createElement('section', null, [\n createElement('h2', null, section),\n this.state.articles.map((article) =>\n f(\n article === 'id2' && createElement('aside', null, 'Today'),\n createElement('article', null, article),\n ),\n ),\n ]),\n ),\n );\n }\n }\n\n class App extends Component {\n render() {\n return f(\n createElement('h1', null, 'App'),\n createElement(Articles),\n createElement('footer', null, '2018'),\n );\n }\n }\n\n render(createElement(App), container);\n\n rerender();\n });\n\n it('Should re-mount fragment children to correct position when edge is component', () => {\n const f = (...xs) => createFragment(xs, 0);\n\n interface ArticlesState {\n articles: string[];\n sections: string[];\n }\n\n class Articles extends Component {\n state: ArticlesState;\n constructor() {\n super();\n this.state = { articles: ['id2', 'id3'], sections: ['id0', 'id1'] };\n }\n\n componentDidMount() {\n expect(container.innerHTML).toEqual(\n '

    App

    id0

    id2
    id3
    end

    id1

    id2
    id3
    end
    2018
    1
    2
    ',\n );\n\n this.setState({ sections: [] });\n\n rerender();\n\n expect(container.innerHTML).toEqual(\n '

    App

    2018
    1
    2
    ',\n );\n\n this.setState({ articles: ['id2', 'id3'], sections: ['id0', 'id1'] });\n\n rerender();\n\n expect(container.innerHTML).toEqual(\n '

    App

    id0

    id2
    id3
    end

    id1

    id2
    id3
    end
    2018
    1
    2
    ',\n );\n }\n\n render() {\n return f(\n this.state.sections.map((section) =>\n createElement(Section, {\n children: [\n createElement('h2', null, section),\n this.state.articles.map((article) =>\n f(\n article === 'id2' &&\n createElement('aside', null, 'Today'),\n createElement('article', null, article),\n ),\n ),\n ],\n }),\n ),\n );\n }\n }\n\n function Section(props) {\n return f(\n createElement('section', null, props.children),\n createElement('div', null, 'end'),\n );\n }\n\n function EdgeComponent() {\n return f(\n createElement('footer', null, '2018'),\n createElement('div', null, '1'),\n createElement('div', null, '2'),\n );\n }\n\n class App extends Component {\n render() {\n return f(\n createElement('h1', null, 'App'),\n createElement(Articles),\n createElement(EdgeComponent),\n );\n }\n }\n\n render(createElement(App), container);\n\n rerender();\n });\n\n it('Should append more fragment children to correct position when edge is component', () => {\n const f = (...xs) => createFragment(xs, 0);\n\n interface ArticlesState {\n articles: string[];\n sections: string[];\n }\n\n class Articles extends Component {\n state: ArticlesState;\n constructor() {\n super();\n this.state = { articles: ['id2', 'id3'], sections: ['id0', 'id1'] };\n }\n\n componentDidMount() {\n expect(container.innerHTML).toEqual(\n '

    App

    id0

    id2
    id3
    end

    id1

    id2
    id3
    end
    2018
    1
    2
    ',\n );\n\n this.setState({ articles: [], sections: ['id0'] });\n\n rerender();\n\n expect(container.innerHTML).toEqual(\n '

    App

    id0

    end
    2018
    1
    2
    ',\n );\n\n this.setState({ articles: ['id2', 'id3'], sections: ['id0', 'id1'] });\n\n rerender();\n\n expect(container.innerHTML).toEqual(\n '

    App

    id0

    id2
    id3
    end

    id1

    id2
    id3
    end
    2018
    1
    2
    ',\n );\n }\n\n render() {\n return f(\n this.state.sections.map((section) =>\n createElement(Section, {\n children: [\n createElement('h2', null, section),\n this.state.articles.map((article) =>\n f(\n article === 'id2' &&\n createElement('aside', null, 'Today'),\n createElement('article', null, article),\n ),\n ),\n ],\n }),\n ),\n );\n }\n }\n\n function Section(props) {\n return f(\n createElement('section', null, props.children),\n createElement('div', null, 'end'),\n );\n }\n\n function EdgeComponent() {\n return f(\n createElement('footer', null, '2018'),\n createElement('div', null, '1'),\n createElement('div', null, '2'),\n );\n }\n\n class App extends Component {\n render() {\n return f(\n createElement('h1', null, 'App'),\n createElement(Articles),\n createElement(EdgeComponent),\n );\n }\n }\n\n render(createElement(App), container);\n\n rerender();\n });\n });\n});\n" }, { "path": "packages/inferno-create-element/__tests__/createElement.spec.ts", "content": "import {\n Component,\n createRef,\n forwardRef,\n Fragment,\n type Inferno,\n type RefObject,\n render,\n} from 'inferno';\nimport { createElement } from 'inferno-create-element';\n\ndescribe('CreateElement (non-JSX)', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n afterEach(function () {\n render(null, container);\n container.innerHTML = '';\n document.body.removeChild(container);\n });\n\n it('Should handle events correctly when having multiple children', () => {\n let triggered = false;\n\n const App = () => {\n return createElement(\n 'div',\n null,\n createElement('div', { className: 'title' }, 'Example'),\n createElement(\n 'button',\n {\n type: 'button',\n onClick: () => {\n triggered = !triggered;\n },\n },\n 'Do a thing',\n ),\n );\n };\n\n render(App(), container);\n expect(container.innerHTML).toBe(\n '
    Example
    ',\n );\n expect(triggered).toBe(false);\n\n const buttons = container.querySelectorAll('button');\n for (const button of buttons) {\n button.click();\n }\n\n expect(triggered).toBe(true);\n });\n\n it('Should handle events correctly when having single child', () => {\n let triggered = false;\n\n const app = () => {\n return createElement(\n 'div',\n null,\n createElement(\n 'button',\n {\n type: 'button',\n onClick: () => {\n triggered = !triggered;\n },\n },\n 'Do a thing',\n ),\n );\n };\n\n render(app(), container);\n expect(container.innerHTML).toBe(\n '
    ',\n );\n expect(triggered).toBe(false);\n\n const buttons = container.querySelectorAll('button');\n for (const button of buttons) {\n button.click();\n }\n\n expect(triggered).toBe(true);\n });\n\n it('Should allow passing childs through \"children\" property (native component)', () => {\n const app = () => {\n return createElement(\n 'div',\n null,\n createElement('button', {\n type: 'button',\n children: ['Do a thing'],\n }),\n );\n };\n\n render(app(), container);\n expect(container.innerHTML).toBe(\n '
    ',\n );\n });\n\n it('Should allow passing childs through \"children\" property (custom component)', () => {\n const Button = (props) => createElement('button', props);\n const app = () => {\n return createElement(\n 'div',\n null,\n createElement(Button, {\n type: 'button',\n children: ['Do a thing'],\n }),\n );\n };\n\n render(app(), container);\n expect(container.innerHTML).toBe(\n '
    ',\n );\n });\n\n it('Should handle node with hooks and key', (done) => {\n const node = () => createElement('div', { key: 'key2' }, 'Hooks');\n const app = createElement(node, {\n key: 'key1',\n onComponentDidMount(domNode) {\n expect(app.key).toBe('key1');\n expect(domNode.tagName).toBe('DIV');\n done();\n },\n });\n\n render(app, container);\n expect(container.innerHTML).toBe('
    Hooks
    ');\n });\n\n it('Should handle node with children but no props', () => {\n const node = () => createElement('div', null, 'Hooks');\n const app = createElement(node, null, 'Hooks');\n\n render(app, container);\n expect(container.innerHTML).toBe('
    Hooks
    ');\n });\n\n it('Should handle node with refs', (done) => {\n let myRef: any = 'myRef';\n\n const app = () => {\n const node: Inferno.StatelessComponent = () =>\n createElement('a', {\n ref: (c) => (myRef = c),\n });\n\n return createElement(node, {\n onComponentDidMount() {\n expect(myRef.tagName).toBe('A');\n done();\n },\n });\n };\n render(createElement(app, null), container);\n });\n\n describe('Fragments', () => {\n it('Should render Fragment with key', () => {\n render(\n createElement(\n Fragment,\n { key: 'first' },\n createElement('div', null, 'Ok'),\n createElement('span', null, 'Test'),\n ),\n container,\n );\n\n expect(container.innerHTML).toBe('
    Ok
    Test');\n\n const div = container.querySelector('div');\n const span = container.querySelector('span');\n\n render(\n createElement(\n Fragment,\n { key: 'foobar' },\n createElement('div', null, 'Ok'),\n createElement('span', null, 'Test'),\n ),\n container,\n );\n\n // Verify key works\n expect(container.innerHTML).toBe('
    Ok
    Test');\n\n expect(div).not.toBe(container.querySelector('div'));\n expect(span).not.toBe(container.querySelector('span'));\n });\n });\n\n it('Should be possible to forward createRef', () => {\n // TODO: Investigate how these refs should be typed\n const FancyButton = forwardRef(\n (props, ref: any) =>\n createElement(\n 'button',\n { ref, className: 'FancyButton' },\n props.children,\n ),\n );\n\n expect(FancyButton.render).toBeDefined();\n\n class Hello extends Component {\n btn: RefObject;\n\n constructor(props) {\n super(props);\n\n // You can now get a ref directly to the DOM button:\n this.btn = createRef();\n }\n\n componentDidMount() {\n expect(this.btn.current).toBe(container.querySelector('button'));\n }\n\n render() {\n return createElement(\n FancyButton,\n { ref: this.btn as any },\n 'Click me!',\n );\n }\n }\n\n render(createElement(Hello), container);\n\n expect(container.innerHTML).toBe(\n '',\n );\n });\n});\n" }, { "path": "packages/inferno-create-element/__tests__/createElementTyped.spec.tsx", "content": "import { Component, render } from 'inferno';\nimport { createElement } from 'inferno-create-element';\n\ndescribe('CreateElement (non-JSX)', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n afterEach(function () {\n render(null, container);\n container.innerHTML = '';\n document.body.removeChild(container);\n });\n\n it('Should render zero children', () => {\n const App = () => createElement('div', null);\n render(App(), container);\n });\n\n it('Should render null children', () => {\n const App = () => createElement('div', null, null);\n render(App(), container);\n });\n\n it('Should render undefined children', () => {\n const App = () => createElement('div', null, undefined);\n render(App(), container);\n });\n\n it('Should render one child', () => {\n const App = () =>\n createElement(\n 'div',\n null,\n createElement('div', { className: 'title' }, 'Example'),\n );\n\n render(App(), container);\n });\n\n it('Should render multiple children', () => {\n const App = () =>\n createElement(\n 'div',\n null,\n createElement('div', { className: 'title' }, 'Example'),\n createElement('button', { type: 'button' }, 'Do a thing'),\n );\n\n render(App(), container);\n });\n\n it('Should render array of children', () => {\n const App = () =>\n createElement('div', null, [\n createElement('div', { className: 'title' }, 'Example'),\n createElement('button', { type: 'button' }, 'Do a thing'),\n ]);\n\n render(App(), container);\n });\n\n it('Should check component props', () => {\n interface MyComponentProps {\n className: string;\n }\n\n class App extends Component {\n public render() {\n return createElement(\n 'div',\n { className: this.props.className },\n createElement('div', { className: 'title' }, 'Example'),\n createElement('hr'),\n );\n }\n }\n\n render(createElement(App, { className: 'App' }), container);\n\n /** Should be an error if uncommented: */\n // render(createElement(App, { className: 1 }), container);\n // render(createElement(App, {}), container);\n\n /** Would like to be an error, but it'd break createElement('hr'): */\n render(createElement(App), container);\n });\n\n it('Should check functional component props', () => {\n const App = ({ className }: { className: string }) =>\n createElement(\n 'div',\n { className },\n createElement('div', { className: 'title' }, 'Example'),\n createElement('hr'),\n );\n\n render(createElement(App, { className: 'App' }), container);\n\n /** Should be an error if uncommented: */\n // render(createElement(App, { className: 1 }), container);\n // render(createElement(App, {}), container);\n\n /** Would like to be an error but it'd break createElement('hr'): */\n render(createElement(App), container);\n });\n});\n" }, { "path": "packages/inferno-create-element/__tests__/creation.spec.ts", "content": "import { render } from 'inferno';\nimport { createElement } from 'inferno-create-element';\n\ndescribe('Creation - (non-JSX)', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n afterEach(function () {\n render(null, container);\n container.innerHTML = '';\n document.body.removeChild(container);\n });\n\n const tests = [\n {\n description: 'should render div with span child',\n template: () => {\n return createElement('div', null, createElement('span'));\n },\n tagName: 'div',\n children: 1,\n textContent: '',\n },\n {\n description: 'should render span with span child',\n template: () => createElement('span', null, createElement('span')),\n tagName: 'span',\n children: 1,\n textContent: '',\n },\n {\n description: 'should render div with two span children',\n template: () =>\n createElement('div', null, createElement('div'), createElement('div')),\n tagName: 'div',\n children: 2,\n textContent: '',\n },\n {\n description:\n 'should render div with three span children and unset middle child',\n template: () =>\n createElement(\n 'div',\n null,\n createElement('span'),\n null,\n createElement('span'),\n ),\n tagName: 'div',\n children: 2,\n textContent: '',\n },\n {\n description:\n 'should render div with three span children and unset first, and middle child',\n template: () =>\n createElement('div', null, null, null, createElement('span')),\n tagName: 'div',\n children: 1,\n textContent: '',\n },\n {\n description:\n 'should render div with three span children and unset first, and middle child',\n template: () => createElement('div', null, null, null, null),\n tagName: 'div',\n children: 0,\n textContent: '',\n },\n {\n description: 'should render div with two null children and one text node',\n template: () => createElement('div', null, null, 'Baboy', null),\n tagName: 'div',\n children: 1,\n textContent: 'Baboy',\n },\n {\n description: 'should render div with one textNode and a span children',\n template: () =>\n createElement('div', null, 'Hello!', null, createElement('span')),\n tagName: 'div',\n children: 2,\n textContent: 'Hello!',\n },\n {\n description: 'should render div with two textNodes and a span children',\n template: () =>\n createElement(\n 'div',\n null,\n 'Hello, ',\n null,\n 'World!',\n createElement('span'),\n ),\n tagName: 'div',\n children: 3,\n textContent: 'Hello, World!',\n },\n {\n description:\n 'should render div with two textNodes and a two span children',\n template: () =>\n createElement(\n 'div',\n null,\n 'Hello, ',\n createElement('span'),\n 'World!',\n createElement('span'),\n ),\n tagName: 'div',\n children: 4,\n textContent: 'Hello, World!',\n },\n {\n description:\n 'should render div with two textNodes and one span children, and span with textNode',\n template: () =>\n createElement(\n 'div',\n null,\n 'Hello',\n createElement('span'),\n ', ',\n createElement('span', null, 'World!'),\n ),\n tagName: 'div',\n children: 4,\n textContent: 'Hello, World!',\n },\n {\n description:\n 'should render div with tree null values in an array for children',\n template: () => createElement('div', null, null, null, null),\n tagName: 'div',\n children: 0,\n textContent: '',\n },\n {\n description:\n 'should render div with b child, and tree null values in an array for children',\n template: () =>\n createElement('div', null, createElement('b', null, null, null, null)),\n tagName: 'div',\n children: 1,\n textContent: '',\n },\n {\n description:\n 'should render div with b child, and number and two null values in an array for children',\n template: () =>\n createElement('div', null, createElement('b', null, null, 123, null)),\n tagName: 'div',\n children: 1,\n textContent: '123',\n },\n {\n description: 'should render empty div',\n template: () => createElement('div'),\n tagName: 'div',\n children: 0,\n textContent: '',\n },\n {\n description: 'should render empty span',\n template: () => createElement('span'),\n tagName: 'span',\n children: 0,\n textContent: '',\n },\n ];\n\n for (const test of tests) {\n it(test.description, () => {\n render(test.template(), container);\n expect(container.firstChild.nodeType).toBe(1);\n expect(container.firstChild.tagName.toLowerCase()).toBe(test.tagName);\n expect(container.firstChild.childNodes.length).toBe(test.children);\n expect(container.firstChild.textContent).toBe(test.textContent);\n\n render(test.template(), container);\n expect(container.firstChild.nodeType).toBe(1);\n expect(container.firstChild.tagName.toLowerCase()).toBe(test.tagName);\n expect(container.firstChild.childNodes.length).toBe(test.children);\n });\n }\n});\n" }, { "path": "packages/inferno-create-element/__tests__/elements.spec.jsx", "content": "import { render, createVNode } from 'inferno';\nimport { createElement } from 'inferno-create-element';\nimport { VNodeFlags } from 'inferno-vnode-flags';\n\ndescribe('Elements (JSX)', () => {\n let container;\n\n beforeEach(function () {\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n\n afterEach(function () {\n render(null, container);\n container.innerHTML = '';\n document.body.removeChild(container);\n });\n\n it('should render a simple div', () => {\n render(
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n render(
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n });\n\n it('should render a simple div with multiple children', () => {\n render(\n
    \n \n
    ,\n container,\n );\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('SPAN');\n render(\n
    \n \n
    ,\n container,\n );\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('SPAN');\n render(
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(0);\n render(\n
    \n \n \n \n \n \n
    ,\n container,\n );\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(5);\n expect(container.firstChild.firstChild.nodeName).toBe('SPAN');\n\n render(\n
    \n \n \n \n
    ,\n container,\n );\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(3);\n expect(container.firstChild.firstChild.nodeName).toBe('SPAN');\n render(undefined, container);\n render(\n
    \n \n Hello, World!\n \n
    ,\n container,\n );\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(3);\n expect(container.firstChild.firstChild.nodeName).toBe('SPAN');\n });\n\n it('should render a simple div with multiple children #2', () => {\n const items = [1, 2, 3];\n const header = 'Hello ';\n\n render(\n
    \n {header}\n {items}\n
    ,\n container,\n );\n expect(container.firstChild.innerHTML).toBe('Hello 123');\n\n render(\n
    \n {header}\n {[4, 5, 6]}\n
    ,\n container,\n );\n expect(container.firstChild.innerHTML).toBe('Hello 456');\n });\n\n it('should render a simple div with span child and dynamic id attribute', () => {\n render(
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(0);\n expect(container.firstChild.getAttribute('id')).toBe('hello');\n\n render(
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(0);\n expect(container.firstChild.getAttribute('id')).toBe(null);\n\n render(
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(0);\n expect(container.firstChild.getAttribute('class')).toBe('hello'); // class attribute exist!\n\n render(
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(0);\n expect(container.firstChild.getAttribute('id')).toBe('hello');\n\n // unset\n render(null, container);\n expect(container.nodeName).toBe('DIV');\n expect(container.childNodes.length).toBe(0);\n });\n\n it('should render a simple div with span child and various dynamic attributes', () => {\n render(
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(0);\n expect(container.firstChild.getAttribute('id')).toBe('hello');\n\n render(
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(0);\n\n render(
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(0);\n expect(container.firstChild.getAttribute('class')).toBe('hello');\n\n render(null, container);\n expect(container.nodeName).toBe('DIV');\n expect(container.childNodes.length).toBe(0);\n expect(container.innerHTML).toBe('');\n });\n\n it('should render a simple div with dynamic span child', () => {\n const child = ;\n\n render(
    {undefined}
    , container);\n render(
    {child}
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('SPAN');\n render(
    {null}
    , container);\n render(
    {child}
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('SPAN');\n // unset\n render(null, container);\n expect(container.nodeName).toBe('DIV');\n expect(container.childNodes.length).toBe(0);\n expect(container.innerHTML).toBe('');\n });\n\n it('should render a advanced div with static child and dynamic attributes', () => {\n let attrs;\n\n attrs = 'id#1';\n\n render(\n
    \n
    \n
    ,\n container,\n );\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.firstChild.getAttribute('id')).toBe('id#1');\n\n attrs = null;\n\n render(\n
    \n
    \n
    ,\n container,\n );\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.firstChild.getAttribute('id')).toBe(null);\n\n attrs = undefined;\n\n render(
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(0);\n expect(container.firstChild.getAttribute('id')).toBe(null);\n\n attrs = 'id#4';\n\n render(\n
    \n
    \n
    ,\n container,\n );\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.firstChild.getAttribute('id')).toBe('id#4');\n\n attrs = 13 - (44 * 4) / 4;\n\n let b = Hello, World!;\n let n = {b};\n\n render(\n
    \n \n
    {n}
    \n     \n
    ,\n container,\n );\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.getAttribute('class')).toBe('Hello, World!');\n expect(container.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('SPAN');\n expect(container.firstChild.firstChild.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.firstChild.firstChild.getAttribute('id')).toBe(\n '-31',\n );\n expect(container.firstChild.firstChild.firstChild.firstChild.nodeName).toBe(\n 'N',\n );\n expect(\n container.firstChild.firstChild.firstChild.firstChild.firstChild.nodeName,\n ).toBe('B');\n expect(\n container.firstChild.firstChild.firstChild.firstChild.firstChild\n .innerHTML,\n ).toBe('Hello, World!');\n expect(\n container.firstChild.firstChild.firstChild.firstChild.firstChild.getAttribute(\n 'class',\n ),\n ).toBe('123');\n\n attrs = 13 - (44 * 4) / 4;\n\n b = Hello, World!;\n n = {b};\n\n render(\n
    \n \n
    {n}
    \n     \n
    ,\n container,\n );\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.getAttribute('class')).toBe('Hello, World!');\n expect(container.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('SPAN');\n expect(container.firstChild.firstChild.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.firstChild.firstChild.getAttribute('id')).toBe(\n '-31',\n );\n expect(container.firstChild.firstChild.firstChild.firstChild.nodeName).toBe(\n 'N',\n );\n expect(\n container.firstChild.firstChild.firstChild.firstChild.firstChild.nodeName,\n ).toBe('B');\n expect(\n container.firstChild.firstChild.firstChild.firstChild.firstChild\n .innerHTML,\n ).toBe('Hello, World!');\n expect(\n container.firstChild.firstChild.firstChild.firstChild.firstChild.getAttribute(\n 'class',\n ),\n ).toBe('1243');\n\n // unset\n render(null, container);\n expect(container.nodeName).toBe('DIV');\n expect(container.childNodes.length).toBe(0);\n\n attrs = 'id#444';\n\n render(\n
    \n
    \n
    ,\n container,\n );\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.getAttribute('class')).toBe('Hello, Dominic');\n expect(container.firstChild.getAttribute('id')).toBe('id#444');\n expect(container.firstChild.firstChild.getAttribute('id')).toBe('id#444');\n\n attrs = 'id#' + 333 - 333 / 3;\n\n render(\n
    \n
    \n
    ,\n container,\n );\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.getAttribute('class')).toBe('Hello, Dominic');\n expect(container.firstChild.getAttribute('id')).toBe('NaN');\n expect(container.firstChild.firstChild.getAttribute('id')).toBe('NaN');\n\n // unset\n render(null, container);\n expect(container.nodeName).toBe('DIV');\n expect(container.childNodes.length).toBe(0);\n });\n\n it('should render a simple div with dynamic span child and update to div child', () => {\n let child = ;\n\n render(
    {child}
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('SPAN');\n\n render(
    , container);\n\n child =
    ;\n\n render(
    {child}
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('DIV');\n\n child = (\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n );\n\n render(
    {child}
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.firstChild.childNodes.length).toBe(9);\n expect(container.firstChild.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.firstChild.firstChild.nodeName).toBe('DIV');\n child =
    Hello, World!
    ;\n\n render(
    {child}
    , container);\n expect(container.firstChild.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.firstChild.innerHTML).toBe('Hello, World!');\n\n render(
    {null}
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n\n render(
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n });\n\n it('should render and unset a simple div with dynamic span child', () => {\n let child;\n\n child = (\n \n \n \n \n );\n\n render(
    {child}
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.firstChild.childNodes.length).toBe(2);\n expect(container.firstChild.firstChild.nodeName).toBe('SPAN');\n expect(container.firstChild.firstChild.firstChild.nodeName).toBe('SPAN');\n\n render(
    {null}
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n\n const divs =
    ;\n\n child = (\n \n {divs}\n \n );\n\n render(
    {child}
    , container);\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.childNodes.length).toBe(1);\n expect(container.firstChild.firstChild.nodeName).toBe('SPAN');\n expect(container.firstChild.firstChild.firstChild.nodeName).toBe('SPAN');\n expect(container.firstChild.firstChild.firstChild.firstChild.nodeName).toBe(\n 'DIV',\n );\n });\n\n it('should render a simple div children set to undefined', () => {\n render(
    {undefined}
    , container);\n\n expect(container.nodeName).toBe('DIV');\n expect(container.firstChild.textContent).toBe('');\n\n render(
    {undefined}
    , container);\n\n expect(container.nodeName).toBe('DIV');\n expect(container.firstChild.textContent).toBe('');\n });\n\n it('should render a simple div children set to null', () => {\n render(
    {null}
    , container);\n\n expect(container.nodeName).toBe('DIV');\n expect(container.firstChild.textContent).toBe('');\n\n render(
    {null}
    , container);\n\n expect(container.nodeName).toBe('DIV');\n expect(container.firstChild.textContent).toBe('');\n\n // unset\n render(null, container);\n expect(container.nodeName).toBe('DIV');\n expect(container.childNodes.length).toBe(0);\n });\n\n it('should render a simple div children set to null', () => {\n render(\n
    \n
    {null}
    \n
    ,\n container,\n );\n\n expect(container.nodeName).toBe('DIV');\n expect(container.firstChild.firstChild.textContent).toBe('');\n\n render(\n
    \n
    {null}
    \n
    ,\n container,\n );\n\n expect(container.nodeName).toBe('DIV');\n expect(container.firstChild.firstChild.textContent).toBe('');\n });\n\n it('should render a double div and a text node', () => {\n render(
    {
    Hello, World!
    }
    , container);\n\n expect(container.nodeName).toBe('DIV');\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.textContent).toBe('Hello, World!');\n\n render(
    {null}
    , container);\n\n render(
    {
    Hello, Inferno!
    }
    , container);\n\n expect(container.nodeName).toBe('DIV');\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.textContent).toBe('Hello, Inferno!');\n });\n\n it('should render a single div with text node', () => {\n render(\n
    \n \n \n
    ,\n container,\n );\n\n expect(container.nodeName).toBe('DIV');\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.firstChild.textContent).toBe('');\n\n // unset\n render(null, container);\n expect(container.nodeName).toBe('DIV');\n expect(container.childNodes.length).toBe(0);\n });\n\n it('should render a simple div with a text node', () => {\n render(
    Hello, world!
    , container);\n\n expect(container.nodeName).toBe('DIV');\n expect(container.firstChild.textContent).toBe('Hello, world!');\n\n render(
    Hello, world! 2
    , container);\n\n expect(container.nodeName).toBe('DIV');\n expect(container.firstChild.textContent).toBe('Hello, world! 2');\n });\n\n it('should render a simple div with attributes', () => {\n render(
    Hello, world!
    , container);\n\n expect(container.nodeName).toBe('DIV');\n expect(container.firstChild.getAttribute('id')).toBe('123');\n expect(container.firstChild.textContent).toBe('Hello, world!');\n\n render(
    Hello, world! 2
    , container);\n\n expect(container.nodeName).toBe('DIV');\n expect(container.firstChild.getAttribute('id')).toBe('foo');\n expect(container.firstChild.textContent).toBe('Hello, world! 2');\n });\n\n it('should render a simple div with inline style', () => {\n render(\n
    Hello, world!
    ,\n container,\n );\n\n expect(container.nodeName).toBe('DIV');\n\n render(
    Hello, world! 2
    , container);\n\n expect(container.nodeName).toBe('DIV');\n\n // unset\n render(null, container);\n expect(container.nodeName).toBe('DIV');\n expect(container.childNodes.length).toBe(0);\n });\n\n it('should render \"className\" attribute', () => {\n render(
    , container);\n expect(container.firstChild.getAttribute('class')).toEqual('123');\n\n render(
    , container);\n expect(container.firstChild.className).toEqual('');\n\n render(
    , container);\n expect(container.firstChild.className).toEqual('');\n\n render(
    , container);\n expect(container.firstChild.className).toEqual('Inferno rocks!');\n expect(container.firstChild.innerHTML).toBe('');\n });\n\n it(\"shouldn't render null value\", () => {\n render(, container);\n\n expect(container.value).toBe(undefined);\n expect(container.innerHTML).toBe('');\n\n render(, container);\n expect(container.value).toBe(undefined);\n\n render(, container);\n expect(container.value).toBe(undefined);\n\n expect(container.innerHTML).toBe('');\n\n render(null, container);\n expect(container.nodeName).toBe('DIV');\n expect(container.childNodes.length).toBe(0);\n });\n\n it('should set values as properties by default', () => {\n render(, container);\n\n expect(container.firstChild.getAttribute('title')).toEqual('Tip!');\n expect(container.innerHTML).toBe('');\n\n render(, container);\n\n expect(container.firstChild.getAttribute('name')).toEqual('Tip!');\n expect(container.innerHTML).toBe('');\n\n render(, container);\n\n expect(container.firstChild.getAttribute('title')).toEqual('Tip!');\n expect(container.innerHTML).toBe('');\n });\n\n it('should render a simple div with dynamic values and props', () => {\n let val1, val2;\n\n val1 = 'Inferno';\n val2 = 'Sucks!';\n\n render(\n
    \n {val1}\n {val2}\n
    ,\n container,\n );\n\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.childNodes.length).toBe(1);\n expect(container.childNodes[0].childNodes[0].getAttribute('class')).toEqual(\n 'bar',\n );\n expect(container.childNodes[0].childNodes[0].textContent).toEqual(\n 'Inferno',\n );\n expect(container.childNodes[0].childNodes[1].getAttribute('class')).toEqual(\n 'yar',\n );\n expect(container.childNodes[0].childNodes[1].textContent).toEqual('Sucks!');\n\n render(\n
    \n {val1}\n {val2}\n
    ,\n container,\n );\n\n expect(container.firstChild.nodeName).toBe('DIV');\n expect(container.childNodes.length).toBe(1);\n expect(container.childNodes[0].childNodes[0].getAttribute('class')).toEqual(\n 'bar',\n );\n expect(container.childNodes[0].childNodes[0].textContent).toEqual(\n 'Inferno',\n );\n expect(container.childNodes[0].childNodes[1].getAttribute('class')).toEqual(\n 'yar',\n );\n expect(container.childNodes[0].childNodes[1].textContent).toEqual('Sucks!');\n });\n\n it('should properly render a input with download attribute', () => {\n let val1;\n\n val1 = 'false';\n\n render(, container);\n\n expect(container.firstChild.nodeName).toBe('INPUT');\n expect(container.childNodes.length).toBe(1);\n expect(container.firstChild.getAttribute('download')).toBe('false');\n\n val1 = 'true';\n\n render(, container);\n\n expect(container.firstChild.nodeName).toBe('INPUT');\n expect(container.childNodes.length).toBe(1);\n expect(container.firstChild.getAttribute('download')).toBe('true');\n });\n\n it('should properly render \"className\" property on a custom element', () => {\n render(, container);\n\n expect(container.firstChild.nodeName).toBe('CUSTOM-ELEM');\n expect(container.childNodes.length).toBe(1);\n expect(container.firstChild.getAttribute('class')).toBe('Hello, world!');\n\n render(, container);\n\n expect(container.firstChild.nodeName).toBe('CUSTOM-ELEM');\n expect(container.childNodes.length).toBe(1);\n expect(container.firstChild.getAttribute('class')).toBe('Hello, world!');\n });\n\n it('should properly render \"width\" and \"height\" attributes', () => {\n render(\"Smiley, container);\n\n expect(container.firstChild.nodeName).toBe('IMG');\n expect(container.childNodes.length).toBe(1);\n expect(container.firstChild.getAttribute('src')).toBe('');\n expect(container.firstChild.getAttribute('alt')).toBe('Smiley face');\n expect(container.firstChild.getAttribute('height')).toBe('42');\n expect(container.firstChild.getAttribute('width')).toBe('42');\n\n render(\n \"Smiley,\n container,\n );\n\n expect(container.firstChild.nodeName).toBe('IMG');\n expect(container.childNodes.length).toBe(1);\n expect(container.firstChild.getAttribute('src')).toBe('');\n expect(container.firstChild.getAttribute('alt')).toBe('Smiley face');\n expect(container.firstChild.getAttribute('height')).toBe('42');\n expect(container.firstChild.getAttribute('width')).toBe('42');\n });\n\n it('should properly render \"width\" and \"height\" attributes #2', () => {\n render(\n ,\n container,\n );\n\n expect(container.firstChild.nodeName).toBe('INPUT');\n expect(container.childNodes.length).toBe(1);\n expect(container.firstChild.getAttribute('type')).toBe('file');\n\n let multipleValue = container.firstChild.multiple;\n\n // Inferno sets multiple using dom property always to boolean,\n // but some browsers fe. IE9 still set it as multiple=\"multiple\" which also works as expected\n if (typeof multipleValue === 'string') {\n expect(multipleValue).toBe('multiple');\n } else {\n expect(multipleValue).toBe(true);\n }\n\n expect(container.firstChild.capture).toBeTruthy(); // true and \"true\" are both valid\n // expect(container.firstChild.getAttribute('accept')).toBe('image/*');\n\n render(\n ,\n container,\n );\n\n expect(container.firstChild.nodeName).toBe('INPUT');\n expect(container.childNodes.length).toBe(1);\n expect(container.firstChild.getAttribute('type')).toBe('file');\n\n multipleValue = container.firstChild.multiple;\n\n // Inferno sets multiple using dom property always to boolean,\n // but some browsers fe. IE9 still set it as multiple=\"multiple\" which also works as expected\n if (typeof multipleValue === 'string') {\n expect(multipleValue).toBe('multiple');\n } else {\n expect(multipleValue).toBe(true);\n }\n\n expect(container.firstChild.capture).toBeTruthy(); // true and \"true\" are both valid;\n // expect(container.firstChild.getAttribute('accept')).toBe('image/*');\n });\n\n it('should handle className', () => {\n render(
    , container);\n expect(container.firstChild.className).toBe('foo');\n render(
    , container);\n expect(container.firstChild.className).toBe('bar');\n render(
    , container);\n expect(container.firstChild.className).toBe('');\n render(
    , container);\n expect(container.firstChild.className).toBe('');\n render(, container);\n expect(container.firstChild.getAttribute('class')).toBe('fooBar');\n });\n\n it('should remove attributes', () => {\n render(, container);\n expect(container.firstChild.hasAttribute('height')).toBe(true);\n render(, container);\n expect(container.firstChild.hasAttribute('height')).toBe(false);\n render(, container);\n expect(container.firstChild.hasAttribute('height')).toBe(false);\n });\n\n it('should remove properties #2', () => {\n render(
    , container);\n expect(container.firstChild.getAttribute('class')).toBe('monkey');\n render(
    , container);\n expect(container.firstChild.className).toBe('');\n render(, container);\n expect(container.firstChild.getAttribute('class')).toBe('monkey');\n render(, container);\n expect(container.firstChild.getAttribute('class')).toBe(null);\n });\n\n it('should not update when switching between null/undefined', () => {\n render(
    , container);\n render(
    , container);\n render(
    , container);\n render(
    , container);\n render(
    , container);\n render(
    , container);\n render(
    , container);\n });\n\n it('should render an iframe', () => {\n render(