Showing preview only (3,264K chars total). Download the full file or copy to clipboard to get everything.
Repository: infernojs/inferno
Branch: master
Commit: bd1f4ee6b425
Files: 441
Total size: 3.0 MB
Directory structure:
gitextract_phe3_u4g/
├── .editorconfig
├── .gitattributes
├── .github/
│ ├── COMMIT_TEMPLATE.md
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ └── workflows/
│ ├── ci-template.yml
│ └── codeql-analysis.yml
├── .gitignore
├── .npmrc
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── browser/
│ └── jsfiddle-integration-babel7v3.js
├── demo/
│ └── inferno-router-demo/
│ ├── .babelrc
│ ├── .gitignore
│ ├── .proxyrc
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ ├── App.tsx
│ │ ├── index.html
│ │ ├── index.tsx
│ │ ├── indexServer.tsx
│ │ ├── pages/
│ │ │ ├── AboutPage.scss
│ │ │ ├── AboutPage.tsx
│ │ │ ├── ContentPage.scss
│ │ │ ├── ContentPage.tsx
│ │ │ ├── PageTemplate.scss
│ │ │ ├── PageTemplate.tsx
│ │ │ ├── StartPage.scss
│ │ │ └── StartPage.tsx
│ │ └── server.ts
│ └── tsconfig.json
├── docs/
│ ├── 1kcomponents/
│ │ ├── app.js
│ │ ├── index.html
│ │ └── style.css
│ ├── animations/
│ │ ├── app.css
│ │ ├── app.js
│ │ └── index.html
│ ├── animations-demo/
│ │ ├── app.css
│ │ ├── app.js
│ │ └── index.html
│ ├── animations-demo-inner/
│ │ ├── app.css
│ │ ├── app.js
│ │ └── index.html
│ ├── animations-global-demo/
│ │ ├── app.css
│ │ ├── app.js
│ │ └── index.html
│ ├── async-render/
│ │ ├── app.js
│ │ └── index.html
│ ├── build.js
│ ├── compat/
│ │ ├── app.js
│ │ └── index.html
│ ├── dbmonster/
│ │ ├── ENV.js
│ │ ├── app.js
│ │ ├── index.html
│ │ └── style.css
│ ├── dbmonster-mobx/
│ │ ├── app.js
│ │ ├── index.html
│ │ └── style.css
│ ├── event-test/
│ │ ├── app.js
│ │ ├── index.html
│ │ └── styles.css
│ ├── form/
│ │ ├── app.js
│ │ └── index.html
│ ├── index.html
│ ├── math-elements/
│ │ ├── app.js
│ │ ├── index.html
│ │ └── style.css
│ ├── styles.css
│ ├── svg/
│ │ ├── app.js
│ │ └── tiger.html
│ ├── uibench/
│ │ ├── app.js
│ │ ├── custom-uibench.js
│ │ └── index.html
│ ├── uibench-inferno-compat/
│ │ ├── app.js
│ │ └── index.html
│ ├── uibench-lifecycle/
│ │ ├── app.js
│ │ └── index.html
│ ├── uibench-normalization/
│ │ ├── app.js
│ │ └── index.html
│ └── uibench-reactlike/
│ ├── app.js
│ └── index.html
├── documentation/
│ ├── v4-migration.md
│ ├── v6-migration.md
│ ├── v6-release.md
│ └── v9-migration.md
├── eslint.config.js
├── fixtures/
│ └── browser/
│ ├── gzip/
│ │ └── gzippreprocessor.js
│ ├── karma.babel.conf.js
│ ├── karma.sauce.conf.js
│ ├── karma.swc.conf.js
│ ├── karma.ts.conf.js
│ ├── package.json
│ ├── test.index.js
│ └── test.no-compat.index.js
├── jest.config-nodom.js
├── jest.config.js
├── lerna.json
├── package.json
├── packages/
│ ├── inferno/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── animationHooks.spec.tsx
│ │ │ ├── animationHooksFunc.spec.tsx
│ │ │ ├── async-setstate.spec.tsx
│ │ │ ├── blueprints.spec.tsx
│ │ │ ├── children.spec.tsx
│ │ │ ├── clonenode.spec.tsx
│ │ │ ├── columnrender.spec.tsx
│ │ │ ├── componentlifecycle.spec.tsx
│ │ │ ├── components2.spec.tsx
│ │ │ ├── createref.spec.tsx
│ │ │ ├── data/
│ │ │ │ └── common-render/
│ │ │ │ ├── child.tsx
│ │ │ │ ├── parentbase.tsx
│ │ │ │ ├── parentfirstcommon.tsx
│ │ │ │ └── parentsecondcommon.tsx
│ │ │ ├── defaultprops-typings.spec.tsx
│ │ │ ├── error.spec.tsx
│ │ │ ├── forceUpdate.spec.tsx
│ │ │ ├── formelements.spec.tsx
│ │ │ ├── forward-ref.spec.tsx
│ │ │ ├── fragments.spec.tsx
│ │ │ ├── hooks.spec.tsx
│ │ │ ├── input.spec.tsx
│ │ │ ├── instancenull.spec.tsx
│ │ │ ├── issue-1369.spec.tsx
│ │ │ ├── lifecycle.spec.tsx
│ │ │ ├── link.spec.tsx
│ │ │ ├── linkEvent.spec.tsx
│ │ │ ├── mixedFormElements.spec.tsx
│ │ │ ├── newlifecycle.spec.tsx
│ │ │ ├── patching-jsx.spec.tsx
│ │ │ ├── patching.spec.tsx
│ │ │ ├── portal.spec.tsx
│ │ │ ├── rendering.spec.tsx
│ │ │ ├── select.spec.tsx
│ │ │ ├── select2.spec.tsx
│ │ │ ├── setState.spec.tsx
│ │ │ ├── singlepatches.spec.tsx
│ │ │ ├── state.spec.tsx
│ │ │ ├── styles.spec.tsx
│ │ │ ├── svgXlink.spec.tsx
│ │ │ ├── topcontext.spec.tsx
│ │ │ ├── transition.spec.tsx
│ │ │ ├── types.children.spec.tsx
│ │ │ ├── types.spec.tsx
│ │ │ └── validations.spec.tsx
│ │ ├── index.cjs
│ │ ├── index.mjs
│ │ ├── package.json
│ │ └── src/
│ │ ├── DOM/
│ │ │ ├── constants.ts
│ │ │ ├── events/
│ │ │ │ ├── attachEvent.ts
│ │ │ │ ├── delegation.ts
│ │ │ │ └── linkEvent.ts
│ │ │ ├── mounting.ts
│ │ │ ├── patching.ts
│ │ │ ├── props.ts
│ │ │ ├── rendering.ts
│ │ │ ├── unmounting.ts
│ │ │ ├── utils/
│ │ │ │ ├── common.ts
│ │ │ │ ├── componentUtil.ts
│ │ │ │ └── innerHTML.ts
│ │ │ └── wrappers/
│ │ │ ├── InputWrapper.ts
│ │ │ ├── SelectWrapper.ts
│ │ │ ├── TextareaWrapper.ts
│ │ │ ├── processElement.ts
│ │ │ └── wrapper.ts
│ │ ├── core/
│ │ │ ├── component.ts
│ │ │ ├── implementation.ts
│ │ │ ├── nativetypes.ts
│ │ │ ├── refs.ts
│ │ │ ├── types.ts
│ │ │ └── validate.ts
│ │ └── index.ts
│ ├── inferno-animation/
│ │ ├── __tests__/
│ │ │ ├── animatedAllComponent.spec.tsx
│ │ │ ├── animatedComponent.spec.tsx
│ │ │ ├── animatedComponentTypings.tsx
│ │ │ ├── animatedMoveComponent.spec.tsx
│ │ │ ├── index.spec.tsx
│ │ │ └── utils.spec.tsx
│ │ ├── index.cjs
│ │ ├── index.css
│ │ ├── package.json
│ │ ├── readme.md
│ │ └── src/
│ │ ├── AnimatedAllComponent.ts
│ │ ├── AnimatedComponent.ts
│ │ ├── AnimatedMoveComponent.ts
│ │ ├── animationCoordinator.ts
│ │ ├── animations.ts
│ │ ├── index.ts
│ │ └── utils.ts
│ ├── inferno-clone-vnode/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ └── cloneVNode.spec.tsx
│ │ ├── index.cjs
│ │ ├── package.json
│ │ └── src/
│ │ └── index.ts
│ ├── inferno-compat/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── ReactChildren.spec.jsx
│ │ │ ├── ReactComponent.spec.jsx
│ │ │ ├── ReactComponentLifeCycle.spec.jsx
│ │ │ ├── ReactCompositeComponentState.spec.jsx
│ │ │ ├── ReactDOM.spec.jsx
│ │ │ ├── ReactDOMComponent.spec.jsx
│ │ │ ├── ReactES6Class.spec.jsx
│ │ │ ├── ReactElement.spec.jsx
│ │ │ ├── ReactElementClone.spec.jsx
│ │ │ ├── ReactJSXElement.spec.jsx
│ │ │ ├── ReactMount.spec.jsx
│ │ │ ├── ReactMountDestruction.spec.jsx
│ │ │ ├── ReactMultiChild.spec.jsx
│ │ │ ├── ReactPureComponent.spec.jsx
│ │ │ ├── ReactStatelessComponent.spec.jsx
│ │ │ ├── SelectValueElement.spec.jsx
│ │ │ ├── clonevnode.spec.tsx
│ │ │ ├── compat_children.spec.tsx
│ │ │ ├── findDOMNodes.spec.jsx
│ │ │ ├── isValidElement.spec.jsx
│ │ │ ├── lifecycle.spec.jsx
│ │ │ ├── misc.spec.jsx
│ │ │ ├── onlyChild.spec.jsx
│ │ │ ├── styles.spec.jsx
│ │ │ ├── svg.spec.jsx
│ │ │ ├── testutils.spec.jsx
│ │ │ └── warnings.spec.jsx
│ │ ├── index.cjs
│ │ ├── lib/
│ │ │ ├── EventConstants.js
│ │ │ ├── EventPluginHub.js
│ │ │ ├── EventPluginUtils.js
│ │ │ ├── EventPropagators.js
│ │ │ ├── ReactCSSTransitionGroup.js
│ │ │ ├── ReactFragment.js
│ │ │ ├── ReactMount.js
│ │ │ ├── ReactTransitionEvents.js
│ │ │ ├── ReactTransitionGroup.js
│ │ │ ├── SyntheticUIEvent.js
│ │ │ ├── ViewportMetrics.js
│ │ │ └── shallowCompare.js
│ │ ├── package.json
│ │ └── src/
│ │ ├── InfernoCompatPropertyMap.ts
│ │ ├── PropTypes.ts
│ │ ├── index.ts
│ │ └── reactstyles.ts
│ ├── inferno-create-element/
│ │ ├── __tests__/
│ │ │ ├── callback.in.ctr.spec.tsx
│ │ │ ├── children.spec.ts
│ │ │ ├── components.spec.ts
│ │ │ ├── components1.spec.tsx
│ │ │ ├── components2b.spec.tsx
│ │ │ ├── components3.spec.tsx
│ │ │ ├── createElement.fragment.spec.ts
│ │ │ ├── createElement.spec.ts
│ │ │ ├── createElementTyped.spec.tsx
│ │ │ ├── creation.spec.ts
│ │ │ ├── elements.spec.jsx
│ │ │ ├── events.spec.js
│ │ │ ├── hooks.spec.js
│ │ │ ├── patchKeyedChildren.spec.js
│ │ │ ├── patchMixedKeyed.spec.js
│ │ │ ├── patchNonKeyedChildren.spec.js
│ │ │ ├── patching.spec.js
│ │ │ ├── select.spec.js
│ │ │ ├── svg.ext.spec.js
│ │ │ ├── svg.spec.jsx
│ │ │ ├── text.spec.js
│ │ │ ├── update.ext.spec.js
│ │ │ └── update.spec.jsx
│ │ ├── index.cjs
│ │ ├── package.json
│ │ ├── readme.md
│ │ └── src/
│ │ └── index.ts
│ ├── inferno-extras/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ └── extras.spec.jsx
│ │ ├── index.cjs
│ │ ├── package.json
│ │ └── src/
│ │ ├── findDOMNode.ts
│ │ ├── index.ts
│ │ └── isDOMInsideVDOM.ts
│ ├── inferno-hydrate/
│ │ ├── __tests__/
│ │ │ ├── hydrate-forward-ref.spec.tsx
│ │ │ └── hydrate.spec.tsx
│ │ ├── index.cjs
│ │ ├── package.json
│ │ ├── readme.md
│ │ └── src/
│ │ └── index.ts
│ ├── inferno-hyperscript/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ └── hyperscript.spec.tsx
│ │ ├── index.cjs
│ │ ├── package.json
│ │ └── src/
│ │ └── index.ts
│ ├── inferno-mobx/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── context.spec.jsx
│ │ │ ├── extra/
│ │ │ │ └── eventemitter.spec.js
│ │ │ ├── generic.spec.jsx
│ │ │ ├── inject.spec.jsx
│ │ │ ├── misc.spec.jsx
│ │ │ ├── observer.spec.jsx
│ │ │ ├── observerPatch.spec.jsx
│ │ │ ├── observerWrap.spec.jsx
│ │ │ ├── stateless.spec.jsx
│ │ │ ├── transactions.spec.jsx
│ │ │ └── types.spec.tsx
│ │ ├── index.cjs
│ │ ├── package.json
│ │ └── src/
│ │ ├── Provider.ts
│ │ ├── index.ts
│ │ ├── observer.ts
│ │ ├── observerPatch.ts
│ │ ├── observerWrap.ts
│ │ └── utils/
│ │ ├── EventEmitter.ts
│ │ └── utils.ts
│ ├── inferno-redux/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── components/
│ │ │ │ ├── Provider.spec.js
│ │ │ │ ├── Provider.typings.tsx
│ │ │ │ └── connect.spec.js
│ │ │ ├── functional.spec.jsx
│ │ │ └── utils/
│ │ │ ├── shallowEqual.spec.js
│ │ │ └── wrapActionCreators.spec.js
│ │ ├── index.cjs
│ │ ├── package.json
│ │ └── src/
│ │ ├── components/
│ │ │ ├── Provider.ts
│ │ │ └── connectAdvanced.ts
│ │ ├── connect/
│ │ │ ├── connect.ts
│ │ │ ├── mapDispatchToProps.ts
│ │ │ ├── mapStateToProps.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── selectorFactory.ts
│ │ │ ├── verifySubselectors.ts
│ │ │ └── wrapMapToProps.ts
│ │ ├── index.ts
│ │ └── utils/
│ │ ├── Subscription.ts
│ │ ├── shallowEqual.ts
│ │ ├── verifyPlainObject.ts
│ │ ├── warning.ts
│ │ └── wrapActionCreators.ts
│ ├── inferno-router/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── BrowserRouter.spec.tsx
│ │ │ ├── HashRouter.spec.tsx
│ │ │ ├── Link.ext.spec.tsx
│ │ │ ├── Link.spec.tsx
│ │ │ ├── MemoryRouter.spec.tsx
│ │ │ ├── NavLink.spec.tsx
│ │ │ ├── Prompt.spec.tsx
│ │ │ ├── Route.spec.tsx
│ │ │ ├── Route.typings.spec.tsx
│ │ │ ├── Router.spec.tsx
│ │ │ ├── Switch.spec.tsx
│ │ │ ├── SwitchMount.spec.tsx
│ │ │ ├── github1176.spec.tsx
│ │ │ ├── integration.spec.tsx
│ │ │ ├── issue1322.spec.tsx
│ │ │ ├── loaderOnRoute.spec.tsx
│ │ │ ├── loaderWithSwitch.spec.tsx
│ │ │ ├── matchPath.spec.ts
│ │ │ ├── mobx-router.spec.tsx
│ │ │ ├── testUtils.ts
│ │ │ └── withRouter.spec.tsx
│ │ ├── index.cjs
│ │ ├── package.json
│ │ └── src/
│ │ ├── BrowserRouter.ts
│ │ ├── HashRouter.ts
│ │ ├── Link.ts
│ │ ├── MemoryRouter.ts
│ │ ├── NavLink.ts
│ │ ├── Prompt.ts
│ │ ├── Redirect.ts
│ │ ├── Route.ts
│ │ ├── Router.ts
│ │ ├── StaticRouter.ts
│ │ ├── Switch.ts
│ │ ├── helpers.ts
│ │ ├── index.ts
│ │ ├── locationUtils.ts
│ │ ├── matchPath.ts
│ │ ├── resolveLoaders.ts
│ │ ├── utils.ts
│ │ └── withRouter.ts
│ ├── inferno-server/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── StaticRouter.spec.server-nodom.tsx
│ │ │ ├── animationHooks.spec.server.tsx
│ │ │ ├── creation-queuestream.spec.server.tsx
│ │ │ ├── creation-stream.spec.server.ts
│ │ │ ├── creation-stream.spec.server.tsx
│ │ │ ├── creation.spec.server.ts
│ │ │ ├── creation.spec.server.tsx
│ │ │ ├── hydration-ext.spec.server.tsx
│ │ │ ├── hydration.spec.server.ts
│ │ │ ├── hydration.spec.server.tsx
│ │ │ ├── loaderOnRoute.spec.server.tsx
│ │ │ ├── observer.spec.server.tsx
│ │ │ ├── props-context.spec.server.tsx
│ │ │ ├── security.spec.server.tsx
│ │ │ ├── ssr-forwardref.spec.tsx
│ │ │ └── utils.spec.server.tsx
│ │ ├── index.cjs
│ │ ├── index.mjs
│ │ ├── package.json
│ │ └── src/
│ │ ├── index.ts
│ │ ├── prop-renderers.ts
│ │ ├── renderToString.queuestream.ts
│ │ ├── renderToString.stream.ts
│ │ ├── renderToString.ts
│ │ ├── stream/
│ │ │ └── streamUtils.ts
│ │ └── utils.ts
│ ├── inferno-shared/
│ │ ├── index.cjs
│ │ ├── package.json
│ │ └── src/
│ │ └── index.ts
│ ├── inferno-test-utils/
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ ├── __snapshots__/
│ │ │ │ ├── snapshots.spec.tsx.snap
│ │ │ │ └── testUtils.jest.spec.tsx.snap
│ │ │ ├── snapshots.spec.tsx
│ │ │ ├── testUtils.jest.spec.tsx
│ │ │ └── testUtils.spec.tsx
│ │ ├── index.cjs
│ │ ├── package.json
│ │ └── src/
│ │ ├── index.ts
│ │ ├── jest.ts
│ │ └── utils.ts
│ ├── inferno-utils/
│ │ ├── __tests__/
│ │ │ └── utils.spec.tsx
│ │ ├── package.json
│ │ └── src/
│ │ └── index.ts
│ └── inferno-vnode-flags/
│ ├── README.md
│ ├── index.cjs
│ ├── package.json
│ └── src/
│ └── index.ts
├── scripts/
│ ├── bundle/
│ │ ├── bundle-size.js
│ │ ├── move-compiled.js
│ │ ├── move-typedefs.js
│ │ └── read-files-in-dir.js
│ ├── fakedom/
│ │ ├── build.js
│ │ ├── libs/
│ │ │ ├── setup.js
│ │ │ └── uibench.js
│ │ ├── results/
│ │ │ └── inferno_base_line.json
│ │ ├── uibench-reactlike/
│ │ │ ├── app.js
│ │ │ └── start.js
│ │ ├── viewer.html
│ │ └── viewer.js
│ ├── rollup/
│ │ ├── build.js
│ │ └── plugins/
│ │ ├── alias.js
│ │ └── index.js
│ └── test/
│ ├── globals.js
│ ├── jasmine-polyfill.js
│ └── requestAnimationFrame.ts
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
# top-most EditorConfig file
root = true
[*]
end_of_line = lf
insert_final_newline = true
quote_type = single
# Tab indentation
[*.{js,ts,jsx,tsx,json}]
indent_style = space
indent_size = 2
# Space indentation
[package.json]
indent_style = space
indent_size = 2
================================================
FILE: .gitattributes
================================================
* text=auto
*.css text eol=lf
*.js text eol=lf
*.jsx text eol=lf
*.ts text eol=lf linguist-language=JavaScript
*.tsx text eol=lf linguist-language=JavaScript
*.json text eol=lf
*.html text eol=lf
*.md text eol=lf
.gitattributes text eol=lf
================================================
FILE: .github/COMMIT_TEMPLATE.md
================================================
# <type>: (If applied, this commit will...) <subject> (Max 50 char)
# |<---- Using a Maximum Of 50 Characters ---->|
# Explain why this change is being made
# |<---- Try To Limit Each Line to a Maximum Of 72 Characters ---->|
# Provide links or keys to any relevant tickets, articles or other resources
# Example: Github issue #23
# --- COMMIT END ---
# Type can be
# feat (new feature)
# fix (bug fix)
# refactor (refactoring production code)
# style (formatting, missing semi colons, etc; no code change)
# docs (changes to documentation)
# test (adding or refactoring tests; no production code change)
# chore (updating grunt tasks etc; no production code change)
# --------------------
# Remember to
# Capitalize the subject line
# Use the imperative mood in the subject line
# Do not end the subject line with a period
# Separate subject from body with a blank line
# Use the body to explain what and why vs. how
# Can use multiple lines with "-" for bullet points in body
# --------------------
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
open_collective: inferno
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
*Before* submitting an issue please:
- 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).
- Check that the bug has not been fixed in the latest development version. Use our [CDN @ Edge](http://cdn.infernojs.org/edge/inferno.js).
- Check that the issue has not been brought up before on [Github issues](http://www.github.com/infernojs/inferno/issues).
**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.**
---
## Issue Template
**Observed Behaviour**
Inferno is...
**Expected Current Behaviour**
Inferno should...
**Inferno Metadata**
macOS / Windowx / Linux
Safari / Chrome / Firefox / ...
<!-- Love inferno? Please consider supporting our collective:
👉 https://opencollective.com/inferno/donate -->
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
*Before* submitting a PR please:
- Include tests for the functionality you are adding! See CONTRIBUTING.md for details how to run tests.
- Run `npm run build` and check that the build succeeds.
- Ensure that the PR hasn't been submitted before.
---
## PR Template
**Objective**
This PR...
**Closes Issue**
It closes Issue #...
================================================
FILE: .github/workflows/ci-template.yml
================================================
name: CI
on:
push:
branches: [ master ]
pull_request:
branches: [ '**' ]
jobs:
tests:
runs-on: ubuntu-latest
name: Tests
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: latest
- name: Install dependencies
run: npm ci
- name: Lint
run: npm run lint
- name: Build
run: npm run build
- name: Test with coverage
run: npm run test:coverage
- name: Upload coverage to Coveralls
uses: coverallsapp/github-action@v2
- name: Run browser tests on SauceLabs
run: npm run test:browser:sauce
env:
SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
================================================
FILE: .github/workflows/codeql-analysis.yml
================================================
# For most projects, this workflow file will not need changing; you simply need
# to commit it to your repository.
#
# You may wish to alter this file to override the set of languages analyzed,
# or to provide custom queries or build logic.
#
# ******** NOTE ********
# We have attempted to detect the languages in your repository. Please check
# the `language` matrix defined below to confirm you have the correct set of
# supported CodeQL languages.
#
name: "CodeQL"
on:
push:
branches: [ "master" ]
pull_request:
# The branches below must be a subset of the branches above
branches: [ "master" ]
schedule:
- cron: '19 8 * * 0'
jobs:
analyze:
name: Analyze
runs-on: ubuntu-latest
permissions:
actions: read
contents: read
security-events: write
strategy:
fail-fast: false
matrix:
language: [ 'javascript' ]
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
# Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
steps:
- name: Checkout repository
uses: actions/checkout@v3
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v2
with:
languages: ${{ matrix.language }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.
# 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
# queries: security-extended,security-and-quality
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild
uses: github/codeql-action/autobuild@v2
# ℹ️ Command-line programs to run using the OS shell.
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
# If the Autobuild fails above, remove it and uncomment the following three lines.
# modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
# - run: |
# echo "Run, Build Application using script"
# ./location_of_script_within_repo/buildscript.sh
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v2
================================================
FILE: .gitignore
================================================
.idea
.vscode
.DS_Store
.rpt2_cache*
.changelog
*.log
build
dist
coverage
node_modules
fixtures/browser/*.cmd
packages/*/dist
packages/*/tmpDist
packages/*/package-lock.json
.rpt2_cache_development
.rpt2_cache_production
.swc
================================================
FILE: .npmrc
================================================
legacy-peer-deps=true
================================================
FILE: CHANGELOG.md
================================================
See GitHub for changes https://github.com/infernojs/inferno/releases
================================================
FILE: CONTRIBUTING.md
================================================
Contributing to Inferno
==========================
Many thanks for using Inferno and contributing to its development. The following is a quick set of guidelines designed to maximise your contribution's effectiveness.
Got a question or need help?
----------------------------
If you're having trouble getting Inferno to do what you want, there are a couple of places to get help before submitting an issue:
* [Stack Overflow questions tagged infernojs](http://stackoverflow.com/questions/tagged/infernojs)
Of course, if you've encountered a bug, then the best course of action is to raise an issue (if no-one else has!).
Reporting security vulnerabilities
----------------------------------
If 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.
Repository Layout
-----------------
The 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
run after `npm install`. `lerna` executes command based on a topological-sorted order of packages based on their dependencies.
For example, if you want to see the order of packages being processed, you can do:
```
$ lerna exec -- node -e "console.log(require('./package.json').name)"
inferno-shared
inferno-vnode-flags
inferno
inferno-hyperscript
inferno-create-element
inferno-extras
inferno-router
inferno-compat
inferno-server
inferno-redux
inferno-mobx
inferno-test-utils
```
Source files are written in TypeScript and tests are written in JS/JSX consuming the dist files.
Running tests
-------------
Always include tests for the functionality you want to add into Inferno. This way we can avoid regression in future.
Make sure you have lerna tool installed globally.
```
npm i -g lerna
```
- Clone the repository, and clean it. `lerna clean`
- Install development dependencies `npm i`
- build typescript files `npm run build`
- run tests `npm run test`
Pull requests
-------------
All pull requests are welcome.
*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.*
Before 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.
And make sure the PR haven't been published before!
There isn't (yet) a formal style guide for Inferno, so please take care to adhere to existing conventions:
* 2-space indentation, not tabs!
* Semi-colons
* Single-quotes for strings
Above 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!
Before you commit your changes, please run `npm run prettier` to format code correctly
Small print
-----------
There'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.
Debugging Browser
-----------------
Just run `npm run test:browser:debug` Open localhost:9876 and click debug!
Debugging NodeJS
----------------
Its possible to debug inferno tests by running following command `npm run debug` and open chrome web address: chrome://inspect/#devices
Pro tip: You can filter down number of tests by editing `debug` -task:
`node --inspect-brk ./node_modules/.bin/jest {*edit this*} --runInBand --no-cache --no-watchman`
Change parameter to jest to match only files you want to run.
Happy debugging!
## Credits
### Contributors
Thank you to all the people who have already contributed to inferno!
<a href="graphs/contributors"><img src="https://opencollective.com/inferno/contributors.svg?width=890" /></a>
### Backers
Thank you to all our backers! [[Become a backer](https://opencollective.com/inferno#backer)]
<a href="https://opencollective.com/inferno#backers" target="_blank"><img src="https://opencollective.com/inferno/backers.svg?width=890"></a>
### Sponsors
Thank 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))
<a href="https://opencollective.com/inferno/sponsor/0/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/1/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/2/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/3/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/4/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/5/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/6/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/7/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/8/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/9/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/9/avatar.svg"></a>
================================================
FILE: LICENSE.md
================================================
# MIT License
Copyright (c) 2015-2022 Dominic Gannaway
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
<p align="center"><a href="https://infernojs.org/" target="_blank"><img width="150" alt="Inferno" title="Inferno" src="https://user-images.githubusercontent.com/2021355/36063342-626d7ea8-0e84-11e8-84e1-f22bb3b8c4d5.png"/></a></p>
[](https://github.com/infernojs/inferno/actions)
[](https://coveralls.io/github/infernojs/inferno?branch=master)
[](https://github.com/infernojs/inferno/blob/master/LICENSE.md)
[](https://www.npmjs.com/package/inferno)
[](https://www.npmjs.org/package/inferno)
[](https://discord.gg/SUKuhgaBpF)
[](https://unpkg.com/inferno/dist/inferno.min.js)
[](#backers) [](#sponsors)
Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server.
## Description
The 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.
The performance is achieved through multiple optimizations, for example:
- Inferno's own JSX compilers creates monomorphic `createVNode` calls, instead of `createElement` calls.
Optimizing runtime performance of the application.
- [SWC plugin inferno](https://github.com/infernojs/swc-plugin-inferno) is a plugin for [SWC](https://swc.rs/). It can compile TSX and JSX
- [Babel plugin inferno](https://github.com/infernojs/babel-plugin-inferno) is a plugin for [BabelJs](https://babeljs.io/). It can compile JSX.
- [TS plugin inferno](https://github.com/infernojs/ts-plugin-inferno) is a plugin for [TSC](https://www.typescriptlang.org/). It can compile TSX.
- Inferno's diff process uses bitwise flags to memoize the shape of objects
- Child nodes are normalized only when needed
- Special JSX flags can be used during compile time to optimize runtime performance at application level
- Many micro optimizations
## Features
- Component driven + one-way data flow architecture
- React-like API, concepts and component lifecycle events
- Partial synthetic event system, normalizing events for better cross browser support
- 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
- Isomorphic rendering on both client and server with `inferno-server`
- Unlike React and Preact, Inferno has lifecycle events on functional components
- Unlike Preact and other React-like libraries, Inferno has controlled components for input/select/textarea elements
- Components can be rendered outside their current html hierarchy using `createPortal` - API
- Support for [older browsers](https://github.com/infernojs/inferno#browser-support) without any polyfills
- defaultHooks for Functional components, this way re-defining lifecycle events per usage can be avoided
- Inferno supports setting styles using string `<div style="background-color: red"></div>` or using object literal syntax `<div style={{"background-color": "red"}}></div>`. For camelCase syntax support see [`inferno-compat`](https://github.com/infernojs/inferno/tree/master/packages/inferno-compat).
- Fragments (v6)
- createRef and forwardRef APIs (v6)
- 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
## Runtime requirements
Inferno v9 requires following features to be present in the executing runtime:
- `Promise`
- `String.prototype.includes()`
- `String.prototype.startsWith()`
- `Array.prototype.includes()`
- `Object.spread()`
- `for ... of`
## Browser support
Since version 4 we have started running our test suite **without** any polyfills.
Inferno is now part of [Saucelabs](https://saucelabs.com/) open source program and we use their service for executing the tests.
InfernoJS is actively tested with browsers listed below, however it may run well on older browsers as well.
This 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
[](https://app.saucelabs.com/open_sauce/user/Havunen/tests/vdc)
## Migration guides
- [Inferno v4](https://github.com/infernojs/inferno/blob/master/documentation/v4-migration.md)
- [Inferno v6](https://github.com/infernojs/inferno/blob/master/documentation/v6-migration.md)
## Benchmarks
Live examples at [https://infernojs.github.io/inferno](https://infernojs.github.io/inferno)
- [UI Bench](https://localvoid.github.io/uibench/)
- [dbmonster](https://infernojs.github.io/inferno/dbmonster/)
- [JS Web Frameworks Benchmark (current)](https://krausest.github.io/js-framework-benchmark/current.html)
- [Isomorphic-UI-Benchmark](https://github.com/marko-js/isomorphic-ui-benchmarks)
- [1k Components](https://infernojs.github.io/inferno/1kcomponents/)
## Code Example
Let'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.
In 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).
Keep in mind that compile time optimizations are available only for JSX.
```jsx
import { render } from 'inferno';
const message = "Hello world";
render(
<MyComponent message={ message } />,
document.getElementById("app")
);
```
Furthermore, Inferno also uses ES6 components like React:
```jsx
import { render, Component } from 'inferno';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0
};
}
render() {
return (
<div>
<h1>Header!</h1>
<span>Counter is at: { this.state.counter }</span>
</div>
);
}
}
render(
<MyComponent />,
document.getElementById("app")
);
```
Because performance is an important aspect of this library, we want to show you how to optimize your application even further.
In the example below we optimize diffing process by using JSX **$HasVNodeChildren** and **$HasTextChildren** to predefine children shape compile time.
In the MyComponent render method there is a div that contains JSX expression `node` as its content. Due to dynamic nature of Javascript
that 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.
Inferno offers a feature called ChildFlags for application developers to pre-define the shape of vNode's child node. In this example case
it is using `$HasVNodeChildren` to tell the JSX compiler, that this vNode contains only single element or component vNode.
Now inferno will not go into the normalization process runtime, but trusts the developer decision about the shape of the object and correctness of data.
If this contract is not kept and `node` variable contains invalid value for the pre-defined shape (fe. `null`), then application would crash runtime.
There is also span-element in the same render method, which content is set dynamically through `_getText()` method. There `$HasTextChildren` child-flag
fits nicely, because the content of that given "span" is never anything else than text.
All the available child flags are documented [here](https://infernojs.org/docs/guides/optimizations).
```jsx
import { createTextVNode, render, Component } from 'inferno';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0
};
}
_getText() {
return 'Hello!';
}
render() {
const node = this.state.counter > 0 ? <div>0</div> : <span $HasTextChildren>{this._getText()}</span>;
return (
<div>
<h1>Header!</h1>
<div $HasVNodeChildren>{node}</div>
</div>
);
}
}
render(
<MyComponent />,
document.getElementById("app")
);
```
### Tear down
To tear down inferno application you need to render null on root element.
Rendering `null` will trigger unmount lifecycle hooks for whole vDOM tree and remove global event listeners.
It is important to unmount unused vNode trees to free browser memory.
```jsx
import { createTextVNode, render, Component } from 'inferno';
const rootElement = document.getElementById("app");
// Start the application
render(
<ExampleComponent/>,
rootElement
);
// Tear down
render(
null,
rootElement
);
```
### More Examples
If you have built something using Inferno you can add them here:
- [**Simple Clock** (@JSFiddle)](https://jsfiddle.net/4bha7kcg/)
- [**Simple JS Counter** (@github/scorsi)](https://github.com/scorsi/simple-counter-inferno-cerebral-fusebox): SSR Inferno (view) + Cerebral (state manager) + FuseBox (build system/bundler)
- [**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)
(state machine library)
- [**Lemmy - a self-hostable reddit alternative** (front end in Inferno)](https://github.com/dessalines/lemmy)
## Getting Started
The easiest way to get started with Inferno is by using [Create Inferno App](https://github.com/infernojs/create-inferno-app).
Alternatively, you can try any of the following:
* the [Inferno Boilerplate](https://github.com/infernojs/inferno-boilerplate) for a very simple setup.
* 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/).
* 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).
* 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).
* for an example of how to use Inferno in [codesandbox](https://codesandbox.io/): https://codesandbox.io/s/znmyj24w4p
* for using [parcel and typescript](https://github.com/jayy-lmao/inferno-parcel-ts)
Core package:
```sh
npm install --save inferno
```
Addons:
```sh
# server-side rendering
npm install --save inferno-server
# routing
npm install --save inferno-router
```
Pre-bundled files for browser consumption can be found on [our cdnjs](https://cdnjs.com/libraries/inferno):
Or on jsDelivr:
```
https://cdn.jsdelivr.net/npm/inferno@latest/dist/inferno.min.js
```
Or on unpkg.com:
```
https://unpkg.com/inferno@latest/dist/inferno.min.js
```
### Creating Virtual DOM
#### JSX:
```sh
npm install --save-dev babel-plugin-inferno
```
#### Hyperscript:
```sh
npm install --save inferno-hyperscript
```
#### createElement:
```sh
npm install --save inferno-create-element
```
### Compatibility with existing React apps
```sh
npm install --save-dev inferno-compat
```
Note: Make sure you read more about [`inferno-compat`](https://github.com/infernojs/inferno/tree/master/packages/inferno-compat) before using it.
## Third-party state libraries
Inferno now has bindings available for some of the major state management libraries out there:
- Redux via [`inferno-redux`](https://github.com/infernojs/inferno/tree/dev/packages/inferno-redux)
- MobX via [`inferno-mobx`](https://github.com/infernojs/inferno/tree/dev/packages/inferno-mobx)
- Cerebral via [`@cerebral/inferno`](https://github.com/cerebral/cerebral/tree/master/packages/node_modules/@cerebral/inferno)
## JSX
Inferno has its own [JSX Babel plugin](https://github.com/trueadm/babel-plugin-inferno).
## Differences from React
- 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`).
- Inferno doesn't support React Native. Inferno was only designed for the browser/server with the DOM in mind.
- Inferno doesn't support legacy string refs, use `createRef` or callback `ref` API
- Inferno provides lifecycle events on functional components. This is a major win for people who prefer lightweight components rather than ES2015 classes.
## Differences from Preact
- Inferno has a partial synthetic event system, resulting in better performance via delegation of certain events.
- 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.
- 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.
- Inferno provides lifecycle events on functional components. This is a major win for people who prefer lightweight components rather than ES2015 classes.
## Event System
Like 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).
One 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
Inferno's event system in favour of using the native event system supplied by the browser. For example, when detecting changes on an `<input>` element, in React you'd use `onChange`, with Inferno you'd use `onInput` instead (the
native DOM event is `oninput`).
Available synthetic events are:
- `onClick`
- `onDblClick`
- `onFocusIn`
- `onFocusOut`
- `onKeyDown`
- `onKeyPress`
- `onKeyUp`
- `onMouseDown`
- `onMouseMove`
- `onMouseUp`
- `onTouchEnd`
- `onTouchMove`
- `onTouchStart`
### `linkEvent` (package: `inferno`)
`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:
```jsx
import { linkEvent } from 'inferno';
function handleClick(props, event) {
props.validateValue(event.target.value);
}
function MyComponent(props) {
return <div><input type="text" onClick={ linkEvent(props, handleClick) } /><div>;
}
```
This is an example of using it with ES2015 classes:
```jsx
import { linkEvent, Component } from 'inferno';
function handleClick(instance, event) {
instance.setState({ data: event.target.value });
}
class MyComponent extends Component {
render () {
return <div><input type="text" onClick={ linkEvent(this, handleClick) } /><div>;
}
}
```
`linkEvent()` offers better performance than binding an event in a class constructor and using arrow functions, so use it where possible.
## Controlled Components
In HTML, form elements such as `<input>`, `<textarea>`, and `<select>` typically maintain their own state and update it based on user input.
In Inferno, mutable state is typically kept in the state property of components, and only updated with `setState()`.
We can combine the two by making the Inferno state be the "single source of truth". Then the Inferno component that renders a form also
controls what happens in that form on subsequent user input. An input form element whose value is controlled by
Inferno in this way is called a "controlled component".
## Inferno Top-Level API
### `render` (package: `inferno`)
```javascript
import { render } from 'inferno';
render(<div />, document.getElementById("app"));
```
Render a virtual node into the DOM in the supplied container given the supplied virtual DOM. If the virtual node was previously rendered
into the container, this will perform an update on it and only mutate the DOM as necessary, to reflect the latest Inferno virtual node.
Warning: If the container element is not empty before rendering, the content of the container will be overwritten on the initial render.
### `createRenderer` (package: `inferno`)
`createRenderer` creates an alternative render function with a signature matching that of the first argument passed to a reduce/scan function. This allows for easier integration with reactive programming libraries, like [RxJS](https://github.com/ReactiveX/rxjs) and [Most](https://github.com/cujojs/most).
```javascript
import { createRenderer } from 'inferno';
import { scan, map } from 'most';
const renderer = createRenderer();
// NOTE: vNodes$ represents a stream of virtual DOM node updates
scan(renderer, document.getElementById("app"), vNodes$);
```
See [inferno-most-fp-demo](https://github.com/joshburgess/inferno-most-fp-demo) for an example of how to build an app architecture around this.
### `createElement` (package: `inferno-create-element`)
Creates an Inferno VNode using a similar API to that found with React's `createElement()`
```javascript
import { Component, render } from 'inferno';
import { createElement } from 'inferno-create-element';
class BasicComponent extends Component {
render() {
return createElement('div', {
className: 'basic'
},
createElement('span', {
className: this.props.name
}, 'The title is ', this.props.title)
)
}
}
render(
createElement(BasicComponent, { title: 'abc' }),
document.getElementById("app")
);
```
### `Component` (package: `inferno`)
**Class component:**
```javascript
import { Component } from 'inferno';
class MyComponent extends Component {
render() {
return <div>My Component</div>
}
}
```
This is the base class for Inferno Components when they're defined using ES6 classes.
**Functional component:**
```javascript
const MyComponent = ({ name, age }) => (
<span>My name is: { name } and my age is: {age}</span>
);
```
Another way of using defaultHooks.
```javascript
export function Static() {
return <div>1</div>;
}
Static.defaultHooks = {
onComponentShouldUpdate() {
return false;
}
};
```
Default props
```jsx
export function MyFunctionalComponent({value}) {
return <div>{value}</div>;
}
MyFunctionalComponent.defaultProps = {
value: 10
};
```
Functional components are first-class functions where their first argument is the `props` passed through from their parent.
### `createVNode` (package: `inferno`)
```js
import { createVNode } from 'inferno';
createVNode(
flags,
type,
[className],
[...children],
[childFlags],
[props],
[key],
[ref]
)
```
createVNode is used to create html element's virtual node object. Typically `createElement()` (package: `inferno-create-element`), `h()` (package: `inferno-hyperscript`) or JSX are used to create
`VNode`s for Inferno, but under the hood they all use `createVNode()`. Below is an example of `createVNode` usage:
```javascript
import { VNodeFlags, ChildFlags } from 'inferno-vnode-flags';
import { createVNode, createTextVNode, render } from 'inferno';
const vNode = createVNode(VNodeFlags.HtmlElement, 'div', 'example', createTextVNode('Hello world!'), ChildFlags.HasVNodeChildren);
// <div class="example">Hello world!</div>
render(vNode, container);
```
`createVNode` arguments explained:
`flags`: (number) is a value from [`VNodeFlags`](https://github.com/infernojs/inferno/tree/master/packages/inferno-vnode-flags), this is a numerical value that tells Inferno what the VNode describes on the page.
`type`: (string) is tagName for element for example 'div'
`className`: (string) is the class attribute ( it is separated from props because it is the most commonly used property )
`children`: (vNode[]|vNode) is one or array of vNodes to be added as children for this vNode
`childFlags`: (number) is a value from [`ChildFlags`](https://github.com/infernojs/inferno/tree/master/packages/inferno-vnode-flags), this tells inferno shape of the children so normalization process can be skipped.
`props`: (Object) is object containing all other properties. fe: `{onClick: method, 'data-attribute': 'Hello Community!}`
`key`: (string|number) unique key within this vNodes siblings to identify it during keyed algorithm.
`ref`: (function) callback which is called when DOM node is added/removed from DOM.
### `createComponentVNode` (package: 'inferno')
```js
import { createComponentVNode } from 'inferno';
createComponentVNode(
flags,
type,
[props],
[key],
[ref]
)
```
createComponentVNode is used for creating vNode for Class/Functional Component.
Example:
```javascript
import { VNodeFlags, ChildFlags } from 'inferno-vnode-flags';
import { createVNode, createTextVNode, createComponentVNode, render } from 'inferno';
function MyComponent(props, context) {
return createVNode(VNodeFlags.HtmlElement, 'div', 'example', createTextVNode(props.greeting), ChildFlags.HasVNodeChildren);
}
const vNode = createComponentVNode(VNodeFlags.ComponentFunction, MyComponent, {
greeting: 'Hello Community!'
}, null, {
onComponentDidMount() {
console.log("example of did mount hook!")
}
})
// <div class="example">Hello Community!</div>
render(vNode, container);
```
`createComponentVNode` arguments explained:
`flags`: (number) is a value from [`VNodeFlags`](https://github.com/infernojs/inferno/tree/master/packages/inferno-vnode-flags), this is a numerical value that tells Inferno what the VNode describes on the page.
`type`: (Function/Class) is the class or function prototype for Component
`props`: (Object) properties passed to Component, can be anything
`key`: (string|number) unique key within this vNodes siblings to identify it during keyed algorithm.
`ref`: (Function|Object) this property is object for Functional Components defining all its lifecycle methods. For class Components this is function callback for ref.
### `createTextVNode` (package: 'inferno')
createTextVNode is used for creating vNode for text nodes.
`createTextVNode` arguments explained:
text: (string) is a value for text node to be created.
key: (string|number) unique key within this vNodes siblings to identify it during keyed algorithm.
```js
import { createTextVNode } from 'inferno';
createTextVNode(
text,
key
)
```
### `cloneVNode` (package: `inferno-clone-vnode`)
This package has same API as React.cloneElement
```javascript
import { cloneVNode } from 'inferno-clone-vnode';
cloneVNode(
vNode,
[props],
[...children]
)
```
Clone and return a new Inferno `VNode` using a `VNode` as the starting point. The resulting `VNode` will have the original `VNode`'s props with the new props merged in shallowly. New children will replace existing children. key and ref from the original `VNode` will be preserved.
`cloneVNode()` is almost equivalent to:
```jsx
<VNode.type {...VNode.props} {...props}>{children}</VNode.type>
```
An example of using `cloneVNode`:
```javascript
import { createVNode, render } from 'inferno';
import { cloneVNode } from 'inferno-clone-vnode';
import { VNodeFlags } from 'inferno-vnode-flags';
const vNode = createVNode(VNodeFlags.HtmlElement, 'div', 'example', 'Hello world!');
const newVNode = cloneVNode(vNode, { id: 'new' }); // we are adding an id prop to the VNode
render(newVNode, container);
```
If you're using JSX:
```jsx
import { render } from 'inferno';
import { cloneVNode } from 'inferno-clone-vnode';
const vNode = <div className="example">Hello world</div>;
const newVNode = cloneVNode(vNode, { id: 'new' }); // we are adding an id prop to the VNode
render(newVNode, container);
```
### `createPortal` (package: 'inferno')
HTML:
```html
<div id="root"></div>
<div id="outside"></div>
```
Javascript:
```jsx
const { render, Component, version, createPortal } from 'inferno';
function Outsider(props) {
return <div>{`Hello ${props.name}!`}</div>;
}
const outsideDiv = document.getElementById('outside');
const rootDiv = document.getElementById('root');
function App() {
return (
<div>
Main view
...
{createPortal(<Outsider name="Inferno" />, outsideDiv)}
</div>
);
}
// render an instance of Clock into <body>:
render(<App />, rootDiv);
```
Results into:
```html
<div id="root">
<div>Main view ...</div>
</div>
<div id="outside">
<div>Hello Inferno!</div>
</div>
```
Cool, huh? Updates (props/context) will flow into "Outsider" component from the App component the same way as any other Component.
For inspiration on how to use it click [here](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202)!
### `createRef` (package: `inferno`)
createRef API provides shorter syntax than callback ref when timing of element is not needed.
```jsx
import { Component, render, createRef } from 'inferno';
class Foobar extends Component {
constructor(props) {
super(props);
// Store reference somewhere
this.element = createRef(); // Returns object {current: null}
}
render() {
return (
<div>
<span id="span" ref={this.element}>
Ok
</span>
</div>
);
}
}
render(<Foobar />, container);
```
### `createFragment` (package: `inferno`)
createFragment is the native way to createFragment vNode. `createFragment(children: any, childFlags: ChildFlags, key?: string | number | null)`
`createFragment` arguments explained:
`children`: (Array) Content of fragment vNode, typically array of VNodes
`childFlags`: (number) is a value from [`ChildFlags`](https://github.com/infernojs/inferno/tree/master/packages/inferno-vnode-flags), this tells inferno shape of the children so normalization process can be skipped.
`key`: (string|number) unique key within this vNodes siblings to identify it during keyed algorithm.
Alternative ways to create fragment vNode are:
- Using JSX `<> ... </>`, `<Fragment> .... </Fragment>` or `<Inferno.Fragment> ... </Inferno.Fragment>`
- Using createElement API `createElement(Inferno.Fragment, {key: 'test'}, ...children)`
- Using hyperscript API `h(Inferno.Fragment, {key: 'test'}, children)`
In the below example both fragments are identical except they have different key
```jsx
import { Fragment, render, createFragment } from 'inferno';
import { ChildFlags } from 'inferno-vnode-flags';
function Foobar() {
return (
<div $HasKeyedChildren>
{createFragment(
[<div>Ok</div>, <span>1</span>],
ChildFlags.HasNonKeyedChildren,
'key1'
)}
<Fragment key="key2">
<div>Ok</div>
<span>1</span>
</Fragment>
</div>
);
}
render(<Foobar />, container);
```
### `forwardRef` (package: `inferno`)
forwardRef is a new mechanism to "forward" ref inside a functional Component.
It can be useful if you have simple functional Components and you want to create reference to a specific element inside it.
```jsx
import { forwardRef, Component, render } from 'inferno';
const FancyButton = forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
class Hello extends Component {
render() {
return (
<FancyButton
ref={btn => {
if (btn) {
// btn variable is the button rendered from FancyButton
}
}}
>
Click me!
</FancyButton>
);
}
}
render(<Hello />, container);
```
### `hydrate` (package: `inferno-hydrate`)
```javascript
import { hydrate } from 'inferno-hydrate';
hydrate(<div />, document.getElementById("app"));
```
Same as `render()`, but is used to hydrate a container whose HTML contents were rendered by `inferno-server`. Inferno will attempt to attach event listeners to the existing markup.
### `findDOMNode` (package: `inferno-extras`)
This feature has been moved from inferno to inferno-compat in v6. No options are needed anymore.
Note: we recommend using a `ref` callback on a component to find its instance, rather than using `findDOMNode()`. `findDOMNode()` cannot be used on functional components.
If a component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements.
In most cases, you can attach a ref to the DOM node and avoid using `findDOMNode()` at all. When render returns null or false, `findDOMNode()` returns null.
If Component has rendered fragment it returns the first element.
### Inferno Flags (package: inferno-vnode-flags)
**VNodeFlags:**
- `VNodeFlags.HtmlElement`
- `VNodeFlags.ComponentUnknown`
- `VNodeFlags.ComponentClass`
- `VNodeFlags.ComponentFunction`
- `VNodeFlags.Text`
- `VNodeFlags.SvgElement`
- `VNodeFlags.InputElement`
- `VNodeFlags.TextareaElement`
- `VNodeFlags.SelectElement`
- `VNodeFlags.Portal`
- `VNodeFlags.ReCreate` (JSX **$ReCreate**) always re-creates the vNode
- `VNodeFlags.ContentEditable`
- `VNodeFlags.Fragment`
- `VNodeFlags.InUse`
- `VnodeFlags.ForwardRef`
- `VNodeFlags.Normalized`
**VNodeFlags Masks:**
- `VNodeFlags.ForwardRefComponent` Functional component wrapped in forward ref
- `VNodeFlags.FormElement` - Is form element
- `VNodeFlags.Element` - Is vNode element
- `VNodeFlags.Component` - Is vNode Component
- `VNodeFlags.DOMRef` - Bit set when vNode holds DOM reference
- `VNodeFlags.InUseOrNormalized` - VNode is used somewhere else or came from normalization process
- `VNodeFlags.ClearInUseNormalized` - Opposite mask of InUse or Normalized
**ChildFlags**
- `ChildFlags.UnknownChildren` needs Normalization
- `ChildFlags.HasInvalidChildren` is invalid (null, undefined, false, true)
- `ChildFlags.HasVNodeChildren` (JSX **$HasVNodeChildren**) is single vNode (Element/Component)
- `ChildFlags.HasNonKeyedChildren` (JSX **$HasNonKeyedChildren**) is Array of vNodes non keyed (no nesting, no holes)
- `ChildFlags.HasKeyedChildren` (JSX **$HasKeyedChildren**) is Array of vNodes keyed (no nesting, no holes)
- `ChildFlags.HasTextChildren` (JSX **$HasTextChildren**) vNode contains only text
**ChildFlags Masks**
- `ChildFlags.MultipleChildren` Is Array
### `renderToString` (package: `inferno-server`)
```javascript
import { renderToString } from 'inferno-server';
const string = renderToString(<div />);
```
Render a virtual node into an HTML string, given the supplied virtual DOM.
## Functional component lifecycle events
| Name | Triggered when | Arguments to callback |
| ----------- | -------------- | ----------------------- |
| `onComponentWillMount` | a functional component is about to mount | |
| `onComponentDidMount` | a functional component has mounted successfully | `domNode` |
| `onComponentShouldUpdate` | a functional component has been triggered to update | `lastProps, nextProps` |
| `onComponentWillUpdate` | a functional component is about to perform an update | `lastProps, nextProps` |
| `onComponentDidUpdate` | a functional component has performed an update | `lastProps, nextProps` |
| `onComponentWillUnmount` | a functional component is about to be unmounted | `domNode` |
| `onComponentDidAppear` | a functional component has mounted and is ready for animations | `domNode, props` |
| `onComponentWillDisappear` | a functional component is unmounted before DOM node is removed | `domNode, props, callback` |
onComponentWillDisappear has special type of argument "callback" which needs to be called when component is ready to be removed from the DOM. fe. after animations are finished.
## Class component lifecycle events
All these Component lifecycle methods ( including `render` and `setState - callback`) are called with Component instance context. You don't need to "bind" these methods.
| Name | Triggered when | Arguments to callback |
| ----------- | -------------- | ----------------------- |
| `componentDidMount` | component has been mounted successfully | |
| `componentWillMount` | component is about to mount | |
| `componentWillReceiveProps` | before render when component updates | `nextProps, context` |
| `shouldComponentUpdate` | component has been triggered to update | `nextProps, nextState` |
| `componentWillUpdate` | component is about to perform an update | `nextProps, nextState, context` |
| `componentDidUpdate` | component has performed an update | `lastProps, lastState, snapshot`|
| `componentWillUnmount` | component is about to be unmounted | |
| `getChildContext` | before render method, return value object is combined to sub tree context | |
| `getSnapshotBeforeUpdate` | before component updates, return value is sent to componentDidUpdate as 3rd parameter | `lastProps, lastState` |
| `static getDerivedStateFromProps` | before render method | `nextProps, state` |
| `componentDidAppear` | component has mounted and is ready for animations | `domNode` |
| `componentWillDisappear` | component is unmounted before DOM node is removed | `domNode, callback` |
componentWillDisappear has special type of argument "callback" which needs to be called when component is ready to be removed from the DOM. fe. after animations are finished.
### Using functional lifecycle events
Functional lifecycle events must be explicitly assigned via props onto a functional component like shown below:
```javascript
import { render } from 'inferno';
function mounted(domNode) {
// [domNode] will be available for DOM nodes and components (if the component has mounted to the DOM)
}
function FunctionalComponent({ props }) {
return <div>Hello world</div>;
}
render(
<FunctionalComponent onComponentDidMount={ mounted } />,
document.getElementById("app")
);
```
Please note: class components (ES2015 classes) from `inferno` **do not** support the same lifecycle events (they have their own lifecycle events that work as methods on the class itself).
## Development vs Production modes
By default, Inferno will run in development mode. Development mode provides extra checks and better error messages at the cost of slower performance and larger code to parse.
When using Inferno in a production environment, it is highly recommended that you turn off development mode.
### Running Inferno on Node JS
Ensure the environment variable `process.env.NODE_ENV` is set to `production`.
## Application bundling
When building your application bundle, ensure `process.env.NODE_ENV` is replaced with string`"development"` or `"production"` based on the workflow.
It is recommended to use [ts-plugin-inferno](https://github.com/infernojs/ts-plugin-inferno) for typescript TSX compilation and [babel-plugin-infeno](https://github.com/infernojs/babel-plugin-inferno) for javascript JSX compilation.
When building for development, you may want to use `inferno.dev.mjs` for v9 or newer and `inferno.dev.esm.js` for older than v9. That bundle file contains ES6 exports for better tree-shaking support, improved error messages and added validation to help fixing possible issues during development.
The file is found from `package.json` - `dev:module` entry point and the files are physically located in `node_modules/inferno/dist/` folder.
Remember that it is not recommended to use that file in production due to slower performance. For production usage use `node_modules/inferno/dist/inferno.mjs` -file for v9 or newer and `node_modules/inferno/dist/inferno.esm.js` -file for older than v9.
Example of **Webpack** configuration:
```js
const path = require('path');
const infernoTsx = require('ts-plugin-inferno').default;
... webpack config ...
module: {
rules: [
{
test: /\.js$/, // Add "jsx" if your application uses `jsx` file extensions
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
plugins: [
// Compile javascript JSX syntax using inferno's own plugin
['babel-plugin-inferno', {imports: true}]
]
}
}]
},
{
test: /\.ts+(|x)$/, // Compile ts and tsx extensions
exclude: /node_modules/,
use: [{
loader: 'ts-loader',
options: {
getCustomTransformers: () => ({
// inferno custom TSX plugin
after: [infernoTsx()]
}),
compilerOptions: {
/* typescript compiler options */
}
}
}]
}
]
},
resolve: {
extensions: ['.js', '.ts', '.tsx'],
alias: {
// This maps import "inferno" to es6 module entry based on workflow
inferno: path.resolve(__dirname, 'node_modules/inferno/dist', isProduction ? 'index.dev.mjs' : 'index.mjs')
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development')
}
})
]
```
Example of **Rollup** configuration:
```js
const path = require('path');
const alias = require('@rollup/plugin-alias');
const {babel} = require('@rollup/plugin-babel');
const replace = require('@rollup/plugin-replace');
const typescript = require('rollup-plugin-typescript2');
const transformInferno = require('ts-plugin-inferno').default;
... Rollup config ...
{
input: /* entry file */,
plugins: [
alias({
resolve: ['.js'],
entries: [
// This maps import "inferno" to es6 module entry based on workflow
{find: 'inferno', replacement: path.resolve(__dirname, 'node_modules/inferno/dist', isProduction ? 'index.dev.mjs' : 'index.mjs')}
]
}),
typescript({
include: ['*.ts+(|x)', '**/*.ts+(|x)'],
transformers: [
() => ({
after: [transformInferno()]
})
],
tsconfig: 'tsconfig.json',
tsconfigOverride: {
/* typescript compiler options */
}
}),
babel({
babelrc: false,
sourceMaps: isDeploy,
plugins: [
// Compile javascript JSX syntax using inferno's own plugin
['babel-plugin-inferno', {imports: true}]
],
babelHelpers: 'bundled'
})
]
}
```
### Custom namespaces
Inferno always wants to deliver great performance. In order to do so, it has to make intelligent assumptions about the state of the DOM and the elements available to mutate. Custom namespaces conflict with this idea and change the schema of how different elements and attributes might work, so Inferno makes no attempt to support namespaces. Instead, SVG namespaces are automatically applied to elements and attributes based on their `tag name`.
## Development
If you want to contribute code, fork this project and submit a PR from your fork. To run browser tests you need to build the repos. A complete rebuild of the repos can take >5 mins.
```sh
$ git clone git@github.com:infernojs/inferno.git
$ cd inferno && npm i
$ npm run test:node
$ npm run build
$ npm run test:browser
```
If you only want to run the browser tests when coding, use the following to reduce turnaround by 50-80%:
```sh
$ npm run quick-test:browser # Compiles all packages and runs browser tests
$ npm run quick-test:browser-inferno # Only compiles the inferno package and runs browser tests
$ npm run quick-test:browser-debug # Compiles all packages and runs browser tests with "debug"
```
## Community
There is an InfernoJS Discord. You can join via [https://discord.gg/SUKuhgaBpF](https://discord.gg/SUKuhgaBpF).
### Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
<a href="https://github.com/infernojs/inferno/graphs/contributors"><img src="https://opencollective.com/inferno/contributors.svg?width=890" /></a>
### Backers
Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/inferno#backer)]
<a href="https://opencollective.com/inferno#backers" target="_blank"><img src="https://opencollective.com/inferno/backers.svg?width=890"></a>
### Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/inferno#sponsor)]
<a href="https://opencollective.com/inferno/sponsor/0/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/1/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/2/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/3/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/4/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/5/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/6/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/7/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/8/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/inferno/sponsor/9/website" target="_blank"><img src="https://opencollective.com/inferno/sponsor/9/avatar.svg"></a>
================================================
FILE: browser/jsfiddle-integration-babel7v3.js
================================================
document.addEventListener('DOMContentLoaded', function(event) {
Babel.registerPlugin("inferno", window["babel-plugin-inferno"]);
window.inferno = window.Inferno;
var tag = document.querySelector('script[type="application/javascript"]');
if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
alert('Bad JSFiddle configuration, please fork the original Inferno JSFiddle');
}
tag.setAttribute('type', 'text/babel');
tag.setAttribute('data-plugins', 'inferno,transform-modules-umd');
tag.setAttribute('data-presets', 'es2017');
tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
});
================================================
FILE: demo/inferno-router-demo/.babelrc
================================================
{
"plugins": [
"inferno"
]
}
================================================
FILE: demo/inferno-router-demo/.gitignore
================================================
.DS_Store
.git/
# VS Code specific
.vscode
jsconfig.json
typings/*
typings.json
# Dependency directory for NPM
node_modules
# Built at startup
.env
pwd.txt
lerna-debug.log
dist
distServer
distBrowser
package-lock.json
.parcel-cache
================================================
FILE: demo/inferno-router-demo/.proxyrc
================================================
{
"/api": {
"target": "http://127.0.0.1:3000/"
}
}
================================================
FILE: demo/inferno-router-demo/README.md
================================================
# Demo of Inferno-Router
NOTE: Requires Nodejs >=18 (uses `fetch`)
```sh
cd demo/inferno-router-demo
npm i
npm run dev
```
Go to http://127.0.0.1:1234/
================================================
FILE: demo/inferno-router-demo/package.json
================================================
{
"name": "inferno-router-demo",
"version": "8.0.5",
"description": "Influence CMS Demo",
"author": "Sebastian Ware <sebastian@urbantalk.se> (https://github.com/jhsware)",
"license": "SEE LICENSE IN LICENSE",
"source": "src/index.html",
"browserslist": "> 0.5%, last 2 versions, not dead",
"scripts": {
"dev:frontend": "cross-env FORCE_COLOR=1 parcel",
"dev:backend": "cross-env FORCE_COLOR=1 ts-node-dev --respawn src/server.ts"
},
"dependencies": {
"inferno": "file:../../packages/inferno",
"inferno-animation": "file:../../packages/inferno-animation",
"inferno-create-element": "file:../../packages/inferno-create-element",
"inferno-hydrate": "file:../../packages/inferno-hydrate",
"inferno-router": "file:../../packages/inferno-router",
"inferno-server": "file:../../packages/inferno-server",
"koa": "^2.15.3",
"koa-json-body": "^5.3.0",
"koa-logger": "^3.2.1",
"koa-mount": "^4.0.0",
"koa-router": "^13.0.1",
"koa-static": "^5.0.0"
},
"devDependencies": {
"@babel/plugin-transform-modules-commonjs": "^7.25.9",
"@parcel/config-default": "^2.13.2",
"@parcel/packager-ts": "^2.13.2",
"@parcel/transformer-babel": "^2.13.2",
"@parcel/transformer-sass": "^2.13.2",
"@parcel/transformer-typescript-types": "^2.13.2",
"@types/node": "^22.10.0",
"babel-plugin-inferno": "^6.7.2",
"cross-env": "^7.0.3",
"jest-environment-jsdom": "^29.7.0",
"parcel": "^2.13.2",
"process": "^0.11.10",
"ts-node-dev": "^2.0.0",
"typescript": "^5.7.2"
},
"alias": {
"inferno": "inferno/dist/index.dev.mjs",
"inferno-animation": "inferno-animation/dist/index.dev.mjs",
"inferno-create-element": "inferno-create-element/dist/index.dev.mjs",
"inferno-hydrate": "inferno-hydrate/dist/index.dev.mjs",
"inferno-router": "inferno-router/dist/index.dev.mjs",
"inferno-server": "inferno-server/dist/index.dev.mjs"
}
}
================================================
FILE: demo/inferno-router-demo/src/App.tsx
================================================
import { Component } from 'inferno'
import { Route } from 'inferno-router'
/**
* Pages
*/
import StartPage from './pages/StartPage'
import AboutPage from './pages/AboutPage'
import ContentPage from './pages/ContentPage'
/**
* The Application
*/
export class App extends Component {
render(props) {
return props.children;
}
};
export function appFactory () {
return (
<App>
{/* Public Pages */}
<Route exact path={`/`} component={ StartPage } />
<Route exact path={`/about`} component={ AboutPage } loader={AboutPage.fetchData} />
<Route exact path={`/page/:slug`} component={ ContentPage } loader={ContentPage.fetchData} />
</App>
)
}
================================================
FILE: demo/inferno-router-demo/src/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Inferno Router Demo</title>
<script type="module" src="index.tsx"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
================================================
FILE: demo/inferno-router-demo/src/index.tsx
================================================
import { render } from 'inferno';
import { BrowserRouter } from 'inferno-router'
import { appFactory } from './App';
declare global {
interface Window {
__initialData__: any
}
}
render(<BrowserRouter initialData={window.__initialData__}>{appFactory()}</BrowserRouter>, document.getElementById('app'))
================================================
FILE: demo/inferno-router-demo/src/indexServer.tsx
================================================
import { hydrate } from 'inferno-hydrate';
import { BrowserRouter } from 'inferno-router'
import { appFactory } from './App';
declare global {
interface Window {
__initialData__: any
}
}
hydrate(<BrowserRouter initialData={window.__initialData__}>{appFactory()}</BrowserRouter>, document.getElementById('app'))
================================================
FILE: demo/inferno-router-demo/src/pages/AboutPage.scss
================================================
================================================
FILE: demo/inferno-router-demo/src/pages/AboutPage.tsx
================================================
import { Component } from 'inferno';
import PageTemplate from './PageTemplate';
import { useLoaderData } from 'inferno-router';
import './AboutPage.scss';
import { useLoaderError } from 'inferno-router';
const BACKEND_HOST = 'http://localhost:1234';
export default class AboutPage extends Component {
static async fetchData({ request }) {
const fetchOptions: RequestInit = {
headers: {
Accept: 'application/json',
},
signal: request?.signal,
};
return fetch(new URL('/api/about', BACKEND_HOST), fetchOptions);
}
render(props) {
const data = useLoaderData<{ title: string, body: string}>(props);
const err = useLoaderError<{ message: string }>(props);
return (
<PageTemplate>
<article>
<h1>{data?.title}</h1>
<p>{data?.body || err?.message}</p>
</article>
</PageTemplate>
);
}
}
================================================
FILE: demo/inferno-router-demo/src/pages/ContentPage.scss
================================================
================================================
FILE: demo/inferno-router-demo/src/pages/ContentPage.tsx
================================================
import { Component } from 'inferno';
import PageTemplate from './PageTemplate';
import { useLoaderData } from 'inferno-router';
import './AboutPage.scss';
import { useLoaderError } from 'inferno-router';
const BACKEND_HOST = 'http://localhost:1234';
export default class ContentPage extends Component {
static async fetchData({ params, request }) {
const pageSlug = params.id;
const fetchOptions: RequestInit = {
headers: {
Accept: 'application/json',
},
signal: request?.signal
};
return fetch(new URL(`/api/page/${params.slug}`, BACKEND_HOST), fetchOptions);
}
render(props) {
const data = useLoaderData<{ title: string, body: string}>(props);
const err = useLoaderError<{ message: string }>(props);
return (
<PageTemplate>
<article>
<h1>{data?.title}</h1>
<p>{data?.body || err?.message}</p>
</article>
</PageTemplate>
);
}
}
================================================
FILE: demo/inferno-router-demo/src/pages/PageTemplate.scss
================================================
:root {
--rowGap: 2rem;
}
.page {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
h1, h2 {
margin-bottom: 1.5em;
}
header {
flex-grow: 0;
& > nav > ul {
display: flex;
flex-flow: row wrap;
gap: var(--rowGap);
align-items: center;
justify-content: center;
padding: 0;
& > li {
list-style: none;
}
}
}
main {
flex-grow: 1;
display: flex;
flex-flow: column;
align-items: center;
justify-content: flex-start;
text-align: center;
& > * {
max-width: 50rem
}
& > .body {
width: 100%;
}
}
footer {
flex-grow: 0
}
}
================================================
FILE: demo/inferno-router-demo/src/pages/PageTemplate.tsx
================================================
import { Link } from 'inferno-router'
import './PageTemplate.scss'
export default function PageTemplate({ id = undefined, children }) {
return (
<div id={id} className="page">
<header>
<nav>
<ul>
<li><Link to="/">Start</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/page/one">Page One</Link></li>
<li><Link to="/page/two">Page Two</Link></li>
</ul>
</nav>
</header>
<main>{children}</main>
<footer>
<p>Page Footer</p>
</footer>
</div>
)
}
================================================
FILE: demo/inferno-router-demo/src/pages/StartPage.scss
================================================
================================================
FILE: demo/inferno-router-demo/src/pages/StartPage.tsx
================================================
import { Component } from 'inferno'
import PageTemplate from './PageTemplate'
import './StartPage.scss'
interface IProps {
fetchData: any;
}
export default class StartPage extends Component<IProps> {
static async fetchData({ match }) {
const pageSlug = match.params.id
return [];
}
render() {
return (
<PageTemplate>
<article>
<h1>Start Page</h1>
<p>Some content</p>
</article>
</PageTemplate>
)
}
}
================================================
FILE: demo/inferno-router-demo/src/server.ts
================================================
import * as koa from 'koa'; // koa@2
import * as logger from 'koa-logger';
import * as koaRouter from 'koa-router'; // koa-router@next
import * as koaStatic from 'koa-static';
import * as koaMount from 'koa-mount';
import { renderToString } from 'inferno-server';
import { StaticRouter, resolveLoaders, traverseLoaders } from 'inferno-router'
import {Parcel} from '@parcel/core';
import { createElement } from 'inferno-create-element';
const PORT = process.env.PORT || 3000;
const BASE_URI = `http://localhost:${PORT}`;
// Parcel watch subscription and bundle output
// NOTE: Currently deactivated watcher (the following line and `bundler.watch` further down)
// let subscription;
let bundles;
let bundler = new Parcel({
// NOTE: Specifying target: { source: './src/App.tsx' } didn't work for me
entries: ['./src/App.tsx', './src/indexServer.tsx'],
defaultConfig: '@parcel/config-default',
targets: {
default: {
context: 'node',
engines: {
node: ">=18"
},
distDir: "./distServer",
publicUrl: "/", // Should be picked up from environment
},
browser: {
context: 'browser',
engines: {
browsers: '> 0.5%, last 2 versions, not dead'
},
distDir: "./distBrowser",
publicUrl: "/", // Should be picked up from environment
}
},
mode: 'development'
});
const app = new koa()
const api = new koaRouter()
const frontend = new koaRouter()
/**
* Logging
*/
app.use(logger((str, args) => {
console.log(str)
}))
/**
* Endpoint for healthcheck
*/
api.get('/api/ping', (ctx) => {
ctx.body = 'ok';
});
api.get('/api/about', async (ctx) => {
return new Promise((resolve) => {
setTimeout(() => {
ctx.body = {
title: "Inferno-Router",
body: "Routing with async data loader support."
};
resolve(null);
}, 500)
})
});
api.get('/api/page/:slug', async (ctx) => {
return new Promise((resolve) => {
setTimeout(() => {
ctx.body = {
title: ctx.params.slug.toUpperCase(),
body: "This is a page."
};
resolve(null);
}, 1300)
})
});
function renderPage(html, initialData) {
return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Inferno Router Demo</title>
<link rel="stylesheet" href="/dist/App.css"/>
<script type="module" src="/dist/indexServer.js"></script>
<script>
window.__initialData__ = ${JSON.stringify(initialData)};
</script>
</head>
<body>
<div id="app">${html}</div>
</body>
</html>
`
}
frontend.get('(/page)?/:slug?', async (ctx) => {
const location = ctx.path;
const pathToAppJs = bundles.find(b => b.name === 'App.js' && b.env.context === 'node').filePath;
const { appFactory } = require(pathToAppJs)
const app = appFactory();
const loaderEntries = traverseLoaders(location, app, BASE_URI);
const initialData = await resolveLoaders(loaderEntries);
const htmlApp = renderToString(createElement(StaticRouter, {
context: {},
location,
initialData,
}, app))
ctx.body = renderPage(htmlApp, initialData);
})
/**
* Mount all the routes for Koa to handle
*/
app.use(api.routes());
app.use(api.allowedMethods());
app.use(frontend.routes());
app.use(frontend.allowedMethods());
app.use(koaMount('/dist', koaStatic('distBrowser')));
// bundler.watch((err, event) => {
// if (err) {
// // fatal error
// throw err;
// }
// if (event.type === 'buildSuccess') {
// bundles = event.bundleGraph.getBundles();
// console.log(`✨ Built ${bundles.length} bundles in ${event.buildTime}ms!`);
// } else if (event.type === 'buildFailure') {
// console.log(event.diagnostics);
// }
// }).then((sub => subscription = sub));
app.listen(PORT, async () => {
// Trigger first transpile
// https://parceljs.org/features/parcel-api/
try {
let {bundleGraph, buildTime} = await bundler.run();
bundles = bundleGraph.getBundles();
console.log(`✨ Built ${bundles.length} bundles in ${buildTime}ms!`);
} catch (err) {
console.log(err.diagnostics);
}
console.log('Server listening on: ' + PORT)
})
================================================
FILE: demo/inferno-router-demo/tsconfig.json
================================================
{
"compilerOptions": {
"module": "commonjs",
"target": "es2020",
"moduleResolution": "Node",
"jsx": "preserve",
"lib": [
"dom",
"es2022"
],
"types": [
"inferno",
"node"
],
}
}
================================================
FILE: docs/1kcomponents/app.js
================================================
import { Component, render } from 'inferno';
// import { startFPSMonitor, startMemMonitor } from 'perf-monitor';
import { interpolateViridis } from 'd3-scale-chromatic';
// startFPSMonitor();
// startMemMonitor();
function map(arr, to) {
let out = [];
for (let i = 0; i < arr.length; i++) {
out.push(to(arr[i]));
}
return out;
}
class Demo extends Component {
constructor(props, context) {
super(props, context);
this.state = {
numPoints: 0
};
this.updateCount = this.updateCount.bind(this);
}
updateCount(e) {
this.setState({
numPoints: e.target.value
});
}
componentDidMount() {
this.setState({
numPoints: 1000
});
}
render(props, state) {
return (
<div className="app-wrapper">
<VizDemo count={state.numPoints} />
<div className="controls">
# Points
<input type="range" min={10} max={10000} value={state.numPoints} onInput={this.updateCount} />
{state.numPoints}
</div>
<div className="about">
InfernoJS 1k Components Demo based on the Glimmer demo by{' '}
<a href="http://mlange.io" target="_blank">
Michael Lange
</a>
.
</div>
</div>
);
}
}
const Layout = {
PHYLLOTAXIS: 0,
GRID: 1,
WAVE: 2,
SPIRAL: 3
};
const LAYOUT_ORDER = [Layout.PHYLLOTAXIS, Layout.SPIRAL, Layout.PHYLLOTAXIS, Layout.GRID, Layout.WAVE];
class VizDemo extends Component {
constructor(props, context) {
super(props, context);
this.layout = 0;
this.phyllotaxis = genPhyllotaxis(100);
this.grid = genGrid(100);
this.wave = genWave(100);
this.spiral = genSpiral(100);
this.points = [];
this.step = 0;
this.numSteps = 60 * 2;
}
next() {
this.step = (this.step + 1) % this.numSteps;
if (this.step === 0) {
this.layout = (this.layout + 1) % LAYOUT_ORDER.length;
}
// Clamp the linear interpolation at 80% for a pause at each finished layout state
const pct = Math.min(1, this.step / (this.numSteps * 0.8));
const currentLayout = LAYOUT_ORDER[this.layout];
const nextLayout = LAYOUT_ORDER[(this.layout + 1) % LAYOUT_ORDER.length];
// Keep these redundant computations out of the loop
const pxProp = xForLayout(currentLayout);
const nxProp = xForLayout(nextLayout);
const pyProp = yForLayout(currentLayout);
const nyProp = yForLayout(nextLayout);
this.points = this.points.map((point) => {
const newPoint = { ...point };
newPoint.x = lerp(newPoint, pct, pxProp, nxProp);
newPoint.y = lerp(newPoint, pct, pyProp, nyProp);
return newPoint;
});
this.setState();
requestAnimationFrame(() => {
this.next();
});
}
setAnchors(arr) {
arr.map((p, index) => {
const [gx, gy] = project(this.grid(index));
const [wx, wy] = project(this.wave(index));
const [sx, sy] = project(this.spiral(index));
const [px, py] = project(this.phyllotaxis(index));
Object.assign(p, { gx, gy, wx, wy, sx, sy, px, py });
});
this.points = arr;
}
makePoints(count) {
const newPoints = [];
for (var i = 0; i < count; i++) {
newPoints.push({
x: 0,
y: 0,
color: interpolateViridis(i / count)
});
}
this.setAnchors(newPoints);
}
componentWillReceiveProps(props) {
if (props.count !== this.props.count) {
this.phyllotaxis = genPhyllotaxis(props.count);
this.grid = genGrid(props.count);
this.wave = genWave(props.count);
this.spiral = genSpiral(props.count);
this.makePoints(props.count);
}
}
componentDidMount() {
this.next();
}
renderPoint(point) {
return <Point x={point.x} y={point.y} color={point.color} />;
}
render() {
return (
<svg className="demo">
<g $HasNonKeyedChildren>{map(this.points, this.renderPoint)}</g>
</svg>
);
}
}
function Point({ x, y, color }) {
return <rect className="point" transform={`translate(${Math.floor(x)}, ${Math.floor(y)})`} fill={color} />;
}
const theta = Math.PI * (3 - Math.sqrt(5));
function xForLayout(layout) {
switch (layout) {
case Layout.PHYLLOTAXIS:
return 'px';
case Layout.GRID:
return 'gx';
case Layout.WAVE:
return 'wx';
case Layout.SPIRAL:
return 'sx';
}
}
function yForLayout(layout) {
switch (layout) {
case Layout.PHYLLOTAXIS:
return 'py';
case Layout.GRID:
return 'gy';
case Layout.WAVE:
return 'wy';
case Layout.SPIRAL:
return 'sy';
}
}
function lerp(obj, percent, startProp, endProp) {
let px = obj[startProp];
return px + (obj[endProp] - px) * percent;
}
function genPhyllotaxis(n) {
return (i) => {
let r = Math.sqrt(i / n);
let th = i * theta;
return [r * Math.cos(th), r * Math.sin(th)];
};
}
function genGrid(n) {
let rowLength = Math.round(Math.sqrt(n));
return (i) => [-0.8 + (1.6 / rowLength) * (i % rowLength), -0.8 + (1.6 / rowLength) * Math.floor(i / rowLength)];
}
function genWave(n) {
let xScale = 2 / (n - 1);
return (i) => {
let x = -1 + i * xScale;
return [x, Math.sin(x * Math.PI * 3) * 0.3];
};
}
function genSpiral(n) {
return (i) => {
let t = Math.sqrt(i / (n - 1)),
phi = t * Math.PI * 10;
return [t * Math.cos(phi), t * Math.sin(phi)];
};
}
function scale(magnitude, vector) {
return vector.map((p) => p * magnitude);
}
function translate(translation, vector) {
return vector.map((p, i) => p + translation[i]);
}
function project(vector) {
const wh = window.innerHeight / 2;
const ww = window.innerWidth / 2;
return translate([ww, wh], scale(Math.min(wh, ww), vector));
}
render(<Demo />, document.getElementById('app'));
================================================
FILE: docs/1kcomponents/index.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
================================================
FILE: docs/1kcomponents/style.css
================================================
html,
body {
padding: 0;
margin: 0;
font-family: sans-serif;
width: 100%;
height: 100%;
background: #111;
color: #777;
}
a {
color: #777;
}
.demo {
overflow-x: hidden;
position: relative;
}
.point {
width: 4px;
height: 4px;
position: absolute;
shape-rendering: optimizeSpeed;
}
.controls {
position: fixed;
top: 0;
width: 100%;
padding: 15px;
background: #e41f1c;
border-bottom: 1px solid darkred;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: white;
white-space: nowrap;
}
.controls > input {
margin: 0 10px;
width: 50%;
}
.controls label {
margin-left: 30px;
}
#stats {
position: fixed;
top: 0;
right: 0;
}
.about {
position: fixed;
bottom: 0;
width: 100%;
padding: 10px;
}
#app,
.app-wrapper,
.demo {
width: 100%;
height: 100%;
overflow: hidden;
}
================================================
FILE: docs/animations/app.css
================================================
:root {
--infernoAnimationEnter: border-width .25s ease-out, padding .25s ease-out, height .25s ease-out, opacity .6s ease-in;
--infernoAnimationLeave: border-width .25s ease-out, padding 1s ease-out, height 1s ease-out, opacity 1.2s ease-in;
--fadeAnimationEnter: opacity 0.1s ease-in;
--fadeAnimationLeave: opacity 2s ease-out;
--movePlaceholderAnimation: height 1s, border-width 1s, padding 1s;
--moveAnimation: transform 1s;
}
/******************************/
/* Animate height and opacity */
/******************************/
.HeightAndFade-leave {
/* Leave animation start state */
opacity: 1;
}
.HeightAndFade-leave-active {
/* Leave animation transitions */
overflow: hidden;
transition: var(--infernoAnimationLeave);
}
.HeightAndFade-leave-end {
/* Leave animation end state */
opacity: 0;
height: 0;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
}
.HeightAndFade-enter {
/* Enter animation start state */
opacity: 0;
height: 0;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
}
.HeightAndFade-enter-active {
/* Enter animation transitions */
transition: var(--infernoAnimationEnter);
}
.HeightAndFade-enter-end {
/* Enter animation end state */
opacity: 1;
}
/*************************/
/* Simple fade animation */
/*************************/
.fade-enter,
.fade-leave-end {
opacity: 0;
}
.fade-enter-end,
.fade-leave {
opacity: 1;
}
.fade-leave-active {
/* Leave animation transitions */
transition: var(--fadeAnimationLeave);
}
.fade-enter-active {
/* Enter animation transitions */
transition: var(--fadeAnimationEnter);
}
/*****************/
/* Animate moves */
/*****************/
.MoveAnim-move-active {
--moveAnimation: ;
/* Move animation transitions */
transition: transform 1.5s; /*var(--moveAnimation);*/
z-index: 1;
opacity: 0.6;
}
/***************************/
/* General styling of page */
/***************************/
article,
ul {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 0.5rem;
}
section,
li {
box-sizing: border-box;
padding: 0.5rem 1rem;
background: #4A90E2;
color: white;
text-align: center;
max-width: 10rem;
border-top: 1px solid #fff;
}
section:hover,
li:hover {
background: #3775bb;
}
span.divider,
li.divider {
display: block;
height: 5px;
background: #ccc;
border-width: 0;
}
button {
padding: 0.5rem 1rem;
margin-top: 0.5rem;
display: block;
background: #35a748;
color: white;
border-style: none;
border-radius: 4px;
width: 10rem;
} button:hover {
background: #3775bb;
}
body {
font-family: helvetica;
box-sizing: border-box;
margin: 0;
padding: 1rem;
display: flex;
gap: 2rem;
justify-content: center;
align-items: flex-end;
height: 100vh;
overflow-y: scroll;
}
.App {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 1rem;
}
h1 {
transform: rotate(-90deg);
font-size: 2rem;
font-weight: 800;
color: #ddd;
text-align: center;
margin: 0.5rem;
white-space: nowrap;
width: 2rem;
transform-origin: 50% 50%;
}
h1 small {
font-size: 0.5em;
}
h1 small a {
color: #4A90E2;
text-decoration: none;
}
h1 small a:hover {
color: #3775bb;
}
h2 {
font-size: 1rem;
font-weight: 100;
color: #4A90E2;
text-align: center;
}
p {
width: 10rem;
font-size: 0.65rem;
font-weight: 100;
color: #888;
text-align: center;
margin-top: -0.5em;
}
/**
* Debug markers
* To render debug markers, set _DBG_MVE_ = true in animations.ts
**/
.debugMarker {
display: block;
position: absolute;
transform: translate(calc(-100% - 7px), -50%);
padding-right: 15px;
z-index: 999;
font-size: 10px;
}
.debugMarker-src:after {
position: absolute;
content: '';
right: -15px;
top: 50%;
transform: translateY(-50%);
border: 10px solid transparent;
border-left-color: red;
opacity: 0.3;
}
.debugMarker-src {
transform: translate(calc(-200% - 7px), -50%);
}
.debugMarker-trg:after {
position: absolute;
content: '';
right: -15px;
top: 50%;
transform: translateY(-50%);
border: 10px solid transparent;
border-left-color: green;
opacity: 0.3;
}
================================================
FILE: docs/animations/app.js
================================================
import { Component, render } from 'inferno';
import { createElement } from 'inferno-create-element';
import { AnimatedComponent, AnimatedMoveComponent, componentDidAppear, componentWillDisappear, componentWillMove, utils } from 'inferno-animation';
var { addClassName, removeClassName, forceReflow, registerTransitionListener } = utils;
let renderCounter = 0;
const anim = {
onComponentDidAppear: componentDidAppear,
onComponentWillDisappear: componentWillDisappear
};
const animMove = {
onComponentWillMove: componentWillMove
};
class ListItem extends AnimatedComponent {
render() {
renderCounter++;
return createElement('li', { onClick: (e) => this.props.onClick(e, this.props.index) }, this.props.children);
}
}
class SectionItem extends AnimatedComponent {
render() {
renderCounter++;
return createElement('section', { onClick: (e) => this.props.onClick(e, this.props.index) }, this.props.children);
}
}
const FuncListItem = ({ children, ...props }) => {
renderCounter++;
return createElement('li', { onClick: (e) => props.onClick(e, props.index) }, children);
};
const FuncSectionItem = ({ children, ...props }) => {
renderCounter++;
return createElement('section', { onClick: (e) => props.onClick(e, props.index) }, children);
};
class ListItemMoveAnim extends AnimatedMoveComponent {
render() {
renderCounter++;
return createElement('li', { onClick: (e) => this.props.onClick(e, this.props.index) }, this.props.children);
}
}
const FuncListItemMoveAnim = ({ children, ...props }) => {
renderCounter++;
return createElement('li', { onClick: (e) => props.onClick(e, props.index) }, children);
};
class List extends Component {
constructor() {
super();
this.state = {
items: []
};
this.items = [];
}
doRemove = (e, index) => {
e.preventDefault();
var newItems = this.state.items.concat([]);
newItems.splice(index, 1);
this.setState({
items: newItems
});
};
doAdd = (e) => {
e.preventDefault();
var newItems = this.state.items.concat([]);
var nextKey = newItems.length === 0 ? 0 : newItems[newItems.length - 1].key + 1;
newItems.push({ key: nextKey });
this.setState({
items: newItems
});
};
doRemove20 = (e) => {
e.preventDefault();
var newItems = this.state.items.concat([]);
newItems.splice(newItems.length >= 20 ? newItems.length - 20 : 0, newItems.length >= 20 ? 20 : newItems.length);
this.setState({
items: newItems
});
};
doAdd20 = (e) => {
e.preventDefault();
var newItems = this.state.items.concat([]);
var nextKey = newItems.length === 0 ? 0 : newItems[newItems.length - 1].key + 1;
for (var i = 0; i < 20; i++) {
newItems.push({ key: nextKey + i });
}
this.setState({
items: newItems
});
};
componentDidMount() {
let i = 0;
while (this.items.length < 20) {
this.items[this.items.length] = { key: i++ };
}
this.setState({ items: this.items });
}
renderItem = (item, i) => {
if (this.props.useFunctionalComponent) {
return createElement(FuncListItem, { key: item.key, index: i, animation: this.props.animation, ...anim, onClick: this.doRemove }, `${item.key + 1}bar`);
} else {
return createElement(ListItem, { key: item.key, index: i, animation: this.props.animation, onClick: this.doRemove }, `${item.key + 1}bar`);
}
};
render() {
return createElement('div', null, [
createElement('ul', null, this.state.items.map(this.renderItem)),
createElement('h2', null, this.props.animation),
createElement('p', null, this.props.description),
createElement('button', { onClick: this.doAdd }, 'Add'),
createElement('button', { onClick: this.doAdd20 }, 'Add 20'),
createElement('button', { onClick: this.doRemove20 }, 'Remove 20')
]);
}
}
class MixedList extends Component {
constructor() {
super();
let i = 0;
let items = [];
while (items.length < 40) {
items[items.length] = { key: i++, isListItem: true };
items[items.length] = { key: i++ };
}
this.state = {
items
};
}
componentDidAppear = (dom) => {
const animCls = {
start: 'fade-enter',
active: 'fade-enter-active',
end: 'fade-enter-end'
};
// 1. Set animation start state
addClassName(dom, animCls.start);
forceReflow();
// 2. Activate transition
addClassName(dom, animCls.active);
// 3. Set an animation listener, code at end
// Needs to be done after activating so timeout is calculated correctly
registerTransitionListener([dom], function () {
// *** Cleanup ***
// 5. Remove the element
removeClassName(dom, animCls.active);
removeClassName(dom, animCls.end);
});
// 4. Activate target state
requestAnimationFrame(() => {
removeClassName(dom, animCls.start);
addClassName(dom, animCls.end);
});
};
componentWillDisappear = (dom, callback) => {
const animCls = {
start: 'fade-leave',
active: 'fade-leave-active',
end: 'fade-leave-end'
};
// 1. Set animation start state
addClassName(dom, animCls.start);
// 2. Activate transitions
addClassName(dom, animCls.active);
// 3. Set an animation listener, code at end
// Needs to be done after activating so timeout is calculated correctly
registerTransitionListener([dom], function () {
// *** Cleanup ***
// Simulate some work is being done
// setTimeout(function () {
// callback();
// }, 1000);
callback();
});
// 4. Activate target state
requestAnimationFrame(() => {
addClassName(dom, animCls.end);
removeClassName(dom, animCls.start);
});
};
doRemove = (e, index) => {
e.preventDefault();
var newItems = this.state.items.concat([]);
newItems.splice(index, 1);
this.setState({
items: newItems
});
};
doRemoveSpecial = (e) => {
e.preventDefault();
// Remove random ListItem and trigger animation
var onlyListItems = this.state.items.filter((item) => item.isListItem);
var toDeleteIndex = parseInt(Math.round(Math.random() * (onlyListItems.length - 1)));
var toDeleteKey = onlyListItems[toDeleteIndex].key;
var newItems = this.state.items.filter((item) => item.key !== toDeleteKey);
this.setState({
items: newItems
});
// Remove random divider during animation
// NOTE! If the divider is the last element, it will cause everything to be removed,
// thus cutting the running animation short. This is expected behaviour because we don't
// check if the parent has an animating child. Opportunity for improvement.
setTimeout(() => {
var onlyDividers = this.state.items.filter((item) => !item.isListItem);
var toDeleteIndex = parseInt(Math.round(Math.random() * (onlyDividers.length - 1)));
var counter = 0;
var newItems = this.state.items.filter((item) => item.isListItem || counter++ !== toDeleteIndex);
this.setState({
items: newItems
});
}, 100);
};
doAdd = (e) => {
e.preventDefault();
var newItems = this.state.items.concat([]);
var nextKey = newItems.reduce((prev, curr) => (curr.key > prev ? curr.key : prev), 0) + 1;
newItems.push({ key: nextKey, isListItem: true });
newItems.push({ key: nextKey + 1 });
this.setState({
items: newItems
});
};
renderItem = (item, i) => {
if (this.props.useFunctionalComponent) {
return createElement(
FuncSectionItem,
{ key: item.key, index: i, animation: this.props.animation, ...anim, onClick: this.doRemove },
`${item.key + 1}bar`
);
} else {
return createElement(SectionItem, { key: item.key, index: i, animation: this.props.animation, onClick: this.doRemove }, `${item.key + 1}bar`);
}
};
render() {
// Mixing <section> and <span> instead of using <li> for all to trigger special code path in Inferno
return createElement('div', null, [
createElement(
'article',
null,
this.state.items.map((item, i) => (item.isListItem ? this.renderItem(item, i) : createElement('span', { className: 'divider' })))
),
createElement('h2', null, 'Mixed list'),
createElement('p', null, this.props.description),
createElement('button', { onClick: this.doAdd }, 'Add'),
createElement('button', { onClick: this.doRemoveSpecial }, 'Remove')
]);
}
}
class ShuffleList extends Component {
constructor() {
super();
// set initial time:
this.state = {
items: []
};
this.items = [];
}
doRemove = (e, index) => {
e && e.preventDefault();
var newItems = this.state.items.concat([]);
newItems.splice(index, 1);
this.setState({
items: newItems
});
};
doAdd = (e) => {
e && e.preventDefault();
var newItems = this.state.items.concat([]);
var nextKey = newItems.reduce((prev, curr) => (curr.key > prev ? curr.key : prev), 0) + 1;
newItems.push({ key: nextKey, val: nextKey });
this.setState({
items: newItems
});
};
doMix = (e) => {
e && e.preventDefault();
var newItems = this.state.items.concat([]);
shuffle(newItems);
this.setState({
items: newItems
});
};
doReassignKeys = (e) => {
e && e.preventDefault();
var tmpItems = this.state.items.concat([]);
shuffle(tmpItems);
var newItems = this.state.items.map((item, index) => {
return Object.assign({}, item, { key: tmpItems[index].key });
});
this.setState({
items: newItems
});
};
doRemoveMix = (e) => {
e && e.preventDefault();
if (this.state.items.length === 0) {
return;
}
// Remove random ListItem and trigger animation
var toDeleteIndex = parseInt(Math.round(Math.random() * (this.state.items.length - 1)));
var toDeleteKey = this.state.items[toDeleteIndex].key;
var newItems = this.state.items.filter((item) => item.key !== toDeleteKey);
this.setState({
items: newItems,
deleted: toDeleteKey + 1
});
setTimeout(() => this.doMix(e), 100);
};
removeAndShuffle = (e) => {
e && e.preventDefault();
for (let i = 0; i < 20; i++) {
setTimeout(() => {
var toDeleteIndex = parseInt(Math.round(Math.random() * (this.state.items.length - 1)));
this.doRemove(undefined, toDeleteIndex);
this.doReassignKeys();
this.doMix();
});
}
};
doAdd20 = (e) => {
e && e.preventDefault();
// Add data
for (let i = 0; i < 20; i++) {
this.doAdd();
}
// Shuffle them
for (let i = 0; i < 5; i++) {
this.doReassignKeys();
this.doMix();
}
};
doAdd20SeqMix = (e) => {
e && e.preventDefault();
// Add data
for (let i = 0; i < 20; i++) {
this.doAdd();
}
// Shuffle them
for (let i = 0; i < 5; i++) {
setTimeout(
() => {
// this.doReassignKeys(e);
this.doMix();
},
500 + 100 * i
);
}
};
componentDidMount() {
let i = 0;
while (this.items.length < 20) {
this.items[this.items.length] = { key: i, val: i };
i++;
}
this.setState({ items: this.items });
}
renderItem = (item, i) => {
if (this.props.useFunctionalComponent) {
return createElement(
FuncListItem,
{ key: item.key, index: i, animation: this.props.animation, ...anim, onClick: this.doRemove },
`${item.val}bar (${item.key})`
);
} else {
return createElement(ListItem, { key: item.key, index: i, animation: this.props.animation, onClick: this.doRemove }, `${item.val}bar (${item.key})`);
}
};
render() {
return createElement('div', null, [
createElement('ul', null, this.state.items.map(this.renderItem)),
createElement('h2', null, 'Shuffle'),
createElement('p', null, this.props.description),
createElement('button', { onClick: this.doAdd }, 'Add'),
createElement('button', { onClick: this.doMix }, 'Shuffle'),
createElement('button', { onClick: this.doReassignKeys }, 'Shuffle keys'),
createElement('button', { onClick: this.doRemoveMix }, 'Remove' + (this.state.deleted ? ` (${this.state.deleted})` : '')),
createElement('button', { onClick: this.doAdd20 }, 'Add and shuffle 20'),
createElement('button', { onClick: this.doAdd20SeqMix }, 'Add 20 do 5 shuffle'),
createElement('button', { onClick: this.removeAndShuffle }, 'Remove and shuffle 20')
]);
}
}
// https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
var shuffle = (array) => {
var currentIndex = array.length,
temporaryValue,
randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
};
class RerenderList extends Component {
constructor() {
super();
// set initial time:
this.state = {
items: []
};
this.items = [];
}
doRemove = (e, index) => {
e.preventDefault();
var newItems = this.state.items.concat([]);
newItems.splice(index, 1);
this.setState({
items: newItems
});
};
doAdd = (e) => {
e.preventDefault();
var newItems = this.state.items.concat([]);
var nextKey = newItems.reduce((prev, curr) => (curr.key > prev ? curr.key : prev), 0) + 1;
newItems.push({ key: nextKey, val: nextKey });
this.setState({
items: newItems
});
};
componentDidMount() {
this.componentWillReceiveProps(this.props);
}
componentWillReceiveProps(nextProps) {
let i = 0;
while (this.items.length < nextProps.items) {
this.items[this.items.length] = { key: i, val: i };
i++;
}
this.setState({ items: this.items });
}
renderItem = (item, i) => {
if (this.props.useFunctionalComponent) {
return createElement(
FuncListItem,
{ key: item.key, index: i, animation: this.props.animation, ...anim, onClick: this.doRemove },
`${item.val}bar (${item.key})`
);
} else {
return createElement(ListItem, { key: item.key, index: i, animation: this.props.animation, onClick: this.doRemove }, `${item.val}bar (${item.key})`);
}
};
render() {
return createElement('div', null, [
createElement('ul', null, this.state.items.map(this.renderItem)),
createElement('h2', null, 'patchKeyedChildren'),
createElement('p', null, this.props.description),
createElement('button', { onClick: this.doAdd }, 'Add')
]);
}
}
class ShuffleListWithAnimation extends Component {
constructor() {
super();
// set initial time:
this.state = {
items: []
};
this.items = [];
}
doMove = (e, index) => {
e && e.preventDefault();
var newItems = this.state.items.concat([]);
var [tmp] = newItems.splice(index, 1);
newItems.splice(Math.round(Math.random() * newItems.length), 0, tmp);
this.setState({
items: newItems
});
};
doAdd = (e) => {
e && e.preventDefault();
var newItems = this.state.items.concat([]);
var nextKey = newItems.reduce((prev, curr) => (curr.key > prev ? curr.key : prev), 0) + 1;
newItems.push({ key: nextKey, val: nextKey });
this.setState({
items: newItems
});
};
doMix = (e) => {
e && e.preventDefault();
var newItems = this.state.items.concat([]);
shuffle(newItems);
// So this is the shuffled order
console.log('Expected order: ' + newItems.map((el) => '(' + el.val + ')').join(','));
this.setState({
items: newItems
});
// And this is what the DOM looks like
setTimeout(() => {
const res = document.querySelector('#App6 ul').textContent.match(/\(\d*\)/g);
console.log('Actual order: ' + res.join(','));
}, 100);
};
doDoubleMix = (e) => {
e && e.preventDefault();
var newItems = this.state.items.concat([]);
shuffle(newItems);
// So this is the shuffled order
console.log('Expected order 1: ' + newItems.map((el) => '(' + el.val + ')').join(','));
this.setState({
items: newItems
});
setTimeout(() => {
var newItems2 = newItems.concat([]);
shuffle(newItems2);
this.setState({
items: newItems2
});
console.log('Expected order 2: ' + newItems2.map((el) => '(' + el.val + ')').join(','));
}, 1);
// And this is what the DOM looks like
setTimeout(() => {
const res = document.querySelector('#App6 ul').textContent.match(/\(\d*\)/g);
console.log('Actual order: ' + res.join(','));
}, 100);
};
doMoveOne = (e) => {
e && e.preventDefault();
var newItems = this.state.items.concat([]);
newItems.push(newItems.shift());
this.setState({
items: newItems
});
};
doClearMarkers = (e) => {
e && e.preventDefault();
const tmp = document.querySelectorAll('.debugMarker');
for (const marker of tmp) {
marker.parentNode.removeChild(marker);
}
};
componentDidMount() {
let i = 0;
while (this.items.length < 5) {
this.items[this.items.length] = { key: i, val: i };
i++;
}
this.setState({ items: this.items });
}
renderItem = (item, i) => {
if (this.props.useFunctionalComponent) {
return createElement(
FuncListItemMoveAnim,
{ key: item.key, index: i, animation: this.props.animation, ...animMove, onClick: this.doMove },
`${item.val}bar (${item.key})`
);
} else {
return createElement(
ListItemMoveAnim,
{ key: item.key, index: i, animation: this.props.animation, onClick: this.doMove },
`${item.val}bar (${item.key})`
);
}
};
render() {
return createElement('div', null, [
createElement('ul', null, this.state.items.map(this.renderItem)),
createElement('h2', null, 'Shuffle w. Anim'),
createElement('p', null, this.props.description),
createElement('button', { onClick: this.doAdd }, 'Add'),
createElement('button', { onClick: this.doMix }, 'Shuffle'),
createElement('button', { onClick: this.doDoubleMix }, 'DoubleShuffle'),
createElement('button', { onClick: this.doMoveOne }, 'Move 1'),
createElement('button', { onClick: this.doRemoveMix }, 'Remove' + (this.state.deleted ? ` (${this.state.deleted})` : '')),
createElement('button', { onClick: this.doClearMarkers }, 'Clear debug markers')
]);
}
}
document.addEventListener('DOMContentLoaded', function () {
var container_1 = document.querySelector('#App1');
var container_2 = document.querySelector('#App2');
var container_3 = document.querySelector('#App3');
var container_4 = document.querySelector('#App4');
var container_5 = document.querySelector('#App5');
var container_6 = document.querySelector('#App6');
var useFunctionalComponent = location.search === '?functional';
render(
createElement(List, {
useFunctionalComponent,
animation: 'HeightAndFade',
description: 'The children in this container animate opacity and height when added and removed. Click an item to remove it.'
}),
container_1
);
render(
createElement(List, {
useFunctionalComponent,
animation: 'NoTranistionEvent',
description:
'The children in this container have a broken animation. This is detected by inferno-animation and the animation callback is called immediately. Click an item to remove it.'
}),
container_2
);
render(
createElement(MixedList, {
useFunctionalComponent,
animation: 'HeightAndFade',
description:
'This container fades in and blocks the children from animating on first render. There is no animation on divider between elements. When you click [Remove] a random row and another random divder will be removed. Click an item to remove it (leaving the divider).'
}),
container_3
);
render(
createElement(ShuffleList, {
useFunctionalComponent,
animation: 'HeightAndFade',
description: 'This container will shuffle keys or items. Click an item to remove it.'
}),
container_4
);
var btn = document.querySelector('#Rerender > button');
btn.addEventListener('click', (e) => {
e && e.preventDefault();
//render(createElement('div', null, createElement(RerenderList, {animation: 'HeightAndFade', items: 5})), container_5);
render(
createElement(RerenderList, {
useFunctionalComponent,
animation: 'HeightAndFade',
items: 5,
description: 'This container will be filled with 5 rows every time you click the button. Click an item to remove it.'
}),
container_5
);
});
render(
createElement(ShuffleListWithAnimation, {
useFunctionalComponent,
animation: 'MoveAnim',
description: 'This container will animate items on shuffle. Click an item to randomly move it.'
}),
container_6
);
});
================================================
FILE: docs/animations/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="./app.css" rel="stylesheet" />
<title>inferno-animation</title>
<script defer src="dist/bundle.js" type="text/javascript"></script>
</head>
<body>
<h1>inferno-animation examples
<small><a href="index.html">class components</a> | <a href="index.html?functional">functional components</a></small></h1>
<div id="App1" class="App"></div>
<div id="App2" class="App"></div>
<div id="App3" class="App"></div>
<div id="App4" class="App"></div>
<div id="Rerender" class="App">
<div id="App5"></div>
<button>Rerender</button>
</div>
<div id="App6" class="App"></div>
</body>
</html>
================================================
FILE: docs/animations-demo/app.css
================================================
/* Using CSS-vars for transitions so you can experiment easily */
:root {
--infernoAnimationEnter: all 1.2s ease-out;
--infernoAnimationLeave: all .6s ease-out;
}
/* These are used for <img> and .body transitions */
.item {
--imgEnter: transform .5s ease-out, opacity 1s ease-in;
--imgLeave: transform .4s ease-in, opacity .4s ease-in;
--bodyEnter: transform .3s .5s ease-out, opacity 1s ease-in;
--bodyLeave: transform .2s ease-in, opacity .3s ease-in;
}
/*******************************************/
/* Animate height and opacity of card <li> */
/*******************************************/
.Complex-leave {
/* Leave animation start state */
opacity: 1;
transform: translateX(0);
}
.Complex-leave-active {
/* Leave animation transitions */
overflow: visible;
transition: var(--infernoAnimationLeave);
pointer-events: none; /* prevent hover to fire transition events */
}
.Complex-leave-end {
/* Leave animation end state */
opacity: 0;
height: 0;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
transform: translateX(100%);
}
.Complex-enter {
/* Enter animation start state */
opacity: 0.7;
height: 0;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
}
.Complex-enter-active {
/* Enter animation transitions */
transition: var(--infernoAnimationEnter);
pointer-events: none; /* prevent hover to fire transition events */
}
.Complex-enter-end {
/* Enter animation end state */
opacity: 1;
}
/******************************/
/* Animate avatar image <img> */
/******************************/
.Complex-leave img {
/* Leave animation start state */
opacity: 1;
}
.Complex-leave-active img {
/* Leave animation transitions */
overflow: hidden;
transition: var(--infernoAnimationLeave);
}
.Complex-leave-end img {
/* Leave animation end state */
opacity: 0;
}
.Complex-enter img {
/* Enter animation start state */
opacity: 0;
transform: translateX(-150%);
}
.Complex-enter-active img {
/* Enter animation transitions */
transition: var(--infernoAnimationEnter);
}
.Complex-enter-end img {
/* Enter animation end state */
opacity: 1;
transform: translateX(0);
}
.Complex-enter-end img {
/* Enter animation end state */
opacity: 1;
transform: translateX(0);
}
/***************************/
/* Animate card body .body */
/***************************/
.Complex-leave .body {
/* Leave animation start state */
opacity: 1;
}
.Complex-leave-active .body {
/* Leave animation transitions */
overflow: hidden;
transition: var(--bodyLeave);
}
.Complex-leave-end .body {
/* Leave animation end state */
opacity: 0;
transform: translateX(150%);
}
.Complex-enter .body {
/* Enter animation start state */
opacity: 0;
transform: translateX(150%);
}
.Complex-enter-active .body {
/* Enter animation transitions */
transition: var(--bodyEnter);
}
.Complex-enter-end .body {
/* Enter animation end state */
opacity: 1;
transform: translateX(0);
}
/* Some CSS for the list and cards */
ul {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 0.5rem;
width: 40rem;
max-width: 100%;
}
li {
box-sizing: border-box;
padding: 0.5rem 1rem;
background: #4A90E2;
color: white;
text-align: center;
border-top: 1px solid #fff;
overflow: hidden;
}
li:hover {
background: #3775bb;
}
li.item img {
background-color: #fff;
border-radius: 50%;
margin: 1rem;
height: auto;
width: auto;
}
li.item .inner {
display: flex;
flex-direction: row;
height: 8rem;
}
li.item .body {
padding: 0.5rem;
margin-right: 0.5rem;
min-height: 4em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
flex-grow: 1;
}
li.item h2 {
color: white;
margin-bottom: 0;
font-weight: 400;
}
/* Some general CSS for the example */
button {
padding: 0.5rem 1rem;
margin: 0.5rem auto 0;
display: block;
background: #35a748;
color: white;
border-style: none;
border-radius: 4px;
width: 10rem;
} button:hover {
background: #3775bb;
}
body {
font-family: helvetica;
box-sizing: border-box;
margin: 0;
padding: 1rem;
display: flex;
gap: 2rem;
justify-content: center;
align-items: flex-end;
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
}
.App {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 1rem;
}
h1 {
transform: rotate(-90deg);
font-size: 2rem;
font-weight: 800;
color: #ddd;
text-align: center;
margin: 0.5rem;
white-space: nowrap;
width: 2rem;
transform-origin: 50% 50%;
}
h1 small {
font-size: 0.5em;
}
h1 small a {
color: #4A90E2;
text-decoration: none;
}
h1 small a:hover {
color: #3775bb;
}
h2 {
font-size: 1rem;
font-weight: 100;
color: #4A90E2;
text-align: center;
}
h3 {
font-size: 0.85rem;
font-weight: 100;
}
p {
font-size: 0.85rem;
font-weight: 100;
color: #888;
text-align: center;
margin-top: -0.5em;
width: 40rem;
max-width: 100%;
}
================================================
FILE: docs/animations-demo/app.js
================================================
import { Component, render } from 'inferno';
import { createElement } from 'inferno-create-element';
import { AnimatedComponent, componentDidAppear, componentWillDisappear } from 'inferno-animation';
let renderCounter = 0;
const anim = {
onComponentDidAppear: componentDidAppear,
onComponentWillDisappear: componentWillDisappear
};
class ListItem extends AnimatedComponent {
render() {
renderCounter++;
return createElement(
'li',
{
className: 'item',
onClick: (e) => this.props.onClick(e, this.props.index)
},
createElement('div', { className: 'inner' }, [
createElement('img', { width: '120px', height: '120px', src: 'avatar.png' }),
createElement('div', { className: 'body' }, [
createElement('h2', null, this.props.children),
createElement('h3', null, 'Inferno is a blazingly fast framework.')
])
])
);
}
}
class List extends Component {
constructor() {
super();
this.state = {
items: []
};
this.items = [];
}
doRemove = (e, index) => {
e.preventDefault();
var newItems = this.state.items.concat([]);
newItems.splice(index, 1);
this.setState({
items: newItems
});
};
doAdd = (e) => {
e.preventDefault();
var newItems = this.state.items.concat([]);
var nextKey = newItems.length === 0 ? 0 : newItems[newItems.length - 1].key + 1;
newItems.push({ key: nextKey });
this.setState({
items: newItems
});
};
componentDidMount() {
let i = 0;
while (this.items.length < 20) {
this.items[this.items.length] = { key: i++ };
}
this.setState({ items: this.items });
}
renderItem = (item, i) => {
return createElement(
ListItem,
{ key: item.key, index: i, animation: this.props.animation, onClick: this.doRemove },
`This line is nice with ${item.key + 1} bar`
);
};
render() {
return createElement('div', null, [
createElement('ul', null, this.state.items.map(this.renderItem)),
createElement('h2', null, this.props.animation),
createElement('p', null, this.props.description),
createElement('button', { onClick: this.doAdd }, 'Add')
]);
}
}
document.addEventListener('DOMContentLoaded', function () {
var container_1 = document.querySelector('#App1');
render(
createElement(List, {
animation: 'Complex',
description:
'Each card <li> animates height and opacity on add. The image and body of each card animates using the card animation CSS-classes but with different transitions. The card inherits AnimatedComponet which is only aware of the card animation. The child animations need to be finished when the card animations are finished.'
}),
container_1
);
});
================================================
FILE: docs/animations-demo/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="./app.css" rel="stylesheet" />
<title>inferno-animation</title>
<script defer src="dist/bundle.js" type="text/javascript"></script>
</head>
<body>
<h1>inferno-animation demo</h1>
<div id="App1" class="App"></div>
</body>
</html>
================================================
FILE: docs/animations-demo-inner/app.css
================================================
/* Using CSS-vars for transitions so you can experiment easily */
:root {
--infernoAnimationEnter: all 1.2s ease-out;
--infernoAnimationLeave: all .6s ease-out;
}
/*******************************************/
/* Animate height and opacity of card <li> */
/*******************************************/
.inner-leave {
/* Leave animation start state */
opacity: 1;
transform: translateX(0);
}
.inner-leave-active {
/* Leave animation transitions */
overflow: visible;
transition: var(--infernoAnimationLeave);
pointer-events: none; /* prevent hover to fire transition events */
}
.inner-leave-end {
/* Leave animation end state */
opacity: 0;
transform: translateX(-100%);
}
.inner-enter {
/* Enter animation start state */
opacity: 0.5 ;
transform: translateX(50%);
}
.inner-enter-active {
/* Enter animation transitions */
transition: var(--infernoAnimationEnter);
pointer-events: none; /* prevent hover to fire transition events */
}
.inner-enter-end {
/* Enter animation end state */
opacity: 1;
transform: translateX(0);
}
/* Some CSS for the list and cards */
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.page img {
margin: 20vh auto 0;
display: block;
background-color: white;
}
.page h3 {
background-color: white;
margin: 1rem;
text-align: center;
}
.page p {
background-color: white;
margin: 1rem auto;
max-width: 20rem;
text-align: left;
}
.inner {
max-width: 30rem;
margin: 10vh auto 2rem;
padding: 4rem;
background-color: #eee;
}
.inner h2 {
font-size: 3em;
margin: 3rem auto;
text-align: center;
}
/* Some general CSS for the example */
button {
padding: 0.5rem 1rem;
margin: 0.5rem auto 0;
display: block;
background: #35a748;
color: white;
border-style: none;
border-radius: 4px;
width: 10rem;
} button:hover {
background: #3775bb;
}
body {
font-family: helvetica;
box-sizing: border-box;
margin: 0;
padding: 1rem;
display: flex;
gap: 2rem;
justify-content: center;
align-items: flex-end;
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
}
.App {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 1rem;
width: calc(100vw - 2rem);
height: 100vh;
}
h1 {
position: absolute;
bottom: 0;
left: 0;
transform: rotate(-90deg);
font-size: 2rem;
font-weight: 800;
color: #ddd;
text-align: center;
margin: 0.5rem;
white-space: nowrap;
width: 2rem;
transform-origin: 50% 50%;
}
h1 small {
font-size: 0.5em;
}
h1 small a {
color: #4A90E2;
text-decoration: none;
}
h1 small a:hover {
color: #3775bb;
}
h2 {
font-size: 1rem;
font-weight: 100;
color: #4A90E2;
text-align: center;
}
h3 {
font-size: 0.85rem;
font-weight: 100;
}
p {
font-size: 0.85rem;
font-weight: 100;
color: #888;
text-align: center;
margin-top: -0.5em;
width: 40rem;
max-width: 100%;
}
================================================
FILE: docs/animations-demo-inner/app.js
================================================
import { Component, render, createRef } from 'inferno';
import { createElement } from 'inferno-create-element';
import { componentDidAppear, componentWillDisappear } from 'inferno-animation';
class Page extends Component {
componentDidAppear(dom) {
// We need to store a reference to the animating child that
// isn't removed on unmount. Currently, this requires passing
// a ref as property and referencing the .current property
// of that object.
this._innerEl = this.props.innerRef.current;
componentDidAppear(this._innerEl, { animation: 'inner' });
}
componentWillDisappear(dom, callback) {
componentWillDisappear(this._innerEl, { animation: 'inner' }, callback);
}
render() {
return createElement(
'div',
{
className: 'page'
},
createElement('div', { className: 'random-wrapper' }, [
createElement('h3', null, 'Page ' + this.props.step),
createElement('img', { width: '120px', height: '120px', src: 'avatar.png' }),
createElement('p', null, 'The entire page is swapped, but we are only animating div.inner. This gives the apperance of only swapping the box below.'),
createElement(
'p',
null,
"In order not to hide the incoming content we can't set background on div.page. The background needs to be provided by a backdrop in the wizard component."
),
createElement('div', { ref: this.props.innerRef, className: 'inner' }, [
createElement('h2', null, 'Step ' + this.props.step),
createElement(
'button',
{
onClick: (e) => {
e.preventDefault();
this.props.onNext();
}
},
'Next'
)
])
])
);
}
}
const nrofSteps = 3;
class Wizard extends Component {
constructor() {
super();
// Ref objects used to reference the animating children of each page
this._innerAnimRefs = [];
for (let i = 0; i < nrofSteps; i++) {
this._innerAnimRefs.push(createRef());
}
this.state = {
showStepIndex: 0
};
}
doGoNext = () => {
this.setState({
showStepIndex: (this.state.showStepIndex + 1) % nrofSteps
});
};
render() {
const { showStepIndex } = this.state;
return createElement(Page, { key: 'page_' + showStepIndex, step: showStepIndex + 1, innerRef: this._innerAnimRefs[showStepIndex], onNext: this.doGoNext });
}
}
document.addEventListener('DOMContentLoaded', function () {
var container_1 = document.querySelector('#App1');
render(createElement(Wizard), container_1);
});
================================================
FILE: docs/animations-demo-inner/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="./app.css" rel="stylesheet" />
<title>inferno-animation</title>
<script defer src="dist/bundle.js" type="text/javascript"></script>
</head>
<body>
<h1>inferno-animation demo animation of child</h1>
<div id="App1" class="App"></div>
</body>
</html>
================================================
FILE: docs/animations-global-demo/app.css
================================================
/* Using CSS-vars for transitions so you can experiment easily */
:root {
--infernoAnimationEnter: all 0.3s ease-out;
--infernoAnimationLeave: all 0s;
}
/******************************/
/* Animate avatar image <img> */
/******************************/
.AnimateLogo-enter-active {
/* Enter animation transitions */
transition: var(--infernoAnimationEnter);
}
/* Some general CSS for the example */
button {
padding: 0.5rem 1rem;
margin: 0.5rem auto 0;
display: block;
background: #35a748;
color: white;
border-style: none;
border-radius: 4px;
width: 10rem;
} button:hover {
background: #3775bb;
}
body {
font-family: helvetica;
box-sizing: border-box;
margin: 0;
padding: 1rem;
display: flex;
gap: 2rem;
justify-content: center;
align-items: flex-end;
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
}
.Page {
position: absolute;
top: 0;
left: 0;
}
.App {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 1rem;
}
h1 {
position: absolute;
bottom: 0;
left: 0;
transform: rotate(-90deg);
font-size: 2rem;
font-weight: 800;
color: #ddd;
text-align: center;
margin: 0.5rem;
white-space: nowrap;
width: 2rem;
transform-origin: 50% 50%;
}
h1 small {
font-size: 0.5em;
}
h2 {
font-size: 1rem;
font-weight: 100;
color: #4A90E2;
text-align: center;
}
.Page {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.Menu {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
height: 8rem;
flex-grow: 0;
flex-shrink: 0;
border-bottom: 1px solid #ddd;
}
img {
width: 100%;
height: 100%;
}
.Menu .logo {
width: 8rem;
height: 8rem;
transform: translateZ(0);
}
.Menu .body {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
flex-shrink: 1;
}
.Menu .body h3 {
flex-grow: 0;
flex-shrink: 0;
margin-left: auto;
margin-right: 2rem;
text-align: right;
width: 6em;
}
.content {
height: 100%;
flex-grow: 1;
flex-shrink: 1;
}
.Hero {
display: flex;
flex-direction: column;
align-items: center;
}
.Hero .logo {
width: 30rem;
height: 30rem;
transform: translateZ(0);
}
.payoff {
transform: translateZ(0);
}
================================================
FILE: docs/animations-global-demo/app.js
================================================
import { Component, render } from 'inferno';
import { createElement } from 'inferno-create-element';
import { componentDidAppear, componentWillDisappear } from 'inferno-animation';
const anim = {
onComponentDidAppear: componentDidAppear,
onComponentWillDisappear: componentWillDisappear
};
function Logo() {
return createElement('div', { className: 'logo' }, createElement('img', { width: '120px', height: '120px', src: 'inferno-logo.svg' }));
}
Logo.defaultHooks = anim;
function Payoff() {
return createElement('h2', { className: 'payoff' }, 'Inferno is a blazingly fast framework.');
}
Payoff.defaultHooks = anim;
function PageOne({ onClick }) {
return createElement('div', { className: 'Page' }, [
createElement('div', { className: 'Menu' }, createElement('div', { className: 'body' }, [createElement('h3', null, 'Page 1')])),
createElement('div', { className: 'content' }, [
createElement('div', { className: 'Hero' }, [
createElement(Logo, { globalAnimationKey: 'main-logo', animation: 'AnimateLogo' }),
createElement(Payoff, { globalAnimationKey: 'payoff', animation: 'AnimateLogo' })
]),
createElement('button', { onClick, children: 'Click here' })
])
]);
}
function PageTwo({ onClick }) {
return createElement('div', { className: 'Page' }, [
createElement('div', { className: 'Menu' }, [
createElement(Logo, { globalAnimationKey: 'main-logo', animation: 'AnimateLogo' }),
createElement('div', { className: 'body' }, [
createElement(Payoff, { globalAnimationKey: 'payoff', animation: 'AnimateLogo' }),
createElement('h3', null, 'Page 2')
])
]),
createElement('div', { className: 'content' }, [createElement('button', { onClick, children: 'Click here' })])
]);
}
class App extends Component {
constructor() {
super();
this.state = {
page: 0
};
this.didClick = this.didClick.bind(this);
}
didClick(e) {
e.preventDefault();
this.setState({
page: ++this.state.page % 2
});
}
render() {
return createElement(
'div',
null,
this.state.page === 0 ? createElement(PageOne, { onClick: this.didClick }) : createElement(PageTwo, { onClick: this.didClick })
);
}
}
document.addEventListener('DOMContentLoaded', function () {
var container_1 = document.querySelector('#App1');
render(
createElement(App, {
description:
'Each card <li> animates height and opacity on add. The image and body of each card animates using the card animation CSS-classes but with different transitions. The card inherits AnimatedComponet which is only aware of the card animation. The child animations need to be finished when the card animations are finished.'
}),
container_1
);
});
================================================
FILE: docs/animations-global-demo/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="./app.css" rel="stylesheet" />
<title>inferno-animation</title>
<script defer src="dist/bundle.js" type="text/javascript"></script>
</head>
<body>
<h1>inferno-animation global animations</h1>
<div id="App1" class="App"></div>
</body>
</html>
================================================
FILE: docs/async-render/app.js
================================================
import { Component, render } from 'inferno';
import { createElement } from 'inferno-create-element';
let renderCounter = 0;
class ListItem extends Component {
render() {
renderCounter++;
return createElement('li', null, this.props.children);
}
}
class List extends Component {
constructor() {
super();
// set initial time:
this.state = {
items: []
};
this.items = [];
}
componentDidMount() {
let i = 0;
while (this.items.length < 2000) {
this.items[this.items.length] = createElement(ListItem, { key: ++i }, `${this.items.length}bar`);
this.setState({ items: this.items });
}
}
render() {
return createElement('ul', null, this.state.items);
}
}
document.addEventListener('DOMContentLoaded', function () {
var container = document.querySelector('#App');
const times = [];
const count = 2;
let totalTime = 0;
for (var i = 0; i < count; i++) {
render(createElement(List), container);
}
setTimeout(function () {
render(
createElement(
'div',
null,
`
Rounds: ${count},
Average: ${totalTime / count},
Total: ${totalTime},
counter: ${renderCounter}
`
),
container
);
}, 5000);
});
================================================
FILE: docs/async-render/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Async Render: Inferno</title>
</head>
<body>
<div id="App"></div>
<script src="dist/bundle.js" type="text/javascript"></script>
</body>
</html>
================================================
FILE: docs/build.js
================================================
import {rollup} from "rollup";
import { existsSync, readdirSync, statSync } from "fs";
import commonjsPlugin from "@rollup/plugin-commonjs";
import nodeResolvePlugin from "@rollup/plugin-node-resolve";
import { dirname, join, resolve } from "path";
import replace from "@rollup/plugin-replace";
import terser from '@rollup/plugin-terser';
import alias from "@rollup/plugin-alias";
import { fileURLToPath } from "url";
import babel from "@rollup/plugin-babel";
const isProduction = process.env.NODE_ENV === 'production';
const __dirname = dirname(fileURLToPath(import.meta.url));
const benchmarks = readdirSync(__dirname).filter(file => statSync(join(__dirname, file)).isDirectory());
const resolvePkg = pkg => resolve(__dirname, '../packages', pkg, 'dist', 'index.mjs');
console.log(resolvePkg('inferno'));
// see below for details on the options
const plugins = [
replace({
preventAssignment: true,
'process.env.NODE_ENV': '"production"',
sourcemap: false
}),
nodeResolvePlugin({
preferBuiltins: false
}),
babel({
exclude: 'node_modules/**',
sourceMaps: false,
babelrc: false,
presets: [['@babel/env', {loose: true, modules: false}]],
plugins: [
['babel-plugin-inferno', {imports: true, defineAllArguments: true}],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}),
commonjsPlugin({
sourceMap: false
}),
alias({
resolve: ['.js'],
entries: [
{find: 'inferno', replacement: resolvePkg('inferno')},
{find: 'inferno-animation', replacement: resolvePkg('inferno-animation')},
{find: 'inferno-compat', replacement: resolvePkg('inferno-compat')},
{find: 'inferno-create-element', replacement: resolvePkg('inferno-create-element')},
{find: 'inferno-hydrate', replacement: resolvePkg('inferno-hydrate')},
{find: 'inferno-extras', replacement: resolvePkg('inferno-extras')},
{find: 'inferno-hyperscript', replacement: resolvePkg('inferno-hyperscript')},
{find: 'inferno-mobx', replacement: resolvePkg('inferno-mobx')},
{find: 'inferno-redux', replacement: resolvePkg('inferno-redux')},
{find: 'inferno-router', replacement: resolvePkg('inferno-router')},
{find: 'inferno-server', replacement: resolvePkg('inferno-server')},
{find: 'inferno-shared', replacement: resolvePkg('inferno-shared')},
{find: 'inferno-test-utils', replacement: resolvePkg('inferno-test-utils')},
{find: 'inferno-vnode-flags', replacement: resolvePkg('inferno-vnode-flags')},
{find: 'inferno-clone-vnode', replacement: resolvePkg('inferno-clone-vnode')},
{find: 'mobx', replacement: join(__dirname, '../node_modules/mobx/dist/mobx.esm.js')},
{find: 'perf-monitor', replacement: join(__dirname, '../node_modules/perf-monitor/dist/index.js')}
]
})
];
if (isProduction) {
plugins.push(
terser({
compress: {
ecma: 5,
inline: true,
if_return: false,
reduce_funcs: false,
passes: 5,
comparisons: false,
},
ie8: false,
mangle: {
toplevel: true
},
parse: {
html5_comments: false,
shebang: false
},
toplevel: false,
warnings: false
})
);
}
for (const dir of benchmarks) {
const benchmarkPath = join(__dirname, dir);
const appJsPath = resolve(benchmarkPath, 'app.js')
// Don't build examples that don't have app.js
if (!existsSync(appJsPath)) continue;
const inputOptions = {
input: appJsPath,
plugins: plugins
};
const start = new Date();
console.log(`Build started -- ${start}`);
rollup(inputOptions).then(function (opts) {
return opts.write({
format: 'iife',
file: join(benchmarkPath, 'dist', 'bundle.js'),
sourcemap: false,
name: 'inferno'
});
});
}
================================================
FILE: docs/compat/app.js
================================================
'use strict';
import { render, Component } from 'inferno-compat';
import { createElement } from 'inferno-create-element';
var h = createElement;
/*
Example of using context and setState callback function
*/
function checkParams(state, props, context) {
console.log(state, props, context);
}
class Button extends Component {
constructor(props) {
super(props);
this.state = {
btnstate: 'btnstate'
};
}
click() {
this.setState(checkParams);
}
render() {
return h(
'button',
{
onClick: this.click.bind(this),
style: { background: this.context.color }
},
this.props.children
);
}
}
class Message extends Component {
render() {
return h('div', null, [this.props.text, h(Button, { buttonProp: 'magic' }, 'btn')]);
}
}
class MessageList extends Component {
getChildContext() {
return { color: 'purple' };
}
render() {
const children = this.props.messages.map(function (message) {
return h(Message, { text: message.text });
});
return h('div', null, children);
}
}
render(h(MessageList, { messages: [{ text: 'first' }, { text: 'second' }] }), document.getElementById('app1'));
let testValue = 11;
function changeTestValue(event) {
testValue = event.target.value;
console.log(event.type, testValue);
renderLabels();
}
function renderLabels() {
render(
h('div', null, [
h('label', { for: 'test' }, [
'label for input',
h('input', {
id: 'test',
name: 'testing_radio',
value: 'first',
onChange: changeTestValue,
type: 'radio',
pattern: '[0-9]+([,.][0-9]+)?',
inputMode: 'numeric'
})
]),
h('label', { for: 'test2' }, [
'label for input2',
h('input', {
id: 'test2',
name: 'testing_radio',
value: 'second',
onChange: changeTestValue,
type: 'radio',
pattern: '[0-9]+([,.][0-9]+)?',
inputMode: 'numeric'
})
]),
h('label', { htmlFor: 'test3' }, [
'label for input3',
h('input', {
id: 'test3',
name: 'test3',
value: testValue,
onChange: changeTestValue,
type: 'number',
pattern: '[0-9]+([,.][0-9]+)?',
inputMode: 'numeric'
})
])
]),
document.getElementById('app2')
);
}
renderLabels();
// Cursor should not move ....
class NameForm extends Component {
constructor(props) {
super(props);
this.state = { value: 'ASYNC', radio: 'first', text: 'f', selectValue: 'second' };
this.handleChange = this.handleChange.bind(this);
this.radioChange = this.radioChange.bind(this);
this.textChange = this.textChange.bind(this);
this.selectChange = this.selectChange.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
radioChange(event) {
this.setState({ radio: event.target.value });
}
textChange(event) {
this.setState({ text: event.target.value });
}
selectChange(event) {
this.setState({ selectValue: event.target.value });
}
render() {
return h('div', null, [
h('label', { for: 'testasync' }, [
'async label for input',
h('input', {
id: 'testasync',
name: 'testing_radio_async',
value: 'first',
onClick: this.radioChange,
checked: this.state.radio === 'first',
type: 'radio'
})
]),
h('label', { for: 'test2async' }, [
'async label for input2',
h('input', {
id: 'test2async',
name: 'testing_radio_async',
value: 'second',
onClick: this.radioChange,
checked: this.state.radio === 'second',
type: 'radio'
})
]),
h('label', { htmlFor: 'test3as' }, [
'Async Name',
h('input', {
id: 'test3as',
name: 'test3as',
value: this.state.value,
onInput: this.handleChange,
type: 'text'
})
]),
h('label', { htmlFor: 'textarea_async' }, [
'async texxt',
h('textarea', {
id: 'textarea_async',
name: 'textarea_async',
value: this.state.text,
onInput: this.textChange
})
]),
h(
'select',
{
onChange: this.selectChange,
value: this.state.selectValue
},
[
h('option', {
value: 'first',
children: 'first'
}),
h('option', {
value: 'second',
children: 'second'
}),
h('option', {
value: 'third',
children: 'third'
})
]
)
]);
}
}
let hoisted = h('input', {
id: 'test3sync',
name: 'test3sync',
value: '100',
type: 'text'
});
let i = 0;
// Cursor should not move ....
class NameForm2 extends Component {
constructor(props) {
super(props);
this.state = {
value: 'SYNC',
radio: 'first',
text: 'f',
selectValue: 'second'
};
this.handleChange = this.handleChange.bind(this);
this.radioChange = this.radioChange.bind(this);
this.textChange = this.textChange.bind(this);
this.selectChange = this.selectChange.bind(this);
}
handleChange(event) {
hoisted.props.value = 200;
this.setState({ value: event.target.value });
}
radioChange(event) {
this.setState({ radio: event.target.value });
}
textChange(event) {
this.setState({ text: event.target.value });
}
selectChange(event) {
this.setState({ selectValue: event.target.value });
}
render() {
return h('div', null, [
h('label', { for: 'testsync' }, [
'sync label for input',
h('input', {
id: 'testsync',
name: 'testing_radio_sync',
value: 'first',
onClick: this.radioChange,
checked: this.state.radio === 'first',
type: 'radio'
})
]),
h('label', { for: 'test2sync' }, [
'sync label for input2',
h('input', {
id: 'test2sync',
name: 'testing_radio_sync',
value: 'second',
onClick: this.radioChange,
checked: this.state.radio === 'second',
type: 'radio'
})
]),
h('label', { htmlFor: 'test3sync' }, [
'sync Name',
h('input', {
id: 'test3sync',
name: 'test3sync',
value: this.state.value,
onInput: this.handleChange,
type: 'text'
})
]),
h('label', { htmlFor: 'textarea_sync' }, [
'sync text',
h('textarea', {
id: 'textarea_sync',
name: 'textarea_sync',
value: this.state.text,
onInput: this.textChange
})
]),
h(
'select',
{
onChange: this.selectChange,
value: this.state.selectValue
},
[
h('option', {
value: 'first',
children: 'first'
}),
h('option', {
value: 'second',
children: 'second'
}),
h('option', {
value: 'third',
children: 'third'
})
]
)
]);
}
}
// render an instance of Clock into <body>:
renderLabels(h(NameForm, {}), document.getElementById('app3'));
renderLabels(h(NameForm2, {}), document.getElementById('app4'));
================================================
FILE: docs/compat/index.html
================================================
<!doctype html>
<html>
<head>
<title>Events test page</title>
<style>
.box {
padding: 50px;
width: 300px;
margin: 50px;
background: #d2eaff;
float: left;
}
label {
float: left;
width: 100%;
}
</style>
</head>
<body>
<div class="box" id="app"></div>
<div class="box" id="app1"></div>
<div class="box" id="app2"></div>
<div class="box" id="app3"></div>
<div class="box" id="app4"></div>
<script>
window.process = {
env: {
NODE_ENV: 'development'
}
};
</script>
<script src="dist/bundle.js"></script>
</body>
</html>
================================================
FILE: docs/dbmonster/ENV.js
================================================
var ENV = ENV || (function () {
"use strict";
var first = true;
var counter = 0;
var data;
var _base;
(_base = String.prototype).lpad || (_base.lpad = function (padding, toLength) {
return padding.repeat((toLength - this.length) / padding.length).concat(this);
});
function formatElapsed(value) {
var comps;
if (value > 60) {
comps = (value % 60).toFixed(2).split('.');
return Math.floor(value / 60) + ":" + comps[0].lpad('0', 2) + "." + comps[1];
}
return parseFloat(value).toFixed(2);
}
function getElapsedClassName(elapsed) {
var className = 'Query elapsed';
if (elapsed >= 10.0) {
className += ' warn_long';
}
else if (elapsed >= 1.0) {
className += ' warn';
}
else {
className += ' short';
}
return className;
}
function countClassName(queries) {
var countClassName = "label";
if (queries >= 20) {
countClassName += " label-important";
}
else if (queries >= 10) {
countClassName += " label-warning";
}
else {
countClassName += " label-success";
}
return countClassName;
}
function updateQuery(object) {
if (!object) {
object = {};
}
var elapsed = Math.random() * 15;
object.elapsed = elapsed;
object.formatElapsed = formatElapsed(elapsed);
object.elapsedClassName = getElapsedClassName(elapsed);
object.query = "SELECT blah FROM something";
object.waiting = Math.random() < 0.5;
if (Math.random() < 0.2) {
object.query = "<IDLE> in transaction";
}
if (Math.random() < 0.1) {
object.query = "vacuum";
}
return object;
}
function cleanQuery(value) {
if (value) {
value.formatElapsed = "";
value.elapsedClassName = "";
value.query = "";
value.elapsed = null;
value.waiting = null;
} else {
return {
query: "***",
formatElapsed: "",
elapsedClassName: ""
};
}
}
function generateRow(object, keepIdentity, counter) {
var nbQueries = Math.floor((Math.random() * 10) + 1);
if (!object) {
object = {};
}
object.lastMutationId = counter;
object.nbQueries = nbQueries;
if (!object.lastSample) {
object.lastSample = {};
}
if (!object.lastSample.topFiveQueries) {
object.lastSample.topFiveQueries = [];
}
if (keepIdentity) {
// for Angular optimization
if (!object.lastSample.queries) {
object.lastSample.queries = [];
for (var l = 0; l < 12; l++) {
object.lastSample.queries[l] = cleanQuery();
}
}
for (var j in object.lastSample.queries) {
var value = object.lastSample.queries[j];
if (j <= nbQueries) {
updateQuery(value);
} else {
cleanQuery(value);
}
}
} else {
object.lastSample.queries = [];
for (var j = 0; j < 12; j++) {
if (j < nbQueries) {
var value = updateQuery(cleanQuery());
object.lastSample.queries.push(value);
} else {
object.lastSample.queries.push(cleanQuery());
}
}
}
for (var i = 0; i < 5; i++) {
var source = object.lastSample.queries[i];
object.lastSample.topFiveQueries[i] = source;
}
object.lastSample.nbQueries = nbQueries;
object.lastSample.countClassName = countClassName(nbQueries);
return object;
}
function getData(keepIdentity) {
var oldData = data;
if (!keepIdentity) { // reset for each tick when !keepIdentity
data = [];
for (var i = 1; i <= ENV.rows; i++) {
data.push({ dbname: 'cluster' + i, query: "", formatElapsed: "", elapsedClassName: "" });
data.push({ dbname: 'cluster' + i + ' replica', query: "", formatElapsed: "", elapsedClassName: "" });
}
}
if (!data) { // first init when keepIdentity
data = [];
for (var i = 1; i <= ENV.rows; i++) {
data.push({ dbname: 'cluster' + i });
data.push({ dbname: 'cluster' + i + ' replica' });
}
oldData = data;
}
for (var i in data) {
var row = data[i];
if (!keepIdentity && oldData && oldData[i]) {
row.lastSample = oldData[i].lastSample;
}
if (!row.lastSample || Math.random() < ENV.mutations()) {
counter = counter + 1;
if (!keepIdentity) {
row.lastSample = null;
}
generateRow(row, keepIdentity, counter);
} else {
data[i] = oldData[i];
}
}
first = false;
return {
toArray: function () {
return data;
}
};
}
var mutationsValue = 0.5;
function mutations(value) {
if (value) {
mutationsValue = value;
return mutationsValue;
} else {
return mutationsValue;
}
}
var body = document.querySelector('body');
var theFirstChild = body.firstChild;
var sliderContainer = document.createElement('div');
sliderContainer.style.cssText = "display: flex";
var slider = document.createElement('input');
var text = document.createElement('label');
text.innerHTML = 'mutations : ' + (mutationsValue * 100).toFixed(0) + '%';
text.id = "ratioval";
slider.setAttribute("type", "range");
slider.style.cssText = 'margin-bottom: 10px; margin-top: 5px';
slider.addEventListener('change', function (e) {
ENV.mutations(e.target.value / 100);
document.querySelector('#ratioval').innerHTML = 'mutations : ' + (ENV.mutations() * 100).toFixed(0) + '%';
});
sliderContainer.appendChild(text);
sliderContainer.appendChild(slider);
body.insertBefore(sliderContainer, theFirstChild);
return {
generateData: getData,
rows: 50,
timeout: 0,
mutations: mutations
};
})();
================================================
FILE: docs/dbmonster/app.js
================================================
// import { startFPSMonitor, startMemMonitor, initProfiler, startProfile, endProfile } from 'perf-monitor';
import { createVNode, render } from 'inferno';
var elem = document.getElementById('app');
// startFPSMonitor();
// startMemMonitor();
// initProfiler('view update');
function renderBenchmark(dbs) {
var length = dbs.length;
var databases = [];
for (var i = 0; i < length; i++) {
var db = dbs[i];
var lastSample = db.lastSample;
var children = [
createVNode(1, 'td', 'dbname', db.dbname, 16, null, null, null),
createVNode(1, 'td', 'query-count', createVNode(1, 'span', lastSample.countClassName, lastSample.nbQueries, 16, null, null, null), 2, null, null, null)
];
for (var i2 = 0; i2 < 5; i2++) {
var query = lastSample.topFiveQueries[i2];
children.push(
createVNode(
1,
'td',
query.elapsedClassName,
[
createVNode(1, 'div', null, query.formatElapsed, 16, null, null, null),
createVNode(
1,
'div',
'popover left',
[createVNode(1, 'div', 'popover-content', query.query, 16, null, null, null), createVNode(1, 'div', 'arrow', null, 1, null, null, null)],
4,
null,
null,
null
)
],
4,
null,
null,
null
)
);
}
databases.push(createVNode(1, 'tr', null, children, 4, null, null, null));
}
render(createVNode(1, 'table', 'table table-striped', createVNode(1, 'tbody', null, databases, 4, null, null, null), 2, null, null, null), elem);
}
function loop() {
var dbs = ENV.generateData(false).toArray();
// startProfile('view update');
renderBenchmark(dbs);
// endProfile('view update');
}
setInterval(loop, 0);
================================================
FILE: docs/dbmonster/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inferno</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="ENV.js"></script>
<script src="dist/bundle.js"></script>
</body>
</html>
================================================
FILE: docs/dbmonster/style.css
================================================
body {color:#333;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;margin:0;}
label {display:inline-block;font-weight:700;margin-bottom:5px;}
input[type=range] {display:block;width:100%;}
table {border-collapse:collapse;border-spacing:0;}
:before,:after {box-sizing: border-box;}
.table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td {border-top:1px solid #ddd;line-height:1.42857143;padding:8px;vertical-align:top;}
.table {width:100%;}
.table-striped > tbody > tr:nth-child(odd) > td,.table-striped > tbody > tr:nth-child(odd) > th {background:#f9f9f9;}
.label {border-radius:.25em;color:#fff;display:inline;font-size:75%;font-weight:700;line-height:1;padding:.2em .6em .3em;text-align:center;vertical-align:baseline;white-space:nowrap;}
.label-success {background-color:#5cb85c;}
.label-warning {background-color:#f0ad4e;}
.popover {background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;box-shadow:0 5px 10px rgba(0,0,0,.2);display:none;left:0;max-width:276px;padding:1px;position:absolute;text-align:left;top:0;white-space:normal;z-index:1010;}
.popover>.arrow:after {border-width:10px;content:"";}
.popover.left {margin-left:-10px;}
.popover.left > .arrow {border-right-width:0;border-left-color:rgba(0,0,0,.25);margin-top:-11px;right:-11px;top:50%;}
.popover.left > .arrow:after {border-left-color:#fff;border-right-width:0;bottom:-10px;content:" ";right:1px;}
.popover > .arrow {border-width:11px;}
.popover > .arrow,.popover>.arrow:after {border-color:transparent;border-style:solid;display:block;height:0;position:absolute;width:0;}
.popover-content {padding:9px 14px;}
.Query {position:relative;}
.Query:hover .popover {display:block;left:-100%;width:100%;}
================================================
FILE: docs/dbmonster-mobx/app.js
================================================
// import { startFPSMonitor, startMemMonitor, initProfiler, startProfile, endProfile } from 'perf-monitor';
import { createVNode, createComponentVNode, createFragment, render, Component } from 'inferno';
import { observerWrap, observerPatch, observer } from 'inferno-mobx';
import { action, observable } from 'mobx';
import { VNodeFlags } from 'inferno-vnode-flags';
let counter = 0;
const data = (() => {
const generate = () => {
const nbQueries = Math.floor(Math.random() * 10 + 1);
const queries = [];
for (let l = 0; l < 12; l++) {
queries.push(
updateQuery({
query: '***',
formatElapsed: '',
elapsedClassName: '',
elapsed: null,
waiting: null
})
);
}
return {
nbQueries,
countClassName: countClassName(nbQueries),
queries: queries
};
};
const temp = [];
for (let i = 1; i <= 50; i++) {
temp.push({
dbname: 'cluster' + i,
lastSample: generate()
});
temp.push({
dbname: 'cluster' + i + ' replica',
lastSample: generate()
});
}
for (const row of temp) {
counter = counter + 1;
generateRow(row, counter, 12);
}
return observable(temp);
})();
function formatElapsed(value) {
var comps;
if (value > 60) {
comps = (value % 60).toFixed(2).split('.');
return Math.floor(value / 60) + ':' + comps[0].lpad('0', 2) + '.' + comps[1];
}
return parseFloat(value).toFixed(2);
}
function getElapsedClassName(elapsed) {
var className = 'Query elapsed';
if (elapsed >= 10.0) {
className += ' warn_long';
} else if (elapsed >= 1.0) {
className += ' warn';
} else {
className += ' short';
}
return className;
}
function countClassName(queries) {
var countClassName = 'label';
if (queries >= 20) {
countClassName += ' label-important';
} else if (queries >= 10) {
countClassName += ' label-warning';
} else {
countClassName += ' label-success';
}
return countClassName;
}
function updateQuery(object) {
const elapsed = Math.random() * 15;
object.elapsed = elapsed;
object.formatElapsed = formatElapsed(elapsed);
object.elapsedClassName = getElapsedClassName(elapsed);
object.query = 'SELECT blah FROM something';
object.waiting = Math.random() < 0.5;
if (Math.random() < 0.2) {
object.query = '<IDLE> in transaction';
}
if (Math.random() < 0.1) {
object.query = 'vacuum';
}
return object;
}
function cleanQuery(value) {
value.formatElapsed = '';
value.elapsedClassName = '';
value.query = '';
value.elapsed = null;
value.waiting = null;
}
function generateRow(object, counter, nbQueries) {
object.lastMutationId = counter;
for (let j = 0; j < 12; j++) {
const value = object.lastSample.queries[j];
if (j <= nbQueries) {
updateQuery(value);
} else {
cleanQuery(value);
}
}
object.lastSample.nbQueries = nbQueries;
object.lastSample.countClassName = countClassName(nbQueries);
return object;
}
function updateData() {
for (let row of data) {
if (Math.random() < mutations()) {
counter = counter + 1;
generateRow(row, counter, Math.floor(Math.random() * 10 + 1));
}
}
}
var mutationsValue = 0.5;
function mutations(value) {
if (value) {
mutationsValue = value;
return mutationsValue;
} else {
return mutationsValue;
}
}
const app = document.getElementById('app');
var body = document.querySelector('body');
var theFirstChild = body.firstChild;
var sliderContainer = document.createElement('div');
sliderContainer.style.cssText = 'display: flex';
var slider = document.createElement('input');
var text = document.createElement('label');
text.innerHTML = 'mutations : ' + (mutationsValue * 100).toFixed(0) + '%';
text.id = 'ratioval';
slider.setAttribute('type', 'range');
slider.style.cssText = 'margin-bottom: 10px; margin-top: 5px';
slider.addEventListener('change', function (e) {
mutations(e.target.value / 100);
document.querySelector('#ratioval').innerHTML = 'mutations : ' + (mutations() * 100).toFixed(0) + '%';
});
sliderContainer.appendChild(text);
sliderContainer.appendChild(slider);
body.insertBefore(sliderContainer, theFirstChild);
class QueryObserver extends Component {
render({ query }) {
return createVNode(
1,
'td',
query.elapsedClassName,
[
createVNode(1, 'div', null, query.formatElapsed, 16, null, null, null),
createVNode(
1,
'div',
'popover left',
[createVNode(1, 'div', 'popover-content', query.query, 16, null, null, null), createVNode(1, 'div', 'arrow', null, 1, null, null, null)],
4,
null,
null,
null
)
],
4,
null,
null,
null
);
}
}
observer(QueryObserver);
class QueriesObserver extends Component {
render({ top }) {
return createFragment(
top.slice(0, 5).map((query) => {
return createComponentVNode(VNodeFlags.ComponentClass, QueryObserver, { query });
}),
4
);
}
}
observer(QueriesObserver);
class RowObserver extends Component {
render({ db }) {
const lastSample = db.lastSample;
const children = [
createVNode(1, 'td', 'dbname', db.dbname, 16, null, null, null),
createVNode(1, 'td', 'query-count', createVNode(1, 'span', lastSample.countClassName, lastSample.nbQueries, 16, null, null, null), 2, null, null, null),
createComponentVNode(VNodeFlags.ComponentClass, QueriesObserver, { top: lastSample.queries })
];
return createVNode(1, 'tr', null, children, 4, null, null, null);
}
}
observer(RowObserver);
class TableObserver extends Component {
render({ list }) {
const children = [];
for (const db of list) {
children.push(createComponentVNode(VNodeFlags.ComponentClass, RowObserver, { db }));
}
return createVNode(
1,
'table',
'table table-striped',
[createVNode(1, 'caption', null, 'inferno-mobx observer', 16, null, null, null), createVNode(1, 'tbody', null, children, 4, null, null, null)],
4,
null,
null,
null
);
}
}
observer(TableObserver);
class QueryClass extends Component {
render({ query }) {
return createVNode(
1,
'td',
query.elapsedClassName,
[
createVNode(1, 'div', null, query.formatElapsed, 16, null, null, null),
createVNode(
1,
'div',
'popover left',
[createVNode(1, 'div', 'popover-content', query.query, 16, null, null, null), createVNode(1, 'div', 'arrow', null, 1, null, null, null)],
4,
null,
null,
null
)
],
4,
null,
null,
null
);
}
shouldComponentUpdate({ query }) {
return query !== this.props.query;
}
}
observerPatch(QueryClass);
class QueriesClass extends Component {
render({ top }) {
return createFragment(
top.slice(0, 5).map((query) => {
return createComponentVNode(VNodeFlags.ComponentClass, QueryClass, { query });
}),
4
);
}
shouldComponentUpdate({ top }) {
return top !== this.props.top;
}
}
observerPatch(QueriesClass);
class RowClass extends Component {
render({ db }) {
const lastSample = db.lastSample;
const children = [
createVNode(1, 'td', 'dbname', db.dbname, 16, null, null, null),
createVNode(1, 'td', 'query-count', createVNode(1, 'span', lastSample.countClassName, lastSample.nbQueries, 16, null, null, null), 2, null, null, null),
createComponentVNode(VNodeFlags.ComponentClass, QueriesClass, { top: lastSample.queries })
];
return createVNode(1, 'tr', null, children, 4, null, null, null);
}
shouldComponentUpdate({ db }) {
return db !== this.props.db;
}
}
observerPatch(RowClass);
class TableClass extends Component {
render({ list }) {
const children = [];
for (const db of list) {
children.push(createComponentVNode(VNodeFlags.ComponentClass, RowClass, { db }));
}
return createVNode(
1,
'table',
'table table-striped',
[createVNode(1, 'caption', null, 'inferno-mobx observerPatch', 16, null, null, null), createVNode(1, 'tbody', null, children, 4, null, null, null)],
4,
null,
null,
null
);
}
shouldComponentUpdate({ list }) {
return list !== this.props.list;
}
}
observerPatch(TableClass);
function QueryComponent({ query }) {
return createVNode(
1,
'td',
query.elapsedClassName,
[
createVNode(1, 'div', null, query.formatElapsed, 16, null, null, null),
createVNode(
1,
'div',
'popover left',
[createVNode(1, 'div', 'popover-content', query.query, 16, null, null, null), createVNode(1, 'div', 'arrow', null, 1, null, null, null)],
4,
null,
null,
null
)
],
4,
null,
null,
null
);
}
QueryComponent.defaultHooks = {
onComponentShouldUpdate: ({ query: prev }, { query: next }) => prev !== next
};
const Query = observerWrap(QueryComponent);
function QueriesComponent({ top }) {
return createFragment(
top.slice(0, 5).map((query) => {
return createComponentVNode(VNodeFlags.ComponentFunction, Query, { query });
}),
4
);
}
QueriesComponent.defaultHooks = {
onComponentShouldUpdate: ({ top: prev }, { top: next }) => prev !== next
};
const Queries = observerWrap(QueriesComponent);
function RowComponent({ db }) {
const lastSample = db.lastSample;
const children = [
createVNode(1, 'td', 'dbname', db.dbname, 16, null, null, null),
createVNode(1, 'td', 'query-count', createVNode(1, 'span', lastSample.countClassName, lastSample.nbQueries, 16, null, null, null), 2, null, null, null),
createComponentVNode(VNodeFlags.ComponentFunction, Queries, { top: lastSample.queries })
];
return createVNode(1, 'tr', null, children, 4, null, null, null);
}
RowComponent.defaultHooks = {
onComponentShouldUpdate: ({ db: prev }, { db: next }) => prev !== next
};
const Row = observerWrap(RowComponent);
function TableComponent({ list }) {
const children = [];
for (const db of list) {
children.push(createComponentVNode(VNodeFlags.ComponentFunction, Row, { db }));
}
return createVNode(
1,
'table',
'table table-striped',
[createVNode(1, 'caption', null, 'inferno-mobx observerWrap', 16, null, null, null), createVNode(1, 'tbody', null, children, 4, null, null, null)],
4,
null,
null,
null
);
}
TableComponent.defaultHooks = {
onComponentShouldUpdate: ({ list: prev }, { list: next }) => prev !== next
};
const Table = observerWrap(TableComponent);
const update = action(() => {
updateData();
// startProfile('view update');
});
function loop() {
update();
// endProfile('view update');
}
// startFPSMonitor();
// startMemMonitor();
// initProfiler('view update');
// functional components with observerWrap
render(createComponentVNode(VNodeFlags.ComponentFunction, Table, { list: data }), app);
// class components with observerPatch
//render(createComponentVNode(VNodeFlags.ComponentClass, TableClass, { list: data }), app);
// class components with observer
//render(createComponentVNode(VNodeFlags.ComponentClass, TableObserver, { list: data }), app);
setInterval(loop, 0);
================================================
FILE: docs/dbmonster-mobx/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inferno</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
================================================
FILE: docs/dbmonster-mobx/style.css
================================================
body {color:#333;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;margin:0;}
label {display:inline-block;font-weight:700;margin-bottom:5px;}
input[type=range] {display:block;width:100%;}
table {border-collapse:collapse;border-spacing:0;}
:before,:after {box-sizing: border-box;}
.table > caption,.table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td {border-top:1px solid #ddd;line-height:1.42857143;padding:8px;vertical-align:top;}
.table {width:100%;}
.table-striped > tbody > tr:nth-child(odd) > td,.table-striped > tbody > tr:nth-child(odd) > th {background:#f9f9f9;}
.table > caption {font-weight: 700;}
.label {border-radius:.25em;color:#fff;display:inline;font-size:75%;font-weight:700;line-height:1;padding:.2em .6em .3em;text-align:center;vertical-align:baseline;white-space:nowrap;}
.label-success {background-color:#5cb85c;}
.label-warning {background-color:#f0ad4e;}
.popover {background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;box-shadow:0 5px 10px rgba(0,0,0,.2);display:none;left:0;max-width:276px;padding:1px;position:absolute;text-align:left;top:0;white-space:normal;z-index:1010;}
.popover>.arrow:after {border-width:10px;content:"";}
.popover.left {margin-left:-10px;}
.popover.left > .arrow {border-right-width:0;border-left-color:rgba(0,0,0,.25);margin-top:-11px;right:-11px;top:50%;}
.popover.left > .arrow:after {border-left-color:#fff;border-right-width:0;bottom:-10px;content:" ";right:1px;}
.popover > .arrow {border-width:11px;}
.popover > .arrow,.popover>.arrow:after {border-color:transparent;border-style:solid;display:block;height:0;position:absolute;width:0;}
.popover-content {padding:9px 14px;}
.Query {position:relative;}
.Query:hover .popover {display:block;left:-100%;width:100%;}
================================================
FILE: docs/event-test/app.js
================================================
import { createComponentVNode, linkEvent, render } from 'inferno';
function hoistedEvent(e) {
console.log('ok', e);
}
function hoistedNonSyntheticEvents() {
const listItems = [];
for (let i = 0; i < numberOfNodes; i++) {
listItems.push(
<li onclick={hoistedEvent} $HasTextChildren>
{i}
</li>
);
}
return <ul $HasNonKeyedChildren>{listItems}</ul>;
}
function hoistedLinkEventNonSynthetic() {
const listItems = [];
for (let i = 0; i < numberOfNodes; i++) {
listItems.push(
<li onclick={linkEvent(i, hoistedEvent)} $HasTextChildren>
{i}
</li>
);
}
return <ul $HasNonKeyedChildren>{listItems}</ul>;
}
function hoistedSyntheticEvents() {
const listItems = [];
for (let i = 0; i < numberOfNodes; i++) {
listItems.push(
<li onClick={hoistedEvent} $HasTextChildren>
{i}
</li>
);
}
return <ul $HasNonKeyedChildren>{listItems}</ul>;
}
function newFuncsNonSyntheticEvents() {
const listItems = [];
for (let i = 0; i < numberOfNodes; i++) {
listItems.push(
<li
onclick={() => {
console.log('ok');
}}
$HasTextChildren
>
{i}
</li>
);
}
return <ul $HasNonKeyedChildren>{listItems}</ul>;
}
const numberOfNodes = 500;
const waitMs = 30;
const patchCounter = 7;
const iterations = 10;
const warmUpIterations = 3;
const roots = [hoistedNonSyntheticEvents, hoistedLinkEventNonSynthetic, hoistedSyntheticEvents, newFuncsNonSyntheticEvents];
const names = ['hoistedNonSyntheticEvents', 'hoistedLinkEventNonSynthetic', 'hoistedSyntheticEvents', 'newFuncsNonSyntheticEvents'];
const getAvg = (arr) => arr.reduce((a, b) => a + b, 0) / arr.length;
const getMin = (arr) => Math.min(...arr);
const getMax = (arr) => Math.max(...arr);
function Results({ results }) {
const rows = [];
for (let i = 0; i < results.length; i++) {
const testData = results[i];
const testCases = ['mount', 'patch', 'unmount'];
rows.push(<div className="test-name">{testData.name}</div>);
for (let j = 0; j < testCases.length; j++) {
const testCase = testCases[j];
const result = testData[testCase];
rows.push(<div className="test-part">{testCase}</div>);
rows.push(<div className="test-result">Avg: {result.avg}</div>);
rows.push(<div className="test-result">Min: {result.min}</div>);
rows.push(<div className="test-result">Max: {result.max}</div>);
}
}
return (
<div className="results" $HasNonKeyedChildren>
{rows}
</div>
);
}
document.addEventListener('DOMContentLoaded', function (e) {
const container = document.querySelector('#App');
const result = [];
let mountTimes = [];
let patchTimes = [];
let unmountTimes = [];
let i = 0;
for (let q = 0; q < warmUpIterations; q++) {
for (let qw = 0; qw < roots.length; qw++) {
render(createComponentVNode(1 << 3, roots[qw]), container);
}
}
render(null, container);
function mountTest(finishCallback) {
const start = performance.now();
// Mount
render(createComponentVNode(1 << 3, roots[i]), container);
const end = performance.now();
mountTimes.push(end - start);
setTimeout(patchTest, waitMs, finishCallback);
}
function patchTest(finishCallback) {
const start = performance.now();
// Patch loop
for (let p = 0; p < patchCounter; p++) {
render(createComponentVNode(1 << 3, roots[i]), container);
}
const end = performance.now();
patchTimes.push(end - start);
setTimeout(unmountTest, waitMs, finishCallback);
}
function unmountTest(finishCallback) {
const start = performance.now();
// Mount
render(null, container);
const end = performance.now();
unmountTimes.push(end - start);
setTimeout(finishCallback, waitMs);
}
let iterationCounter = 0;
function startRound() {
if (iterationCounter < iterations && i < roots.length) {
iterationCounter++;
setTimeout(mountTest, waitMs, startRound);
} else if (i < roots.length) {
result.push({
name: names[i],
mount: {
min: getMin(mountTimes),
avg: getAvg(mountTimes),
max: getMax(mountTimes)
},
patch: {
min: getMin(patchTimes),
avg: getAvg(patchTimes),
max: getMax(patchTimes)
},
unmount: {
min: getMin(unmountTimes),
avg: getAvg(unmountTimes),
max: getMax(unmountTimes)
}
});
mountTimes = [];
patchTimes = [];
unmountTimes = [];
i++;
iterationCounter = 0;
startRound(); // Go next
} else {
// Finished!
setTimeout(function () {
render(<Results results={result} />, container);
}, 1000);
}
}
startRound();
});
================================================
FILE: docs/event-test/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet" />
<title>Event test</title>
</head>
<body>
<div id="App"></div>
<script src="dist/bundle.js" type="text/javascript"></script>
</body>
</html>
================================================
FILE: docs/event-test/styles.css
================================================
.test-result {
margin: 5px 0 5px 19px;
}
.test-name {
font-weight: 600;
}
.results {
padding: 20px;
}
.test-part {
font-weight: 600;
}
ul {
list-style: none;
}
body {
margin: 0;
padding: 0;
}
================================================
FILE: docs/form/app.js
================================================
import { render, linkEvent } from 'inferno';
import { h } from 'inferno-hyperscript';
let firstName = 'Dominic';
let lastName = null;
let age = 28;
let description = null;
// special input values
let id = 'test';
let testValue = 11;
function changeTestValue(event) {
testValue = event.target.value;
console.log(event.type, testValue);
renderForm();
}
function linkedTextHandler(data, e) {
const val = e.target.value;
firstName = val;
renderForm();
}
function textHandler(e) {
const val = e.target.value;
lastName = val;
renderForm();
}
function numberHandler(e) {
const val = e.target.value;
age = val;
renderForm();
}
function descHandler(e) {
const val = e.target.value;
description = val;
renderForm();
}
function handleToggle(e) {
console.log('Checkbox clicked!');
}
function renderForm() {
render(
h('form.form', [
h('div.form-group', [
h('label', 'Please enter your first name name:'),
h('input', {
type: 'text',
placeholder: 'Joe',
value: firstName,
onInput: linkEvent({ data: '123' }, linkedTextHandler)
})
]),
h('div.form-group', [
h('label', 'Please enter your first last name:'),
h('input', {
type: 'text',
placeholder: 'Bloggs',
defaultValue: 'Gannaway',
onInput: textHandler
})
]),
h('div.form-group', [h('label', 'Please enter your age:'), h('input', { type: 'number', value: age, min: 0, max: 99, onInput: numberHandler })]),
h('div.form-group', [
h('label', 'What is your favourite food:'),
h('div.inline', [h('input', { type: 'radio', name: 'food', defaultChecked: false, onClick: handleToggle }), h('span', 'Pizza')]),
h('div.inline', [h('input', { type: 'radio', name: 'food', defaultChecked: true, onClick: handleToggle }), h('span', 'Pasta')])
]),
h('div.form-group', [
h('label', 'Please enter your location:'),
h('select', { value: 'United Kingdom' }, [
h('option', { selected: false }, 'United States'),
h('option', { selected: true }, 'United Kingdom'),
h('option', { selected: false }, 'France')
])
]),
h('div.form-group', [
h('label', 'Please enter a description:'),
h('textarea', {
defaultValue: "I don't know?",
value: description,
onInput: descHandler
})
]),
h('div.form-group', [h('label', 'Color picker (html5):'), h('input', { type: 'color' })]),
h('label', { for: 'test' }, [
'Label',
h('input#test', {
id: id,
name: id,
value: testValue,
onChange: changeTestValue,
onInput: changeTestValue,
onKeyup: changeTestValue,
type: 'number',
pattern: '[0-9]+([,.][0-9]+)?',
inputMode: 'numeric',
min: 10
})
])
]),
document.getElementById('app')
);
}
renderForm();
================================================
FILE: docs/form/index.html
================================================
<!doctype html>
<html>
<head>
<title>Inferno Form example</title>
<style>
body {
margin: 0;
padding: 0;
}
.form {
min-width: 400px;
margin: 20px;
overflow: hidden;
border: 1px solid #999;
background: #eee;
padding: 20px;
font-family: Arial;
}
.form-group {
display: block;
overflow: hidden;
position: relative;
margin-bottom: 20px;
}
.form-group label {
display: block;
font-size: 16px;
color: #444;
margin-bottom: 5px;
}
.form-group input {
display: block;
margin-top: 5px;
font-size: 14px;
padding: 5px;
}
.form-group .inline input {
display: inline-block;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
================================================
FILE: docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inferno Examples</title>
<link rel="stylesheet" href="styles.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bench-list">
<svg class="inferno-logo" viewBox="0 0 320 320" width="80" height="80" preserveAspectRatio="xMidYMid meet"><g fill="#494949" stroke="none"><path fill="#FF3232" d="m144.9 258.5c-43.4-6.1-78.3-46.3-79.2-90-0.7-25.3 8.3-51.7 27-69.1-2 10-8.4 22.4-6.5 34.1 0 14.4 13.7 28.5 28.5 24.6 13.3-3.2 18.3-18.8 14.7-30.8-3.6-16.3-12.1-31.8-9.6-49 2.4-32.4 26.9-58 53.9-73.3 5.5-4 3.6-0.7 1.1 3.2-9.2 14.9-10.5 34-2.6 49.7 11.5 27 34 50.4 35.3 81 0.3 6.3-1.9 22.4 7.3 12 14.6-13.6 13.5-36.2 6.9-53.5-1.8-9.7 9.9 6.6 12.8 9.4 25.3 31.7 26.7 79.9 2.7 112.8-20.1 29.2-57.2 44.9-92.1 38.9z"></path><path d="M139.3 315.4C82.4 307.7 34.8 268.1 16.4 213.1 10.7 196 9.1 185.5 9 165.5c0-12.5 0.4-19.6 1.8-27 11-59.3 54.6-106 112.4-120.6 6.3-1.6 12-2.9 12.8-2.9 2.5 0 1.5 2.1-3.5 7.6-10.7 11.7-19.3 27.7-22.8 42.3l-1.7 7.4-7 4.8C77.3 93 61.3 117.3 56 145.1c-1.9 9.8-2.1 29-0.5 38.1 7.9 43.8 41.7 78.1 85 86.3 16.8 3.2 38.6 1.5 54.3-4.1 31.8-11.4 56-36.3 66-67.9 3.7-11.8 4.8-19.2 4.8-32.3 0-24.5-7-45.2-21.8-64.9-12.9-17.1-28.6-27.9-54.5-37.5-3.3-1.2-7.3-9.7-9.4-19.8-1.6-7.8-0.9-15.2 2.1-22.7 1.5-3.7 2.1-4.2 4.8-4.2 4.9 0 20.8 4.6 31.5 9 45.6 19 79.3 59.9 89.9 109 3.3 15.1 3.7 43.1 0.9 58-14.9 80.2-89.5 134.4-169.9 123.5z" fill="#494949"></path></g></svg>
<h1>Inferno Examples and Benchmarks</h1>
<h2>Benchmarks</h2>
<p>
<a href="1kcomponents/index.html">1k Components</a><br />
This benchmark measures creation time of multiple functional components.<br />
Rendering speed is heavily bottlenecked by patchStyle method.<br />
<small><a href="1kcomponents/index.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/1kcomponents/app.js">View source...</a></small>
</p>
<p>
<a href="dbmonster/index.html">DBMonster</a><br />
This benchmark measures time of patching same number of elements.<br />
<small><a href="dbmonster/index.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/dbmonster/app.js">View source...</a></small>
</p>
<p>
<a href="uibench/index.html">UI Benchmark</a><br />
InfernoJS implementation of UI Benchmark. This benchmark uses optimization patterns specific to InfernoJS only.<br />
<small><a href="uibench/index.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/uibench/app.js">View source...</a></small>
</p>
<p>
<a href="uibench-inferno-compat/index.html">UI Benchmark (Inferno-compat)</a><br />
Same as regular ui benchmark implementation, but uses inferno-compat to track performance regressions in compatibility layer.<br />
<small><a href="uibench-inferno-compat/index.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/uibench-inferno-compat/app.js">View source...</a></small>
</p>
<p>
<a href="uibench-normalization/index.html">UI Benchmark (Normalization)</a><br />
This version of UI Benchmark tracks performance regressions in Inferno's normalization algorithm. Do not write code like this.<br />
<small><a href="uibench-normalization/index.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/uibench-normalization/app.js">View source...</a></small>
</p>
<p>
<a href="uibench-lifecycle/index.html">UI Benchmark (Lifecycle)</a><br />
This version of UI Benchmark tracks performance regressions in Inferno's lifecycle process. Do not write code like this.<br />
<small><a href="uibench-lifecycle/index.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/uibench-lifecycle/app.js">View source...</a></small>
</p>
<p>
<a href="uibench-reactlike/index.html">UI Benchmark (same as React)</a><br />
This is InfernoJS implementation of UI Benchmark using identical application level code with React implementation.<br />
<small><a href="uibench-reactlike/index.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/uibench-reactlike/app.js">View source...</a></small>
</p>
<h2>Examples</h2>
<p>
<a href="animations-demo/index.html">Animations demo</a><br />
This demo uses inferno-animation to animate multiple elements of a card when it is added and removed from the DOM.<br />
<small><a href="animations-demo/index.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/animations-demo/app.js">View source...</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/animations-demo/app.css">View CSS...</a></small>
</p>
<p>
<a href="animations-demo-inner/index.html">Animating child when parent is mounted/unmounted</a><br />
Here the animation is only performed on a child component of page when the page is mounted and unnmounted.<br />
<small><a href="animations-demo-inner/index.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/animations-demo-inner/app.js">View source...</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/animations-demo-inner/app.css">View CSS...</a></small>
</p>
<p>
<a href="animations/index.html">Animations on mount and unmount</a><br />
This is an implementation of inferno-animation where components are animated when added, removed or moved in the DOM.<br />
<small><a href="animations/index.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/animations/app.js">View source...</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/animations/app.css">View CSS...</a></small>
</p>
<p>
<a href="animations-global-demo/index.html">Global animations</a><br />
Component exists on two different "pages" and when we switch between them it animates between the two positions.<br />
<small><a href="animations-global-demo/index.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/animations-global-demo/app.js">View source...</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/animations-global-demo/app.css">View CSS...</a></small>
</p>
<p>
<a href="async-render/index.html">Async render</a><br />
Render 2 x 2k rows using loop in componentDidMount.<br />
<small><a href="async-render/index.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/async-render/app.js">View source...</a></small>
</p>
<p>
<a href="compat/index.html">React Compatibility</a><br />
Using React compatibility extension.<br />
<small><a href="1kcomponents/index.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/compat/index.html">View source...</a></small>
</p>
<p>
<a href="form/index.html">Input Forms</a><br />
Inferno and HTML-forms.<br />
<small><a href="form/index.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/form/index.html">View source...</a></small>
</p>
<p>
<a href="svg/tiger.html">Inferno and SVG</a><br />
The tiger rendered with an SVG in Inferno.<br />
<small><a href="svg/tiger.html">Example</a> | <a href="https://github.com/infernojs/inferno/blob/master/docs/svg/tiger.html">View source...</a></small>
</p>
</div>
</body>
</html>
================================================
FILE: docs/math-elements/app.js
================================================
import { Component, render } from 'inferno';
class Demo extends Component {
constructor(props, context) {
super(props, context);
this.state = {
numPoints: 0
};
this.updateCount = this.updateCount.bind(this);
}
updateCount(e) {
this.setState({
numPoints: e.target.value
});
}
componentDidMount() {
this.setState({
numPoints: 1000
});
}
render(props, state) {
return (
<div className="app-wrapper">
<p>
The infinite sum
<math display="block">
<mrow>
<munderover>
<mo>∑</mo>
<mrow>
<mi>n</mi>
<mo>=</mo>
<mn>1</mn>
</mrow>
<mrow>
<mo>+</mo>
<mn>∞</mn>
</mrow>
</munderover>
<mfrac>
<mn>1</mn>
<msup>
<mi>n</mi>
<mn>2</mn>
</msup>
</mfrac>
</mrow>
</math>
is equal to the real number
<math display="inline">
<mfrac>
<msup>
<mi>π</mi>
<mn>2</mn>
</msup>
<mn>6</mn>
</mfrac>
</math>
.
</p>
</div>
);
}
}
render(<Demo />, document.getElementById('app'));
================================================
FILE: docs/math-elements/index.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
================================================
FILE: docs/math-elements/style.css
================================================
html,
body {
padding: 0;
margin: 0;
font-family: sans-serif;
width: 100%;
height: 100%;
background: #111;
color: #777;
}
a {
color: #777;
}
.demo {
overflow-x: hidden;
position: relative;
}
.point {
width: 4px;
height: 4px;
position: absolute;
shape-rendering: optimizeSpeed;
}
.controls {
position: fixed;
top: 0;
width: 100%;
padding: 15px;
background: #e41f1c;
border-bottom: 1px solid darkred;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: white;
white-space: nowrap;
}
.controls > input {
margin: 0 10px;
width: 50%;
}
.controls label {
margin-left: 30px;
}
#stats {
position: fixed;
top: 0;
right: 0;
}
.about {
position: fixed;
bottom: 0;
width: 100%;
padding: 10px;
}
#app,
.app-wrapper,
.demo {
width: 100%;
height: 100%;
overflow: hidden;
}
================================================
FILE: docs/styles.css
================================================
html {
line-height: 1.42857143;
}
body {
margin: 0;
padding: 0 5vw;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
background-color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #454a57;
}
h1 {
border-bottom: 1px solid #e0e0e0;
line-height: 4rem;
margin-bottom: 1rem;
font-size: 2.2rem;
font-weight: 500;
}
h2 {
font-weight: 400;
font-size: 1.5rem;
color: #000;
padding-top: 1rem;
margin-bottom: 1rem;
}
a {
color: #ff0038;
text-decoration: none;
opacity: 1;
transition: opacity .2s linear;
display: inline-block;
-webkit-backface-visibility: hidden;
}
p {
text-align: left;
}
a:hover {
opacity: .5;
text-decoration: underline;
}
.bench-list {
max-width: 700px;
margin: 5vh 0;
}
.inferno-logo {
background: #fff;
width: 6rem;
height: 6rem;
padding: 2rem;
border-radius: 2rem;
}
================================================
FILE: docs/svg/app.js
================================================
import { render } from 'inferno';
import { createElement } from 'inferno-create-element';
var tiger = createElement(
'svg',
{
version: '1.1',
baseProfile: 'basic',
id: 'svg2',
xmlns: 'http://www.w3.org/2000/svg',
x: '0px',
y: '0px',
width: '900px',
height: '900px',
viewBox: '0 0 900 900'
},
createElement('path', { id: 'path482', fill: 'none', d: 'M184.013,144.428' }),
createElement('path', {
id: 'path6',
fill: '#FFFFFF',
stroke: '#000000',
'stroke-width': '0.172',
d: 'M108.956,403.826c0,0,0.178,3.344-1.276,3.311 c-1.455-0.033-30.507-84.917-66.752-80.957C40.928,326.18,72.326,313.197,108.956,403.826z'
}),
createElement('path', {
id: 'path10',
fill: '#FFFFFF',
stroke: '#000000',
'stroke-width': '0.172',
d: 'M115.189,398.488c0,0-0.97,3.207-2.327,2.679 c-1.356-0.526,0.203-90.231-35.227-98.837C77.635,302.33,111.576,300.804,115.189,398.488z'
}),
createElement('path', {
id: 'path14',
fill: '#FFFFFF',
stroke: '#000000',
'stroke-width': '0.172',
d: 'M163.727,473.225c0,0,2.888,1.695,2.059,2.892 c-0.832,1.194-87.655-21.408-104.35,11.003C61.436,487.118,67.931,453.771,163.727,473.225z'
}),
createElement('path', {
id: 'path18',
fill: '#FFFFFF',
stroke: '#000000',
'stroke-width': '0.172',
d: 'M158.767,491.254c0,0,3.277,0.699,2.864,2.096 c-0.411,1.396-89.935,7.298-95.567,43.318C66.063,536.668,61.723,502.971,158.767,491.254z'
}),
createElement('path', {
id: 'path22',
fill: '#FFFFFF',
stroke: '#000000',
'stroke-width': '0.172',
d: 'M151.332,481.498c0,0,3.139,1.171,2.528,2.492 c-0.611,1.319-90.037-5.899-100.864,28.915C52.996,512.905,53.617,478.938,151.332,481.498z'
}),
createElement('path', {
id: 'path26',
fill: '#FFFFFF',
stroke: '#000000',
'stroke-width': '0.172',
d: 'M132.43,449.356c0,0,2.31,2.427,1.181,3.347 c-1.128,0.919-78.363-44.729-103.341-18.171C30.27,434.532,45.704,404.264,132.43,449.356z'
}),
createElement('path', {
id: 'path30',
fill: '#FFFFFF',
stroke: '#000000',
'stroke-width': '0.172',
d: 'M119.108,456.757c0,0,2.571,2.148,1.554,3.192 c-1.017,1.041-82.921-35.576-104.734-6.36C15.928,453.589,27.837,421.769,119.108,456.757z'
}),
createElement('path', {
id: 'path34',
fill: '#FFFFFF',
stroke: '#000000',
'stroke-width': '0.172',
d: 'M114.518,463.946c0,0,2.839,1.778,1.974,2.95 c-0.865,1.171-86.997-23.942-104.623,7.974C11.869,474.87,19.329,441.724,114.518,463.946z'
}),
createElement('path', {
id: 'path38',
fill: '#FFFFFF',
stroke: '#000000',
'stroke-width': '0.172',
d: 'M133.47,465.03c0,0,1.981,2.703,0.743,3.472 c-1.237,0.768-71.985-54.405-100.161-31.267C34.052,437.235,53.236,409.195,133.47,465.03z'
}),
createElement('path', {
id: 'path42',
fill: '#FFFFFF',
stroke: '#000000',
'stroke-width': '0.172',
d: 'M98.546,413.917c0,0,1.06,3.178-0.353,3.531 c-1.413,0.353-51.91-73.804-85.812-60.385C12.381,357.063,39.22,336.229,98.546,413.917z'
}),
createElement('path', {
id: 'path46',
fill: '#FFFFFF',
stroke: '#000000',
'stroke-width': '0.172',
d: 'M99.773,426.239c0,0,1.722,2.876,0.417,3.523 c-1.303,0.649-66.605-60.873-96.813-40.458C3.376,389.306,25.088,363.174,99.773,426.239z'
}),
createElement('path', {
id: 'path50',
fill: '#FFFFFF',
stroke: '#000000',
'stroke-width': '0.172',
d: 'M99.57,433.955c0,0,1.981,2.703,0.744,3.472 c-1.238,0.767-71.985-54.405-100.162-31.267C0.152,406.16,19.335,378.12,99.57,433.955z'
}),
createElement('path', {
id: 'path54',
fill: '#FFFFFF',
stroke: '#000000',
d: 'M95.668,436.985c0.888,10.678,2.632,22.275,5.703,27.783 c0,0-6.356,21.895,9.181,45.2c0,0-0.707,12.712,2.119,18.362c0,0,7.063,14.832,15.538,16.244c6.858,1.143,22.26,6.561,39.67,9.04 c0,0,30.249,24.859,24.599,47.461c0,0-0.706,28.956-7.063,31.781c0,0,20.481-19.775,3.531,9.888l-7.769,33.192 c0,0,45.201-38.138,17.657-5.648l-17.657,45.906c0,0,34.607-32.487,21.894-17.656l-5.65,15.538c0,0,76.276-48.025,21.894,4.237 c0,0,14.125-6.356,21.894-1.412c0,0,12.006-2.119,10.594,0.706c0,0-36.726,18.361-43.082,50.851c0,0,14.831-17.657,9.181,1.412 l0.706,20.48c0,0,7.063-38.138,6.356,28.25c0,0,33.9-31.78,13.419,4.944v29.662c0,0,26.838-28.956,15.538-6.354 c0,0,17.656-15.538,10.594,11.3c0,0-1.413,18.361,6.356-1.412c0,0,28.25-54.029,17.656-7.771c0,0-1.412,33.9,7.063,7.771 c0,0,0.706,18.362,16.95,31.075c0,0-2.119-89.695,20.48-26.133l7.063,28.957c0,0,4.943-16.244,4.237-25.426 c0,0,26.132-28.957,14.125,14.125c0,0,26.838-40.257,21.188-16.95c0,0-13.419,28.251-10.594,36.727c0,0,29.663-61.444,31.782-64.271 c0,0-3.531,74.865,15.537,11.3c0,0,9.888,21.188,4.943,28.957c0,0,14.125-14.125,12.712-19.774c0,0,8.122-14.479,13.066,9.534 c0,0,3.178,16.598,6.003,10.946c0,0,7.063,42.377,9.182,2.119c0,0,2.825-24.013-9.888-44.494c0,0,1.412-5.649-3.531-12.713 c0,0,24.014,38.139,11.3-12.713c0,0,19.777,14.125,21.896,14.125c0,0-24.015-40.963-8.477-32.487c0,0-9.183-18.362,22.602,2.825 c0,0-28.252-28.251,2.825-11.301c0,0,14.125,11.301,0.706-6.356c0,0-25.428-28.25,13.419,3.532c0,0,20.48,28.956,21.895,33.9 c0,0-17.655-51.559-25.426-56.501c0,0,14.832-64.271,87.576-36.727c0,0,12.007,30.369,19.774-2.118c0,0,22.602-11.301,42.375,37.432 c0,0,7.063-24.013,5.65-28.956c0,0,12.007,2.119,10.594,0c0,0,23.308,7.769,25.427,6.356c0,0,12.006,12.006,12.712,5.648 c0,0,16.244,4.944,12.713-1.412c0,0,15.538,27.544,16.244,33.9l4.236-24.719l3.531,4.942c0,0,2.825-13.419,1.413-15.537 c-1.413-2.119,35.313,12.006,43.787,48.731l3.531,14.831c0,0,10.594-26.131,7.77-33.193c0,0,9.181,1.412,9.888,9.181 c0,0,7.063-40.963-1.412-51.557c0,0,7.769-1.412,9.888,4.944V714.78c0,0,12.713,1.411,12.713-2.825c0,0,7.769-7.063,11.3,1.412 c0,0-21.894-62.15,10.594-28.25c0,0,12.714,19.068,6.356-14.125c-6.357-33.194-13.419-36.021-4.943-36.727 c0,0,1.412-6.355-2.118-9.181c-3.531-2.825,2.118,0,2.118,0s8.476,7.063-0.707-31.782c0,0,11.302,2.825-9.888-48.73 c0,0,4.944-4.237-2.118-19.069c0,0,14.125,7.77,19.069,4.944c0,0-0.707-2.825-6.356-9.889c0,0-38.139-96.759-2.118-57.913 c0,0,20.923,23.925,9.623-16.332c0,0-16.088-42.394-14.716-49.979L95.668,436.985z'
}),
createElement('path', {
id: 'path58',
fill: '#CC7226',
stroke: '#000000',
d: 'M854.095,396.693c1.108,0.32,5.004,2.304,7.211,5.217 c0,0,12.006,19.068,2.825-13.418c0,0-16.244-50.851-0.707-31.076c0,0,10.594,12.713,4.944-11.3 c-6.824-29.004-11.301-40.257-11.301-40.257s20.48,8.475-26.837-61.444l15.536,6.356c0,0-34.605-69.919-72.743-79.101 l-14.125-10.594c0,0,67.8-67.094,45.199-132.07c0,0-12.007-9.182-28.957,7.063c0,0-11.3,8.475-21.894,5.65 c0,0-54.382,2.119-57.913,2.119S630.359-21.844,514.533,9.231c0,0-9.183,3.531-16.95,1.413c0,0-32.489-28.25-118.653,12.006 c0,0-17.655,3.531-20.48,3.531s-7.77,0-21.895,11.3c-14.125,11.3-14.832,12.712-18.362,15.538c0,0-28.957,19.775-37.432,21.188 c0,0-20.481,11.3-28.25,28.957l-6.356,2.119c0,0-2.825,12.713-3.532,14.832c0,0-8.475,6.356-9.887,16.244 c0,0-15.538,10.594-14.832,18.362c0,0-2.825,9.182-4.238,17.657c0,0-12.712,8.475-11.3,13.419c0,0-13.419,24.719-11.3,36.725 c0,0-11.3-0.706-16.244,3.531c0,0-1.413,8.475-4.238,9.182c0,0-4.944,2.119-0.706,9.181c0,0-2.825,4.944-3.531,7.769 c0,0,1.412,4.944-6.356,14.831c0,0-11.3,33.194-7.769,42.375c0,0,0.707,8.475-4.237,11.3c0,0-6.356-0.707,8.475,20.481 c0,0,1.413,2.119-4.238,6.356c0,0-30.369,6.356-34.606,35.313c0,0-24.013,26.131-24.013,35.313c0,4.069,0.479,9.626,1.713,17.771 c0,0-1.007,14.718,47.725,16.131C191.772,453.469,854.095,396.693,854.095,396.693z'
}),
createElement('path', {
id: 'path62',
fill: '#CC7226',
d: 'M120.793,436.164c-44.141-69.566-18.716,30.018-18.716,30.018 c15.538,60.738,244.365-5.649,244.365-5.649s298.042-53.677,317.816-60.739c19.775-7.063,187.864,4.237,187.864,4.237l-9.888-29.663 c-114.414-81.926-148.314-40.963-172.327-48.025c-24.013-7.062-19.774,9.888-25.425,11.3c-5.651,1.412-74.863-42.375-86.163-40.963 c-11.301,1.413-56.045-40.523-2
gitextract_phe3_u4g/ ├── .editorconfig ├── .gitattributes ├── .github/ │ ├── COMMIT_TEMPLATE.md │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE.md │ ├── PULL_REQUEST_TEMPLATE.md │ └── workflows/ │ ├── ci-template.yml │ └── codeql-analysis.yml ├── .gitignore ├── .npmrc ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── browser/ │ └── jsfiddle-integration-babel7v3.js ├── demo/ │ └── inferno-router-demo/ │ ├── .babelrc │ ├── .gitignore │ ├── .proxyrc │ ├── README.md │ ├── package.json │ ├── src/ │ │ ├── App.tsx │ │ ├── index.html │ │ ├── index.tsx │ │ ├── indexServer.tsx │ │ ├── pages/ │ │ │ ├── AboutPage.scss │ │ │ ├── AboutPage.tsx │ │ │ ├── ContentPage.scss │ │ │ ├── ContentPage.tsx │ │ │ ├── PageTemplate.scss │ │ │ ├── PageTemplate.tsx │ │ │ ├── StartPage.scss │ │ │ └── StartPage.tsx │ │ └── server.ts │ └── tsconfig.json ├── docs/ │ ├── 1kcomponents/ │ │ ├── app.js │ │ ├── index.html │ │ └── style.css │ ├── animations/ │ │ ├── app.css │ │ ├── app.js │ │ └── index.html │ ├── animations-demo/ │ │ ├── app.css │ │ ├── app.js │ │ └── index.html │ ├── animations-demo-inner/ │ │ ├── app.css │ │ ├── app.js │ │ └── index.html │ ├── animations-global-demo/ │ │ ├── app.css │ │ ├── app.js │ │ └── index.html │ ├── async-render/ │ │ ├── app.js │ │ └── index.html │ ├── build.js │ ├── compat/ │ │ ├── app.js │ │ └── index.html │ ├── dbmonster/ │ │ ├── ENV.js │ │ ├── app.js │ │ ├── index.html │ │ └── style.css │ ├── dbmonster-mobx/ │ │ ├── app.js │ │ ├── index.html │ │ └── style.css │ ├── event-test/ │ │ ├── app.js │ │ ├── index.html │ │ └── styles.css │ ├── form/ │ │ ├── app.js │ │ └── index.html │ ├── index.html │ ├── math-elements/ │ │ ├── app.js │ │ ├── index.html │ │ └── style.css │ ├── styles.css │ ├── svg/ │ │ ├── app.js │ │ └── tiger.html │ ├── uibench/ │ │ ├── app.js │ │ ├── custom-uibench.js │ │ └── index.html │ ├── uibench-inferno-compat/ │ │ ├── app.js │ │ └── index.html │ ├── uibench-lifecycle/ │ │ ├── app.js │ │ └── index.html │ ├── uibench-normalization/ │ │ ├── app.js │ │ └── index.html │ └── uibench-reactlike/ │ ├── app.js │ └── index.html ├── documentation/ │ ├── v4-migration.md │ ├── v6-migration.md │ ├── v6-release.md │ └── v9-migration.md ├── eslint.config.js ├── fixtures/ │ └── browser/ │ ├── gzip/ │ │ └── gzippreprocessor.js │ ├── karma.babel.conf.js │ ├── karma.sauce.conf.js │ ├── karma.swc.conf.js │ ├── karma.ts.conf.js │ ├── package.json │ ├── test.index.js │ └── test.no-compat.index.js ├── jest.config-nodom.js ├── jest.config.js ├── lerna.json ├── package.json ├── packages/ │ ├── inferno/ │ │ ├── README.md │ │ ├── __tests__/ │ │ │ ├── animationHooks.spec.tsx │ │ │ ├── animationHooksFunc.spec.tsx │ │ │ ├── async-setstate.spec.tsx │ │ │ ├── blueprints.spec.tsx │ │ │ ├── children.spec.tsx │ │ │ ├── clonenode.spec.tsx │ │ │ ├── columnrender.spec.tsx │ │ │ ├── componentlifecycle.spec.tsx │ │ │ ├── components2.spec.tsx │ │ │ ├── createref.spec.tsx │ │ │ ├── data/ │ │ │ │ └── common-render/ │ │ │ │ ├── child.tsx │ │ │ │ ├── parentbase.tsx │ │ │ │ ├── parentfirstcommon.tsx │ │ │ │ └── parentsecondcommon.tsx │ │ │ ├── defaultprops-typings.spec.tsx │ │ │ ├── error.spec.tsx │ │ │ ├── forceUpdate.spec.tsx │ │ │ ├── formelements.spec.tsx │ │ │ ├── forward-ref.spec.tsx │ │ │ ├── fragments.spec.tsx │ │ │ ├── hooks.spec.tsx │ │ │ ├── input.spec.tsx │ │ │ ├── instancenull.spec.tsx │ │ │ ├── issue-1369.spec.tsx │ │ │ ├── lifecycle.spec.tsx │ │ │ ├── link.spec.tsx │ │ │ ├── linkEvent.spec.tsx │ │ │ ├── mixedFormElements.spec.tsx │ │ │ ├── newlifecycle.spec.tsx │ │ │ ├── patching-jsx.spec.tsx │ │ │ ├── patching.spec.tsx │ │ │ ├── portal.spec.tsx │ │ │ ├── rendering.spec.tsx │ │ │ ├── select.spec.tsx │ │ │ ├── select2.spec.tsx │ │ │ ├── setState.spec.tsx │ │ │ ├── singlepatches.spec.tsx │ │ │ ├── state.spec.tsx │ │ │ ├── styles.spec.tsx │ │ │ ├── svgXlink.spec.tsx │ │ │ ├── topcontext.spec.tsx │ │ │ ├── transition.spec.tsx │ │ │ ├── types.children.spec.tsx │ │ │ ├── types.spec.tsx │ │ │ └── validations.spec.tsx │ │ ├── index.cjs │ │ ├── index.mjs │ │ ├── package.json │ │ └── src/ │ │ ├── DOM/ │ │ │ ├── constants.ts │ │ │ ├── events/ │ │ │ │ ├── attachEvent.ts │ │ │ │ ├── delegation.ts │ │ │ │ └── linkEvent.ts │ │ │ ├── mounting.ts │ │ │ ├── patching.ts │ │ │ ├── props.ts │ │ │ ├── rendering.ts │ │ │ ├── unmounting.ts │ │ │ ├── utils/ │ │ │ │ ├── common.ts │ │ │ │ ├── componentUtil.ts │ │ │ │ └── innerHTML.ts │ │ │ └── wrappers/ │ │ │ ├── InputWrapper.ts │ │ │ ├── SelectWrapper.ts │ │ │ ├── TextareaWrapper.ts │ │ │ ├── processElement.ts │ │ │ └── wrapper.ts │ │ ├── core/ │ │ │ ├── component.ts │ │ │ ├── implementation.ts │ │ │ ├── nativetypes.ts │ │ │ ├── refs.ts │ │ │ ├── types.ts │ │ │ └── validate.ts │ │ └── index.ts │ ├── inferno-animation/ │ │ ├── __tests__/ │ │ │ ├── animatedAllComponent.spec.tsx │ │ │ ├── animatedComponent.spec.tsx │ │ │ ├── animatedComponentTypings.tsx │ │ │ ├── animatedMoveComponent.spec.tsx │ │ │ ├── index.spec.tsx │ │ │ └── utils.spec.tsx │ │ ├── index.cjs │ │ ├── index.css │ │ ├── package.json │ │ ├── readme.md │ │ └── src/ │ │ ├── AnimatedAllComponent.ts │ │ ├── AnimatedComponent.ts │ │ ├── AnimatedMoveComponent.ts │ │ ├── animationCoordinator.ts │ │ ├── animations.ts │ │ ├── index.ts │ │ └── utils.ts │ ├── inferno-clone-vnode/ │ │ ├── README.md │ │ ├── __tests__/ │ │ │ └── cloneVNode.spec.tsx │ │ ├── index.cjs │ │ ├── package.json │ │ └── src/ │ │ └── index.ts │ ├── inferno-compat/ │ │ ├── README.md │ │ ├── __tests__/ │ │ │ ├── ReactChildren.spec.jsx │ │ │ ├── ReactComponent.spec.jsx │ │ │ ├── ReactComponentLifeCycle.spec.jsx │ │ │ ├── ReactCompositeComponentState.spec.jsx │ │ │ ├── ReactDOM.spec.jsx │ │ │ ├── ReactDOMComponent.spec.jsx │ │ │ ├── ReactES6Class.spec.jsx │ │ │ ├── ReactElement.spec.jsx │ │ │ ├── ReactElementClone.spec.jsx │ │ │ ├── ReactJSXElement.spec.jsx │ │ │ ├── ReactMount.spec.jsx │ │ │ ├── ReactMountDestruction.spec.jsx │ │ │ ├── ReactMultiChild.spec.jsx │ │ │ ├── ReactPureComponent.spec.jsx │ │ │ ├── ReactStatelessComponent.spec.jsx │ │ │ ├── SelectValueElement.spec.jsx │ │ │ ├── clonevnode.spec.tsx │ │ │ ├── compat_children.spec.tsx │ │ │ ├── findDOMNodes.spec.jsx │ │ │ ├── isValidElement.spec.jsx │ │ │ ├── lifecycle.spec.jsx │ │ │ ├── misc.spec.jsx │ │ │ ├── onlyChild.spec.jsx │ │ │ ├── styles.spec.jsx │ │ │ ├── svg.spec.jsx │ │ │ ├── testutils.spec.jsx │ │ │ └── warnings.spec.jsx │ │ ├── index.cjs │ │ ├── lib/ │ │ │ ├── EventConstants.js │ │ │ ├── EventPluginHub.js │ │ │ ├── EventPluginUtils.js │ │ │ ├── EventPropagators.js │ │ │ ├── ReactCSSTransitionGroup.js │ │ │ ├── ReactFragment.js │ │ │ ├── ReactMount.js │ │ │ ├── ReactTransitionEvents.js │ │ │ ├── ReactTransitionGroup.js │ │ │ ├── SyntheticUIEvent.js │ │ │ ├── ViewportMetrics.js │ │ │ └── shallowCompare.js │ │ ├── package.json │ │ └── src/ │ │ ├── InfernoCompatPropertyMap.ts │ │ ├── PropTypes.ts │ │ ├── index.ts │ │ └── reactstyles.ts │ ├── inferno-create-element/ │ │ ├── __tests__/ │ │ │ ├── callback.in.ctr.spec.tsx │ │ │ ├── children.spec.ts │ │ │ ├── components.spec.ts │ │ │ ├── components1.spec.tsx │ │ │ ├── components2b.spec.tsx │ │ │ ├── components3.spec.tsx │ │ │ ├── createElement.fragment.spec.ts │ │ │ ├── createElement.spec.ts │ │ │ ├── createElementTyped.spec.tsx │ │ │ ├── creation.spec.ts │ │ │ ├── elements.spec.jsx │ │ │ ├── events.spec.js │ │ │ ├── hooks.spec.js │ │ │ ├── patchKeyedChildren.spec.js │ │ │ ├── patchMixedKeyed.spec.js │ │ │ ├── patchNonKeyedChildren.spec.js │ │ │ ├── patching.spec.js │ │ │ ├── select.spec.js │ │ │ ├── svg.ext.spec.js │ │ │ ├── svg.spec.jsx │ │ │ ├── text.spec.js │ │ │ ├── update.ext.spec.js │ │ │ └── update.spec.jsx │ │ ├── index.cjs │ │ ├── package.json │ │ ├── readme.md │ │ └── src/ │ │ └── index.ts │ ├── inferno-extras/ │ │ ├── README.md │ │ ├── __tests__/ │ │ │ └── extras.spec.jsx │ │ ├── index.cjs │ │ ├── package.json │ │ └── src/ │ │ ├── findDOMNode.ts │ │ ├── index.ts │ │ └── isDOMInsideVDOM.ts │ ├── inferno-hydrate/ │ │ ├── __tests__/ │ │ │ ├── hydrate-forward-ref.spec.tsx │ │ │ └── hydrate.spec.tsx │ │ ├── index.cjs │ │ ├── package.json │ │ ├── readme.md │ │ └── src/ │ │ └── index.ts │ ├── inferno-hyperscript/ │ │ ├── README.md │ │ ├── __tests__/ │ │ │ └── hyperscript.spec.tsx │ │ ├── index.cjs │ │ ├── package.json │ │ └── src/ │ │ └── index.ts │ ├── inferno-mobx/ │ │ ├── README.md │ │ ├── __tests__/ │ │ │ ├── context.spec.jsx │ │ │ ├── extra/ │ │ │ │ └── eventemitter.spec.js │ │ │ ├── generic.spec.jsx │ │ │ ├── inject.spec.jsx │ │ │ ├── misc.spec.jsx │ │ │ ├── observer.spec.jsx │ │ │ ├── observerPatch.spec.jsx │ │ │ ├── observerWrap.spec.jsx │ │ │ ├── stateless.spec.jsx │ │ │ ├── transactions.spec.jsx │ │ │ └── types.spec.tsx │ │ ├── index.cjs │ │ ├── package.json │ │ └── src/ │ │ ├── Provider.ts │ │ ├── index.ts │ │ ├── observer.ts │ │ ├── observerPatch.ts │ │ ├── observerWrap.ts │ │ └── utils/ │ │ ├── EventEmitter.ts │ │ └── utils.ts │ ├── inferno-redux/ │ │ ├── README.md │ │ ├── __tests__/ │ │ │ ├── components/ │ │ │ │ ├── Provider.spec.js │ │ │ │ ├── Provider.typings.tsx │ │ │ │ └── connect.spec.js │ │ │ ├── functional.spec.jsx │ │ │ └── utils/ │ │ │ ├── shallowEqual.spec.js │ │ │ └── wrapActionCreators.spec.js │ │ ├── index.cjs │ │ ├── package.json │ │ └── src/ │ │ ├── components/ │ │ │ ├── Provider.ts │ │ │ └── connectAdvanced.ts │ │ ├── connect/ │ │ │ ├── connect.ts │ │ │ ├── mapDispatchToProps.ts │ │ │ ├── mapStateToProps.ts │ │ │ ├── mergeProps.ts │ │ │ ├── selectorFactory.ts │ │ │ ├── verifySubselectors.ts │ │ │ └── wrapMapToProps.ts │ │ ├── index.ts │ │ └── utils/ │ │ ├── Subscription.ts │ │ ├── shallowEqual.ts │ │ ├── verifyPlainObject.ts │ │ ├── warning.ts │ │ └── wrapActionCreators.ts │ ├── inferno-router/ │ │ ├── README.md │ │ ├── __tests__/ │ │ │ ├── BrowserRouter.spec.tsx │ │ │ ├── HashRouter.spec.tsx │ │ │ ├── Link.ext.spec.tsx │ │ │ ├── Link.spec.tsx │ │ │ ├── MemoryRouter.spec.tsx │ │ │ ├── NavLink.spec.tsx │ │ │ ├── Prompt.spec.tsx │ │ │ ├── Route.spec.tsx │ │ │ ├── Route.typings.spec.tsx │ │ │ ├── Router.spec.tsx │ │ │ ├── Switch.spec.tsx │ │ │ ├── SwitchMount.spec.tsx │ │ │ ├── github1176.spec.tsx │ │ │ ├── integration.spec.tsx │ │ │ ├── issue1322.spec.tsx │ │ │ ├── loaderOnRoute.spec.tsx │ │ │ ├── loaderWithSwitch.spec.tsx │ │ │ ├── matchPath.spec.ts │ │ │ ├── mobx-router.spec.tsx │ │ │ ├── testUtils.ts │ │ │ └── withRouter.spec.tsx │ │ ├── index.cjs │ │ ├── package.json │ │ └── src/ │ │ ├── BrowserRouter.ts │ │ ├── HashRouter.ts │ │ ├── Link.ts │ │ ├── MemoryRouter.ts │ │ ├── NavLink.ts │ │ ├── Prompt.ts │ │ ├── Redirect.ts │ │ ├── Route.ts │ │ ├── Router.ts │ │ ├── StaticRouter.ts │ │ ├── Switch.ts │ │ ├── helpers.ts │ │ ├── index.ts │ │ ├── locationUtils.ts │ │ ├── matchPath.ts │ │ ├── resolveLoaders.ts │ │ ├── utils.ts │ │ └── withRouter.ts │ ├── inferno-server/ │ │ ├── README.md │ │ ├── __tests__/ │ │ │ ├── StaticRouter.spec.server-nodom.tsx │ │ │ ├── animationHooks.spec.server.tsx │ │ │ ├── creation-queuestream.spec.server.tsx │ │ │ ├── creation-stream.spec.server.ts │ │ │ ├── creation-stream.spec.server.tsx │ │ │ ├── creation.spec.server.ts │ │ │ ├── creation.spec.server.tsx │ │ │ ├── hydration-ext.spec.server.tsx │ │ │ ├── hydration.spec.server.ts │ │ │ ├── hydration.spec.server.tsx │ │ │ ├── loaderOnRoute.spec.server.tsx │ │ │ ├── observer.spec.server.tsx │ │ │ ├── props-context.spec.server.tsx │ │ │ ├── security.spec.server.tsx │ │ │ ├── ssr-forwardref.spec.tsx │ │ │ └── utils.spec.server.tsx │ │ ├── index.cjs │ │ ├── index.mjs │ │ ├── package.json │ │ └── src/ │ │ ├── index.ts │ │ ├── prop-renderers.ts │ │ ├── renderToString.queuestream.ts │ │ ├── renderToString.stream.ts │ │ ├── renderToString.ts │ │ ├── stream/ │ │ │ └── streamUtils.ts │ │ └── utils.ts │ ├── inferno-shared/ │ │ ├── index.cjs │ │ ├── package.json │ │ └── src/ │ │ └── index.ts │ ├── inferno-test-utils/ │ │ ├── README.md │ │ ├── __tests__/ │ │ │ ├── __snapshots__/ │ │ │ │ ├── snapshots.spec.tsx.snap │ │ │ │ └── testUtils.jest.spec.tsx.snap │ │ │ ├── snapshots.spec.tsx │ │ │ ├── testUtils.jest.spec.tsx │ │ │ └── testUtils.spec.tsx │ │ ├── index.cjs │ │ ├── package.json │ │ └── src/ │ │ ├── index.ts │ │ ├── jest.ts │ │ └── utils.ts │ ├── inferno-utils/ │ │ ├── __tests__/ │ │ │ └── utils.spec.tsx │ │ ├── package.json │ │ └── src/ │ │ └── index.ts │ └── inferno-vnode-flags/ │ ├── README.md │ ├── index.cjs │ ├── package.json │ └── src/ │ └── index.ts ├── scripts/ │ ├── bundle/ │ │ ├── bundle-size.js │ │ ├── move-compiled.js │ │ ├── move-typedefs.js │ │ └── read-files-in-dir.js │ ├── fakedom/ │ │ ├── build.js │ │ ├── libs/ │ │ │ ├── setup.js │ │ │ └── uibench.js │ │ ├── results/ │ │ │ └── inferno_base_line.json │ │ ├── uibench-reactlike/ │ │ │ ├── app.js │ │ │ └── start.js │ │ ├── viewer.html │ │ └── viewer.js │ ├── rollup/ │ │ ├── build.js │ │ └── plugins/ │ │ ├── alias.js │ │ └── index.js │ └── test/ │ ├── globals.js │ ├── jasmine-polyfill.js │ └── requestAnimationFrame.ts └── tsconfig.json
Showing preview only (640K chars total). Download the full file or copy to clipboard to get everything.
SYMBOL INDEX (4474 symbols across 254 files)
FILE: demo/inferno-router-demo/src/App.tsx
class App (line 14) | class App extends Component {
method render (line 15) | render(props) {
function appFactory (line 20) | function appFactory () {
FILE: demo/inferno-router-demo/src/index.tsx
type Window (line 6) | interface Window {
FILE: demo/inferno-router-demo/src/indexServer.tsx
type Window (line 6) | interface Window {
FILE: demo/inferno-router-demo/src/pages/AboutPage.tsx
constant BACKEND_HOST (line 8) | const BACKEND_HOST = 'http://localhost:1234';
class AboutPage (line 10) | class AboutPage extends Component {
method fetchData (line 11) | static async fetchData({ request }) {
method render (line 22) | render(props) {
FILE: demo/inferno-router-demo/src/pages/ContentPage.tsx
constant BACKEND_HOST (line 8) | const BACKEND_HOST = 'http://localhost:1234';
class ContentPage (line 10) | class ContentPage extends Component {
method fetchData (line 11) | static async fetchData({ params, request }) {
method render (line 24) | render(props) {
FILE: demo/inferno-router-demo/src/pages/PageTemplate.tsx
function PageTemplate (line 5) | function PageTemplate({ id = undefined, children }) {
FILE: demo/inferno-router-demo/src/pages/StartPage.tsx
type IProps (line 5) | interface IProps {
class StartPage (line 9) | class StartPage extends Component<IProps> {
method fetchData (line 10) | static async fetchData({ match }) {
method render (line 15) | render() {
FILE: demo/inferno-router-demo/src/server.ts
constant PORT (line 11) | const PORT = process.env.PORT || 3000;
constant BASE_URI (line 12) | const BASE_URI = `http://localhost:${PORT}`;
function renderPage (line 87) | function renderPage(html, initialData) {
FILE: docs/1kcomponents/app.js
function map (line 8) | function map(arr, to) {
class Demo (line 16) | class Demo extends Component {
method constructor (line 17) | constructor(props, context) {
method updateCount (line 27) | updateCount(e) {
method componentDidMount (line 33) | componentDidMount() {
method render (line 39) | render(props, state) {
constant LAYOUT_ORDER (line 67) | const LAYOUT_ORDER = [Layout.PHYLLOTAXIS, Layout.SPIRAL, Layout.PHYLLOTA...
class VizDemo (line 69) | class VizDemo extends Component {
method constructor (line 70) | constructor(props, context) {
method next (line 83) | next() {
method setAnchors (line 115) | setAnchors(arr) {
method makePoints (line 128) | makePoints(count) {
method componentWillReceiveProps (line 140) | componentWillReceiveProps(props) {
method componentDidMount (line 151) | componentDidMount() {
method renderPoint (line 155) | renderPoint(point) {
method render (line 159) | render() {
function Point (line 168) | function Point({ x, y, color }) {
function xForLayout (line 173) | function xForLayout(layout) {
function yForLayout (line 186) | function yForLayout(layout) {
function lerp (line 199) | function lerp(obj, percent, startProp, endProp) {
function genPhyllotaxis (line 204) | function genPhyllotaxis(n) {
function genGrid (line 212) | function genGrid(n) {
function genWave (line 217) | function genWave(n) {
function genSpiral (line 225) | function genSpiral(n) {
function scale (line 233) | function scale(magnitude, vector) {
function translate (line 237) | function translate(translation, vector) {
function project (line 241) | function project(vector) {
FILE: docs/animations-demo-inner/app.js
class Page (line 5) | class Page extends Component {
method componentDidAppear (line 6) | componentDidAppear(dom) {
method componentWillDisappear (line 15) | componentWillDisappear(dom, callback) {
method render (line 19) | render() {
class Wizard (line 54) | class Wizard extends Component {
method constructor (line 55) | constructor() {
method render (line 75) | render() {
FILE: docs/animations-demo/app.js
class ListItem (line 12) | class ListItem extends AnimatedComponent {
method render (line 13) | render() {
class List (line 32) | class List extends Component {
method constructor (line 33) | constructor() {
method componentDidMount (line 61) | componentDidMount() {
method render (line 78) | render() {
FILE: docs/animations-global-demo/app.js
function Logo (line 10) | function Logo() {
function Payoff (line 15) | function Payoff() {
function PageOne (line 20) | function PageOne({ onClick }) {
function PageTwo (line 33) | function PageTwo({ onClick }) {
class App (line 46) | class App extends Component {
method constructor (line 47) | constructor() {
method didClick (line 57) | didClick(e) {
method render (line 64) | render() {
FILE: docs/animations/app.js
class ListItem (line 18) | class ListItem extends AnimatedComponent {
method render (line 19) | render() {
class SectionItem (line 25) | class SectionItem extends AnimatedComponent {
method render (line 26) | render() {
class ListItemMoveAnim (line 42) | class ListItemMoveAnim extends AnimatedMoveComponent {
method render (line 43) | render() {
class List (line 54) | class List extends Component {
method constructor (line 55) | constructor() {
method componentDidMount (line 104) | componentDidMount() {
method render (line 121) | render() {
class MixedList (line 133) | class MixedList extends Component {
method constructor (line 134) | constructor() {
method render (line 268) | render() {
class ShuffleList (line 284) | class ShuffleList extends Component {
method constructor (line 285) | constructor() {
method componentDidMount (line 394) | componentDidMount() {
method render (line 416) | render() {
class RerenderList (line 453) | class RerenderList extends Component {
method constructor (line 454) | constructor() {
method componentDidMount (line 482) | componentDidMount() {
method componentWillReceiveProps (line 486) | componentWillReceiveProps(nextProps) {
method render (line 508) | render() {
class ShuffleListWithAnimation (line 518) | class ShuffleListWithAnimation extends Component {
method constructor (line 519) | constructor() {
method componentDidMount (line 612) | componentDidMount() {
method render (line 638) | render() {
FILE: docs/async-render/app.js
class ListItem (line 6) | class ListItem extends Component {
method render (line 7) | render() {
class List (line 13) | class List extends Component {
method constructor (line 14) | constructor() {
method componentDidMount (line 23) | componentDidMount() {
method render (line 32) | render() {
FILE: docs/compat/app.js
function checkParams (line 10) | function checkParams(state, props, context) {
class Button (line 14) | class Button extends Component {
method constructor (line 15) | constructor(props) {
method click (line 22) | click() {
method render (line 26) | render() {
class Message (line 38) | class Message extends Component {
method render (line 39) | render() {
class MessageList (line 44) | class MessageList extends Component {
method getChildContext (line 45) | getChildContext() {
method render (line 49) | render() {
function changeTestValue (line 61) | function changeTestValue(event) {
function renderLabels (line 69) | function renderLabels() {
class NameForm (line 115) | class NameForm extends Component {
method constructor (line 116) | constructor(props) {
method handleChange (line 126) | handleChange(event) {
method radioChange (line 130) | radioChange(event) {
method textChange (line 134) | textChange(event) {
method selectChange (line 138) | selectChange(event) {
method render (line 142) | render() {
class NameForm2 (line 218) | class NameForm2 extends Component {
method constructor (line 219) | constructor(props) {
method handleChange (line 234) | handleChange(event) {
method radioChange (line 239) | radioChange(event) {
method textChange (line 243) | textChange(event) {
method selectChange (line 247) | selectChange(event) {
method render (line 251) | render() {
FILE: docs/dbmonster-mobx/app.js
function formatElapsed (line 47) | function formatElapsed(value) {
function getElapsedClassName (line 59) | function getElapsedClassName(elapsed) {
function countClassName (line 71) | function countClassName(queries) {
function updateQuery (line 83) | function updateQuery(object) {
function cleanQuery (line 99) | function cleanQuery(value) {
function generateRow (line 107) | function generateRow(object, counter, nbQueries) {
function updateData (line 122) | function updateData() {
function mutations (line 133) | function mutations(value) {
class QueryObserver (line 163) | class QueryObserver extends Component {
method render (line 164) | render({ query }) {
class QueriesObserver (line 192) | class QueriesObserver extends Component {
method render (line 193) | render({ top }) {
class RowObserver (line 205) | class RowObserver extends Component {
method render (line 206) | render({ db }) {
class TableObserver (line 219) | class TableObserver extends Component {
method render (line 220) | render({ list }) {
class QueryClass (line 240) | class QueryClass extends Component {
method render (line 241) | render({ query }) {
method shouldComponentUpdate (line 265) | shouldComponentUpdate({ query }) {
class QueriesClass (line 272) | class QueriesClass extends Component {
method render (line 273) | render({ top }) {
method shouldComponentUpdate (line 281) | shouldComponentUpdate({ top }) {
class RowClass (line 288) | class RowClass extends Component {
method render (line 289) | render({ db }) {
method shouldComponentUpdate (line 298) | shouldComponentUpdate({ db }) {
class TableClass (line 305) | class TableClass extends Component {
method render (line 306) | render({ list }) {
method shouldComponentUpdate (line 322) | shouldComponentUpdate({ list }) {
function QueryComponent (line 329) | function QueryComponent({ query }) {
function QueriesComponent (line 360) | function QueriesComponent({ top }) {
function RowComponent (line 375) | function RowComponent({ db }) {
function TableComponent (line 391) | function TableComponent({ list }) {
function loop (line 419) | function loop() {
FILE: docs/dbmonster/ENV.js
function formatElapsed (line 12) | function formatElapsed(value) {
function getElapsedClassName (line 24) | function getElapsedClassName(elapsed) {
function countClassName (line 38) | function countClassName(queries) {
function updateQuery (line 52) | function updateQuery(object) {
function cleanQuery (line 71) | function cleanQuery(value) {
function generateRow (line 87) | function generateRow(object, keepIdentity, counter) {
function getData (line 136) | function getData(keepIdentity) {
function mutations (line 178) | function mutations(value) {
FILE: docs/dbmonster/app.js
function renderBenchmark (line 10) | function renderBenchmark(dbs) {
function loop (line 56) | function loop() {
FILE: docs/event-test/app.js
function hoistedEvent (line 3) | function hoistedEvent(e) {
function hoistedNonSyntheticEvents (line 7) | function hoistedNonSyntheticEvents() {
function hoistedLinkEventNonSynthetic (line 21) | function hoistedLinkEventNonSynthetic() {
function hoistedSyntheticEvents (line 35) | function hoistedSyntheticEvents() {
function newFuncsNonSyntheticEvents (line 49) | function newFuncsNonSyntheticEvents() {
function Results (line 81) | function Results({ results }) {
function mountTest (line 125) | function mountTest(finishCallback) {
function patchTest (line 137) | function patchTest(finishCallback) {
function unmountTest (line 152) | function unmountTest(finishCallback) {
function startRound (line 166) | function startRound() {
FILE: docs/form/app.js
function changeTestValue (line 12) | function changeTestValue(event) {
function linkedTextHandler (line 20) | function linkedTextHandler(data, e) {
function textHandler (line 27) | function textHandler(e) {
function numberHandler (line 34) | function numberHandler(e) {
function descHandler (line 41) | function descHandler(e) {
function handleToggle (line 48) | function handleToggle(e) {
function renderForm (line 52) | function renderForm() {
FILE: docs/math-elements/app.js
class Demo (line 3) | class Demo extends Component {
method constructor (line 4) | constructor(props, context) {
method updateCount (line 14) | updateCount(e) {
method componentDidMount (line 20) | componentDidMount() {
method render (line 26) | render(props, state) {
FILE: docs/uibench-inferno-compat/app.js
function TreeLeaf (line 10) | function TreeLeaf({ children }) {
function shouldDataUpdate (line 14) | function shouldDataUpdate(lastProps, nextProps) {
function TreeNode (line 18) | function TreeNode({ data }) {
function tree (line 40) | function tree(data) {
function AnimBox (line 48) | function AnimBox({ data }) {
function anim (line 55) | function anim(data) {
function onClick (line 71) | function onClick(text, e) {
function TableCell (line 76) | function TableCell({ children }) {
function TableRow (line 84) | function TableRow({ data }) {
function table (line 107) | function table(data) {
function main (line 127) | function main(data) {
FILE: docs/uibench-lifecycle/app.js
function onComponentWillMountCounter (line 7) | function onComponentWillMountCounter() {
function onComponentDidMountCounter (line 11) | function onComponentDidMountCounter() {
function onComponentShouldUpdateCounter (line 15) | function onComponentShouldUpdateCounter() {
function onComponentWillUpdateCounter (line 20) | function onComponentWillUpdateCounter() {
function onComponentDidUpdateCounter (line 24) | function onComponentDidUpdateCounter() {
function onComponentWillUnmountCounter (line 28) | function onComponentWillUnmountCounter() {
function onComponentDidAppearCounter (line 32) | function onComponentDidAppearCounter() {
function onComponentWillDisappearCounter (line 36) | function onComponentWillDisappearCounter(dom, props, callback) {
function onClick (line 41) | function onClick(text, e) {
function TableCell (line 46) | function TableCell({ children }) {
class TableRow (line 54) | class TableRow extends Component {
method componentDidMount (line 55) | componentDidMount() {
method componentWillMount (line 59) | componentWillMount() {
method componentWillReceiveProps (line 63) | componentWillReceiveProps() {
method shouldComponentUpdate (line 67) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 73) | componentDidUpdate() {
method componentWillUnmount (line 77) | componentWillUnmount() {
method componentDidAppear (line 81) | componentDidAppear() {
method componentWillDisappear (line 85) | componentWillDisappear(dom, callback) {
method render (line 90) | render() {
class Table (line 141) | class Table extends Component {
method componentDidMount (line 142) | componentDidMount() {
method componentWillMount (line 146) | componentWillMount() {
method componentWillReceiveProps (line 150) | componentWillReceiveProps() {
method shouldComponentUpdate (line 154) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 160) | componentDidUpdate() {
method componentWillUnmount (line 164) | componentWillUnmount() {
method componentDidAppear (line 168) | componentDidAppear() {
method componentWillDisappear (line 172) | componentWillDisappear(dom, callback) {
method render (line 177) | render() {
function AnimBox (line 194) | function AnimBox({ data }) {
class Anim (line 202) | class Anim extends Component {
method componentDidMount (line 203) | componentDidMount() {
method componentWillMount (line 207) | componentWillMount() {
method componentWillReceiveProps (line 211) | componentWillReceiveProps() {
method shouldComponentUpdate (line 215) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 221) | componentDidUpdate() {
method componentWillUnmount (line 225) | componentWillUnmount() {
method componentDidAppear (line 229) | componentDidAppear() {
method componentWillDisappear (line 233) | componentWillDisappear(dom, callback) {
method render (line 238) | render() {
function TreeLeaf (line 262) | function TreeLeaf({ children }) {
class TreeNode (line 270) | class TreeNode extends Component {
method componentDidMount (line 271) | componentDidMount() {
method componentWillMount (line 275) | componentWillMount() {
method componentWillReceiveProps (line 279) | componentWillReceiveProps() {
method shouldComponentUpdate (line 283) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 287) | componentDidUpdate() {
method componentWillUnmount (line 291) | componentWillUnmount() {
method componentDidAppear (line 295) | componentDidAppear() {
method componentWillDisappear (line 299) | componentWillDisappear(dom, callback) {
method render (line 304) | render() {
class Tree (line 335) | class Tree extends Component {
method componentDidMount (line 337) | componentDidMount() {
method componentWillMount (line 341) | componentWillMount() {
method componentWillReceiveProps (line 345) | componentWillReceiveProps() {
method shouldComponentUpdate (line 349) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 355) | componentDidUpdate() {
method componentWillUnmount (line 359) | componentWillUnmount() {
method componentDidAppear (line 363) | componentDidAppear() {
method componentWillDisappear (line 367) | componentWillDisappear(dom, callback) {
method render (line 372) | render() {
class Main (line 381) | class Main extends Component {
method componentDidMount (line 382) | componentDidMount() {
method componentWillMount (line 386) | componentWillMount() {
method componentWillReceiveProps (line 390) | componentWillReceiveProps() {
method shouldComponentUpdate (line 394) | shouldComponentUpdate(nextProps, nextState) {
method componentDidUpdate (line 400) | componentDidUpdate() {
method componentWillUnmount (line 404) | componentWillUnmount() {
method componentDidAppear (line 408) | componentDidAppear() {
method componentWillDisappear (line 412) | componentWillDisappear(dom, callback) {
method render (line 417) | render() {
FILE: docs/uibench-normalization/app.js
function TreeLeaf (line 10) | function TreeLeaf({ children }) {
function shouldDataUpdate (line 14) | function shouldDataUpdate(lastProps, nextProps) {
function TreeNode (line 18) | function TreeNode({ data }) {
function tree (line 40) | function tree(data) {
function AnimBox (line 48) | function AnimBox({ data }) {
function anim (line 55) | function anim(data) {
function onClick (line 71) | function onClick(text, e) {
function TableCell (line 76) | function TableCell({ children }) {
function TableRow (line 89) | function TableRow({ data }) {
function table (line 117) | function table(data) {
function main (line 146) | function main(data) {
FILE: docs/uibench-reactlike/app.js
class TableCell (line 5) | class TableCell extends Component {
method constructor (line 6) | constructor(props) {
method shouldComponentUpdate (line 11) | shouldComponentUpdate(nextProps, nextState) {
method onClick (line 15) | onClick(e) {
method render (line 20) | render() {
class TableRow (line 29) | class TableRow extends Component {
method shouldComponentUpdate (line 30) | shouldComponentUpdate(nextProps, nextState) {
method render (line 34) | render() {
class Table (line 58) | class Table extends Component {
method shouldComponentUpdate (line 59) | shouldComponentUpdate(nextProps, nextState) {
method render (line 63) | render() {
class AnimBox (line 80) | class AnimBox extends Component {
method shouldComponentUpdate (line 81) | shouldComponentUpdate(nextProps, nextState) {
method render (line 85) | render() {
class Anim (line 97) | class Anim extends Component {
method shouldComponentUpdate (line 98) | shouldComponentUpdate(nextProps, nextState) {
method render (line 102) | render() {
class TreeLeaf (line 115) | class TreeLeaf extends Component {
method shouldComponentUpdate (line 116) | shouldComponentUpdate(nextProps, nextState) {
method render (line 120) | render() {
class TreeNode (line 125) | class TreeNode extends Component {
method shouldComponentUpdate (line 126) | shouldComponentUpdate(nextProps, nextState) {
method render (line 130) | render() {
class Tree (line 147) | class Tree extends Component {
method shouldComponentUpdate (line 148) | shouldComponentUpdate(nextProps, nextState) {
method render (line 152) | render() {
class Main (line 161) | class Main extends Component {
method shouldComponentUpdate (line 162) | shouldComponentUpdate(nextProps, nextState) {
method render (line 166) | render() {
FILE: docs/uibench/app.js
function shouldDataUpdate (line 5) | function shouldDataUpdate(lastProps, nextProps) {
function TreeLeaf (line 13) | function TreeLeaf({ children }) {
function TreeNode (line 23) | function TreeNode({ data }) {
function tree (line 47) | function tree(data) {
function AnimBox (line 59) | function AnimBox({ data }) {
function anim (line 69) | function anim(data) {
function onClick (line 87) | function onClick(text, e) {
function TableCell (line 92) | function TableCell({ children }) {
function TableRow (line 111) | function TableRow({ data }) {
function table (line 139) | function table(data) {
function main (line 164) | function main(data) {
FILE: docs/uibench/custom-uibench.js
function HomeState (line 15) | function HomeState() {
function TableItemState (line 23) | function TableItemState(id, active, props) {
function TableState (line 38) | function TableState(items) {
function AnimBoxState (line 66) | function AnimBoxState(id, time) {
function AnimState (line 80) | function AnimState(items) {
function TreeNodeState (line 96) | function TreeNodeState(id, container, children) {
function TreeState (line 111) | function TreeState(root) {
function _create (line 118) | function _create(depth) {
function AppState (line 138) | function AppState(location, home, table, anim, tree) {
function switchTo (line 151) | function switchTo(state, location) {
function tableCreate (line 159) | function tableCreate(state, rows, cols) {
function tableFilterBy (line 162) | function tableFilterBy(state, nth) {
function tableSortBy (line 165) | function tableSortBy(state, i) {
function tableActivateEach (line 170) | function tableActivateEach(state, nth) {
function animAdvanceEach (line 175) | function animAdvanceEach(state, nth) {
function treeCreate (line 178) | function treeCreate(state, hierarchy) {
function treeTransform (line 181) | function treeTransform(state, transformers) {
function reverse (line 196) | function reverse(children) {
function snabbdomWorstCase (line 201) | function snabbdomWorstCase(children) {
function insertFirst (line 208) | function insertFirst(n) {
function insertLast (line 217) | function insertLast(n) {
function removeFirst (line 226) | function removeFirst(n) {
function removeLast (line 235) | function removeLast(n) {
function moveFromEndToStart (line 244) | function moveFromEndToStart(n) {
function moveFromStartToEnd (line 253) | function moveFromStartToEnd(n) {
function tableTests (line 263) | function tableTests(onUpdate) {
function animTests (line 306) | function animTests(onUpdate) {
function treeTests (line 333) | function treeTests(onUpdate) {
function specTest (line 357) | function specTest(onUpdate) {
function scuTest (line 368) | function scuTest(onUpdate, onFinish) {
function recyclingTest (line 395) | function recyclingTest(onUpdate, onFinish) {
function preserveStateTest (line 412) | function preserveStateTest(onUpdate, onFinish) {
function TestCase (line 453) | function TestCase(name, from, to) {
function testCase (line 460) | function testCase(name, from, to) {
function parseQueryString (line 488) | function parseQueryString(a) {
function scuClone (line 504) | function scuClone(state) {
function init (line 510) | function init(name, version) {
function initTests (line 552) | function initTests() {
function scheduleMacrotask (line 803) | function scheduleMacrotask(cb) {
function Executor (line 810) | function Executor(iterations, groups, onUpdate, onFinish, onProgress) {
function firstRenderTime (line 887) | function firstRenderTime(onUpdate, done) {
function run (line 902) | function run(onUpdate, onFinish, filter) {
FILE: fixtures/browser/gzip/gzippreprocessor.js
function Preprocessor (line 13) | function Preprocessor(config, logger) {
FILE: fixtures/browser/karma.babel.conf.js
method postDetection (line 26) | postDetection(browserList) {
FILE: fixtures/browser/karma.swc.conf.js
method postDetection (line 26) | postDetection(browserList) {
FILE: fixtures/browser/karma.ts.conf.js
method postDetection (line 27) | postDetection(browserList) {
FILE: fixtures/browser/test.index.js
function requireAll (line 2) | function requireAll(r) {
FILE: fixtures/browser/test.no-compat.index.js
function requireAll (line 2) | function requireAll(r) {
FILE: packages/inferno-animation/__tests__/animatedAllComponent.spec.tsx
function waitForAnimationAndContinue (line 18) | function waitForAnimationAndContinue(condition, callback, arg1?: any): v...
function afterEachClear (line 30) | function afterEachClear(done): void {
class MyComponent (line 42) | class MyComponent extends AnimatedAllComponent<any, any> {
method render (line 43) | public render({ children }): InfernoNode {
method render (line 155) | public render({ children }): InfernoNode {
class My (line 53) | class My extends AnimatedAllComponent<any, any> {
method render (line 54) | public render({ children }): InfernoNode {
method render (line 103) | public render({ children }): InfernoNode {
class My (line 102) | class My extends AnimatedAllComponent<any, any> {
method render (line 54) | public render({ children }): InfernoNode {
method render (line 103) | public render({ children }): InfernoNode {
class MyComponent (line 154) | class MyComponent extends AnimatedAllComponent<any, any> {
method render (line 43) | public render({ children }): InfernoNode {
method render (line 155) | public render({ children }): InfernoNode {
function waitForAnimationAndContinue (line 173) | function waitForAnimationAndContinue(condition, callback, arg1?): void {
function afterEachClear (line 185) | function afterEachClear(done): void {
FILE: packages/inferno-animation/__tests__/animatedComponent.spec.tsx
function waitForAnimationAndContinue (line 17) | function waitForAnimationAndContinue(condition, callback, arg1?): void {
function afterEachClear (line 29) | function afterEachClear(done): void {
class MyComponent (line 41) | class MyComponent extends AnimatedComponent<any, any> {
method render (line 42) | public render({ children }): InfernoNode {
method render (line 154) | public render({ children }): InfernoNode {
class My (line 52) | class My extends AnimatedComponent<any, any> {
method render (line 53) | public render({ children }): void {
method render (line 102) | public render({ children }): void {
class My (line 101) | class My extends AnimatedComponent<any, any> {
method render (line 53) | public render({ children }): void {
method render (line 102) | public render({ children }): void {
class MyComponent (line 153) | class MyComponent extends AnimatedComponent<any, any> {
method render (line 42) | public render({ children }): InfernoNode {
method render (line 154) | public render({ children }): InfernoNode {
function waitForAnimationAndContinue (line 172) | function waitForAnimationAndContinue(condition, callback, arg1?): void {
function afterEachClear (line 184) | function afterEachClear(done): void {
FILE: packages/inferno-animation/__tests__/animatedComponentTypings.tsx
type MyProps (line 17) | interface MyProps {
class MyComponent (line 21) | class MyComponent extends AnimatedComponent<MyProps, any> {
method render (line 22) | public render(props): InfernoNode {
FILE: packages/inferno-animation/__tests__/animatedMoveComponent.spec.tsx
function waitForAnimationAndContinue (line 13) | function waitForAnimationAndContinue(condition, callback, arg1?): void {
function afterEachClear (line 25) | function afterEachClear(done): void {
class MyComponent (line 37) | class MyComponent extends AnimatedMoveComponent<any, any> {
method render (line 38) | public render({ children }): InfernoNode {
method render (line 150) | public render({ children }): InfernoNode {
class My (line 48) | class My extends AnimatedMoveComponent<any, any> {
method render (line 49) | public render({ children }): InfernoNode {
method render (line 98) | public render({ children }): InfernoNode {
class My (line 97) | class My extends AnimatedMoveComponent<any, any> {
method render (line 49) | public render({ children }): InfernoNode {
method render (line 98) | public render({ children }): InfernoNode {
class MyComponent (line 149) | class MyComponent extends AnimatedMoveComponent<any, any> {
method render (line 38) | public render({ children }): InfernoNode {
method render (line 150) | public render({ children }): InfernoNode {
function waitForAnimationAndContinue (line 168) | function waitForAnimationAndContinue(condition, callback, arg1?): void {
function afterEachClear (line 180) | function afterEachClear(done): void {
FILE: packages/inferno-animation/__tests__/utils.spec.tsx
function renderTemplate (line 25) | function renderTemplate(dom): void {
FILE: packages/inferno-animation/src/AnimatedAllComponent.ts
type AnimationProp (line 9) | interface AnimationProp {
method componentDidAppear (line 18) | public componentDidAppear(dom: HTMLElement | SVGElement): void {
method componentWillDisappear (line 22) | public componentWillDisappear(
method componentWillMove (line 29) | public componentWillMove(
FILE: packages/inferno-animation/src/AnimatedComponent.ts
type AnimationProp (line 8) | interface AnimationProp {
method componentDidAppear (line 17) | public componentDidAppear(dom: HTMLElement): void {
method componentWillDisappear (line 21) | public componentWillDisappear(
FILE: packages/inferno-animation/src/AnimatedMoveComponent.ts
type AnimationProp (line 4) | interface AnimationProp {
method componentWillMove (line 13) | public componentWillMove(
FILE: packages/inferno-animation/src/animationCoordinator.ts
type AnimationPhase (line 7) | const enum AnimationPhase {
type GlobalAnimationKey (line 17) | type GlobalAnimationKey = string;
type GlobalAnimationState (line 18) | interface GlobalAnimationState {
function _globalAnimationGC (line 30) | function _globalAnimationGC(): void {
function addGlobalAnimationSource (line 44) | function addGlobalAnimationSource(
function consumeGlobalAnimationSource (line 56) | function consumeGlobalAnimationSource(
constant IDLE (line 68) | const IDLE = 0;
function _runActivateAnimationPhase (line 72) | function _runActivateAnimationPhase(): void {
function _runAnimationPhases (line 84) | function _runAnimationPhases(): void {
function _debugAnimationPhases (line 128) | function _debugAnimationPhases(
function queueAnimation (line 163) | function queueAnimation(
function hasPendingAnimations (line 210) | function hasPendingAnimations(): boolean {
FILE: packages/inferno-animation/src/animations.ts
type AnimationClass (line 27) | interface AnimationClass {
function getAnimationClass (line 33) | function getAnimationClass(
function componentDidAppear (line 54) | function componentDidAppear(dom: HTMLElement | SVGElement, props): void {
function _getDidAppearTransitionCallback (line 70) | function _getDidAppearTransitionCallback(dom, cls) {
function _didAppear (line 81) | function _didAppear(
function componentWillDisappear (line 152) | function componentWillDisappear(
function _willDisappear (line 172) | function _willDisappear(
function componentWillMove (line 208) | function componentWillMove(
function _willMove (line 246) | function _willMove(
function _getWillMoveTransitionCallback (line 333) | function _getWillMoveTransitionCallback(
FILE: packages/inferno-animation/src/utils.ts
type Dimensions (line 3) | interface Dimensions {
function filterEmpty (line 10) | function filterEmpty(c: string): boolean {
function getClassNameList (line 14) | function getClassNameList(className: string): string[] {
function addClassName (line 18) | function addClassName(
function removeClassName (line 29) | function removeClassName(
function forceReflow (line 40) | function forceReflow(): number {
function resetDisplay (line 45) | function resetDisplay(
function setDisplay (line 57) | function setDisplay(
function _cleanStyle (line 74) | function _cleanStyle(node: HTMLElement | SVGElement): void {
function getDimensions (line 81) | function getDimensions(node: HTMLElement | SVGElement): Dimensions {
function getGeometry (line 110) | function getGeometry(node: HTMLElement | SVGElement): DOMRect {
function setTransform (line 114) | function setTransform(
function clearTransform (line 130) | function clearTransform(node: HTMLElement | SVGElement): void {
function setDimensions (line 135) | function setDimensions(
function clearDimensions (line 144) | function clearDimensions(node: HTMLElement | SVGElement): void {
function _getMaxTransitionDuration (line 148) | function _getMaxTransitionDuration(nodes): {
function setAnimationTimeout (line 199) | function setAnimationTimeout(onTransitionEnd, rootNode, maxDuration): vo...
function registerTransitionListener (line 225) | function registerTransitionListener(
function incrementMoveCbCount (line 283) | function incrementMoveCbCount(node): number {
function decrementMoveCbCount (line 294) | function decrementMoveCbCount(node): number {
FILE: packages/inferno-clone-vnode/__tests__/cloneVNode.spec.tsx
function StatelessComponent (line 157) | function StatelessComponent(props) {
class Com (line 189) | class Com extends Component<{ children?: InfernoNode }> {
method render (line 190) | public render({ children }) {
method render (line 208) | public render({ children }) {
method render (line 231) | public render() {
class Com (line 207) | class Com extends Component<{ children?: InfernoNode }> {
method render (line 190) | public render({ children }) {
method render (line 208) | public render({ children }) {
method render (line 231) | public render() {
class Com (line 230) | class Com extends Component {
method render (line 190) | public render({ children }) {
method render (line 208) | public render({ children }) {
method render (line 231) | public render() {
function Bar (line 266) | function Bar({ children }) {
function Bar (line 294) | function Bar({ children }) {
function Foobar (line 375) | function Foobar(props) {
function ChildCom (line 379) | function ChildCom(props) {
function initialFunc (line 457) | function initialFunc() {}
function newFunction (line 467) | function newFunction() {}
type NameContainerProps (line 522) | interface NameContainerProps {
class NameContainer (line 525) | class NameContainer extends Component<NameContainerProps> {
method render (line 526) | public render() {
type Wrapper1Props (line 566) | interface Wrapper1Props {
class Wrapper1 (line 570) | class Wrapper1 extends Component<Wrapper1Props> {
method render (line 571) | public render() {
type Wrapper2Props (line 577) | interface Wrapper2Props {
class Wrapper2 (line 583) | class Wrapper2 extends Component<Wrapper2Props> {
method render (line 584) | public render() {
type ItemProps (line 603) | interface ItemProps {
class Item (line 609) | class Item extends Component<ItemProps> {
method render (line 610) | public render() {
type NormalItemProps (line 619) | interface NormalItemProps {
class NormalItem (line 624) | class NormalItem extends Component<NormalItemProps> {
method render (line 625) | public render() {
class App (line 634) | class App extends Component {
method render (line 635) | public render() {
class Hello (line 665) | class Hello extends Component<{ name?: string }> {
method render (line 666) | public render() {
FILE: packages/inferno-clone-vnode/src/index.ts
function cloneVNode (line 25) | function cloneVNode(vNodeToClone: VNode, props?, ...childArgs): VNode {
FILE: packages/inferno-compat/__tests__/ReactComponent.spec.jsx
function renderIntoDocument (line 21) | function renderIntoDocument(input) {
class Wrapper (line 62) | class Wrapper extends React.Component {
method getObject (line 63) | getObject() {
method render (line 67) | render() {
class Component (line 73) | class Component extends React.Component {
method render (line 74) | render() {
method componentDidMount (line 86) | componentDidMount() {
class Parent (line 124) | class Parent extends React.Component {
method render (line 125) | render() {
class Child (line 134) | class Child extends React.Component {
method getChildContext (line 139) | getChildContext() {
method render (line 145) | render() {
class Grandchild (line 150) | class Grandchild extends React.Component {
method render (line 155) | render() {
FILE: packages/inferno-compat/__tests__/ReactComponentLifeCycle.spec.jsx
constant GET_INIT_STATE_RETURN_VAL (line 21) | const GET_INIT_STATE_RETURN_VAL = {
constant INIT_RENDER_STATE (line 28) | const INIT_RENDER_STATE = {
constant DID_MOUNT_STATE (line 35) | const DID_MOUNT_STATE = {
constant NEXT_RENDER_STATE (line 42) | const NEXT_RENDER_STATE = {
constant WILL_UNMOUNT_STATE (line 49) | const WILL_UNMOUNT_STATE = {
constant POST_WILL_UNMOUNT_STATE (line 56) | const POST_WILL_UNMOUNT_STATE = {
function renderIntoDocument (line 81) | function renderIntoDocument(input) {
class StatefulComponent (line 103) | class StatefulComponent extends React.Component {
method constructor (line 104) | constructor(props) {
method render (line 109) | render() {
method componentWillMount (line 177) | componentWillMount() {
method render (line 181) | render() {
class Child (line 128) | class Child extends React.Component {
method componentDidMount (line 129) | componentDidMount() {
method render (line 133) | render() {
class SwitcherParent (line 138) | class SwitcherParent extends React.Component {
method constructor (line 139) | constructor(props) {
method componentDidMount (line 145) | componentDidMount() {
method switchIt (line 150) | switchIt() {
method render (line 154) | render() {
class StatefulComponent (line 176) | class StatefulComponent extends React.Component {
method constructor (line 104) | constructor(props) {
method render (line 109) | render() {
method componentWillMount (line 177) | componentWillMount() {
method render (line 181) | render() {
class Tooltip (line 193) | class Tooltip extends React.Component {
method render (line 194) | render() {
method componentDidMount (line 198) | componentDidMount() {
method componentDidUpdate (line 203) | componentDidUpdate() {
method updateTooltip (line 207) | updateTooltip() {
class Component (line 214) | class Component extends React.Component {
method render (line 215) | render() {
class SetStateInComponentDidMount (line 236) | class SetStateInComponentDidMount extends React.Component {
method constructor (line 237) | constructor(props) {
method componentDidMount (line 245) | componentDidMount() {
method render (line 249) | render() {
class Outer (line 277) | class Outer extends React.Component {
method render (line 278) | render() {
method componentWillMount (line 286) | componentWillMount() {
method componentDidMount (line 290) | componentDidMount() {
method componentWillReceiveProps (line 294) | componentWillReceiveProps() {
method shouldComponentUpdate (line 298) | shouldComponentUpdate() {
method componentWillUpdate (line 304) | componentWillUpdate() {
method componentDidUpdate (line 308) | componentDidUpdate() {
method componentWillUnmount (line 312) | componentWillUnmount() {
class Inner (line 317) | class Inner extends React.Component {
method render (line 318) | render() {
method componentWillMount (line 322) | componentWillMount() {
method componentDidMount (line 326) | componentDidMount() {
method componentWillReceiveProps (line 330) | componentWillReceiveProps() {
method shouldComponentUpdate (line 334) | shouldComponentUpdate() {
method componentWillUpdate (line 340) | componentWillUpdate() {
method componentDidUpdate (line 344) | componentDidUpdate() {
method componentWillUnmount (line 348) | componentWillUnmount() {
FILE: packages/inferno-compat/__tests__/ReactCompositeComponentState.spec.jsx
class Inner (line 17) | class Inner extends React.Component {
method render (line 18) | render() {
method componentWillUnmount (line 22) | componentWillUnmount() {
class Outer (line 29) | class Outer extends React.Component {
method constructor (line 30) | constructor(props) {
method render (line 36) | render() {
FILE: packages/inferno-compat/__tests__/ReactDOM.spec.jsx
function renderIntoDocument (line 21) | function renderIntoDocument(input) {
FILE: packages/inferno-compat/__tests__/ReactES6Class.spec.jsx
method getName (line 29) | getName() {
method render (line 33) | render() {
function test (line 41) | function test(element, expectedTag, expectedClassName) {
class Foo (line 50) | class Foo extends React.Component {
method render (line 51) | render() {
method constructor (line 61) | constructor(props) {
method render (line 66) | render() {
method constructor (line 75) | constructor(props) {
method changeState (line 80) | changeState() {
method render (line 84) | render() {
method constructor (line 98) | constructor(props, context) {
method render (line 104) | render() {
method constructor (line 133) | constructor(props) {
method componentWillMount (line 138) | componentWillMount() {
method render (line 142) | render() {
method constructor (line 153) | constructor() {
method render (line 158) | render() {
method constructor (line 167) | constructor(props) {
method handleClick (line 172) | handleClick() {
method render (line 176) | render() {
method constructor (line 189) | constructor(props) {
method handleClick (line 194) | handleClick() {
method render (line 198) | render() {
method constructor (line 208) | constructor(props) {
method handleClick (line 213) | handleClick() {
method render (line 218) | render() {
method constructor (line 235) | constructor() {
method componentWillMount (line 240) | componentWillMount() {
method componentDidMount (line 244) | componentDidMount() {
method componentWillReceiveProps (line 248) | componentWillReceiveProps(nextProps) {
method shouldComponentUpdate (line 252) | shouldComponentUpdate(nextProps, nextState) {
method componentWillUpdate (line 257) | componentWillUpdate(nextProps, nextState) {
method componentDidUpdate (line 261) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 265) | componentWillUnmount() {
method render (line 269) | render() {
method getChildContext (line 303) | getChildContext() {
method render (line 307) | render() {
class Foo (line 60) | class Foo extends React.Component {
method render (line 51) | render() {
method constructor (line 61) | constructor(props) {
method render (line 66) | render() {
method constructor (line 75) | constructor(props) {
method changeState (line 80) | changeState() {
method render (line 84) | render() {
method constructor (line 98) | constructor(props, context) {
method render (line 104) | render() {
method constructor (line 133) | constructor(props) {
method componentWillMount (line 138) | componentWillMount() {
method render (line 142) | render() {
method constructor (line 153) | constructor() {
method render (line 158) | render() {
method constructor (line 167) | constructor(props) {
method handleClick (line 172) | handleClick() {
method render (line 176) | render() {
method constructor (line 189) | constructor(props) {
method handleClick (line 194) | handleClick() {
method render (line 198) | render() {
method constructor (line 208) | constructor(props) {
method handleClick (line 213) | handleClick() {
method render (line 218) | render() {
method constructor (line 235) | constructor() {
method componentWillMount (line 240) | componentWillMount() {
method componentDidMount (line 244) | componentDidMount() {
method componentWillReceiveProps (line 248) | componentWillReceiveProps(nextProps) {
method shouldComponentUpdate (line 252) | shouldComponentUpdate(nextProps, nextState) {
method componentWillUpdate (line 257) | componentWillUpdate(nextProps, nextState) {
method componentDidUpdate (line 261) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 265) | componentWillUnmount() {
method render (line 269) | render() {
method getChildContext (line 303) | getChildContext() {
method render (line 307) | render() {
class Foo (line 74) | class Foo extends React.Component {
method render (line 51) | render() {
method constructor (line 61) | constructor(props) {
method render (line 66) | render() {
method constructor (line 75) | constructor(props) {
method changeState (line 80) | changeState() {
method render (line 84) | render() {
method constructor (line 98) | constructor(props, context) {
method render (line 104) | render() {
method constructor (line 133) | constructor(props) {
method componentWillMount (line 138) | componentWillMount() {
method render (line 142) | render() {
method constructor (line 153) | constructor() {
method render (line 158) | render() {
method constructor (line 167) | constructor(props) {
method handleClick (line 172) | handleClick() {
method render (line 176) | render() {
method constructor (line 189) | constructor(props) {
method handleClick (line 194) | handleClick() {
method render (line 198) | render() {
method constructor (line 208) | constructor(props) {
method handleClick (line 213) | handleClick() {
method render (line 218) | render() {
method constructor (line 235) | constructor() {
method componentWillMount (line 240) | componentWillMount() {
method componentDidMount (line 244) | componentDidMount() {
method componentWillReceiveProps (line 248) | componentWillReceiveProps(nextProps) {
method shouldComponentUpdate (line 252) | shouldComponentUpdate(nextProps, nextState) {
method componentWillUpdate (line 257) | componentWillUpdate(nextProps, nextState) {
method componentDidUpdate (line 261) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 265) | componentWillUnmount() {
method render (line 269) | render() {
method getChildContext (line 303) | getChildContext() {
method render (line 307) | render() {
class Foo (line 97) | class Foo extends React.Component {
method render (line 51) | render() {
method constructor (line 61) | constructor(props) {
method render (line 66) | render() {
method constructor (line 75) | constructor(props) {
method changeState (line 80) | changeState() {
method render (line 84) | render() {
method constructor (line 98) | constructor(props, context) {
method render (line 104) | render() {
method constructor (line 133) | constructor(props) {
method componentWillMount (line 138) | componentWillMount() {
method render (line 142) | render() {
method constructor (line 153) | constructor() {
method render (line 158) | render() {
method constructor (line 167) | constructor(props) {
method handleClick (line 172) | handleClick() {
method render (line 176) | render() {
method constructor (line 189) | constructor(props) {
method handleClick (line 194) | handleClick() {
method render (line 198) | render() {
method constructor (line 208) | constructor(props) {
method handleClick (line 213) | handleClick() {
method render (line 218) | render() {
method constructor (line 235) | constructor() {
method componentWillMount (line 240) | componentWillMount() {
method componentDidMount (line 244) | componentDidMount() {
method componentWillReceiveProps (line 248) | componentWillReceiveProps(nextProps) {
method shouldComponentUpdate (line 252) | shouldComponentUpdate(nextProps, nextState) {
method componentWillUpdate (line 257) | componentWillUpdate(nextProps, nextState) {
method componentDidUpdate (line 261) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 265) | componentWillUnmount() {
method render (line 269) | render() {
method getChildContext (line 303) | getChildContext() {
method render (line 307) | render() {
class Outer (line 114) | class Outer extends React.Component {
method getChildContext (line 115) | getChildContext() {
method render (line 119) | render() {
class Foo (line 132) | class Foo extends React.Component {
method render (line 51) | render() {
method constructor (line 61) | constructor(props) {
method render (line 66) | render() {
method constructor (line 75) | constructor(props) {
method changeState (line 80) | changeState() {
method render (line 84) | render() {
method constructor (line 98) | constructor(props, context) {
method render (line 104) | render() {
method constructor (line 133) | constructor(props) {
method componentWillMount (line 138) | componentWillMount() {
method render (line 142) | render() {
method constructor (line 153) | constructor() {
method render (line 158) | render() {
method constructor (line 167) | constructor(props) {
method handleClick (line 172) | handleClick() {
method render (line 176) | render() {
method constructor (line 189) | constructor(props) {
method handleClick (line 194) | handleClick() {
method render (line 198) | render() {
method constructor (line 208) | constructor(props) {
method handleClick (line 213) | handleClick() {
method render (line 218) | render() {
method constructor (line 235) | constructor() {
method componentWillMount (line 240) | componentWillMount() {
method componentDidMount (line 244) | componentDidMount() {
method componentWillReceiveProps (line 248) | componentWillReceiveProps(nextProps) {
method shouldComponentUpdate (line 252) | shouldComponentUpdate(nextProps, nextState) {
method componentWillUpdate (line 257) | componentWillUpdate(nextProps, nextState) {
method componentDidUpdate (line 261) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 265) | componentWillUnmount() {
method render (line 269) | render() {
method getChildContext (line 303) | getChildContext() {
method render (line 307) | render() {
class Foo (line 152) | class Foo extends React.Component {
method render (line 51) | render() {
method constructor (line 61) | constructor(props) {
method render (line 66) | render() {
method constructor (line 75) | constructor(props) {
method changeState (line 80) | changeState() {
method render (line 84) | render() {
method constructor (line 98) | constructor(props, context) {
method render (line 104) | render() {
method constructor (line 133) | constructor(props) {
method componentWillMount (line 138) | componentWillMount() {
method render (line 142) | render() {
method constructor (line 153) | constructor() {
method render (line 158) | render() {
method constructor (line 167) | constructor(props) {
method handleClick (line 172) | handleClick() {
method render (line 176) | render() {
method constructor (line 189) | constructor(props) {
method handleClick (line 194) | handleClick() {
method render (line 198) | render() {
method constructor (line 208) | constructor(props) {
method handleClick (line 213) | handleClick() {
method render (line 218) | render() {
method constructor (line 235) | constructor() {
method componentWillMount (line 240) | componentWillMount() {
method componentDidMount (line 244) | componentDidMount() {
method componentWillReceiveProps (line 248) | componentWillReceiveProps(nextProps) {
method shouldComponentUpdate (line 252) | shouldComponentUpdate(nextProps, nextState) {
method componentWillUpdate (line 257) | componentWillUpdate(nextProps, nextState) {
method componentDidUpdate (line 261) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 265) | componentWillUnmount() {
method render (line 269) | render() {
method getChildContext (line 303) | getChildContext() {
method render (line 307) | render() {
class Foo (line 166) | class Foo extends React.Component {
method render (line 51) | render() {
method constructor (line 61) | constructor(props) {
method render (line 66) | render() {
method constructor (line 75) | constructor(props) {
method changeState (line 80) | changeState() {
method render (line 84) | render() {
method constructor (line 98) | constructor(props, context) {
method render (line 104) | render() {
method constructor (line 133) | constructor(props) {
method componentWillMount (line 138) | componentWillMount() {
method render (line 142) | render() {
method constructor (line 153) | constructor() {
method render (line 158) | render() {
method constructor (line 167) | constructor(props) {
method handleClick (line 172) | handleClick() {
method render (line 176) | render() {
method constructor (line 189) | constructor(props) {
method handleClick (line 194) | handleClick() {
method render (line 198) | render() {
method constructor (line 208) | constructor(props) {
method handleClick (line 213) | handleClick() {
method render (line 218) | render() {
method constructor (line 235) | constructor() {
method componentWillMount (line 240) | componentWillMount() {
method componentDidMount (line 244) | componentDidMount() {
method componentWillReceiveProps (line 248) | componentWillReceiveProps(nextProps) {
method shouldComponentUpdate (line 252) | shouldComponentUpdate(nextProps, nextState) {
method componentWillUpdate (line 257) | componentWillUpdate(nextProps, nextState) {
method componentDidUpdate (line 261) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 265) | componentWillUnmount() {
method render (line 269) | render() {
method getChildContext (line 303) | getChildContext() {
method render (line 307) | render() {
class Foo (line 188) | class Foo extends React.Component {
method render (line 51) | render() {
method constructor (line 61) | constructor(props) {
method render (line 66) | render() {
method constructor (line 75) | constructor(props) {
method changeState (line 80) | changeState() {
method render (line 84) | render() {
method constructor (line 98) | constructor(props, context) {
method render (line 104) | render() {
method constructor (line 133) | constructor(props) {
method componentWillMount (line 138) | componentWillMount() {
method render (line 142) | render() {
method constructor (line 153) | constructor() {
method render (line 158) | render() {
method constructor (line 167) | constructor(props) {
method handleClick (line 172) | handleClick() {
method render (line 176) | render() {
method constructor (line 189) | constructor(props) {
method handleClick (line 194) | handleClick() {
method render (line 198) | render() {
method constructor (line 208) | constructor(props) {
method handleClick (line 213) | handleClick() {
method render (line 218) | render() {
method constructor (line 235) | constructor() {
method componentWillMount (line 240) | componentWillMount() {
method componentDidMount (line 244) | componentDidMount() {
method componentWillReceiveProps (line 248) | componentWillReceiveProps(nextProps) {
method shouldComponentUpdate (line 252) | shouldComponentUpdate(nextProps, nextState) {
method componentWillUpdate (line 257) | componentWillUpdate(nextProps, nextState) {
method componentDidUpdate (line 261) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 265) | componentWillUnmount() {
method render (line 269) | render() {
method getChildContext (line 303) | getChildContext() {
method render (line 307) | render() {
class Foo (line 207) | class Foo extends React.Component {
method render (line 51) | render() {
method constructor (line 61) | constructor(props) {
method render (line 66) | render() {
method constructor (line 75) | constructor(props) {
method changeState (line 80) | changeState() {
method render (line 84) | render() {
method constructor (line 98) | constructor(props, context) {
method render (line 104) | render() {
method constructor (line 133) | constructor(props) {
method componentWillMount (line 138) | componentWillMount() {
method render (line 142) | render() {
method constructor (line 153) | constructor() {
method render (line 158) | render() {
method constructor (line 167) | constructor(props) {
method handleClick (line 172) | handleClick() {
method render (line 176) | render() {
method constructor (line 189) | constructor(props) {
method handleClick (line 194) | handleClick() {
method render (line 198) | render() {
method constructor (line 208) | constructor(props) {
method handleClick (line 213) | handleClick() {
method render (line 218) | render() {
method constructor (line 235) | constructor() {
method componentWillMount (line 240) | componentWillMount() {
method componentDidMount (line 244) | componentDidMount() {
method componentWillReceiveProps (line 248) | componentWillReceiveProps(nextProps) {
method shouldComponentUpdate (line 252) | shouldComponentUpdate(nextProps, nextState) {
method componentWillUpdate (line 257) | componentWillUpdate(nextProps, nextState) {
method componentDidUpdate (line 261) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 265) | componentWillUnmount() {
method render (line 269) | render() {
method getChildContext (line 303) | getChildContext() {
method render (line 307) | render() {
class Foo (line 234) | class Foo extends React.Component {
method render (line 51) | render() {
method constructor (line 61) | constructor(props) {
method render (line 66) | render() {
method constructor (line 75) | constructor(props) {
method changeState (line 80) | changeState() {
method render (line 84) | render() {
method constructor (line 98) | constructor(props, context) {
method render (line 104) | render() {
method constructor (line 133) | constructor(props) {
method componentWillMount (line 138) | componentWillMount() {
method render (line 142) | render() {
method constructor (line 153) | constructor() {
method render (line 158) | render() {
method constructor (line 167) | constructor(props) {
method handleClick (line 172) | handleClick() {
method render (line 176) | render() {
method constructor (line 189) | constructor(props) {
method handleClick (line 194) | handleClick() {
method render (line 198) | render() {
method constructor (line 208) | constructor(props) {
method handleClick (line 213) | handleClick() {
method render (line 218) | render() {
method constructor (line 235) | constructor() {
method componentWillMount (line 240) | componentWillMount() {
method componentDidMount (line 244) | componentDidMount() {
method componentWillReceiveProps (line 248) | componentWillReceiveProps(nextProps) {
method shouldComponentUpdate (line 252) | shouldComponentUpdate(nextProps, nextState) {
method componentWillUpdate (line 257) | componentWillUpdate(nextProps, nextState) {
method componentDidUpdate (line 261) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 265) | componentWillUnmount() {
method render (line 269) | render() {
method getChildContext (line 303) | getChildContext() {
method render (line 307) | render() {
class Bar (line 296) | class Bar extends React.Component {
method render (line 297) | render() {
class Foo (line 302) | class Foo extends React.Component {
method render (line 51) | render() {
method constructor (line 61) | constructor(props) {
method render (line 66) | render() {
method constructor (line 75) | constructor(props) {
method changeState (line 80) | changeState() {
method render (line 84) | render() {
method constructor (line 98) | constructor(props, context) {
method render (line 104) | render() {
method constructor (line 133) | constructor(props) {
method componentWillMount (line 138) | componentWillMount() {
method render (line 142) | render() {
method constructor (line 153) | constructor() {
method render (line 158) | render() {
method constructor (line 167) | constructor(props) {
method handleClick (line 172) | handleClick() {
method render (line 176) | render() {
method constructor (line 189) | constructor(props) {
method handleClick (line 194) | handleClick() {
method render (line 198) | render() {
method constructor (line 208) | constructor(props) {
method handleClick (line 213) | handleClick() {
method render (line 218) | render() {
method constructor (line 235) | constructor() {
method componentWillMount (line 240) | componentWillMount() {
method componentDidMount (line 244) | componentDidMount() {
method componentWillReceiveProps (line 248) | componentWillReceiveProps(nextProps) {
method shouldComponentUpdate (line 252) | shouldComponentUpdate(nextProps, nextState) {
method componentWillUpdate (line 257) | componentWillUpdate(nextProps, nextState) {
method componentDidUpdate (line 261) | componentDidUpdate(prevProps, prevState) {
method componentWillUnmount (line 265) | componentWillUnmount() {
method render (line 269) | render() {
method getChildContext (line 303) | getChildContext() {
method render (line 307) | render() {
FILE: packages/inferno-compat/__tests__/ReactElement.spec.jsx
class ComponentClass (line 18) | class ComponentClass extends React.Component {
method render (line 19) | render() {
function renderIntoDocument (line 36) | function renderIntoDocument(input) {
class StaticMethodComponentClass (line 149) | class StaticMethodComponentClass extends React.Component {
method constructor (line 150) | constructor(props) {
method someStaticMethod (line 156) | static someStaticMethod() {
method render (line 160) | render() {
class Component (line 171) | class Component extends React.Component {
method render (line 172) | render() {
method render (line 196) | render() {
method specialType (line 200) | static get specialType() {
method render (line 238) | render() {
class Component (line 195) | class Component extends React.Component {
method render (line 172) | render() {
method render (line 196) | render() {
method specialType (line 200) | static get specialType() {
method render (line 238) | render() {
class Test (line 211) | class Test extends React.Component {
method render (line 212) | render() {
class Component (line 237) | class Component extends React.Component {
method render (line 172) | render() {
method render (line 196) | render() {
method specialType (line 200) | static get specialType() {
method render (line 238) | render() {
FILE: packages/inferno-compat/__tests__/ReactElementClone.spec.jsx
function renderIntoDocument (line 20) | function renderIntoDocument(input) {
class Grandparent (line 41) | class Grandparent extends React.Component {
method render (line 42) | render() {
method render (line 66) | render() {
class Parent (line 46) | class Parent extends React.Component {
method render (line 47) | render() {
method render (line 71) | render() {
class Child (line 60) | class Child extends React.Component {
method render (line 61) | render() {
class Grandparent (line 65) | class Grandparent extends React.Component {
method render (line 42) | render() {
method render (line 66) | render() {
class Parent (line 70) | class Parent extends React.Component {
method render (line 47) | render() {
method render (line 71) | render() {
class Component (line 84) | class Component extends React.Component {
method render (line 85) | render() {
method render (line 95) | render() {
method render (line 106) | render() {
method render (line 117) | render() {
method render (line 134) | render() {
class Component (line 94) | class Component extends React.Component {
method render (line 85) | render() {
method render (line 95) | render() {
method render (line 106) | render() {
method render (line 117) | render() {
method render (line 134) | render() {
class Component (line 105) | class Component extends React.Component {
method render (line 85) | render() {
method render (line 95) | render() {
method render (line 106) | render() {
method render (line 117) | render() {
method render (line 134) | render() {
class Component (line 116) | class Component extends React.Component {
method render (line 85) | render() {
method render (line 95) | render() {
method render (line 106) | render() {
method render (line 117) | render() {
method render (line 134) | render() {
class Component (line 133) | class Component extends React.Component {
method render (line 85) | render() {
method render (line 95) | render() {
method render (line 106) | render() {
method render (line 117) | render() {
method render (line 134) | render() {
FILE: packages/inferno-compat/__tests__/ReactJSXElement.spec.jsx
class Component (line 16) | class Component extends React.Component {
method render (line 17) | render() {
class StaticMethodComponent (line 121) | class StaticMethodComponent {
method someStaticMethod (line 122) | static someStaticMethod() {
method render (line 126) | render() {
FILE: packages/inferno-compat/__tests__/ReactMount.spec.jsx
class Component (line 36) | class Component extends React.Component {
method render (line 37) | render() {
method componentDidMount (line 66) | componentDidMount() {
method componentWillUnmount (line 70) | componentWillUnmount() {
method render (line 74) | render() {
method render (line 178) | render() {
method render (line 228) | render() {
class Component (line 65) | class Component extends React.Component {
method render (line 37) | render() {
method componentDidMount (line 66) | componentDidMount() {
method componentWillUnmount (line 70) | componentWillUnmount() {
method render (line 74) | render() {
method render (line 178) | render() {
method render (line 228) | render() {
class Component (line 177) | class Component extends React.Component {
method render (line 37) | render() {
method componentDidMount (line 66) | componentDidMount() {
method componentWillUnmount (line 70) | componentWillUnmount() {
method render (line 74) | render() {
method render (line 178) | render() {
method render (line 228) | render() {
class A (line 222) | class A extends React.Component {
method render (line 223) | render() {
class Component (line 227) | class Component extends React.Component {
method render (line 37) | render() {
method componentDidMount (line 66) | componentDidMount() {
method componentWillUnmount (line 70) | componentWillUnmount() {
method render (line 74) | render() {
method render (line 178) | render() {
method render (line 228) | render() {
FILE: packages/inferno-compat/__tests__/ReactMultiChild.spec.jsx
class MockComponent (line 28) | class MockComponent extends React.Component {
method componentDidMount (line 29) | componentDidMount() {
method componentDidUpdate (line 33) | componentDidUpdate() {
method componentWillUnmount (line 37) | componentWillUnmount() {
method render (line 41) | render() {
method componentDidMount (line 80) | componentDidMount() {
method componentWillUnmount (line 84) | componentWillUnmount() {
method render (line 88) | render() {
method componentDidMount (line 124) | componentDidMount() {
method componentWillUnmount (line 128) | componentWillUnmount() {
method render (line 132) | render() {
method componentDidMount (line 169) | componentDidMount() {
method componentWillUnmount (line 173) | componentWillUnmount() {
method render (line 177) | render() {
class MockComponent (line 79) | class MockComponent extends React.Component {
method componentDidMount (line 29) | componentDidMount() {
method componentDidUpdate (line 33) | componentDidUpdate() {
method componentWillUnmount (line 37) | componentWillUnmount() {
method render (line 41) | render() {
method componentDidMount (line 80) | componentDidMount() {
method componentWillUnmount (line 84) | componentWillUnmount() {
method render (line 88) | render() {
method componentDidMount (line 124) | componentDidMount() {
method componentWillUnmount (line 128) | componentWillUnmount() {
method render (line 132) | render() {
method componentDidMount (line 169) | componentDidMount() {
method componentWillUnmount (line 173) | componentWillUnmount() {
method render (line 177) | render() {
class MockComponent (line 123) | class MockComponent extends React.Component {
method componentDidMount (line 29) | componentDidMount() {
method componentDidUpdate (line 33) | componentDidUpdate() {
method componentWillUnmount (line 37) | componentWillUnmount() {
method render (line 41) | render() {
method componentDidMount (line 80) | componentDidMount() {
method componentWillUnmount (line 84) | componentWillUnmount() {
method render (line 88) | render() {
method componentDidMount (line 124) | componentDidMount() {
method componentWillUnmount (line 128) | componentWillUnmount() {
method render (line 132) | render() {
method componentDidMount (line 169) | componentDidMount() {
method componentWillUnmount (line 173) | componentWillUnmount() {
method render (line 177) | render() {
class WrapperComponent (line 137) | class WrapperComponent extends React.Component {
method render (line 138) | render() {
class MockComponent (line 168) | class MockComponent extends React.Component {
method componentDidMount (line 29) | componentDidMount() {
method componentDidUpdate (line 33) | componentDidUpdate() {
method componentWillUnmount (line 37) | componentWillUnmount() {
method render (line 41) | render() {
method componentDidMount (line 80) | componentDidMount() {
method componentWillUnmount (line 84) | componentWillUnmount() {
method render (line 88) | render() {
method componentDidMount (line 124) | componentDidMount() {
method componentWillUnmount (line 128) | componentWillUnmount() {
method render (line 132) | render() {
method componentDidMount (line 169) | componentDidMount() {
method componentWillUnmount (line 173) | componentWillUnmount() {
method render (line 177) | render() {
FILE: packages/inferno-compat/__tests__/ReactPureComponent.spec.jsx
class Component (line 19) | class Component extends React.PureComponent {
method constructor (line 20) | constructor() {
method render (line 25) | render() {
method constructor (line 64) | constructor() {
method shouldComponentUpdate (line 69) | shouldComponentUpdate(nextProps, state) {
method render (line 73) | render() {
method render (line 99) | render() {
method shouldComponentUpdate (line 104) | shouldComponentUpdate() {
method render (line 117) | render() {
class Component (line 63) | class Component extends React.PureComponent {
method constructor (line 20) | constructor() {
method render (line 25) | render() {
method constructor (line 64) | constructor() {
method shouldComponentUpdate (line 69) | shouldComponentUpdate(nextProps, state) {
method render (line 73) | render() {
method render (line 99) | render() {
method shouldComponentUpdate (line 104) | shouldComponentUpdate() {
method render (line 117) | render() {
class Component (line 98) | class Component extends React.PureComponent {
method constructor (line 20) | constructor() {
method render (line 25) | render() {
method constructor (line 64) | constructor() {
method shouldComponentUpdate (line 69) | shouldComponentUpdate(nextProps, state) {
method render (line 73) | render() {
method render (line 99) | render() {
method shouldComponentUpdate (line 104) | shouldComponentUpdate() {
method render (line 117) | render() {
class Component (line 116) | class Component extends React.PureComponent {
method constructor (line 20) | constructor() {
method render (line 25) | render() {
method constructor (line 64) | constructor() {
method shouldComponentUpdate (line 69) | shouldComponentUpdate(nextProps, state) {
method render (line 73) | render() {
method render (line 99) | render() {
method shouldComponentUpdate (line 104) | shouldComponentUpdate() {
method render (line 117) | render() {
FILE: packages/inferno-compat/__tests__/ReactStatelessComponent.spec.jsx
function StatelessComponent (line 19) | function StatelessComponent(props) {
function renderIntoDocument (line 26) | function renderIntoDocument(input) {
class Parent (line 54) | class Parent extends React.Component {
method render (line 55) | render() {
method getChildContext (line 137) | getChildContext() {
method render (line 141) | render() {
class Child (line 79) | class Child extends React.Component {
method render (line 84) | render() {
function Parent (line 89) | function Parent() {
method render (line 55) | render() {
method getChildContext (line 137) | getChildContext() {
method render (line 141) | render() {
class GrandParent (line 93) | class GrandParent extends React.Component {
method getChildContext (line 98) | getChildContext() {
method render (line 102) | render() {
function NotAComponent (line 119) | function NotAComponent() {
class Parent (line 132) | class Parent extends React.Component {
method render (line 55) | render() {
method getChildContext (line 137) | getChildContext() {
method render (line 141) | render() {
function Child (line 146) | function Child(props, context) {
method render (line 84) | render() {
function Child (line 175) | function Child() {
method render (line 84) | render() {
FILE: packages/inferno-compat/__tests__/SelectValueElement.spec.jsx
function renderIntoDocument (line 20) | function renderIntoDocument(input) {
class Component (line 40) | class Component extends React.Component {
method constructor (line 41) | constructor(props, context) {
method render (line 46) | render() {
method constructor (line 94) | constructor(props, context) {
method render (line 99) | render() {
function renderIntoDocument (line 73) | function renderIntoDocument(input) {
class Component (line 93) | class Component extends React.Component {
method constructor (line 41) | constructor(props, context) {
method render (line 46) | render() {
method constructor (line 94) | constructor(props, context) {
method render (line 99) | render() {
FILE: packages/inferno-compat/__tests__/compat_children.spec.tsx
function renderCompatTestElement (line 22) | function renderCompatTestElement(element) {
function arrayAsBasicIterator (line 122) | function arrayAsBasicIterator(array) {
function arrayAsBasicIterator (line 279) | function arrayAsBasicIterator(array) {
class Hello (line 349) | class Hello extends Component {
method render (line 350) | render() {
method render (line 366) | render() {
class Hello (line 365) | class Hello extends Component {
method render (line 350) | render() {
method render (line 366) | render() {
FILE: packages/inferno-compat/__tests__/findDOMNodes.spec.jsx
class Example1 (line 28) | class Example1 extends Component {
method render (line 29) | render() {
class Example2 (line 35) | class Example2 extends Component {
method render (line 36) | render() {
class Example3 (line 42) | class Example3 extends Component {
method render (line 43) | render() {
class FragmentTester (line 90) | class FragmentTester extends Component {
method render (line 91) | render() {
method render (line 114) | render() {
method render (line 142) | render() {
class Wrapper (line 107) | class Wrapper extends Component {
method render (line 108) | render() {
class FragmentTester (line 113) | class FragmentTester extends Component {
method render (line 91) | render() {
method render (line 114) | render() {
method render (line 142) | render() {
class NullComponent (line 135) | class NullComponent extends Component {
method render (line 136) | render() {
class FragmentTester (line 141) | class FragmentTester extends Component {
method render (line 91) | render() {
method render (line 114) | render() {
method render (line 142) | render() {
FILE: packages/inferno-compat/__tests__/isValidElement.spec.jsx
class Comp (line 40) | class Comp extends Component {
method render (line 41) | render() {
method render (line 74) | render() {
method render (line 96) | render() {
method render (line 105) | render() {
class Comp (line 73) | class Comp extends Component {
method render (line 41) | render() {
method render (line 74) | render() {
method render (line 96) | render() {
method render (line 105) | render() {
class Comp (line 95) | class Comp extends Component {
method render (line 41) | render() {
method render (line 74) | render() {
method render (line 96) | render() {
method render (line 105) | render() {
class Comp (line 104) | class Comp extends Component {
method render (line 41) | render() {
method render (line 74) | render() {
method render (line 96) | render() {
method render (line 105) | render() {
FILE: packages/inferno-compat/__tests__/lifecycle.spec.jsx
class Hello2 (line 23) | class Hello2 extends Component {
method componentWillMount (line 24) | componentWillMount() {
method componentDidMount (line 28) | componentDidMount() {
method componentWillUpdate (line 32) | componentWillUpdate() {
method componentDidUpdate (line 36) | componentDidUpdate() {
method render (line 40) | render() {
class Hello (line 64) | class Hello extends Component {
method componentWillMount (line 65) | componentWillMount() {
method componentDidMount (line 69) | componentDidMount() {
method componentWillUpdate (line 73) | componentWillUpdate() {
method componentDidUpdate (line 77) | componentDidUpdate() {
method render (line 81) | render() {
FILE: packages/inferno-compat/__tests__/misc.spec.jsx
class Inner (line 224) | class Inner extends Component {
method render (line 225) | render() {
method getNode (line 229) | getNode() {
class App (line 235) | class App extends Component {
method render (line 236) | render() {
method componentDidMount (line 240) | componentDidMount() {
method renderInner (line 244) | renderInner() {
method render (line 260) | render() {
method componentDidMount (line 264) | componentDidMount() {
method renderInner (line 268) | renderInner() {
class App (line 259) | class App extends Component {
method render (line 236) | render() {
method componentDidMount (line 240) | componentDidMount() {
method renderInner (line 244) | renderInner() {
method render (line 260) | render() {
method componentDidMount (line 264) | componentDidMount() {
method renderInner (line 268) | renderInner() {
FILE: packages/inferno-compat/__tests__/onlyChild.spec.jsx
class WrapComponent (line 14) | class WrapComponent extends React.Component {
method render (line 15) | render() {
FILE: packages/inferno-compat/__tests__/testutils.spec.jsx
function TestComponent (line 7) | function TestComponent(props) {
function TestComponent (line 35) | function TestComponent(props) {
FILE: packages/inferno-compat/__tests__/warnings.spec.jsx
function myTest (line 18) | function myTest() {}
function anotherMethod (line 19) | function anotherMethod() {}
FILE: packages/inferno-compat/lib/EventPluginUtils.js
function isEndish (line 1) | function isEndish(topLevelType) {
function isMoveish (line 9) | function isMoveish(topLevelType) {
function isStartish (line 12) | function isStartish(topLevelType) {
FILE: packages/inferno-compat/lib/ReactFragment.js
function create (line 4) | function create(obj) {
FILE: packages/inferno-compat/lib/ReactTransitionEvents.js
function each (line 12) | function each(node, fn, listener, prefix) {
method addEndEventListener (line 19) | addEndEventListener(el, listener) {
method removeEndEventListener (line 23) | removeEndEventListener(el, listener) {
FILE: packages/inferno-compat/lib/shallowCompare.js
function shallowDiffers (line 1) | function shallowDiffers(a, b) {
FILE: packages/inferno-compat/src/InfernoCompatPropertyMap.ts
constant ATTRS (line 14) | const ATTRS = [
constant CAMELIZE (line 105) | const CAMELIZE = /[-:]([a-z])/g;
function capitalize (line 106) | function capitalize(token: string): string {
FILE: packages/inferno-compat/src/PropTypes.ts
function proptype (line 8) | function proptype() {}
function getProptype (line 11) | function getProptype(): Function {
FILE: packages/inferno-compat/src/index.ts
type Event (line 55) | interface Event {
function unmountComponentAtNode (line 62) | function unmountComponentAtNode(
type IterateChildrenFn (line 69) | type IterateChildrenFn = (
function flatten (line 75) | function flatten(arr, result): unknown[] {
constant ARR (line 87) | const ARR = [];
method map (line 90) | map(children: any[], fn: IterateChildrenFn, ctx: any): any[] {
method forEach (line 100) | forEach(children: any[], fn: IterateChildrenFn, ctx?: any): void {
method count (line 114) | count(children: any[]): number {
method only (line 118) | only(children: any[]): InfernoNode | any {
method toArray (line 125) | toArray(children: any[]): any[] {
function normalizeGenericProps (line 161) | function normalizeGenericProps(props): void {
function normalizeFormProps (line 188) | function normalizeFormProps(name: string, props: any): void {
function iterableToArray (line 232) | function iterableToArray(iterable): unknown[] {
function shallowDiffers (line 297) | function shallowDiffers(a, b): boolean {
method shouldComponentUpdate (line 315) | public shouldComponentUpdate(props, state): boolean {
type ContextProps (line 322) | interface ContextProps {
class WrapperComponent (line 327) | class WrapperComponent<P, S> extends Component<P & ContextProps, S> {
method getChildContext (line 328) | public getChildContext(): (P & ContextProps)['context'] {
method render (line 332) | public render(props): InfernoNode {
function unstable_renderSubtreeIntoContainer (line 337) | function unstable_renderSubtreeIntoContainer(
function createFactory (line 361) | function createFactory(type): (type) => VNode {
function render (line 365) | function render(
FILE: packages/inferno-compat/src/reactstyles.ts
function getNumberStyleValue (line 1) | function getNumberStyleValue(
function hyphenCase (line 48) | function hyphenCase(str: string): string {
FILE: packages/inferno-create-element/__tests__/callback.in.ctr.spec.tsx
function InfoLi (line 21) | function InfoLi(props) {
type ConfigsListProps (line 37) | interface ConfigsListProps {
type ConfigsListState (line 44) | interface ConfigsListState {
class ConfigsList (line 48) | class ConfigsList extends Component<ConfigsListProps, ConfigsListState> {
method constructor (line 51) | constructor(props) {
method handleCheck (line 58) | public handleCheck(index, ifChecked) {
method handleNewValue (line 66) | public handleNewValue(index, newValue) {
method render (line 73) | public render(props) {
type ProxyEditorProps (line 107) | interface ProxyEditorProps {
class ProxyEditor (line 111) | class ProxyEditor extends Component<ProxyEditorProps> {
method constructor (line 112) | constructor(props) {
method render (line 122) | public render() {
type MainState (line 127) | interface MainState {
class Main (line 136) | class Main extends Component<any, MainState> {
method constructor (line 139) | constructor(props) {
method handleModChange (line 160) | public handleModChange({ targetIndex, newValue }) {
method render (line 168) | public render(props) {
FILE: packages/inferno-create-element/__tests__/components.spec.ts
class BasicComponent1 (line 22) | class BasicComponent1 extends Component<{ name: string; title: string }> {
method render (line 23) | render() {
class BasicComponent1b (line 150) | class BasicComponent1b extends Component<{
method render (line 154) | render() {
class BasicComponent1c (line 225) | class BasicComponent1c extends Component<{
method render (line 230) | render() {
class BasicComponent1d (line 310) | class BasicComponent1d extends Component<{
method render (line 314) | render() {
class BasicComponent2 (line 414) | class BasicComponent2 extends Component<{
method render (line 419) | render() {
class BasicComponent2b (line 476) | class BasicComponent2b extends Component {
method render (line 477) | render() {
class BasicComponent2c (line 489) | class BasicComponent2c extends Component {
method render (line 490) | render() {
class BasicComponent3 (line 502) | class BasicComponent3 extends Component<{ styles: any; title: string }> {
method render (line 503) | render() {
class ComponentLifecycleCheck (line 642) | class ComponentLifecycleCheck extends Component {
method render (line 643) | render() {
method componentWillMount (line 654) | componentWillMount() {
method render (line 752) | render() {
method componentDidMount (line 758) | componentDidMount() {
method componentWillUnmount (line 762) | componentWillUnmount() {
method render (line 782) | render() {
method componentDidMount (line 786) | componentDidMount() {
method componentWillUnmount (line 790) | componentWillUnmount() {
method constructor (line 819) | constructor() {
method render (line 826) | render() {
method componentWillMount (line 832) | componentWillMount() {
method constructor (line 868) | constructor() {
method render (line 881) | render() {
method componentWillMount (line 887) | componentWillMount() {
method shouldComponentUpdate (line 891) | shouldComponentUpdate() {
method componentDidUpdate (line 896) | componentDidUpdate() {
method componentWillUpdate (line 900) | componentWillUpdate() {
class ComponentLifecycleCheck (line 751) | class ComponentLifecycleCheck extends Component {
method render (line 643) | render() {
method componentWillMount (line 654) | componentWillMount() {
method render (line 752) | render() {
method componentDidMount (line 758) | componentDidMount() {
method componentWillUnmount (line 762) | componentWillUnmount() {
method render (line 782) | render() {
method componentDidMount (line 786) | componentDidMount() {
method componentWillUnmount (line 790) | componentWillUnmount() {
method constructor (line 819) | constructor() {
method render (line 826) | render() {
method componentWillMount (line 832) | componentWillMount() {
method constructor (line 868) | constructor() {
method render (line 881) | render() {
method componentWillMount (line 887) | componentWillMount() {
method shouldComponentUpdate (line 891) | shouldComponentUpdate() {
method componentDidUpdate (line 896) | componentDidUpdate() {
method componentWillUpdate (line 900) | componentWillUpdate() {
class ComponentLifecycleCheck (line 781) | class ComponentLifecycleCheck extends Component {
method render (line 643) | render() {
method componentWillMount (line 654) | componentWillMount() {
method render (line 752) | render() {
method componentDidMount (line 758) | componentDidMount() {
method componentWillUnmount (line 762) | componentWillUnmount() {
method render (line 782) | render() {
method componentDidMount (line 786) | componentDidMount() {
method componentWillUnmount (line 790) | componentWillUnmount() {
method constructor (line 819) | constructor() {
method render (line 826) | render() {
method componentWillMount (line 832) | componentWillMount() {
method constructor (line 868) | constructor() {
method render (line 881) | render() {
method componentWillMount (line 887) | componentWillMount() {
method shouldComponentUpdate (line 891) | shouldComponentUpdate() {
method componentDidUpdate (line 896) | componentDidUpdate() {
method componentWillUpdate (line 900) | componentWillUpdate() {
type CounterState (line 812) | interface CounterState {
class ComponentLifecycleCheck (line 816) | class ComponentLifecycleCheck extends Component<any, CounterState> {
method render (line 643) | render() {
method componentWillMount (line 654) | componentWillMount() {
method render (line 752) | render() {
method componentDidMount (line 758) | componentDidMount() {
method componentWillUnmount (line 762) | componentWillUnmount() {
method render (line 782) | render() {
method componentDidMount (line 786) | componentDidMount() {
method componentWillUnmount (line 790) | componentWillUnmount() {
method constructor (line 819) | constructor() {
method render (line 826) | render() {
method componentWillMount (line 832) | componentWillMount() {
method constructor (line 868) | constructor() {
method render (line 881) | render() {
method componentWillMount (line 887) | componentWillMount() {
method shouldComponentUpdate (line 891) | shouldComponentUpdate() {
method componentDidUpdate (line 896) | componentDidUpdate() {
method componentWillUpdate (line 900) | componentWillUpdate() {
type CounterState (line 862) | interface CounterState {
class ComponentLifecycleCheck (line 866) | class ComponentLifecycleCheck extends Component<any, CounterState> {
method render (line 643) | render() {
method componentWillMount (line 654) | componentWillMount() {
method render (line 752) | render() {
method componentDidMount (line 758) | componentDidMount() {
method componentWillUnmount (line 762) | componentWillUnmount() {
method render (line 782) | render() {
method componentDidMount (line 786) | componentDidMount() {
method componentWillUnmount (line 790) | componentWillUnmount() {
method constructor (line 819) | constructor() {
method render (line 826) | render() {
method componentWillMount (line 832) | componentWillMount() {
method constructor (line 868) | constructor() {
method render (line 881) | render() {
method componentWillMount (line 887) | componentWillMount() {
method shouldComponentUpdate (line 891) | shouldComponentUpdate() {
method componentDidUpdate (line 896) | componentDidUpdate() {
method componentWillUpdate (line 900) | componentWillUpdate() {
class ConditionalComponent (line 940) | class ConditionalComponent extends Component<{ condition: boolean }> {
method render (line 941) | render() {
type ValueState (line 982) | interface ValueState {
class ValueComponent (line 985) | class ValueComponent extends Component<any, ValueState> {
method constructor (line 988) | constructor(props) {
method render (line 1002) | render() {
function BasicStatelessComponent1 (line 1028) | function BasicStatelessComponent1({ name, title }) {
class TEST (line 1128) | class TEST extends Component {
method constructor (line 1132) | constructor(props) {
method render (line 1145) | render() {
class SomeError (line 1206) | class SomeError extends Component {
method constructor (line 1207) | constructor(props) {
method render (line 1214) | render() {
function checkParams (line 1268) | function checkParams(state, props, context) {
class Button (line 1275) | class Button extends Component {
method constructor (line 1276) | constructor(props) {
method click (line 1283) | click() {
method render (line 1287) | render() {
class Message (line 1301) | class Message extends Component<{ text: string }> {
method render (line 1302) | render() {
class MessageList (line 1310) | class MessageList extends Component<{ messages: { text: string }[] }> {
method getChildContext (line 1311) | getChildContext() {
method render (line 1315) | render() {
FILE: packages/inferno-create-element/__tests__/components1.spec.tsx
type InnerProps (line 8) | interface InnerProps {
class Inner (line 13) | class Inner extends Component<InnerProps> {
method render (line 14) | render() {
class BasicComponent1 (line 33) | class BasicComponent1 extends Component<{ name: any; title: any }> {
method render (line 34) | render() {
class BasicComponent1b (line 83) | class BasicComponent1b extends Component<{
method render (line 87) | render() {
class BasicComponent2 (line 232) | class BasicComponent2 extends Component<{ name: string; title: string }> {
method render (line 233) | render() {
class BasicComponent3 (line 297) | class BasicComponent3 extends Component<{ title?: string; styles?: any }> {
method render (line 298) | render() {
type SuperState (line 360) | interface SuperState {
class SuperComponent (line 364) | class SuperComponent extends Component<object, SuperState> {
method constructor (line 367) | constructor(props) {
method render (line 381) | render() {
class Navbar (line 400) | class Navbar extends Component {
method render (line 401) | render() {
class Main (line 410) | class Main extends Component {
method render (line 411) | render() {
function test (line 424) | function test(element, expectedTag, expectedClassName, callback) {
type FooState (line 436) | interface FooState {
class Foo (line 440) | class Foo extends Component<{ initialValue: string | null }, FooState> {
method constructor (line 443) | constructor(props) {
method componentWillMount (line 448) | componentWillMount() {
method render (line 452) | render() {
method constructor (line 468) | constructor(props) {
method render (line 473) | render() {
method constructor (line 489) | constructor(props) {
method handleClick (line 494) | handleClick() {
method render (line 498) | render() {
method constructor (line 519) | constructor(props) {
method handleClick (line 524) | handleClick() {
method render (line 529) | render() {
class Foo (line 467) | class Foo extends Component {
method constructor (line 443) | constructor(props) {
method componentWillMount (line 448) | componentWillMount() {
method render (line 452) | render() {
method constructor (line 468) | constructor(props) {
method render (line 473) | render() {
method constructor (line 489) | constructor(props) {
method handleClick (line 494) | handleClick() {
method render (line 498) | render() {
method constructor (line 519) | constructor(props) {
method handleClick (line 524) | handleClick() {
method render (line 529) | render() {
type FooState (line 482) | interface FooState {
class Foo (line 486) | class Foo extends Component<{ initialValue: string | null }, FooState> {
method constructor (line 443) | constructor(props) {
method componentWillMount (line 448) | componentWillMount() {
method render (line 452) | render() {
method constructor (line 468) | constructor(props) {
method render (line 473) | render() {
method constructor (line 489) | constructor(props) {
method handleClick (line 494) | handleClick() {
method render (line 498) | render() {
method constructor (line 519) | constructor(props) {
method handleClick (line 524) | handleClick() {
method render (line 529) | render() {
class Foo (line 516) | class Foo extends Component<{ initialValue: string | null }> {
method constructor (line 443) | constructor(props) {
method componentWillMount (line 448) | componentWillMount() {
method render (line 452) | render() {
method constructor (line 468) | constructor(props) {
method render (line 473) | render() {
method constructor (line 489) | constructor(props) {
method handleClick (line 494) | handleClick() {
method render (line 498) | render() {
method constructor (line 519) | constructor(props) {
method handleClick (line 524) | handleClick() {
method render (line 529) | render() {
type CounterState (line 547) | interface CounterState {
type CounterProps (line 551) | interface CounterProps {
class Counter (line 555) | class Counter extends Component<CounterProps, CounterState> {
method constructor (line 558) | constructor(props) {
method incrementCount (line 566) | incrementCount() {
method render (line 572) | render() {
class Wrapper (line 586) | class Wrapper extends Component {
method constructor (line 587) | constructor(props) {
method render (line 591) | render() {
type SomeErrorState (line 627) | interface SomeErrorState {
class SomeError (line 631) | class SomeError extends Component<object, SomeErrorState> {
method constructor (line 634) | constructor(props) {
method toggle (line 644) | toggle() {
method render (line 650) | render() {
type TestingState (line 689) | interface TestingState {
class Testing (line 695) | class Testing extends Component<object, TestingState> {
method constructor (line 700) | constructor(props) {
method toggle (line 710) | toggle() {
method render (line 716) | render() {
FILE: packages/inferno-create-element/__tests__/components2b.spec.tsx
type ListProps (line 19) | interface ListProps {
class List (line 25) | class List extends Component<ListProps> {
method render (line 26) | render() {
method render (line 77) | render() {
type TextProps (line 42) | interface TextProps {
class Text (line 46) | class Text extends Component<TextProps> {
method render (line 47) | render() {
method render (line 98) | render() {
type ListProps (line 70) | interface ListProps {
class List (line 76) | class List extends Component<ListProps> {
method render (line 26) | render() {
method render (line 77) | render() {
type TextProps (line 93) | interface TextProps {
class Text (line 97) | class Text extends Component<TextProps> {
method render (line 47) | render() {
method render (line 98) | render() {
type MakeXState (line 122) | interface MakeXState {
class MakeX (line 126) | class MakeX extends Component<object, MakeXState> {
method constructor (line 129) | constructor(props) {
method componentWillMount (line 134) | componentWillMount() {
method render (line 140) | render() {
class MakeY (line 145) | class MakeY extends Component {
method constructor (line 146) | constructor(props) {
method render (line 150) | render() {
type MakeAState (line 155) | interface MakeAState {
class MakeA (line 159) | class MakeA extends Component<object, MakeAState> {
method constructor (line 162) | constructor(props) {
method componentWillMount (line 167) | componentWillMount() {
method render (line 173) | render() {
class MakeB (line 182) | class MakeB extends Component {
method constructor (line 183) | constructor(props) {
method render (line 187) | render() {
type LabelProps (line 199) | interface LabelProps {
class Label (line 202) | class Label extends Component<LabelProps> {
method render (line 203) | render() {
method render (line 266) | render() {
class Button (line 216) | class Button extends Component<LabelProps> {
method onClick (line 217) | onClick(_event) {
method render (line 221) | render() {
method onClick (line 280) | onClick(event) {
method render (line 285) | render() {
class Container (line 231) | class Container extends Component {
method onClick (line 232) | onClick(_event) {
method render (line 236) | render() {
method onClick (line 296) | onClick(_event) {
method render (line 300) | render() {
type LabelProps (line 261) | interface LabelProps {
class Label (line 265) | class Label extends Component<LabelProps> {
method render (line 203) | render() {
method render (line 266) | render() {
class Button (line 279) | class Button extends Component<LabelProps> {
method onClick (line 217) | onClick(_event) {
method render (line 221) | render() {
method onClick (line 280) | onClick(event) {
method render (line 285) | render() {
class Container (line 295) | class Container extends Component {
method onClick (line 232) | onClick(_event) {
method render (line 236) | render() {
method onClick (line 296) | onClick(_event) {
method render (line 300) | render() {
class A (line 326) | class A extends Component {
method constructor (line 327) | constructor(props) {
method constructor (line 1196) | constructor(props) {
method render (line 1205) | render() {
method constructor (line 1307) | constructor(props) {
method render (line 1316) | render() {
method constructor (line 1422) | constructor(props) {
method render (line 1431) | render() {
method constructor (line 1535) | constructor(props) {
method render (line 1544) | render() {
method constructor (line 1630) | constructor(props) {
method render (line 1639) | render() {
class B (line 332) | class B extends A {
method constructor (line 333) | constructor(props) {
method shouldComponentUpdate (line 1218) | shouldComponentUpdate() {
method render (line 1222) | render() {
method shouldComponentUpdate (line 1333) | shouldComponentUpdate() {
method render (line 1337) | render() {
method shouldComponentUpdate (line 1553) | shouldComponentUpdate() {
method render (line 1557) | render() {
method shouldComponentUpdate (line 1650) | shouldComponentUpdate() {
method render (line 1654) | render() {
method constructor (line 1721) | constructor(props) {
method shouldComponentUpdate (line 1725) | shouldComponentUpdate() {
method render (line 1729) | render() {
class C (line 338) | class C extends B {
method constructor (line 339) | constructor(props) {
method render (line 343) | render() {
class Bar (line 357) | class Bar extends Component {
method constructor (line 358) | constructor() {
method render (line 363) | render() {
method constructor (line 415) | constructor(props) {
method changeDOM (line 426) | changeDOM() {
method render (line 432) | render() {
method constructor (line 468) | constructor(props) {
method changeDOM (line 479) | changeDOM() {
method render (line 485) | render() {
method constructor (line 524) | constructor(props) {
method changeDOM (line 535) | changeDOM() {
method render (line 541) | render() {
method constructor (line 578) | constructor(props) {
method changeDOM (line 589) | changeDOM() {
method render (line 595) | render() {
class Foo (line 367) | class Foo extends Component {
method constructor (line 368) | constructor() {
method render (line 373) | render() {
method fn (line 403) | fn() {}
type BarState (line 408) | interface BarState {
class Bar (line 412) | class Bar extends Component<object, BarState> {
method constructor (line 358) | constructor() {
method render (line 363) | render() {
method constructor (line 415) | constructor(props) {
method changeDOM (line 426) | changeDOM() {
method render (line 432) | render() {
method constructor (line 468) | constructor(props) {
method changeDOM (line 479) | changeDOM() {
method render (line 485) | render() {
method constructor (line 524) | constructor(props) {
method changeDOM (line 535) | changeDOM() {
method render (line 541) | render() {
method constructor (line 578) | constructor(props) {
method changeDOM (line 589) | changeDOM() {
method render (line 595) | render() {
type BarState (line 461) | interface BarState {
class Bar (line 465) | class Bar extends Component<object, BarState> {
method constructor (line 358) | constructor() {
method render (line 363) | render() {
method constructor (line 415) | constructor(props) {
method changeDOM (line 426) | changeDOM() {
method render (line 432) | render() {
method constructor (line 468) | constructor(props) {
method changeDOM (line 479) | changeDOM() {
method render (line 485) | render() {
method constructor (line 524) | constructor(props) {
method changeDOM (line 535) | changeDOM() {
method render (line 541) | render() {
method constructor (line 578) | constructor(props) {
method changeDOM (line 589) | changeDOM() {
method render (line 595) | render() {
type BarState (line 517) | interface BarState {
class Bar (line 521) | class Bar extends Component<object, BarState> {
method constructor (line 358) | constructor() {
method render (line 363) | render() {
method constructor (line 415) | constructor(props) {
method changeDOM (line 426) | changeDOM() {
method render (line 432) | render() {
method constructor (line 468) | constructor(props) {
method changeDOM (line 479) | changeDOM() {
method render (line 485) | render() {
method constructor (line 524) | constructor(props) {
method changeDOM (line 535) | changeDOM() {
method render (line 541) | render() {
method constructor (line 578) | constructor(props) {
method changeDOM (line 589) | changeDOM() {
method render (line 595) | render() {
type BarState (line 571) | interface BarState {
class Bar (line 575) | class Bar extends Component<object, BarState> {
method constructor (line 358) | constructor() {
method render (line 363) | render() {
method constructor (line 415) | constructor(props) {
method changeDOM (line 426) | changeDOM() {
method render (line 432) | render() {
method constructor (line 468) | constructor(props) {
method changeDOM (line 479) | changeDOM() {
method render (line 485) | render() {
method constructor (line 524) | constructor(props) {
method changeDOM (line 535) | changeDOM() {
method render (line 541) | render() {
method constructor (line 578) | constructor(props) {
method changeDOM (line 589) | changeDOM() {
method render (line 595) | render() {
type Test2Props (line 631) | interface Test2Props {
class Test (line 635) | class Test extends Component<Test2Props> {
method shouldComponentUpdate (line 636) | shouldComponentUpdate() {
method render (line 640) | render() {
method constructor (line 1233) | constructor(props) {
method render (line 1240) | render() {
method constructor (line 1348) | constructor(props) {
method render (line 1355) | render() {
method constructor (line 1457) | constructor(props) {
method render (line 1464) | render() {
method constructor (line 1569) | constructor(props) {
method render (line 1576) | render() {
method constructor (line 1665) | constructor(props) {
method render (line 1672) | render() {
method render (line 1735) | render() {
method constructor (line 1775) | constructor(props) {
method render (line 1782) | render() {
method constructor (line 1820) | constructor(props) {
method render (line 1827) | render() {
class Test2 (line 646) | class Test2 extends Component<Test2Props> {
method shouldComponentUpdate (line 647) | shouldComponentUpdate() {
method render (line 651) | render() {
class Input (line 739) | class Input extends Component {
method constructor (line 740) | constructor() {
method handleBlur (line 745) | handleBlur(_event) {}
method render (line 747) | render() {
class FooBar (line 768) | class FooBar extends Component {
method constructor (line 769) | constructor(props) {
method componentWillUnmount (line 773) | componentWillUnmount() {
method render (line 777) | render() {
type TesterState (line 789) | interface TesterState {
class Tester (line 793) | class Tester extends Component<any, TesterState> {
method constructor (line 796) | constructor(props) {
method toggle1 (line 806) | toggle1() {
method renderContent (line 812) | renderContent() {
method render (line 824) | render() {
method constructor (line 865) | constructor(props) {
method toggle1 (line 875) | toggle1() {
method renderContent (line 881) | renderContent() {
method render (line 893) | render() {
method constructor (line 1906) | constructor(props) {
method componentWillUnmount (line 1910) | componentWillUnmount() {
method render (line 1915) | render() {
type TesterState (line 858) | interface TesterState {
class Tester (line 862) | class Tester extends Component<object, TesterState> {
method constructor (line 796) | constructor(props) {
method toggle1 (line 806) | toggle1() {
method renderContent (line 812) | renderContent() {
method render (line 824) | render() {
method constructor (line 865) | constructor(props) {
method toggle1 (line 875) | toggle1() {
method renderContent (line 881) | renderContent() {
method render (line 893) | render() {
method constructor (line 1906) | constructor(props) {
method componentWillUnmount (line 1910) | componentWillUnmount() {
method render (line 1915) | render() {
type Comp1State (line 916) | interface Comp1State {
class Comp1 (line 920) | class Comp1 extends Component<object, Comp1State> {
method constructor (line 923) | constructor(props) {
method componentWillReceiveProps (line 930) | componentWillReceiveProps() {
method render (line 934) | render() {
method constructor (line 994) | constructor(props) {
method render (line 1003) | render() {
method constructor (line 1110) | constructor(props) {
method update (line 1118) | update() {
method render (line 1124) | render() {
method constructor (line 1147) | constructor(props) {
method render (line 1151) | render() {
function Comp (line 949) | function Comp() {
function Comp2 (line 953) | function Comp2() {
method constructor (line 1013) | constructor(props) {
method render (line 1022) | render() {
function Comp3 (line 957) | function Comp3() {
type Comp1Props (line 987) | interface Comp1Props {
class Comp1 (line 993) | class Comp1 extends Component<Comp1Props> {
method constructor (line 923) | constructor(props) {
method componentWillReceiveProps (line 930) | componentWillReceiveProps() {
method render (line 934) | render() {
method constructor (line 994) | constructor(props) {
method render (line 1003) | render() {
method constructor (line 1110) | constructor(props) {
method update (line 1118) | update() {
method render (line 1124) | render() {
method constructor (line 1147) | constructor(props) {
method render (line 1151) | render() {
class Comp2 (line 1012) | class Comp2 extends Component<Comp1Props> {
method constructor (line 1013) | constructor(props) {
method render (line 1022) | render() {
class Parent (line 1064) | class Parent extends Component {
method render (line 1065) | render() {
method constructor (line 1873) | constructor(props) {
method changeState (line 1883) | changeState() {
method render (line 1889) | render() {
type Comp1State (line 1103) | interface Comp1State {
class Comp1 (line 1107) | class Comp1 extends Component<object, Comp1State> {
method constructor (line 923) | constructor(props) {
method componentWillReceiveProps (line 930) | componentWillReceiveProps() {
method render (line 934) | render() {
method constructor (line 994) | constructor(props) {
method render (line 1003) | render() {
method constructor (line 1110) | constructor(props) {
method update (line 1118) | update() {
method render (line 1124) | render() {
method constructor (line 1147) | constructor(props) {
method render (line 1151) | render() {
type Comp1Props (line 1142) | interface Comp1Props {
class Comp1 (line 1146) | class Comp1 extends Component<Comp1Props> {
method constructor (line 923) | constructor(props) {
method componentWillReceiveProps (line 930) | componentWillReceiveProps() {
method render (line 934) | render() {
method constructor (line 994) | constructor(props) {
method render (line 1003) | render() {
method constructor (line 1110) | constructor(props) {
method update (line 1118) | update() {
method render (line 1124) | render() {
method constructor (line 1147) | constructor(props) {
method render (line 1151) | render() {
type Comp1Props (line 1167) | interface Comp1Props {
type AState (line 1189) | interface AState {
class A (line 1193) | class A extends Component<object, AState> {
method constructor (line 327) | constructor(props) {
method constructor (line 1196) | constructor(props) {
method render (line 1205) | render() {
method constructor (line 1307) | constructor(props) {
method render (line 1316) | render() {
method constructor (line 1422) | constructor(props) {
method render (line 1431) | render() {
method constructor (line 1535) | constructor(props) {
method render (line 1544) | render() {
method constructor (line 1630) | constructor(props) {
method render (line 1639) | render() {
class B (line 1217) | class B extends Component {
method constructor (line 333) | constructor(props) {
method shouldComponentUpdate (line 1218) | shouldComponentUpdate() {
method render (line 1222) | render() {
method shouldComponentUpdate (line 1333) | shouldComponentUpdate() {
method render (line 1337) | render() {
method shouldComponentUpdate (line 1553) | shouldComponentUpdate() {
method render (line 1557) | render() {
method shouldComponentUpdate (line 1650) | shouldComponentUpdate() {
method render (line 1654) | render() {
method constructor (line 1721) | constructor(props) {
method shouldComponentUpdate (line 1725) | shouldComponentUpdate() {
method render (line 1729) | render() {
type TestState (line 1227) | interface TestState {
class Test (line 1231) | class Test extends Component<object, TestState> {
method shouldComponentUpdate (line 636) | shouldComponentUpdate() {
method render (line 640) | render() {
method constructor (line 1233) | constructor(props) {
method render (line 1240) | render() {
method constructor (line 1348) | constructor(props) {
method render (line 1355) | render() {
method constructor (line 1457) | constructor(props) {
method render (line 1464) | render() {
method constructor (line 1569) | constructor(props) {
method render (line 1576) | render() {
method constructor (line 1665) | constructor(props) {
method render (line 1672) | render() {
method render (line 1735) | render() {
method constructor (line 1775) | constructor(props) {
method render (line 1782) | render() {
method constructor (line 1820) | constructor(props) {
method render (line 1827) | render() {
type AState (line 1300) | interface AState {
class A (line 1304) | class A extends Component<object, AState> {
method constructor (line 327) | constructor(props) {
method constructor (line 1196) | constructor(props) {
method render (line 1205) | render() {
method constructor (line 1307) | constructor(props) {
method render (line 1316) | render() {
method constructor (line 1422) | constructor(props) {
method render (line 1431) | render() {
method constructor (line 1535) | constructor(props) {
method render (line 1544) | render() {
method constructor (line 1630) | constructor(props) {
method render (line 1639) | render() {
function F (line 1328) | function F() {
class B (line 1332) | class B extends Component {
method constructor (line 333) | constructor(props) {
method shouldComponentUpdate (line 1218) | shouldComponentUpdate() {
method render (line 1222) | render() {
method shouldComponentUpdate (line 1333) | shouldComponentUpdate() {
method render (line 1337) | render() {
method shouldComponentUpdate (line 1553) | shouldComponentUpdate() {
method render (line 1557) | render() {
method shouldComponentUpdate (line 1650) | shouldComponentUpdate() {
method render (line 1654) | render() {
method constructor (line 1721) | constructor(props) {
method shouldComponentUpdate (line 1725) | shouldComponentUpdate() {
method render (line 1729) | render() {
type TestState (line 1342) | interface TestState {
class Test (line 1346) | class Test extends Component<object, TestState> {
method shouldComponentUpdate (line 636) | shouldComponentUpdate() {
method render (line 640) | render() {
method constructor (line 1233) | constructor(props) {
method render (line 1240) | render() {
method constructor (line 1348) | constructor(props) {
method render (line 1355) | render() {
method constructor (line 1457) | constructor(props) {
method render (line 1464) | render() {
method constructor (line 1569) | constructor(props) {
method render (line 1576) | render() {
method constructor (line 1665) | constructor(props) {
method render (line 1672) | render() {
method render (line 1735) | render() {
method constructor (line 1775) | constructor(props) {
method render (line 1782) | render() {
method constructor (line 1820) | constructor(props) {
method render (line 1827) | render() {
type AState (line 1415) | interface AState {
class A (line 1419) | class A extends Component<object, AState> {
method constructor (line 327) | constructor(props) {
method constructor (line 1196) | constructor(props) {
method render (line 1205) | render() {
method constructor (line 1307) | constructor(props) {
method render (line 1316) | render() {
method constructor (line 1422) | constructor(props) {
method render (line 1431) | render() {
method constructor (line 1535) | constructor(props) {
method render (line 1544) | render() {
method constructor (line 1630) | constructor(props) {
method render (line 1639) | render() {
function F (line 1443) | function F() {
function B (line 1447) | function B() {
method constructor (line 333) | constructor(props) {
method shouldComponentUpdate (line 1218) | shouldComponentUpdate() {
method render (line 1222) | render() {
method shouldComponentUpdate (line 1333) | shouldComponentUpdate() {
method render (line 1337) | render() {
method shouldComponentUpdate (line 1553) | shouldComponentUpdate() {
method render (line 1557) | render() {
method shouldComponentUpdate (line 1650) | shouldComponentUpdate() {
method render (line 1654) | render() {
method constructor (line 1721) | constructor(props) {
method shouldComponentUpdate (line 1725) | shouldComponentUpdate() {
method render (line 1729) | render() {
type TestState (line 1451) | interface TestState {
class Test (line 1455) | class Test extends Component<object, TestState> {
method shouldComponentUpdate (line 636) | shouldComponentUpdate() {
method render (line 640) | render() {
method constructor (line 1233) | constructor(props) {
method render (line 1240) | render() {
method constructor (line 1348) | constructor(props) {
method render (line 1355) | render() {
method constructor (line 1457) | constructor(props) {
method render (line 1464) | render() {
method constructor (line 1569) | constructor(props) {
method render (line 1576) | render() {
method constructor (line 1665) | constructor(props) {
method render (line 1672) | render() {
method render (line 1735) | render() {
method constructor (line 1775) | constructor(props) {
method render (line 1782) | render() {
method constructor (line 1820) | constructor(props) {
method render (line 1827) | render() {
type AState (line 1528) | interface AState {
class A (line 1532) | class A extends Component<object, AState> {
method constructor (line 327) | constructor(props) {
method constructor (line 1196) | constructor(props) {
method render (line 1205) | render() {
method constructor (line 1307) | constructor(props) {
method render (line 1316) | render() {
method constructor (line 1422) | constructor(props) {
method render (line 1431) | render() {
method constructor (line 1535) | constructor(props) {
method render (line 1544) | render() {
method constructor (line 1630) | constructor(props) {
method render (line 1639) | render() {
class B (line 1552) | class B extends Component {
method constructor (line 333) | constructor(props) {
method shouldComponentUpdate (line 1218) | shouldComponentUpdate() {
method render (line 1222) | render() {
method shouldComponentUpdate (line 1333) | shouldComponentUpdate() {
method render (line 1337) | render() {
method shouldComponentUpdate (line 1553) | shouldComponentUpdate() {
method render (line 1557) | render() {
method shouldComponentUpdate (line 1650) | shouldComponentUpdate() {
method render (line 1654) | render() {
method constructor (line 1721) | constructor(props) {
method shouldComponentUpdate (line 1725) | shouldComponentUpdate() {
method render (line 1729) | render() {
type TestState (line 1562) | interface TestState {
class Test (line 1566) | class Test extends Component<object, TestState> {
method shouldComponentUpdate (line 636) | shouldComponentUpdate() {
method render (line 640) | render() {
method constructor (line 1233) | constructor(props) {
method render (line 1240) | render() {
method constructor (line 1348) | constructor(props) {
method render (line 1355) | render() {
method constructor (line 1457) | constructor(props) {
method render (line 1464) | render() {
method constructor (line 1569) | constructor(props) {
method render (line 1576) | render() {
method constructor (line 1665) | constructor(props) {
method render (line 1672) | render() {
method render (line 1735) | render() {
method constructor (line 1775) | constructor(props) {
method render (line 1782) | render() {
method constructor (line 1820) | constructor(props) {
method render (line 1827) | render() {
type AState (line 1622) | interface AState {
class A (line 1626) | class A extends Component<object, AState> {
method constructor (line 327) | constructor(props) {
method constructor (line 1196) | constructor(props) {
method render (line 1205) | render() {
method constructor (line 1307) | constructor(props) {
method render (line 1316) | render() {
method constructor (line 1422) | constructor(props) {
method render (line 1431) | render() {
method constructor (line 1535) | constructor(props) {
method render (line 1544) | render() {
method constructor (line 1630) | constructor(props) {
method render (line 1639) | render() {
class B (line 1649) | class B extends Component {
method constructor (line 333) | constructor(props) {
method shouldComponentUpdate (line 1218) | shouldComponentUpdate() {
method render (line 1222) | render() {
method shouldComponentUpdate (line 1333) | shouldComponentUpdate() {
method render (line 1337) | render() {
method shouldComponentUpdate (line 1553) | shouldComponentUpdate() {
method render (line 1557) | render() {
method shouldComponentUpdate (line 1650) | shouldComponentUpdate() {
method render (line 1654) | render() {
method constructor (line 1721) | constructor(props) {
method shouldComponentUpdate (line 1725) | shouldComponentUpdate() {
method render (line 1729) | render() {
type TestState (line 1659) | interface TestState {
class Test (line 1663) | class Test extends Component<object, TestState> {
method shouldComponentUpdate (line 636) | shouldComponentUpdate() {
method render (line 640) | render() {
method constructor (line 1233) | constructor(props) {
method render (line 1240) | render() {
method constructor (line 1348) | constructor(props) {
method render (line 1355) | render() {
method constructor (line 1457) | constructor(props) {
method render (line 1464) | render() {
method constructor (line 1569) | constructor(props) {
method render (line 1576) | render() {
method constructor (line 1665) | constructor(props) {
method render (line 1672) | render() {
method render (line 1735) | render() {
method constructor (line 1775) | constructor(props) {
method render (line 1782) | render() {
method constructor (line 1820) | constructor(props) {
method render (line 1827) | render() {
class B (line 1720) | class B extends Component {
method constructor (line 333) | constructor(props) {
method shouldComponentUpdate (line 1218) | shouldComponentUpdate() {
method render (line 1222) | render() {
method shouldComponentUpdate (line 1333) | shouldComponentUpdate() {
method render (line 1337) | render() {
method shouldComponentUpdate (line 1553) | shouldComponentUpdate() {
method render (line 1557) | render() {
method shouldComponentUpdate (line 1650) | shouldComponentUpdate() {
method render (line 1654) | render() {
method constructor (line 1721) | constructor(props) {
method shouldComponentUpdate (line 1725) | shouldComponentUpdate() {
method render (line 1729) | render() {
class Test (line 1734) | class Test extends Component {
method shouldComponentUpdate (line 636) | shouldComponentUpdate() {
method render (line 640) | render() {
method constructor (line 1233) | constructor(props) {
method render (line 1240) | render() {
method constructor (line 1348) | constructor(props) {
method render (line 1355) | render() {
method constructor (line 1457) | constructor(props) {
method render (line 1464) | render() {
method constructor (line 1569) | constructor(props) {
method render (line 1576) | render() {
method constructor (line 1665) | constructor(props) {
method render (line 1672) | render() {
method render (line 1735) | render() {
method constructor (line 1775) | constructor(props) {
method render (line 1782) | render() {
method constructor (line 1820) | constructor(props) {
method render (line 1827) | render() {
type TestState (line 1768) | interface TestState {
class Test (line 1772) | class Test extends Component<object, TestState> {
method shouldComponentUpdate (line 636) | shouldComponentUpdate() {
method render (line 640) | render() {
method constructor (line 1233) | constructor(props) {
method render (line 1240) | render() {
method constructor (line 1348) | constructor(props) {
method render (line 1355) | render() {
method constructor (line 1457) | constructor(props) {
method render (line 1464) | render() {
method constructor (line 1569) | constructor(props) {
method render (line 1576) | render() {
method constructor (line 1665) | constructor(props) {
method render (line 1672) | render() {
method render (line 1735) | render() {
method constructor (line 1775) | constructor(props) {
method render (line 1782) | render() {
method constructor (line 1820) | constructor(props) {
method render (line 1827) | render() {
type TestState (line 1813) | interface TestState {
class Test (line 1817) | class Test extends Component<object, TestState> {
method shouldComponentUpdate (line 636) | shouldComponentUpdate() {
method render (line 640) | render() {
method constructor (line 1233) | constructor(props) {
method render (line 1240) | render() {
method constructor (line 1348) | constructor(props) {
method render (line 1355) | render() {
method constructor (line 1457) | constructor(props) {
method render (line 1464) | render() {
method constructor (line 1569) | constructor(props) {
method render (line 1576) | render() {
method constructor (line 1665) | constructor(props) {
method render (line 1672) | render() {
method render (line 1735) | render() {
method constructor (line 1775) | constructor(props) {
method render (line 1782) | render() {
method constructor (line 1820) | constructor(props) {
method render (line 1827) | render() {
type ParentProps (line 1862) | interface ParentProps {
type ParentState (line 1866) | interface ParentState {
class Parent (line 1870) | class Parent extends Component<ParentProps, ParentState> {
method render (line 1065) | render() {
method constructor (line 1873) | constructor(props) {
method changeState (line 1883) | changeState() {
method render (line 1889) | render() {
class Tester (line 1905) | class Tester extends Component<{ call: () => void; toggle: boolean }> {
method constructor (line 796) | constructor(props) {
method toggle1 (line 806) | toggle1() {
method renderContent (line 812) | renderContent() {
method render (line 824) | render() {
method constructor (line 865) | constructor(props) {
method toggle1 (line 875) | toggle1() {
method renderContent (line 881) | renderContent() {
method render (line 893) | render() {
method constructor (line 1906) | constructor(props) {
method componentWillUnmount (line 1910) | componentWillUnmount() {
method render (line 1915) | render() {
FILE: packages/inferno-create-element/__tests__/components3.spec.tsx
type ValueProps (line 17) | interface ValueProps {
class Value (line 21) | class Value extends Component<ValueProps> {
method constructor (line 22) | constructor(props) {
method render (line 26) | render() {
type RepeaterProps (line 31) | interface RepeaterProps {
class Repeater (line 35) | class Repeater extends Component<RepeaterProps> {
method render (line 36) | render() {
class Jaska (line 69) | class Jaska extends Component {
method constructor (line 70) | constructor(props) {
method render (line 74) | render() {
class Container (line 84) | class Container extends Component {
method constructor (line 85) | constructor(props) {
method render (line 89) | render() {
class TestingProps (line 94) | class TestingProps extends Component {
method constructor (line 95) | constructor(props) {
method render (line 99) | render() {
type MyComponent99Props (line 119) | interface MyComponent99Props {
type MyComponent98State (line 123) | interface MyComponent98State {
class MyComponent98 (line 127) | class MyComponent98 extends Component<object, MyComponent98State> {
method constructor (line 130) | constructor(props) {
method componentDidMount (line 137) | componentDidMount() {
method render (line 141) | render() {
method constructor (line 192) | constructor(props) {
method componentDidMount (line 199) | componentDidMount() {
method render (line 203) | render() {
class MyComponent99 (line 146) | class MyComponent99 extends Component<MyComponent99Props> {
method constructor (line 147) | constructor(props) {
method render (line 151) | render() {
method constructor (line 209) | constructor(props) {
method render (line 213) | render() {
type MyComponent98State (line 181) | interface MyComponent98State {
type MyComponent99Props (line 185) | interface MyComponent99Props {
class MyComponent98 (line 189) | class MyComponent98 extends Component<object, MyComponent98State> {
method constructor (line 130) | constructor(props) {
method componentDidMount (line 137) | componentDidMount() {
method render (line 141) | render() {
method constructor (line 192) | constructor(props) {
method componentDidMount (line 199) | componentDidMount() {
method render (line 203) | render() {
class MyComponent99 (line 208) | class MyComponent99 extends Component<MyComponent99Props> {
method constructor (line 147) | constructor(props) {
method render (line 151) | render() {
method constructor (line 209) | constructor(props) {
method render (line 213) | render() {
function Child (line 257) | function Child({ test }) {
class BuggyRender (line 267) | class BuggyRender extends Component<object, { empty: boolean }> {
method constructor (line 270) | constructor(props) {
method toggle (line 280) | toggle() {
method render (line 286) | render() {
type ChangeChildrenCountState (line 328) | interface ChangeChildrenCountState {
class ChangeChildrenCount (line 331) | class ChangeChildrenCount extends Component<
method constructor (line 337) | constructor(props) {
method handleClick (line 347) | handleClick() {
method render (line 353) | render() {
type FirstState (line 396) | interface FirstState {
class First (line 400) | class First extends Component<object, FirstState> {
method constructor (line 403) | constructor(props, context) {
method _onClick (line 413) | _onClick() {
method getChildContext (line 419) | getChildContext() {
method render (line 425) | render() {
method constructor (line 472) | constructor(props) {
method _onClick (line 483) | _onClick() {
method render (line 489) | render() {
method constructor (line 553) | constructor(props) {
method _onClick (line 564) | _onClick() {
method render (line 570) | render() {
type FirstState (line 464) | interface FirstState {
class First (line 468) | class First extends Component<object, FirstState> {
method constructor (line 403) | constructor(props, context) {
method _onClick (line 413) | _onClick() {
method getChildContext (line 419) | getChildContext() {
method render (line 425) | render() {
method constructor (line 472) | constructor(props) {
method _onClick (line 483) | _onClick() {
method render (line 489) | render() {
method constructor (line 553) | constructor(props) {
method _onClick (line 564) | _onClick() {
method render (line 570) | render() {
type FirstState (line 545) | interface FirstState {
class First (line 549) | class First extends Component<{ name: string }, FirstState> {
method constructor (line 403) | constructor(props, context) {
method _onClick (line 413) | _onClick() {
method getChildContext (line 419) | getChildContext() {
method render (line 425) | render() {
method constructor (line 472) | constructor(props) {
method _onClick (line 483) | _onClick() {
method render (line 489) | render() {
method constructor (line 553) | constructor(props) {
method _onClick (line 564) | _onClick() {
method render (line 570) | render() {
type ParentState (line 632) | interface ParentState {
class Parent (line 636) | class Parent extends Component<object, ParentState> {
method constructor (line 639) | constructor(props) {
method render (line 648) | render() {
class ChildB (line 658) | class ChildB extends Component {
method constructor (line 659) | constructor(props) {
method render (line 663) | render() {
type ChildAState (line 668) | interface ChildAState {
class ChildA (line 672) | class ChildA extends Component<object, ChildAState> {
method constructor (line 675) | constructor(props) {
method render (line 684) | render() {
class SubChild (line 692) | class SubChild extends Component {
method constructor (line 693) | constructor(props) {
method render (line 697) | render() {
FILE: packages/inferno-create-element/__tests__/createElement.fragment.spec.ts
method render (line 30) | render() {
method render (line 52) | render() {
method render (line 83) | render() {
function FunctionalComp (line 101) | function FunctionalComp() {
function SFC (line 226) | function SFC() {
function SFC (line 288) | function SFC() {
function SFC (line 387) | function SFC() {
function Fragmenter (line 476) | function Fragmenter({ first, mid, last, changeOrder }) {
method componentWillMount (line 529) | componentWillMount() {
method componentWillUnmount (line 533) | componentWillUnmount() {
method render (line 537) | render(props) {
function Fragmenter2 (line 613) | function Fragmenter2() {
method render (line 656) | render() {
method render (line 708) | render() {
method componentWillUnmount (line 763) | componentWillUnmount() {
method componentWillMount (line 767) | componentWillMount() {
method render (line 771) | render() {
function Foobar (line 955) | function Foobar() {
function Foobar (line 980) | function Foobar() {
function Foobar (line 1017) | function Foobar() {
function Foobar (line 1055) | function Foobar() {
method componentWillMount (line 1096) | componentWillMount() {
method render (line 1100) | render() {
method componentWillMount (line 1136) | componentWillMount() {
method render (line 1140) | render() {
method componentWillMount (line 1189) | componentWillMount() {
method render (line 1193) | render() {
method render (line 1246) | render() {
method render (line 1282) | render() {
type ArticlesState (line 1316) | interface ArticlesState {
class Articles (line 1321) | class Articles extends Component<unknown, ArticlesState> {
method constructor (line 1324) | constructor() {
method componentDidMount (line 1332) | componentDidMount() {
method render (line 1354) | render() {
method constructor (line 1396) | constructor() {
method componentDidMount (line 1401) | componentDidMount() {
method render (line 1423) | render() {
method constructor (line 1483) | constructor() {
method componentDidMount (line 1488) | componentDidMount() {
method render (line 1510) | render() {
class App (line 1371) | class App extends Component {
method render (line 1372) | render() {
method render (line 1459) | render() {
method render (line 1546) | render() {
type ArticlesState (line 1389) | interface ArticlesState {
class Articles (line 1394) | class Articles extends Component<unknown, ArticlesState> {
method constructor (line 1324) | constructor() {
method componentDidMount (line 1332) | componentDidMount() {
method render (line 1354) | render() {
method constructor (line 1396) | constructor() {
method componentDidMount (line 1401) | componentDidMount() {
method render (line 1423) | render() {
method constructor (line 1483) | constructor() {
method componentDidMount (line 1488) | componentDidMount() {
method render (line 1510) | render() {
function Section (line 1443) | function Section(props) {
function EdgeComponent (line 1450) | function EdgeComponent() {
class App (line 1458) | class App extends Component {
method render (line 1372) | render() {
method render (line 1459) | render() {
method render (line 1546) | render() {
type ArticlesState (line 1476) | interface ArticlesState {
class Articles (line 1481) | class Articles extends Component<unknown, ArticlesState> {
method constructor (line 1324) | constructor() {
method componentDidMount (line 1332) | componentDidMount() {
method render (line 1354) | render() {
method constructor (line 1396) | constructor() {
method componentDidMount (line 1401) | componentDidMount() {
method render (line 1423) | render() {
method constructor (line 1483) | constructor() {
method componentDidMount (line 1488) | componentDidMount() {
method render (line 1510) | render() {
function Section (line 1530) | function Section(props) {
function EdgeComponent (line 1537) | function EdgeComponent() {
class App (line 1545) | class App extends Component {
method render (line 1372) | render() {
method render (line 1459) | render() {
method render (line 1546) | render() {
FILE: packages/inferno-create-element/__tests__/createElement.spec.ts
method onComponentDidMount (line 136) | onComponentDidMount(domNode) {
method onComponentDidMount (line 165) | onComponentDidMount() {
class Hello (line 222) | class Hello extends Component {
method constructor (line 225) | constructor(props) {
method componentDidMount (line 232) | componentDidMount() {
method render (line 236) | render() {
FILE: packages/inferno-create-element/__tests__/createElementTyped.spec.tsx
type MyComponentProps (line 67) | interface MyComponentProps {
class App (line 71) | class App extends Component<MyComponentProps, any> {
method render (line 72) | public render() {
FILE: packages/inferno-create-element/__tests__/elements.spec.jsx
function test (line 875) | function test() {}
method ref (line 878) | ref() {}
method click (line 879) | click() {}
function Foo (line 1134) | function Foo({ value }) {
FILE: packages/inferno-create-element/__tests__/events.spec.js
function test (line 27) | function test() {
function test2 (line 34) | function test2() {
function onClick (line 78) | function onClick(d) {
function App (line 86) | function App(d) {
function renderIt (line 97) | function renderIt() {
function onClick (line 123) | function onClick(d) {
function App (line 131) | function App(d) {
function renderIt (line 142) | function renderIt() {
function AppTwo (line 160) | function AppTwo() {
function App (line 164) | function App() {
function App (line 187) | function App({ toggle }) {
function smallComponent (line 207) | function smallComponent() {
function AppTwo (line 223) | function AppTwo() {
function App (line 227) | function App(children) {
function SmallComponent (line 259) | function SmallComponent() {
function SmallComponent (line 296) | function SmallComponent() {
function SmallComponent (line 337) | function SmallComponent() {
function FooBarCom (line 370) | function FooBarCom({ test }) {
function FooBarCom (line 400) | function FooBarCom({ test }) {
function FooBarCom (line 436) | function FooBarCom({ test }) {
function SmallComponent (line 475) | function SmallComponent() {
function SmallComponent (line 509) | function SmallComponent() {
function SmallComponent (line 549) | function SmallComponent() {
function SmallComponent (line 579) | function SmallComponent(props) {
function verifyCurrentTarget (line 638) | function verifyCurrentTarget(event) {
function verifyCurrentTarget (line 651) | function verifyCurrentTarget(event) {
function verifyCurrentTarget (line 669) | function verifyCurrentTarget(event) {
function verifyCurrentTarget (line 696) | function verifyCurrentTarget(event) {
FILE: packages/inferno-create-element/__tests__/hooks.spec.js
function StatelessComponent (line 10) | function StatelessComponent() {
class FooBar (line 306) | class FooBar extends Component {
method render (line 307) | render() {
FILE: packages/inferno-create-element/__tests__/patchKeyedChildren.spec.js
function generateKeyNodes (line 5) | function generateKeyNodes(array) {
function o (line 515) | function o(text) {
function d (line 525) | function d(text) {
function wk (line 535) | function wk(text) {
function gen (line 1334) | function gen(item, keys) {
function checkInnerHtmlEquals (line 1372) | function checkInnerHtmlEquals(ax, bx, cx, keys) {
FILE: packages/inferno-create-element/__tests__/patchMixedKeyed.spec.js
function spanTagWithText (line 4) | function spanTagWithText(text) {
function spanTagWithKeyAndText (line 14) | function spanTagWithKeyAndText(key, text) {
FILE: packages/inferno-create-element/__tests__/patchNonKeyedChildren.spec.js
function generateNodes (line 4) | function generateNodes(array) {
function spanTagWithText (line 16) | function spanTagWithText(text) {
FILE: packages/inferno-create-element/__tests__/patching.spec.js
function createDataModels (line 5) | function createDataModels() {
function addGroupSingleChild (line 18) | function addGroupSingleChild(count) {
function shuffle (line 29) | function shuffle(dataModel) {
function createExpectedChildren (line 38) | function createExpectedChildren(nodes) {
function createExpected (line 63) | function createExpected(nodes) {
function renderTree (line 85) | function renderTree(nodes) {
function renderModel (line 105) | function renderModel(dataModel) {
class App (line 208) | class App extends Component {
method constructor (line 209) | constructor() {
method componentDidMount (line 214) | componentDidMount() {
method render (line 232) | render() {
method constructor (line 254) | constructor() {
method componentDidMount (line 259) | componentDidMount() {
method render (line 277) | render() {
method constructor (line 299) | constructor() {
method componentDidMount (line 304) | componentDidMount() {
method render (line 322) | render() {
class App (line 253) | class App extends Component {
method constructor (line 209) | constructor() {
method componentDidMount (line 214) | componentDidMount() {
method render (line 232) | render() {
method constructor (line 254) | constructor() {
method componentDidMount (line 259) | componentDidMount() {
method render (line 277) | render() {
method constructor (line 299) | constructor() {
method componentDidMount (line 304) | componentDidMount() {
method render (line 322) | render() {
class App (line 298) | class App extends Component {
method constructor (line 209) | constructor() {
method componentDidMount (line 214) | componentDidMount() {
method render (line 232) | render() {
method constructor (line 254) | constructor() {
method componentDidMount (line 259) | componentDidMount() {
method render (line 277) | render() {
method constructor (line 299) | constructor() {
method componentDidMount (line 304) | componentDidMount() {
method render (line 322) | render() {
FILE: packages/inferno-create-element/__tests__/svg.spec.jsx
class Rect (line 281) | class Rect extends Component {
method constructor (line 282) | constructor(p, c) {
method componentDidMount (line 287) | componentDidMount() {
method render (line 291) | render() {
FILE: packages/inferno-create-element/__tests__/update.ext.spec.js
function A (line 794) | function A() {
function B (line 810) | function B() {
function C (line 826) | function C() {
function A (line 1252) | function A() {
function B (line 1272) | function B() {
function C (line 1292) | function C() {
FILE: packages/inferno-create-element/__tests__/update.spec.jsx
class A (line 21) | class A extends Component {
method componentWillUnmount (line 22) | componentWillUnmount() {}
method constructor (line 24) | constructor(props) {
method updateMe (line 34) | updateMe() {
method render (line 40) | render() {
method constructor (line 135) | constructor(props) {
method updateCaller (line 146) | updateCaller() {
method render (line 152) | render() {
method constructor (line 204) | constructor(props) {
method updateCaller (line 217) | updateCaller() {
method render (line 225) | render() {
method constructor (line 328) | constructor(props) {
method updateCaller (line 341) | updateCaller() {
method render (line 349) | render() {
class B (line 45) | class B extends Component {
method constructor (line 46) | constructor(props) {
method render (line 50) | render() {
method constructor (line 235) | constructor(props) {
method render (line 239) | render() {
method constructor (line 359) | constructor(props) {
method render (line 363) | render() {
class Parent (line 75) | class Parent extends Component {
method constructor (line 76) | constructor(props) {
method domagic (line 93) | domagic() {
method render (line 99) | render() {
method constructor (line 189) | constructor(props) {
method render (line 193) | render() {
method constructor (line 313) | constructor(props) {
method render (line 317) | render() {
class Child (line 109) | class Child extends Component {
method constructor (line 110) | constructor(props) {
method render (line 114) | render() {
class A (line 134) | class A extends Component {
method componentWillUnmount (line 22) | componentWillUnmount() {}
method constructor (line 24) | constructor(props) {
method updateMe (line 34) | updateMe() {
method render (line 40) | render() {
method constructor (line 135) | constructor(props) {
method updateCaller (line 146) | updateCaller() {
method render (line 152) | render() {
method constructor (line 204) | constructor(props) {
method updateCaller (line 217) | updateCaller() {
method render (line 225) | render() {
method constructor (line 328) | constructor(props) {
method updateCaller (line 341) | updateCaller() {
method render (line 349) | render() {
class Parent (line 188) | class Parent extends Component {
method constructor (line 76) | constructor(props) {
method domagic (line 93) | domagic() {
method render (line 99) | render() {
method constructor (line 189) | constructor(props) {
method render (line 193) | render() {
method constructor (line 313) | constructor(props) {
method render (line 317) | render() {
class A (line 203) | class A extends Component {
method componentWillUnmount (line 22) | componentWillUnmount() {}
method constructor (line 24) | constructor(props) {
method updateMe (line 34) | updateMe() {
method render (line 40) | render() {
method constructor (line 135) | constructor(props) {
method updateCaller (line 146) | updateCaller() {
method render (line 152) | render() {
method constructor (line 204) | constructor(props) {
method updateCaller (line 217) | updateCaller() {
method render (line 225) | render() {
method constructor (line 328) | constructor(props) {
method updateCaller (line 341) | updateCaller() {
method render (line 349) | render() {
class B (line 234) | class B extends Component {
method constructor (line 46) | constructor(props) {
method render (line 50) | render() {
method constructor (line 235) | constructor(props) {
method render (line 239) | render() {
method constructor (line 359) | constructor(props) {
method render (line 363) | render() {
class C (line 248) | class C extends Component {
method constructor (line 249) | constructor(props) {
method imstuck (line 260) | imstuck() {
method render (line 266) | render() {
method constructor (line 373) | constructor(props) {
method imstuck (line 384) | imstuck() {
method render (line 390) | render() {
method componentWillUnmount (line 637) | componentWillUnmount() {}
method render (line 639) | render() {
class Parent (line 312) | class Parent extends Component {
method constructor (line 76) | constructor(props) {
method domagic (line 93) | domagic() {
method render (line 99) | render() {
method constructor (line 189) | constructor(props) {
method render (line 193) | render() {
method constructor (line 313) | constructor(props) {
method render (line 317) | render() {
class A (line 327) | class A extends Component {
method componentWillUnmount (line 22) | componentWillUnmount() {}
method constructor (line 24) | constructor(props) {
method updateMe (line 34) | updateMe() {
method render (line 40) | render() {
method constructor (line 135) | constructor(props) {
method updateCaller (line 146) | updateCaller() {
method render (line 152) | render() {
method constructor (line 204) | constructor(props) {
method updateCaller (line 217) | updateCaller() {
method render (line 225) | render() {
method constructor (line 328) | constructor(props) {
method updateCaller (line 341) | updateCaller() {
method render (line 349) | render() {
class B (line 358) | class B extends Component {
method constructor (line 46) | constructor(props) {
method render (line 50) | render() {
method constructor (line 235) | constructor(props) {
method render (line 239) | render() {
method constructor (line 359) | constructor(props) {
method render (line 363) | render() {
class C (line 372) | class C extends Component {
method constructor (line 249) | constructor(props) {
method imstuck (line 260) | imstuck() {
method render (line 266) | render() {
method constructor (line 373) | constructor(props) {
method imstuck (line 384) | imstuck() {
method render (line 390) | render() {
method componentWillUnmount (line 637) | componentWillUnmount() {}
method render (line 639) | render() {
class InnerComponentToGetUnmounted (line 441) | class InnerComponentToGetUnmounted extends Component {
method constructor (line 442) | constructor(props) {
method render (line 446) | render() {
class Looper (line 473) | class Looper extends Component {
method constructor (line 474) | constructor(props) {
method setItems (line 486) | setItems(collection) {
method render (line 492) | render() {
class Stuff (line 550) | class Stuff extends Component {
method constructor (line 551) | constructor(props) {
method render (line 563) | render() {
method func (line 579) | func() {}
class Tester (line 583) | class Tester extends Component {
method constructor (line 584) | constructor(props) {
method render (line 588) | render() {
function B (line 623) | function B() {
method constructor (line 46) | constructor(props) {
method render (line 50) | render() {
method constructor (line 235) | constructor(props) {
method render (line 239) | render() {
method constructor (line 359) | constructor(props) {
method render (line 363) | render() {
class C (line 636) | class C extends Component {
method constructor (line 249) | constructor(props) {
method imstuck (line 260) | imstuck() {
method render (line 266) | render() {
method constructor (line 373) | constructor(props) {
method imstuck (line 384) | imstuck() {
method render (line 390) | render() {
method componentWillUnmount (line 637) | componentWillUnmount() {}
method render (line 639) | render() {
class ConfigsList (line 698) | class ConfigsList extends Component {
method constructor (line 699) | constructor(props) {
method handleCheck (line 706) | handleCheck(index, ifChecked) {
method render (line 714) | render(props) {
FILE: packages/inferno-create-element/src/index.ts
function createElement (line 21) | function createElement<P>(
FILE: packages/inferno-extras/__tests__/extras.spec.jsx
class Tester (line 24) | class Tester extends Component {
method constructor (line 25) | constructor(props) {
method render (line 31) | render(props, state) {
method constructor (line 76) | constructor(props) {
method render (line 82) | render(props, state) {
method constructor (line 129) | constructor(props) {
method render (line 135) | render() {
method constructor (line 155) | constructor(props) {
method render (line 161) | render() {
method constructor (line 190) | constructor(props) {
method render (line 196) | render() {
function Functional (line 67) | function Functional({ children }) {
class Tester (line 75) | class Tester extends Component {
method constructor (line 25) | constructor(props) {
method render (line 31) | render(props, state) {
method constructor (line 76) | constructor(props) {
method render (line 82) | render(props, state) {
method constructor (line 129) | constructor(props) {
method render (line 135) | render() {
method constructor (line 155) | constructor(props) {
method render (line 161) | render() {
method constructor (line 190) | constructor(props) {
method render (line 196) | render() {
class Tester (line 128) | class Tester extends Component {
method constructor (line 25) | constructor(props) {
method render (line 31) | render(props, state) {
method constructor (line 76) | constructor(props) {
method render (line 82) | render(props, state) {
method constructor (line 129) | constructor(props) {
method render (line 135) | render() {
method constructor (line 155) | constructor(props) {
method render (line 161) | render() {
method constructor (line 190) | constructor(props) {
method render (line 196) | render() {
class Tester (line 154) | class Tester extends Component {
method constructor (line 25) | constructor(props) {
method render (line 31) | render(props, state) {
method constructor (line 76) | constructor(props) {
method render (line 82) | render(props, state) {
method constructor (line 129) | constructor(props) {
method render (line 135) | render() {
method constructor (line 155) | constructor(props) {
method render (line 161) | render() {
method constructor (line 190) | constructor(props) {
method render (line 196) | render() {
class Tester (line 189) | class Tester extends Component {
method constructor (line 25) | constructor(props) {
method render (line 31) | render(props, state) {
method constructor (line 76) | constructor(props) {
method render (line 82) | render(props, state) {
method constructor (line 129) | constructor(props) {
method render (line 135) | render() {
method constructor (line 155) | constructor(props) {
method render (line 161) | render() {
method constructor (line 190) | constructor(props) {
method render (line 196) | render() {
FILE: packages/inferno-extras/src/findDOMNode.ts
function findDOMNode (line 3) | function findDOMNode(ref: VNode | Component | Node): Node | null {
FILE: packages/inferno-extras/src/isDOMInsideVDOM.ts
function isDOMInsideVNode (line 4) | function isDOMInsideVNode(DOM: Element, vNode: VNode): boolean {
function isDOMInsideComponent (line 42) | function isDOMInsideComponent(
FILE: packages/inferno-hydrate/__tests__/hydrate-forward-ref.spec.tsx
class Hello (line 27) | class Hello extends Component {
method constructor (line 30) | constructor(props) {
method componentDidMount (line 37) | componentDidMount() {
method render (line 41) | render() {
method render (line 65) | render() {
class Hello (line 64) | class Hello extends Component {
method constructor (line 30) | constructor(props) {
method componentDidMount (line 37) | componentDidMount() {
method render (line 41) | render() {
method render (line 65) | render() {
FILE: packages/inferno-hydrate/__tests__/hydrate.spec.tsx
class Foobar (line 157) | class Foobar extends Component {
method constructor (line 158) | constructor(props, context) {
method render (line 164) | render() {
function runAllTests (line 193) | function runAllTests() {
class Rect (line 1386) | class Rect extends Component {
method constructor (line 1387) | constructor(p, c) {
method componentDidMount (line 1392) | componentDidMount() {
method render (line 1396) | render() {
FILE: packages/inferno-hydrate/src/index.ts
function isSameInnerHTML (line 27) | function isSameInnerHTML(dom: Element, innerHTML: string): boolean {
function findLastDOMFromVNode (line 34) | function findLastDOMFromVNode(vNode: VNode): Element | null {
function isSamePropsInnerHTML (line 62) | function isSamePropsInnerHTML(dom: Element, props): boolean {
function hydrateComponent (line 69) | function hydrateComponent(
function hydrateChildren (line 116) | function hydrateChildren(
function hydrateElement (line 227) | function hydrateElement(
function hydrateText (line 281) | function hydrateText(
function hydrateFragment (line 303) | function hydrateFragment(
function hydrateVNode (line 327) | function hydrateVNode(
function hydrate (line 386) | function hydrate(
FILE: packages/inferno-hyperscript/__tests__/hyperscript.spec.tsx
class FooBar (line 45) | class FooBar extends Component {
method render (line 46) | render() {
method onComponentDidUnmount (line 82) | onComponentDidUnmount() {}
method onComponentDidMount (line 104) | onComponentDidMount() {}
function Test1 (line 164) | function Test1({ children, ...props }) {
function Test2 (line 168) | function Test2({ children, ...props }) {
method shouldComponentUpdate (line 370) | shouldComponentUpdate() {
method render (line 374) | render() {
function Test3 (line 172) | function Test3({ children }) {
function Test4 (line 176) | function Test4({ children, className, ...props }) {
method onComponentDidMount (line 330) | onComponentDidMount(domNode) {
method onComponentDidMount (line 358) | onComponentDidMount() {
class Test2 (line 369) | class Test2 extends Component<{ foo: string }> {
method shouldComponentUpdate (line 370) | shouldComponentUpdate() {
method render (line 374) | render() {
class Hello (line 435) | class Hello extends Component {
method constructor (line 438) | constructor(props) {
method componentDidMount (line 445) | componentDidMount() {
method render (line 449) | render() {
FILE: packages/inferno-hyperscript/src/index.ts
function parseTag (line 21) | function parseTag(tag: string | null, props: any): string {
function isChildren (line 65) | function isChildren(x: any): boolean {
function h (line 76) | function h(
FILE: packages/inferno-mobx/__tests__/context.spec.jsx
method render (line 39) | render() {
method render (line 65) | render() {
method render (line 90) | render() {
method render (line 129) | render() {
method render (line 159) | render() {
method render (line 183) | render() {
method render (line 195) | render() {
method render (line 202) | render() {
method render (line 235) | render() {
method render (line 247) | render() {
method render (line 254) | render() {
FILE: packages/inferno-mobx/__tests__/generic.spec.jsx
class ApiService (line 28) | class ApiService {
method constructor (line 29) | constructor() {
class TodoService (line 34) | class TodoService {
method constructor (line 35) | constructor() {
class TodoView (line 47) | class TodoView extends Component {
method render (line 48) | render() {
FILE: packages/inferno-mobx/__tests__/inject.spec.jsx
method render (line 23) | render() {
method render (line 48) | render() {
class A (line 59) | class A extends Component {
method render (line 60) | render() {
method render (line 94) | render() {
method render (line 137) | render() {
method render (line 80) | render() {
class A (line 93) | class A extends Component {
method render (line 60) | render() {
method render (line 94) | render() {
method render (line 137) | render() {
method render (line 124) | render() {
class A (line 136) | class A extends Component {
method render (line 60) | render() {
method render (line 94) | render() {
method render (line 137) | render() {
method render (line 160) | render() {
method render (line 181) | render() {
method render (line 201) | render() {
method render (line 213) | render() {
method render (line 220) | render() {
method render (line 262) | render() {
class B (line 274) | class B extends Component {
method render (line 275) | render() {
method render (line 292) | render() {
class B (line 291) | class B extends Component {
method render (line 275) | render() {
method render (line 292) | render() {
method render (line 321) | render() {
FILE: packages/inferno-mobx/__tests__/misc.spec.jsx
method render (line 24) | render() {
method shouldComponentUpdate (line 33) | shouldComponentUpdate() {
method render (line 54) | render() {
method shouldComponentUpdate (line 63) | shouldComponentUpdate(nextProps) {
method render (line 71) | render() {
function ExampleState (line 100) | function ExampleState() {
method render (line 111) | render() {
method constructor (line 142) | constructor(props) {
method render (line 148) | render() {
FILE: packages/inferno-mobx/__tests__/observer.spec.jsx
method componentWillReact (line 36) | componentWillReact() {
method render (line 40) | render() {
method y (line 131) | get y() {
class clss (line 168) | class clss extends Component {
method componentWillMount (line 169) | componentWillMount() {
method render (line 175) | render() {
class Row (line 232) | class Row extends Component {
method constructor (line 233) | constructor(props) {
method render (line 237) | render() {
method render (line 279) | render() {
method render (line 304) | render() {
method render (line 315) | render() {
method componentWillMount (line 330) | componentWillMount() {
method render (line 338) | render() {
class Parent (line 349) | class Parent extends Component {
method constructor (line 350) | constructor(props) {
method render (line 355) | render() {
class Com (line 377) | class Com extends Component {
method onClick (line 378) | onClick() {
method render (line 382) | render() {
class A (line 445) | class A extends Component {
method getDerivedStateFromProps (line 446) | static getDerivedStateFromProps() {
class B (line 451) | class B extends Component {
method getSnapshotBeforeUpdate (line 452) | getSnapshotBeforeUpdate() {
class Faulty (line 473) | class Faulty extends Component {
method render (line 474) | render() {
FILE: packages/inferno-mobx/__tests__/observerPatch.spec.jsx
class TodoItem (line 30) | class TodoItem extends Component {
method render (line 31) | render({ todo }) {
method shouldComponentUpdate (line 36) | shouldComponentUpdate({ todo: { title } }) {
class TodoList (line 45) | class TodoList extends Component {
method componentWillReact (line 46) | componentWillReact() {
method render (line 50) | render() {
method y (line 121) | get y() {
class TestComponent (line 128) | class TestComponent extends Component {
method render (line 129) | render() {
class Comp (line 161) | class Comp extends Component {
method render (line 162) | render() {
class Row (line 191) | class Row extends Component {
method constructor (line 192) | constructor(props) {
method render (line 196) | render() {
class Table (line 207) | class Table extends Component {
method render (line 208) | render() {
method render (line 240) | render() {
method render (line 264) | render() {
class Foo (line 286) | class Foo extends Component {
method render (line 287) | render() {
class fooA (line 309) | class fooA extends Component {
method render (line 310) | render() {
method render (line 337) | render() {
class fooB (line 318) | class fooB extends Component {
method render (line 319) | render() {
method render (line 344) | render() {
class fooA (line 336) | class fooA extends Component {
method render (line 310) | render() {
method render (line 337) | render() {
class fooB (line 343) | class fooB extends fooA {
method render (line 319) | render() {
method render (line 344) | render() {
class ComponentA (line 357) | class ComponentA extends Component {
method constructor (line 358) | constructor(props, ctx) {
method onClick (line 363) | onClick() {
method render (line 367) | render() {
class Faulty (line 385) | class Faulty extends Component {
method render (line 386) | render() {
FILE: packages/inferno-mobx/__tests__/observerWrap.spec.jsx
class ContextProvider (line 55) | class ContextProvider extends Component {
method getChildContext (line 56) | getChildContext() {
method render (line 60) | render() {
method y (line 329) | get y() {
FILE: packages/inferno-mobx/__tests__/stateless.spec.jsx
class ContextProvider (line 43) | class ContextProvider extends Component {
method getChildContext (line 44) | getChildContext() {
method render (line 48) | render() {
FILE: packages/inferno-mobx/__tests__/transactions.spec.jsx
function flipStuff (line 27) | function flipStuff() {
method componentWillReact (line 39) | componentWillReact() {
method render (line 43) | render() {
FILE: packages/inferno-mobx/__tests__/types.spec.tsx
class MyComponent (line 64) | class MyComponent extends Component {
method render (line 65) | public render() {
FILE: packages/inferno-mobx/src/Provider.ts
class Provider (line 10) | class Provider extends Component<any, any> {
method render (line 11) | public render(props): InfernoNode {
method getChildContext (line 15) | public getChildContext(): { mobxStores: any } {
FILE: packages/inferno-mobx/src/index.ts
function onError (line 19) | function onError(fn: (data: unknown) => void): () => void {
FILE: packages/inferno-mobx/src/observer.ts
function reportRendering (line 24) | function reportRendering(component): void {
function trackComponents (line 36) | function trackComponents(): void {
function useStaticRendering (line 48) | function useStaticRendering(useStatic: boolean): void {
function patch (line 62) | function patch(target, funcName, runMixinFirst): void {
function isObjectShallowModified (line 82) | function isObjectShallowModified(prev, next): boolean {
method componentWillMount (line 110) | componentWillMount() {
method componentWillUnmount (line 218) | componentWillUnmount() {
method componentDidMount (line 239) | componentDidMount() {
method componentDidUpdate (line 245) | componentDidUpdate() {
method shouldComponentUpdate (line 251) | shouldComponentUpdate(nextProps, nextState) {
function observer (line 276) | function observer(arg1, arg2?) {
function mixinLifecycleEvents (line 344) | function mixinLifecycleEvents(target): void {
function createStoreInjector (line 372) | function createStoreInjector(grabStoresFn: Function, component, injectNa...
function grabStoresByName (line 437) | function grabStoresByName(storeNames: string[]) {
function inject (line 470) | function inject(
FILE: packages/inferno-mobx/src/observerPatch.ts
type Render (line 5) | type Render = (this, properties?, state?, context?) => InfernoNode;
type ObserverRender (line 7) | type ObserverRender<R extends Render = Render> = R & { dispose: () => vo...
function makeObserverRender (line 9) | function makeObserverRender<R extends Render>(
type Target (line 36) | interface Target {
function observerPatch (line 47) | function observerPatch<T extends Target, P, C>(
FILE: packages/inferno-mobx/src/observerWrap.ts
type Render (line 12) | type Render = (
function callDispose (line 17) | function callDispose({ dispose }: { readonly dispose: () => void }): void {
type InnerProperties (line 21) | interface InnerProperties {
function innerVNode (line 29) | function innerVNode<T>(
function makeProxy (line 50) | function makeProxy(target: VNode): { $V: InfernoNode } {
type UpdateHook (line 61) | type UpdateHook = (this: RefType, prev: unknown, next: unknown) => void;
type RefType (line 63) | interface RefType {
function getUpdateHooks (line 68) | function getUpdateHooks(
function observerWrap (line 85) | function observerWrap<T extends Render>(base: T): typeof base {
FILE: packages/inferno-mobx/src/utils/EventEmitter.ts
class EventEmitter (line 1) | class EventEmitter {
method on (line 4) | public on(cb: (data: unknown) => void): () => void {
method emit (line 14) | public emit(data: unknown): void {
FILE: packages/inferno-mobx/src/utils/utils.ts
function isStateless (line 1) | function isStateless(component: any): boolean {
FILE: packages/inferno-redux/__tests__/components/Provider.spec.js
function renderIntoContainer (line 21) | function renderIntoContainer(vNode) {
class Child (line 30) | class Child extends Component {
method render (line 31) | render() {
class ProviderContainer (line 69) | class ProviderContainer extends Component {
method constructor (line 70) | constructor() {
method render (line 75) | render() {
method render (line 120) | render() {
method render (line 130) | render() {
method render (line 167) | render() {
method emitChange (line 177) | emitChange() {
method render (line 181) | render() {
FILE: packages/inferno-redux/__tests__/components/Provider.typings.tsx
type AppState (line 8) | interface AppState {
type FetchPostsAction (line 37) | interface FetchPostsAction {
type ReceivePostsAction (line 42) | interface ReceivePostsAction {
type MyAction (line 47) | type MyAction = FetchPostsAction | ReceivePostsAction;
FILE: packages/inferno-redux/__tests__/components/connect.spec.js
function render (line 14) | function render(vNode, container, cb) {
function renderToContainer (line 33) | function renderToContainer(vNode) {
class Passthrough (line 38) | class Passthrough extends Component {
method render (line 39) | render() {
class ProviderMock (line 44) | class ProviderMock extends Component {
method getChildContext (line 45) | getChildContext() {
method render (line 49) | render() {
class ContextBoundStore (line 54) | class ContextBoundStore {
method constructor (line 55) | constructor(reducer) {
method getState (line 62) | getState() {
method subscribe (line 66) | subscribe(listener) {
method dispatch (line 80) | dispatch(action) {
method render (line 113) | render() {
method render (line 138) | render() {
method render (line 163) | render() {
method componentDidMount (line 249) | componentDidMount() {
method render (line 253) | render() {
method render (line 279) | render() {
class Container (line 285) | class Container extends Component {
method constructor (line 286) | constructor() {
method componentDidMount (line 295) | componentDidMount() {
method render (line 307) | render() {
method constructor (line 340) | constructor() {
method componentDidMount (line 345) | componentDidMount() {
method render (line 351) | render() {
method constructor (line 479) | constructor() {
method componentDidMount (line 488) | componentDidMount() {
method render (line 497) | render() {
method render (line 1576) | render() {
method render (line 1589) | render() {
method render (line 1607) | render() {
method render (line 1633) | render() {
method render (line 1652) | render() {
method someInstanceMethod (line 1682) | someInstanceMethod() {
method render (line 1686) | render() {
method constructor (line 2145) | constructor(props) {
method componentDidMount (line 2150) | componentDidMount() {
method render (line 2154) | render() {
method render (line 333) | render() {
class Container (line 339) | class Container extends Component {
method constructor (line 286) | constructor() {
method componentDidMount (line 295) | componentDidMount() {
method render (line 307) | render() {
method constructor (line 340) | constructor() {
method componentDidMount (line 345) | componentDidMount() {
method render (line 351) | render() {
method constructor (line 479) | constructor() {
method componentDidMount (line 488) | componentDidMount() {
method render (line 497) | render() {
method render (line 1576) | render() {
method render (line 1589) | render() {
method render (line 1607) | render() {
method render (line 1633) | render() {
method render (line 1652) | render() {
method someInstanceMethod (line 1682) | someInstanceMethod() {
method render (line 1686) | render() {
method constructor (line 2145) | constructor(props) {
method componentDidMount (line 2150) | componentDidMount() {
method render (line 2154) | render() {
method render (line 384) | render() {
class HolderContainer (line 390) | class HolderContainer extends Component {
method render (line 391) | render() {
method render (line 435) | render() {
method render (line 428) | render() {
class HolderContainer (line 434) | class HolderContainer extends Component {
method render (line 391) | render() {
method render (line 435) | render() {
method render (line 472) | render() {
class Container (line 478) | class Container extends Component {
method constructor (line 286) | constructor() {
method componentDidMount (line 295) | componentDidMount() {
method render (line 307) | render() {
method constructor (line 340) | constructor() {
method componentDidMount (line 345) | componentDidMount() {
method render (line 351) | render() {
method constructor (line 479) | constructor() {
method componentDidMount (line 488) | componentDidMount() {
method render (line 497) | render() {
method render (line 1576) | render() {
method render (line 1589) | render() {
method render (line 1607) | render() {
method render (line 1633) | render() {
method render (line 1652) | render() {
method someInstanceMethod (line 1682) | someInstanceMethod() {
method render (line 1686) | render() {
method constructor (line 2145) | constructor(props) {
method componentDidMount (line 2150) | componentDidMount() {
method render (line 2154) | render() {
method mergedDoSomething (line 528) | mergedDoSomething(thing) {
method render (line 535) | render() {
class OuterContainer (line 541) | class OuterContainer extends Component {
method constructor (line 542) | constructor() {
method render (line 547) | render() {
method render (line 593) | render() {
method render (line 625) | render() {
class OuterComponent (line 631) | class OuterComponent extends Component {
method constructor (line 632) | constructor() {
method setFoo (line 637) | setFoo(foo) {
method render (line 641) | render() {
method constructor (line 684) | constructor() {
method setFoo (line 689) | setFoo(foo) {
method render (line 693) | render() {
method constructor (line 740) | constructor() {
method setFoo (line 745) | setFoo(foo) {
method render (line 749) | render() {
method constructor (line 798) | constructor() {
method setFoo (line 803) | setFoo(foo) {
method render (line 807) | render() {
method constructor (line 850) | constructor() {
method setFoo (line 855) | setFoo(foo) {
method render (line 859) | render() {
method constructor (line 906) | constructor() {
method setFoo (line 911) | setFoo(foo) {
method render (line 915) | render() {
method render (line 677) | render() {
class OuterComponent (line 683) | class OuterComponent extends Component {
method constructor (line 632) | constructor() {
method setFoo (line 637) | setFoo(foo) {
method render (line 641) | render() {
method constructor (line 684) | constructor() {
method setFoo (line 689) | setFoo(foo) {
method render (line 693) | render() {
method constructor (line 740) | constructor() {
method setFoo (line 745) | setFoo(foo) {
method render (line 749) | render() {
method constructor (line 798) | constructor() {
method setFoo (line 803) | setFoo(foo) {
method render (line 807) | render() {
method constructor (line 850) | constructor() {
method setFoo (line 855) | setFoo(foo) {
method render (line 859) | render() {
method constructor (line 906) | constructor() {
method setFoo (line 911) | setFoo(foo) {
method render (line 915) | render() {
method render (line 733) | render() {
class OuterComponent (line 739) | class OuterComponent extends Component {
method constructor (line 632) | constructor() {
method setFoo (line 637) | setFoo(foo) {
method render (line 641) | render() {
method constructor (line 684) | constructor() {
method setFoo (line 689) | setFoo(foo) {
method render (line 693) | render() {
method constructor (line 740) | constructor() {
method setFoo (line 745) | setFoo(foo) {
method render (line 749) | render() {
method constructor (line 798) | constructor() {
method setFoo (line 803) | setFoo(foo) {
method render (line 807) | render() {
method constructor (line 850) | constructor() {
method setFoo (line 855) | setFoo(foo) {
method render (line 859) | render() {
method constructor (line 906) | constructor() {
method setFoo (line 911) | setFoo(foo) {
method render (line 915) | render() {
method render (line 791) | render() {
class OuterComponent (line 797) | class OuterComponent extends Component {
method constructor (line 632) | constructor() {
method setFoo (line 637) | setFoo(foo) {
method render (line 641) | render() {
method constructor (line 684) | constructor() {
method setFoo (line 689) | setFoo(foo) {
method render (line 693) | render() {
method constructor (line 740) | constructor() {
method setFoo (line 745) | setFoo(foo) {
method render (line 749) | render() {
method constructor (line 798) | constructor() {
method setFoo (line 803) | setFoo(foo) {
method render (line 807) | render() {
method constructor (line 850) | constructor() {
method setFoo (line 855) | setFoo(foo) {
method render (line 859) | render() {
method constructor (line 906) | constructor() {
method setFoo (line 911) | setFoo(foo) {
method render (line 915) | render() {
method render (line 843) | render() {
class OuterComponent (line 849) | class OuterComponent extends Component {
method constructor (line 632) | constructor() {
method setFoo (line 637) | setFoo(foo) {
method render (line 641) | render() {
method constructor (line 684) | constructor() {
method setFoo (line 689) | setFoo(foo) {
method render (line 693) | render() {
method constructor (line 740) | constructor() {
method setFoo (line 745) | setFoo(foo) {
method render (line 749) | render() {
method constructor (line 798) | constructor() {
method setFoo (line 803) | setFoo(foo) {
method render (line 807) | render() {
method constructor (line 850) | constructor() {
method setFoo (line 855) | setFoo(foo) {
method render (line 859) | render() {
method constructor (line 906) | constructor() {
method setFoo (line 911) | setFoo(foo) {
method render (line 915) | render() {
method render (line 899) | render() {
class OuterComponent (line 905) | class OuterComponent extends Component {
method constructor (line 632) | constructor() {
method setFoo (line 637) | setFoo(foo) {
method render (line 641) | render() {
method constructor (line 684) | constructor() {
method setFoo (line 689) | setFoo(foo) {
method render (line 693) | render() {
method constructor (line 740) | constructor() {
method setFoo (line 745) | setFoo(foo) {
method render (line 749) | render() {
method constructor (line 798) | constructor() {
method setFoo (line 803) | setFoo(foo) {
method render (line 807) | render() {
method constructor (line 850) | constructor() {
method setFoo (line 855) | setFoo(foo) {
method render (line 859) | render() {
method constructor (line 906) | constructor() {
method setFoo (line 911) | setFoo(foo) {
method render (line 915) | render() {
method render (line 955) | render() {
method render (line 1004) | render() {
method render (line 1032) | render() {
class ProviderMockTest (line 1058) | class ProviderMockTest extends Component {
method getChildContext (line 1059) | getChildContext() {
method render (line 1063) | render() {
method getDisplayName (line 1072) | getDisplayName() {
method render (line 1076) | render() {
method getDisplayName (line 1084) | getDisplayName() {
method componentWillReceiveProps (line 1088) | componentWillReceiveProps(nextProps) {
method render (line 1094) | render() {
class RouterMock (line 1159) | class RouterMock extends Component {
method constructor (line 1160) | constructor(...args) {
method setLocation (line 1166) | setLocation(pathname) {
method getChildComponent (line 1171) | getChildComponent(location) {
method render (line 1182) | render() {
method componentWillUnmount (line 1235) | componentWillUnmount() {
method render (line 1239) | render() {
method render (line 1273) | render() {
method render (line 1317) | render() {
class Root (line 1328) | class Root extends Component {
method constructor (line 1329) | constructor(props) {
method render (line 1334) | render() {
method render (line 1496) | render() {
method render (line 1507) | render() {
method render (line 1518) | render() {
method render (line 1566) | render() {
class Container (line 1575) | class Container extends Component {
method constructor (line 286) | constructor() {
method componentDidMount (line 295) | componentDidMount() {
method render (line 307) | render() {
method constructor (line 340) | constructor() {
method componentDidMount (line 345) | componentDidMount() {
method render (line 351) | render() {
method constructor (line 479) | constructor() {
method componentDidMount (line 488) | componentDidMount() {
method render (line 497) | render() {
method render (line 1576) | render() {
method render (line 1589) | render() {
method render (line 1607) | render() {
method render (line 1633) | render() {
method render (line 1652) | render() {
method someInstanceMethod (line 1682) | someInstanceMethod() {
method render (line 1686) | render() {
method constructor (line 2145) | constructor(props) {
method componentDidMount (line 2150) | componentDidMount() {
method render (line 2154) | render() {
class Container (line 1588) | class Container extends Component {
method constructor (line 286) | constructor() {
method componentDidMount (line 295) | componentDidMount() {
method render (line 307) | render() {
method constructor (line 340) | constructor() {
method componentDidMount (line 345) | componentDidMount() {
method render (line 351) | render() {
method constructor (line 479) | constructor() {
method componentDidMount (line 488) | componentDidMount() {
method render (line 497) | render() {
method render (line 1576) | render() {
method render (line 1589) | render() {
method render (line 1607) | render() {
method render (line 1633) | render() {
method render (line 1652) | render() {
method someInstanceMethod (line 1682) | someInstanceMethod() {
method render (line 1686) | render() {
method constructor (line 2145) | constructor(props) {
method componentDidMount (line 2150) | componentDidMount() {
method render (line 2154) | render() {
class Container (line 1606) | class Container extends Component {
method constructor (line 286) | constructor() {
method componentDidMount (line 295) | componentDidMount() {
method render (line 307) | render() {
method constructor (line 340) | constructor() {
method componentDidMount (line 345) | componentDidMount() {
method render (line 351) | render() {
method constructor (line 479) | constructor() {
method componentDidMount (line 488) | componentDidMount() {
method render (line 497) | render() {
method render (line 1576) | render() {
method render (line 1589) | render() {
method render (line 1607) | render() {
method render (line 1633) | render() {
method render (line 1652) | render() {
method someInstanceMethod (line 1682) | someInstanceMethod() {
method render (line 1686) | render() {
method constructor (line 2145) | constructor(props) {
method componentDidMount (line 2150) | componentDidMount() {
method render (line 2154) | render() {
class Container (line 1632) | class Container extends Component {
method constructor (line 286) | constructor() {
method componentDidMount (line 295) | componentDidMount() {
method render (line 307) | render() {
method constructor (line 340) | constructor() {
method componentDidMount (line 345) | componentDidMount() {
method render (line 351) | render() {
method constructor (line 479) | constructor() {
method componentDidMount (line 488) | componentDidMount() {
method render (line 497) | render() {
method render (line 1576) | render() {
method render (line 1589) | render() {
method render (line 1607) | render() {
method render (line 1633) | render() {
method render (line 1652) | render() {
method someInstanceMethod (line 1682) | someInstanceMethod() {
method render (line 1686) | render() {
method constructor (line 2145) | constructor(props) {
method componentDidMount (line 2150) | componentDidMount() {
method render (line 2154) | render() {
class Container (line 1651) | class Container extends Component {
method constructor (line 286) | constructor() {
method componentDidMount (line 295) | componentDidMount() {
method render (line 307) | render() {
method constructor (line 340) | constructor() {
method componentDidMount (line 345) | componentDidMount() {
method render (line 351) | render() {
method constructor (line 479) | constructor() {
method componentDidMount (line 488) | componentDidMount() {
method render (line 497) | render() {
method render (line 1576) | render() {
method render (line 1589) | render() {
method render (line 1607) | render() {
method render (line 1633) | render() {
method render (line 1652) | render() {
method someInstanceMethod (line 1682) | someInstanceMethod() {
method render (line 1686) | render() {
method constructor (line 2145) | constructor(props) {
method componentDidMount (line 2150) | componentDidMount() {
method render (line 2154) | render() {
class Container (line 1681) | class Container extends Component {
method constructor (line 286) | constructor() {
method componentDidMount (line 295) | componentDidMount() {
method render (line 307) | render() {
method constructor (line 340) | constructor() {
method componentDidMount (line 345) | componentDidMount() {
method render (line 351) | render() {
method constructor (line 479) | constructor() {
method componentDidMount (line 488) | componentDidMount() {
method render (line 497) | render() {
method render (line 1576) | render() {
method render (line 1589) | render() {
method render (line 1607) | render() {
method render (line 1633) | render() {
method render (line 1652) | render() {
method someInstanceMethod (line 1682) | someInstanceMethod() {
method render (line 1686) | render() {
method constructor (line 2145) | constructor(props) {
method componentDidMount (line 2150) | componentDidMount() {
method render (line 2154) | render() {
class ImpureComponent (line 1713) | class ImpureComponent extends Component {
method render (line 1714) | render() {
method render (line 1765) | render() {
class StatefulWrapper (line 1722) | class StatefulWrapper extends Component {
method constructor (line 1723) | constructor() {
method getChildContext (line 1728) | getChildContext() {
method render (line 1734) | render() {
method constructor (line 1785) | constructor() {
method render (line 1792) | render() {
class ImpureComponent (line 1764) | class ImpureComponent extends Component {
method render (line 1714) | render() {
method render (line 1765) | render() {
class StatefulWrapper (line 1784) | class StatefulWrapper extends Component {
method constructor (line 1723) | constructor() {
method getChildContext (line 1728) | getChildContext() {
method render (line 1734) | render() {
method constructor (line 1785) | constructor() {
method render (line 1792) | render() {
method emitChange (line 1830) | emitChange() {
method render (line 1834) | render() {
method render (line 1860) | render() {
method render (line 1900) | render() {
method render (line 1936) | render() {
method render (line 1992) | render() {
method componentWillUpdate (line 2038) | componentWillUpdate() {
method render (line 2042) | render() {
method render (line 2079) | render() {
method componentWillUpdate (line 2134) | componentWillUpdate() {
method render (line 2138) | render() {
class Container (line 2144) | class Container extends Component {
method constructor (line 286) | constructor() {
method componentDidMount (line 295) | componentDidMount() {
method render (line 307) | render() {
method constructor (line 340) | constructor() {
method componentDidMount (line 345) | componentDidMount() {
method render (line 351) | render() {
method constructor (line 479) | constructor() {
method componentDidMount (line 488) | componentDidMount() {
method render (line 497) | render() {
method render (line 1576) | render() {
method render (line 1589) | render() {
method render (line 1607) | render() {
method render (line 1633) | render() {
method render (line 1652) | render() {
method someInstanceMethod (line 1682) | someInstanceMethod() {
method render (line 1686) | render() {
method constructor (line 2145) | constructor(props) {
method componentDidMount (line 2150) | componentDidMount() {
method render (line 2154) | render() {
method render (line 2193) | render() {
method render (line 2223) | render() {
class Parent (line 2230) | class Parent extends Component {
method componentDidMount (line 2231) | componentDidMount() {
method render (line 2235) | render() {
method render (line 2272) | render() {
method componentWillMount (line 2280) | componentWillMount() {
method componentWillUnmount (line 2284) | componentWillUnmount() {
method render (line 2288) | render() {
method render (line 2312) | render() {
method render (line 2328) | render() {
method render (line 2349) | render() {
method render (line 2369) | render() {
method render (line 2390) | render() {
method render (line 2414) | render() {
class BlockUpdates (line 2420) | class BlockUpdates extends Component {
method shouldComponentUpdate (line 2421) | shouldComponentUpdate() {
method render (line 2425) | render() {
method render (line 2432) | render() {
method render (line 2465) | render() {
method render (line 2474) | render() {
method render (line 2482) | render() {
method render (line 2507) | render() {
method render (line 2516) | render() {
method render (line 2525) | render() {
method render (line 2534) | render() {
FILE: packages/inferno-redux/__tests__/functional.spec.jsx
function FunctionalComponent (line 26) | function FunctionalComponent() {
method onComponentDidMount (line 35) | onComponentDidMount() {
function FunctionalComponent (line 62) | function FunctionalComponent(props) {
method onComponentWillUpdate (line 67) | onComponentWillUpdate() {
method onComponentDidMount (line 77) | onComponentDidMount() {
FILE: packages/inferno-redux/src/components/Provider.ts
type Props (line 16) | interface Props<A extends Action = AnyAction> {
class Provider (line 21) | class Provider<A extends Action = AnyAction> extends Component<
method constructor (line 27) | constructor(props: Props<A>, context: any) {
method getChildContext (line 32) | public getChildContext(): { store: Store<any, A>; storeSubscription: n...
method render (line 38) | public render(): InfernoNode {
FILE: packages/inferno-redux/src/components/connectAdvanced.ts
type IConnectOptions (line 42) | interface IConnectOptions {
type SelectorFactory (line 117) | type SelectorFactory = (
function getDefaultName (line 129) | function getDefaultName(name): string {
function connectAdvanced (line 133) | function connectAdvanced(
FILE: packages/inferno-redux/src/utils/Subscription.ts
type Listener (line 3) | type Listener = () => void;
type IListenerCollection (line 5) | interface IListenerCollection {
constant CLEARED (line 11) | const CLEARED = null;
class Subscription (line 61) | class Subscription {
method constructor (line 67) | constructor(
method addNestedSub (line 79) | public addNestedSub(listener): Unsubscribe {
method notifyNestedSubs (line 84) | public notifyNestedSubs(): void {
method isSubscribed (line 88) | public isSubscribed(): boolean {
method trySubscribe (line 92) | public trySubscribe(): void {
method tryUnsubscribe (line 102) | public tryUnsubscribe(): void {
FILE: packages/inferno-redux/src/utils/verifyPlainObject.ts
function isPlainObject (line 3) | function isPlainObject(value): boolean {
FILE: packages/inferno-redux/src/utils/wrapActionCreators.ts
function wrapActionCreators (line 3) | function wrapActionCreators(actionCreators) {
FILE: packages/inferno-router/__tests__/Link.spec.tsx
class ContextChecker (line 147) | class ContextChecker extends Component<{ children?: InfernoNode }> {
method getChildContext (line 148) | public getChildContext() {
method render (line 157) | public render({ children }) {
method getChildContext (line 202) | public getChildContext() {
method render (line 211) | public render({ children }) {
class ContextChecker (line 201) | class ContextChecker extends Component<{ children?: InfernoNode }> {
method getChildContext (line 148) | public getChildContext() {
method render (line 157) | public render({ children }) {
method getChildContext (line 202) | public getChildContext() {
method render (line 211) | public ren
Condensed preview — 441 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (3,365K chars).
[
{
"path": ".editorconfig",
"chars": 265,
"preview": "# top-most EditorConfig file\nroot = true\n\n[*]\nend_of_line = lf\ninsert_final_newline = true\nquote_type = single\n\n# Tab in"
},
{
"path": ".gitattributes",
"chars": 241,
"preview": "* 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 te"
},
{
"path": ".github/COMMIT_TEMPLATE.md",
"chars": 1074,
"preview": "# <type>: (If applied, this commit will...) <subject> (Max 50 char)\n# |<---- Using a Maximum Of 50 Characters ---->|\n\n"
},
{
"path": ".github/FUNDING.yml",
"chars": 72,
"preview": "# These are supported funding model platforms\n\nopen_collective: inferno\n"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 992,
"preview": "*Before* submitting an issue please:\n- Check that you are using the latest version of Inferno. Either using our [CDN @ M"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 337,
"preview": " *Before* submitting a PR please:\n - Include tests for the functionality you are adding! See CONTRIBUTING.md for details"
},
{
"path": ".github/workflows/ci-template.yml",
"chars": 830,
"preview": "name: CI\n\non:\n push:\n branches: [ master ]\n pull_request:\n branches: [ '**' ]\n\njobs:\n tests:\n runs-on: ubunt"
},
{
"path": ".github/workflows/codeql-analysis.yml",
"chars": 2728,
"preview": "# For most projects, this workflow file will not need changing; you simply need\n# to commit it to your repository.\n#\n# Y"
},
{
"path": ".gitignore",
"chars": 232,
"preview": ".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\npackag"
},
{
"path": ".npmrc",
"chars": 22,
"preview": "legacy-peer-deps=true\n"
},
{
"path": "CHANGELOG.md",
"chars": 69,
"preview": "See GitHub for changes https://github.com/infernojs/inferno/releases\n"
},
{
"path": "CONTRIBUTING.md",
"chars": 5925,
"preview": "Contributing to Inferno\n==========================\n\nMany thanks for using Inferno and contributing to its development. T"
},
{
"path": "LICENSE.md",
"chars": 1079,
"preview": "# MIT License\nCopyright (c) 2015-2022 Dominic Gannaway\n\nPermission is hereby granted, free of charge, to any person obta"
},
{
"path": "README.md",
"chars": 45482,
"preview": "<p align=\"center\"><a href=\"https://infernojs.org/\" target=\"_blank\"><img width=\"150\" alt=\"Inferno\" title=\"Inferno\" src=\"h"
},
{
"path": "browser/jsfiddle-integration-babel7v3.js",
"chars": 640,
"preview": "document.addEventListener('DOMContentLoaded', function(event) {\n Babel.registerPlugin(\"inferno\", window[\"babel-plugin-i"
},
{
"path": "demo/inferno-router-demo/.babelrc",
"chars": 36,
"preview": "{\n \"plugins\": [\n \"inferno\"\n ]\n}"
},
{
"path": "demo/inferno-router-demo/.gitignore",
"chars": 236,
"preview": ".DS_Store\n.git/\n\n# VS Code specific\n.vscode\njsconfig.json\ntypings/*\ntypings.json\n\n# Dependency directory for NPM\nnode_mo"
},
{
"path": "demo/inferno-router-demo/.proxyrc",
"chars": 58,
"preview": "{\n \"/api\": {\n \"target\": \"http://127.0.0.1:3000/\"\n }\n}"
},
{
"path": "demo/inferno-router-demo/README.md",
"chars": 155,
"preview": "# Demo of Inferno-Router\n\nNOTE: Requires Nodejs >=18 (uses `fetch`)\n\n```sh\ncd demo/inferno-router-demo\nnpm i\nnpm run dev"
},
{
"path": "demo/inferno-router-demo/package.json",
"chars": 1953,
"preview": "{\n \"name\": \"inferno-router-demo\",\n \"version\": \"8.0.5\",\n \"description\": \"Influence CMS Demo\",\n \"author\": \"Sebastian W"
},
{
"path": "demo/inferno-router-demo/src/App.tsx",
"chars": 699,
"preview": "import { Component } from 'inferno'\nimport { Route } from 'inferno-router'\n\n/**\n * Pages\n */\nimport StartPage from './pa"
},
{
"path": "demo/inferno-router-demo/src/index.html",
"chars": 222,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\"/>\n <title>Inferno Router Demo</title>\n <script"
},
{
"path": "demo/inferno-router-demo/src/index.tsx",
"chars": 311,
"preview": "import { render } from 'inferno';\nimport { BrowserRouter } from 'inferno-router'\nimport { appFactory } from './App';\n\nde"
},
{
"path": "demo/inferno-router-demo/src/indexServer.tsx",
"chars": 321,
"preview": "import { hydrate } from 'inferno-hydrate';\nimport { BrowserRouter } from 'inferno-router'\nimport { appFactory } from './"
},
{
"path": "demo/inferno-router-demo/src/pages/AboutPage.scss",
"chars": 0,
"preview": ""
},
{
"path": "demo/inferno-router-demo/src/pages/AboutPage.tsx",
"chars": 894,
"preview": "import { Component } from 'inferno';\nimport PageTemplate from './PageTemplate';\nimport { useLoaderData } from 'inferno-r"
},
{
"path": "demo/inferno-router-demo/src/pages/ContentPage.scss",
"chars": 0,
"preview": ""
},
{
"path": "demo/inferno-router-demo/src/pages/ContentPage.tsx",
"chars": 950,
"preview": "import { Component } from 'inferno';\nimport PageTemplate from './PageTemplate';\nimport { useLoaderData } from 'inferno-r"
},
{
"path": "demo/inferno-router-demo/src/pages/PageTemplate.scss",
"chars": 677,
"preview": ":root {\n --rowGap: 2rem;\n}\n\n.page {\n display: flex;\n flex-flow: column nowrap;\n min-height: 100vh;\n\n h1, h2 {\n m"
},
{
"path": "demo/inferno-router-demo/src/pages/PageTemplate.tsx",
"chars": 596,
"preview": "import { Link } from 'inferno-router'\n\nimport './PageTemplate.scss'\n\nexport default function PageTemplate({ id = undefin"
},
{
"path": "demo/inferno-router-demo/src/pages/StartPage.scss",
"chars": 0,
"preview": ""
},
{
"path": "demo/inferno-router-demo/src/pages/StartPage.tsx",
"chars": 477,
"preview": "import { Component } from 'inferno'\nimport PageTemplate from './PageTemplate'\nimport './StartPage.scss'\n\ninterface IProp"
},
{
"path": "demo/inferno-router-demo/src/server.ts",
"chars": 4130,
"preview": "import * as koa from 'koa'; // koa@2\nimport * as logger from 'koa-logger';\nimport * as koaRouter from 'koa-router'; // k"
},
{
"path": "demo/inferno-router-demo/tsconfig.json",
"chars": 236,
"preview": "{\n \"compilerOptions\": {\n \"module\": \"commonjs\",\n \"target\": \"es2020\",\n \"moduleResolution\": \"Node\",\n \"jsx\": \"p"
},
{
"path": "docs/1kcomponents/app.js",
"chars": 5797,
"preview": "import { Component, render } from 'inferno';\n// import { startFPSMonitor, startMemMonitor } from 'perf-monitor';\nimport "
},
{
"path": "docs/1kcomponents/index.html",
"chars": 194,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\"/>\n <link rel=\"stylesheet\" href=\"style.css\">\n</head>\n<body>\n<d"
},
{
"path": "docs/1kcomponents/style.css",
"chars": 1011,
"preview": "html,\nbody {\n padding: 0;\n margin: 0;\n font-family: sans-serif;\n width: 100%;\n height: 100%;\n backgrou"
},
{
"path": "docs/animations/app.css",
"chars": 4277,
"preview": ":root {\n --infernoAnimationEnter: border-width .25s ease-out, padding .25s ease-out, height .25s ease-out, opacity .6s "
},
{
"path": "docs/animations/app.js",
"chars": 21343,
"preview": "import { Component, render } from 'inferno';\nimport { createElement } from 'inferno-create-element';\nimport { AnimatedCo"
},
{
"path": "docs/animations/index.html",
"chars": 720,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <link href=\"./app.css\" rel=\"stylesheet\" />\n <t"
},
{
"path": "docs/animations-demo/app.css",
"chars": 5125,
"preview": "/* Using CSS-vars for transitions so you can experiment easily */\n:root {\n --infernoAnimationEnter: all 1.2s ease-out;\n"
},
{
"path": "docs/animations-demo/app.js",
"chars": 2795,
"preview": "import { Component, render } from 'inferno';\nimport { createElement } from 'inferno-create-element';\nimport { AnimatedCo"
},
{
"path": "docs/animations-demo/index.html",
"chars": 332,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <link href=\"./app.css\" rel=\"stylesheet\" />\n <t"
},
{
"path": "docs/animations-demo-inner/app.css",
"chars": 3018,
"preview": "/* Using CSS-vars for transitions so you can experiment easily */\n:root {\n --infernoAnimationEnter: all 1.2s ease-out;\n"
},
{
"path": "docs/animations-demo-inner/app.js",
"chars": 2655,
"preview": "import { Component, render, createRef } from 'inferno';\nimport { createElement } from 'inferno-create-element';\nimport {"
},
{
"path": "docs/animations-demo-inner/index.html",
"chars": 351,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <link href=\"./app.css\" rel=\"stylesheet\" />\n <t"
},
{
"path": "docs/animations-global-demo/app.css",
"chars": 2304,
"preview": "/* Using CSS-vars for transitions so you can experiment easily */\n:root {\n --infernoAnimationEnter: all 0.3s ease-out;\n"
},
{
"path": "docs/animations-global-demo/app.js",
"chars": 2787,
"preview": "import { Component, render } from 'inferno';\nimport { createElement } from 'inferno-create-element';\nimport { componentD"
},
{
"path": "docs/animations-global-demo/index.html",
"chars": 345,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <link href=\"./app.css\" rel=\"stylesheet\" />\n <t"
},
{
"path": "docs/async-render/app.js",
"chars": 1260,
"preview": "import { Component, render } from 'inferno';\nimport { createElement } from 'inferno-create-element';\n\nlet renderCounter "
},
{
"path": "docs/async-render/index.html",
"chars": 222,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Async Render: Inferno</title>\n</head>\n<bod"
},
{
"path": "docs/build.js",
"chars": 3826,
"preview": "import {rollup} from \"rollup\";\nimport { existsSync, readdirSync, statSync } from \"fs\";\nimport commonjsPlugin from \"@roll"
},
{
"path": "docs/compat/app.js",
"chars": 7536,
"preview": "'use strict';\nimport { render, Component } from 'inferno-compat';\nimport { createElement } from 'inferno-create-element'"
},
{
"path": "docs/compat/index.html",
"chars": 679,
"preview": "<!doctype html>\n<html>\n<head>\n <title>Events test page</title>\n <style>\n .box {\n padding: 50px;\n"
},
{
"path": "docs/dbmonster/ENV.js",
"chars": 5292,
"preview": "var ENV = ENV || (function () {\n\t\"use strict\";\n\n\tvar first = true;\n\tvar counter = 0;\n\tvar data;\n\tvar _base;\n\t(_base = St"
},
{
"path": "docs/dbmonster/app.js",
"chars": 1847,
"preview": "// import { startFPSMonitor, startMemMonitor, initProfiler, startProfile, endProfile } from 'perf-monitor';\nimport { cre"
},
{
"path": "docs/dbmonster/index.html",
"chars": 258,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"UTF-8\">\n\t<title>Inferno</title>\n\t<link rel=\"stylesheet\" href=\"st"
},
{
"path": "docs/dbmonster/style.css",
"chars": 1880,
"preview": "body {color:#333;font-family:\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;margin:0;"
},
{
"path": "docs/dbmonster-mobx/app.js",
"chars": 11363,
"preview": "// import { startFPSMonitor, startMemMonitor, initProfiler, startProfile, endProfile } from 'perf-monitor';\nimport { cre"
},
{
"path": "docs/dbmonster-mobx/index.html",
"chars": 226,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n\t<meta charset=\"UTF-8\">\n\t<title>Inferno</title>\n\t<link rel=\"stylesheet\" href=\"s"
},
{
"path": "docs/dbmonster-mobx/style.css",
"chars": 1935,
"preview": "body {color:#333;font-family:\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;margin:0;"
},
{
"path": "docs/event-test/app.js",
"chars": 4841,
"preview": "import { createComponentVNode, linkEvent, render } from 'inferno';\n\nfunction hoistedEvent(e) {\n console.log('ok', e);\n}"
},
{
"path": "docs/event-test/index.html",
"chars": 259,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <link href=\"styles.css\" rel=\"stylesheet\" />\n <"
},
{
"path": "docs/event-test/styles.css",
"chars": 225,
"preview": ".test-result {\n margin: 5px 0 5px 19px;\n}\n\n.test-name {\n font-weight: 600;\n}\n\n.results {\n padding: 20px;\n}\n\n.te"
},
{
"path": "docs/form/app.js",
"chars": 3020,
"preview": "import { render, linkEvent } from 'inferno';\nimport { h } from 'inferno-hyperscript';\n\nlet firstName = 'Dominic';\nlet la"
},
{
"path": "docs/form/index.html",
"chars": 779,
"preview": "<!doctype html>\n<html>\n<head>\n\t<title>Inferno Form example</title>\n\t<style>\n\t\tbody {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t\t"
},
{
"path": "docs/index.html",
"chars": 8002,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Inferno Examples</title>\n <link rel=\"st"
},
{
"path": "docs/math-elements/app.js",
"chars": 1459,
"preview": "import { Component, render } from 'inferno';\n\nclass Demo extends Component {\n constructor(props, context) {\n super(p"
},
{
"path": "docs/math-elements/index.html",
"chars": 194,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\"/>\n <link rel=\"stylesheet\" href=\"style.css\">\n</head>\n<body>\n<d"
},
{
"path": "docs/math-elements/style.css",
"chars": 1011,
"preview": "html,\nbody {\n padding: 0;\n margin: 0;\n font-family: sans-serif;\n width: 100%;\n height: 100%;\n backgrou"
},
{
"path": "docs/styles.css",
"chars": 1124,
"preview": "html {\n line-height: 1.42857143;\n}\n\nbody {\n margin: 0;\n padding: 0 5vw;\n font-family: -apple-system,BlinkMacSy"
},
{
"path": "docs/svg/app.js",
"chars": 96335,
"preview": "import { render } from 'inferno';\nimport { createElement } from 'inferno-create-element';\n\nvar tiger = createElement(\n "
},
{
"path": "docs/svg/tiger.html",
"chars": 164,
"preview": "<!doctype html>\n<html>\n\t<head>\n\t\t<title>inferno svg tiger</title>\n\t</head>\n\t<body>\n\t\t<div id=\"app\"></div>\n\t\t<script src="
},
{
"path": "docs/uibench/app.js",
"chars": 5060,
"preview": "import { linkEvent, version, render } from 'inferno';\n\nuibench.init('Inferno', version);\n\nfunction shouldDataUpdate(last"
},
{
"path": "docs/uibench/custom-uibench.js",
"chars": 45896,
"preview": "(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :\n ty"
},
{
"path": "docs/uibench/index.html",
"chars": 399,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <link href=\"https://localvoid.github.io/uibench-b"
},
{
"path": "docs/uibench-inferno-compat/app.js",
"chars": 3776,
"preview": "import { createTextVNode, linkEvent, render, version } from 'inferno-compat';\n\n/*\n * Inferno + inferno-compat without an"
},
{
"path": "docs/uibench-inferno-compat/index.html",
"chars": 399,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <link href=\"https://localvoid.github.io/uibench-b"
},
{
"path": "docs/uibench-lifecycle/app.js",
"chars": 9177,
"preview": "import { version, Component, render, linkEvent } from 'inferno';\n\nuibench.init('Inferno [lifecycle overhead]', version);"
},
{
"path": "docs/uibench-lifecycle/index.html",
"chars": 409,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <link href=\"https://localvoid.github.io/uibench-b"
},
{
"path": "docs/uibench-normalization/app.js",
"chars": 3983,
"preview": "import { linkEvent, render, version } from 'inferno';\n\n/*\n * The purpose of this benchmark is to test performance regres"
},
{
"path": "docs/uibench-normalization/index.html",
"chars": 399,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <link href=\"https://localvoid.github.io/uibench-b"
},
{
"path": "docs/uibench-reactlike/app.js",
"chars": 4658,
"preview": "import { version, Component, render } from 'inferno';\n\nuibench.init('Inferno [same as react]', version);\n\nclass TableCel"
},
{
"path": "docs/uibench-reactlike/index.html",
"chars": 399,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <link href=\"https://localvoid.github.io/uibench-b"
},
{
"path": "documentation/v4-migration.md",
"chars": 2151,
"preview": "#### V4 Breaking changes:\n\n`inferno-component` is removed. Inferno.Component (ES6) Class has been moved to `inferno` pac"
},
{
"path": "documentation/v6-migration.md",
"chars": 4389,
"preview": "#### V6 Breaking changes:\n\n## Hydration, re-using SSR on client side\n\n> Shortly:\n>\n> `hydrate` moved to `inferno-hydrate"
},
{
"path": "documentation/v6-release.md",
"chars": 8047,
"preview": "# InfernoJS v6.0.0\n\n## Breaking changes\n\n- `hydrate` moved to `inferno-hydrate` package\n- Style properties use hyphen sy"
},
{
"path": "documentation/v9-migration.md",
"chars": 1145,
"preview": "# InfernoJS v9.0.0\n\n## Breaking changes\n\n`inferno-create-class` has been removed, use `createComponentVNode`, `createEle"
},
{
"path": "eslint.config.js",
"chars": 1503,
"preview": "import globals from 'globals';\nimport eslint from '@eslint/js';\nimport tseslint from 'typescript-eslint';\nimport importP"
},
{
"path": "fixtures/browser/gzip/gzippreprocessor.js",
"chars": 1137,
"preview": "const zlib = require('zlib');\n\nconst bytesToSize = (bytes) => {\n const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\n if "
},
{
"path": "fixtures/browser/karma.babel.conf.js",
"chars": 4272,
"preview": "const path = require('path');\nconst gzipPreprocessor = require('./gzip/gzippreprocessor');\nconst resolve = (pkg) => path"
},
{
"path": "fixtures/browser/karma.sauce.conf.js",
"chars": 4568,
"preview": "const path = require('path');\nconst gzipPreprocessor = require('./gzip/gzippreprocessor');\nconst resolve = (pkg) => path"
},
{
"path": "fixtures/browser/karma.swc.conf.js",
"chars": 4032,
"preview": "const path = require('path');\nconst gzipPreprocessor = require('./gzip/gzippreprocessor');\nconst resolve = (pkg) => path"
},
{
"path": "fixtures/browser/karma.ts.conf.js",
"chars": 4818,
"preview": "const path = require('path');\nconst gzipPreprocessor = require('./gzip/gzippreprocessor');\nconst transformInferno = requ"
},
{
"path": "fixtures/browser/package.json",
"chars": 1513,
"preview": "{\n \"name\": \"inferno-fixture-browser\",\n \"private\": true,\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js"
},
{
"path": "fixtures/browser/test.index.js",
"chars": 1457,
"preview": "// This file includes all test files including inferno-compat\nfunction requireAll(r) {\n r.keys().forEach(r);\n}\n\nwindow."
},
{
"path": "fixtures/browser/test.no-compat.index.js",
"chars": 1354,
"preview": "// This file includes all test files except inferno-compat\nfunction requireAll(r) {\n r.keys().forEach(r);\n}\n\nwindow.pro"
},
{
"path": "jest.config-nodom.js",
"chars": 324,
"preview": "import defaultSettings from \"./jest.config.js\";\n\nexport default {\n ...defaultSettings,\n setupFiles: [],\n testMatch: ["
},
{
"path": "jest.config.js",
"chars": 1413,
"preview": "export default {\n collectCoverageFrom: [\n \"packages/*/src/**/*.ts\",\n \"!**/*.ts.js\",\n \"!**/inferno-utils/**/*\","
},
{
"path": "lerna.json",
"chars": 251,
"preview": "{\n \"command\": {\n \"init\": {\n \"exact\": true\n },\n \"bootstrap\": {\n \"npmClientArgs\": [\"--no-package-lock\""
},
{
"path": "package.json",
"chars": 6029,
"preview": "{\n \"name\": \"inferno-build\",\n \"private\": true,\n \"license\": \"MIT\",\n \"author\": {\n \"name\": \"Dominic Gannaway\",\n \"e"
},
{
"path": "packages/inferno/README.md",
"chars": 45510,
"preview": "<p align=\"center\"><a href=\"https://infernojs.org/\" target=\"_blank\"><img width=\"150\" alt=\"Inferno\" title=\"Inferno\" src=\"h"
},
{
"path": "packages/inferno/__tests__/animationHooks.spec.tsx",
"chars": 47009,
"preview": "import { Component, type InfernoNode, render } from 'inferno';\n\ndescribe('animation hooks', () => {\n let container;\n\n "
},
{
"path": "packages/inferno/__tests__/animationHooksFunc.spec.tsx",
"chars": 41117,
"preview": "import {\n Component,\n type InfernoNode,\n type InfernoSingleNode,\n render,\n} from 'inferno';\n\ndescribe('animation hoo"
},
{
"path": "packages/inferno/__tests__/async-setstate.spec.tsx",
"chars": 12655,
"preview": "import { Component, render, rerender } from 'inferno';\n\ndescribe('Async set state issue', () => {\n let container;\n\n be"
},
{
"path": "packages/inferno/__tests__/blueprints.spec.tsx",
"chars": 5426,
"preview": "import { Component, render } from 'inferno';\n\ndescribe('Blueprints (JSX)', () => {\n let container;\n\n beforeEach(functi"
},
{
"path": "packages/inferno/__tests__/children.spec.tsx",
"chars": 61810,
"preview": "import { Component, type InfernoNode, type Key, render } from 'inferno';\n\ndescribe('Children - (JSX)', () => {\n let con"
},
{
"path": "packages/inferno/__tests__/clonenode.spec.tsx",
"chars": 577,
"preview": "import { render } from 'inferno';\n\ndescribe('CloneVNode use cases', () => {\n let container;\n\n beforeEach(function () {"
},
{
"path": "packages/inferno/__tests__/columnrender.spec.tsx",
"chars": 17383,
"preview": "import { Component, render } from 'inferno';\nimport { isNullOrUndef } from 'inferno-shared';\nimport Spy = jasmine.Spy;\n\n"
},
{
"path": "packages/inferno/__tests__/componentlifecycle.spec.tsx",
"chars": 7300,
"preview": "import { Component, render, rerender } from 'inferno';\n\ndescribe('Component lifecycle', () => {\n let container;\n\n befo"
},
{
"path": "packages/inferno/__tests__/components2.spec.tsx",
"chars": 9613,
"preview": "import { Component, render } from 'inferno';\n/* These must be in their own files for test to reproduce */\nimport { Paren"
},
{
"path": "packages/inferno/__tests__/createref.spec.tsx",
"chars": 9385,
"preview": "import {\n Component,\n createRef,\n type InfernoNode,\n type RefObject,\n render,\n rerender,\n} from 'inferno';\n\ndescri"
},
{
"path": "packages/inferno/__tests__/data/common-render/child.tsx",
"chars": 687,
"preview": "import { Component } from 'inferno';\n\ninterface ChildCommonProps {\n name: string;\n}\n\ninterface ChildCommonState {\n dat"
},
{
"path": "packages/inferno/__tests__/data/common-render/parentbase.tsx",
"chars": 264,
"preview": "import { Component } from 'inferno';\nimport { ChildCommon } from './child';\n\nexport class ParentBaseCommon extends Compo"
},
{
"path": "packages/inferno/__tests__/data/common-render/parentfirstcommon.tsx",
"chars": 180,
"preview": "import { ParentBaseCommon } from './parentbase';\n\nexport class ParentFirstCommon extends ParentBaseCommon {\n constructo"
},
{
"path": "packages/inferno/__tests__/data/common-render/parentsecondcommon.tsx",
"chars": 182,
"preview": "import { ParentBaseCommon } from './parentbase';\n\nexport class ParentSecondCommon extends ParentBaseCommon {\n construct"
},
{
"path": "packages/inferno/__tests__/defaultprops-typings.spec.tsx",
"chars": 848,
"preview": "import { Component, render } from 'inferno';\n\ndescribe('default prop typings', () => {\n let container;\n\n beforeEach(fu"
},
{
"path": "packages/inferno/__tests__/error.spec.tsx",
"chars": 20647,
"preview": "import { Component, type InfernoNode, render, rerender } from 'inferno';\n\ndescribe('Error recovery', () => {\n let conta"
},
{
"path": "packages/inferno/__tests__/forceUpdate.spec.tsx",
"chars": 4582,
"preview": "import { Component, render, rerender } from 'inferno';\n\ndescribe('forceUpdate', () => {\n let container;\n\n beforeEach(f"
},
{
"path": "packages/inferno/__tests__/formelements.spec.tsx",
"chars": 26577,
"preview": "import { Component, linkEvent, render } from 'inferno';\n\ndescribe('FormElements', () => {\n let container;\n\n beforeEach"
},
{
"path": "packages/inferno/__tests__/forward-ref.spec.tsx",
"chars": 6088,
"preview": "import {\n Component,\n createRef,\n forwardRef,\n type RefObject,\n render,\n} from 'inferno';\n\ndescribe('Forward Ref', "
},
{
"path": "packages/inferno/__tests__/fragments.spec.tsx",
"chars": 27736,
"preview": "import {\n Component,\n createFragment,\n createPortal,\n Fragment, InfernoKeyedNode,\n type InfernoNode,\n render,\n} fr"
},
{
"path": "packages/inferno/__tests__/hooks.spec.tsx",
"chars": 42269,
"preview": "import { Component, render } from 'inferno';\nimport Spy = jasmine.Spy;\n\ndescribe('Component lifecycle (JSX)', () => {\n "
},
{
"path": "packages/inferno/__tests__/input.spec.tsx",
"chars": 4685,
"preview": "import { render } from 'inferno';\nimport { triggerEvent } from 'inferno-utils';\n\ndescribe('Input type checkbox', () => {"
},
{
"path": "packages/inferno/__tests__/instancenull.spec.tsx",
"chars": 11554,
"preview": "import { Component, type InfernoNode, render, rerender } from 'inferno';\nimport { triggerEvent } from 'inferno-utils';\n\n"
},
{
"path": "packages/inferno/__tests__/issue-1369.spec.tsx",
"chars": 5117,
"preview": "import { Component, render } from 'inferno';\n\ndescribe('static tree as child nodes', () => {\n let container;\n\n beforeE"
},
{
"path": "packages/inferno/__tests__/lifecycle.spec.tsx",
"chars": 13092,
"preview": "import { Component, render, rerender } from 'inferno';\n\ndescribe('ComponentDidUpdate', () => {\n let container;\n\n befor"
},
{
"path": "packages/inferno/__tests__/link.spec.tsx",
"chars": 1755,
"preview": "import { render } from 'inferno';\n\ndescribe('Links', () => {\n let container;\n\n beforeEach(function () {\n container "
},
{
"path": "packages/inferno/__tests__/linkEvent.spec.tsx",
"chars": 6925,
"preview": "import { Component, type InfernoNode, linkEvent, render } from 'inferno';\n\ndescribe('linkEvent', () => {\n let container"
},
{
"path": "packages/inferno/__tests__/mixedFormElements.spec.tsx",
"chars": 15631,
"preview": "import { render } from 'inferno';\n\ndescribe('HTML Form Elements', () => {\n let container;\n\n beforeEach(function () {\n "
},
{
"path": "packages/inferno/__tests__/newlifecycle.spec.tsx",
"chars": 53936,
"preview": "import { Component, render, rerender } from 'inferno';\n\ndescribe('Lifecycle methods', () => {\n let container;\n\n before"
},
{
"path": "packages/inferno/__tests__/patching-jsx.spec.tsx",
"chars": 3816,
"preview": "import { Component, type InfernoNode, render, rerender } from 'inferno';\n\ndescribe('patching routine (JSX)', () => {\n l"
},
{
"path": "packages/inferno/__tests__/patching.spec.tsx",
"chars": 23866,
"preview": "import {\n Component,\n createTextVNode,\n createVNode,\n linkEvent,\n render,\n} from 'inferno';\nimport { ChildFlags, VN"
},
{
"path": "packages/inferno/__tests__/portal.spec.tsx",
"chars": 47834,
"preview": "import {\n Component,\n createPortal,\n InfernoNode,\n render as _render,\n} from 'inferno';\nimport { VNodeFlags } from '"
},
{
"path": "packages/inferno/__tests__/rendering.spec.tsx",
"chars": 10278,
"preview": "import {\n Component,\n createTextVNode,\n createVNode,\n render,\n rerender,\n} from 'inferno';\nimport { ChildFlags, VNo"
},
{
"path": "packages/inferno/__tests__/select.spec.tsx",
"chars": 3132,
"preview": "import { render } from 'inferno';\nimport { triggerEvent } from 'inferno-utils';\n\ndescribe('Select selectedIndex', () => "
},
{
"path": "packages/inferno/__tests__/select2.spec.tsx",
"chars": 22667,
"preview": "import { Component, type InfernoNode, render, Fragment } from 'inferno';\n\ndescribe('Select / select multiple (JSX)', () "
},
{
"path": "packages/inferno/__tests__/setState.spec.tsx",
"chars": 26624,
"preview": "import { Component, type DragEvent, render, rerender } from 'inferno';\n\ndescribe('setState', () => {\n let container;\n\n "
},
{
"path": "packages/inferno/__tests__/singlepatches.spec.tsx",
"chars": 25709,
"preview": "import { Component, Fragment, render } from 'inferno';\n\ndescribe('All single patch variations', () => {\n let templateRe"
},
{
"path": "packages/inferno/__tests__/state.spec.tsx",
"chars": 3250,
"preview": "import { Component, createComponentVNode, render, rerender } from 'inferno';\nimport { VNodeFlags } from 'inferno-vnode-f"
},
{
"path": "packages/inferno/__tests__/styles.spec.tsx",
"chars": 5831,
"preview": "import { render } from 'inferno';\nimport { type PropertiesHyphen } from 'csstype';\n\nfunction styleNode(style) {\n return"
},
{
"path": "packages/inferno/__tests__/svgXlink.spec.tsx",
"chars": 3344,
"preview": "import { render } from 'inferno';\n\ndescribe('createTree - SVG (JSX)', () => {\n let container;\n\n beforeEach(function ()"
},
{
"path": "packages/inferno/__tests__/topcontext.spec.tsx",
"chars": 2813,
"preview": "import { Component, createFragment, Fragment, render } from 'inferno';\nimport { ChildFlags } from 'inferno-vnode-flags';"
},
{
"path": "packages/inferno/__tests__/transition.spec.tsx",
"chars": 1860,
"preview": "import { render } from 'inferno';\n\ndescribe('transition events', () => {\n let container;\n\n function forceReflow() {\n "
},
{
"path": "packages/inferno/__tests__/types.children.spec.tsx",
"chars": 7824,
"preview": "import { Component, type InfernoNode, type InfernoSingleNode } from 'inferno';\n\ndescribe('children types', () => {\n it("
},
{
"path": "packages/inferno/__tests__/types.spec.tsx",
"chars": 7539,
"preview": "import {\n Component,\n type ComponentType,\n createComponentVNode,\n createRef,\n createVNode,\n type InfernoNode,\n li"
},
{
"path": "packages/inferno/__tests__/validations.spec.tsx",
"chars": 13676,
"preview": "import { createTextVNode, render } from 'inferno';\nimport { ChildFlags } from 'inferno-vnode-flags';\n\ndescribe('Developm"
},
{
"path": "packages/inferno/index.cjs",
"chars": 171,
"preview": "'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./dist/index.min.cjs');\n} else {"
},
{
"path": "packages/inferno/index.mjs",
"chars": 203,
"preview": "export * from './dist/index.mjs';\n\nif (process.env.NODE_ENV !== 'production') {\n console.warn(\n 'You are running pro"
},
{
"path": "packages/inferno/package.json",
"chars": 1860,
"preview": "{\n \"name\": \"inferno\",\n \"version\": \"9.0.11\",\n \"license\": \"MIT\",\n \"type\": \"module\",\n \"description\": \"An extremely fas"
},
{
"path": "packages/inferno/src/DOM/constants.ts",
"chars": 418,
"preview": "export const xlinkNS = 'http://www.w3.org/1999/xlink';\nexport const xmlNS = 'http://www.w3.org/XML/1998/namespace';\n\nexp"
},
{
"path": "packages/inferno/src/DOM/events/attachEvent.ts",
"chars": 488,
"preview": "import { isFunction } from 'inferno-shared';\n\nexport function attachEvent(dom, eventName, handler): void {\n const previ"
},
{
"path": "packages/inferno/src/DOM/events/delegation.ts",
"chars": 4934,
"preview": "import type { LinkedEvent, SemiSyntheticEvent } from './../../core/types';\nimport { isFunction, isNull, isNullOrUndef } "
},
{
"path": "packages/inferno/src/DOM/events/linkEvent.ts",
"chars": 860,
"preview": "import type { LinkedEvent } from '../../core/types';\nimport { isFunction, isNull } from 'inferno-shared';\n\n/**\n * Links "
},
{
"path": "packages/inferno/src/DOM/mounting.ts",
"chars": 10617,
"preview": "import type { VNode, ContextObject } from '../core/types';\nimport {\n isFunction,\n isNull,\n isNullOrUndef,\n isString,"
},
{
"path": "packages/inferno/src/DOM/patching.ts",
"chars": 30721,
"preview": "import type { ContextObject, VNode } from '../core/types';\nimport { isFunction, isInvalid, isNull, isNullOrUndef } from "
},
{
"path": "packages/inferno/src/DOM/props.ts",
"chars": 6350,
"preview": "import type { VNode } from '../core/types';\nimport { namespaces } from './constants';\nimport { isNull, isNullOrUndef, is"
},
{
"path": "packages/inferno/src/DOM/rendering.ts",
"chars": 3688,
"preview": "import type {\n InfernoNode,\n VNode,\n ContextObject,\n ParentDOM,\n} from '../core/types';\nimport {\n isFunction,\n isI"
},
{
"path": "packages/inferno/src/DOM/unmounting.ts",
"chars": 5187,
"preview": "import type { VNode } from '../core/types';\nimport { isFunction, isNull, isNullOrUndef } from 'inferno-shared';\nimport {"
},
{
"path": "packages/inferno/src/DOM/utils/common.ts",
"chars": 9477,
"preview": "import type {\n Inferno,\n InfernoNode,\n LinkedEvent,\n VNode,\n} from './../../core/types';\nimport { isFunction, isNull"
},
{
"path": "packages/inferno/src/DOM/utils/componentUtil.ts",
"chars": 3649,
"preview": "import type { ContextObject, InfernoNode, VNode } from './../../core/types';\nimport type { Component } from './../../cor"
},
{
"path": "packages/inferno/src/DOM/utils/innerHTML.ts",
"chars": 196,
"preview": "export function isSameInnerHTML(dom: Element, innerHTML: string): boolean {\n const temp = document.createElement('i');\n"
},
{
"path": "packages/inferno/src/DOM/wrappers/InputWrapper.ts",
"chars": 1772,
"preview": "import { isNullOrUndef } from 'inferno-shared';\nimport { createWrappedFunction } from './wrapper';\nimport { attachEvent "
},
{
"path": "packages/inferno/src/DOM/wrappers/SelectWrapper.ts",
"chars": 2643,
"preview": "import { isArray, isNullOrUndef, isNumber } from 'inferno-shared';\nimport { ChildFlags, VNodeFlags } from 'inferno-vnode"
},
{
"path": "packages/inferno/src/DOM/wrappers/TextareaWrapper.ts",
"chars": 1178,
"preview": "import { isFunction, isNullOrUndef } from 'inferno-shared';\nimport { createWrappedFunction } from './wrapper';\nimport { "
},
{
"path": "packages/inferno/src/DOM/wrappers/processElement.ts",
"chars": 1513,
"preview": "import type { VNode } from '../../core/types';\nimport { isNullOrUndef } from 'inferno-shared';\nimport { VNodeFlags } fro"
},
{
"path": "packages/inferno/src/DOM/wrappers/wrapper.ts",
"chars": 1680,
"preview": "import { isFunction, isNullOrUndef, isString } from 'inferno-shared';\nimport { EMPTY_OBJ } from '../utils/common';\nimpor"
},
{
"path": "packages/inferno/src/core/component.ts",
"chars": 6898,
"preview": "import type { Inferno, InfernoNode, IComponent, VNode } from './types';\nimport { isFunction, isNullOrUndef, throwError }"
},
{
"path": "packages/inferno/src/core/implementation.ts",
"chars": 11877,
"preview": "import type {\n ForwardRef,\n InfernoNode,\n ParentDOM,\n Ref,\n Refs,\n VNode,\n} from './types';\nimport { ChildFlags, V"
},
{
"path": "packages/inferno/src/core/nativetypes.ts",
"chars": 278,
"preview": "// These types need to be in another file to not conflict with Inferno event type names\nexport type NativeClipboardEvent"
},
{
"path": "packages/inferno/src/core/refs.ts",
"chars": 1252,
"preview": "import { isFunction, isNullOrUndef, warning } from 'inferno-shared';\nimport { safeCall1 } from '../DOM/utils/common';\nim"
},
{
"path": "packages/inferno/src/core/types.ts",
"chars": 114832,
"preview": "/* eslint-disable */\nimport type {\n NativeClipboardEvent,\n NativeCompositionEvent,\n NativeDragEvent,\n NativeFocusEve"
},
{
"path": "packages/inferno/src/core/validate.ts",
"chars": 9585,
"preview": "import type { VNode } from './types';\nimport {\n isArray,\n isInvalid,\n isNullOrUndef,\n isNumber,\n isStringOrNumber,\n"
},
{
"path": "packages/inferno/src/index.ts",
"chars": 2474,
"preview": "import { warning } from 'inferno-shared';\nimport {\n createComponentVNode,\n createFragment,\n createPortal,\n createTex"
},
{
"path": "packages/inferno-animation/__tests__/animatedAllComponent.spec.tsx",
"chars": 9665,
"preview": "import { type InfernoNode, render } from 'inferno';\nimport { renderToString } from 'inferno-server';\nimport {\n Animated"
},
{
"path": "packages/inferno-animation/__tests__/animatedComponent.spec.tsx",
"chars": 9370,
"preview": "import { type InfernoNode, render } from 'inferno';\nimport { renderToString } from 'inferno-server';\nimport {\n Animated"
},
{
"path": "packages/inferno-animation/__tests__/animatedComponentTypings.tsx",
"chars": 778,
"preview": "import { type InfernoNode, render } from 'inferno';\nimport { AnimatedComponent } from 'inferno-animation';\n\ndescribe('in"
},
{
"path": "packages/inferno-animation/__tests__/animatedMoveComponent.spec.tsx",
"chars": 9159,
"preview": "import { render, type InfernoNode } from 'inferno';\nimport { renderToString } from 'inferno-server';\nimport { AnimatedMo"
},
{
"path": "packages/inferno-animation/__tests__/index.spec.tsx",
"chars": 856,
"preview": "import { AnimatedComponent, utils } from 'inferno-animation';\n\ndescribe('inferno-animation public API', () => {\n it('sh"
},
{
"path": "packages/inferno-animation/__tests__/utils.spec.tsx",
"chars": 3603,
"preview": "import {\n addClassName,\n clearDimensions,\n forceReflow,\n getDimensions,\n registerTransitionListener,\n removeClassN"
},
{
"path": "packages/inferno-animation/index.cjs",
"chars": 171,
"preview": "'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./dist/index.min.cjs');\n} else {"
},
{
"path": "packages/inferno-animation/index.css",
"chars": 956,
"preview": ":root {\n --infernoAnimationEnter: all 0.3s ease-out;\n --infernoAnimationLeave: all 0.2s ease-out;\n}\n\n.inferno-animatio"
},
{
"path": "packages/inferno-animation/package.json",
"chars": 1624,
"preview": "{\n \"name\": \"inferno-animation\",\n \"version\": \"9.0.11\",\n \"license\": \"MIT\",\n \"type\": \"module\",\n \"description\": \"Animat"
},
{
"path": "packages/inferno-animation/readme.md",
"chars": 5312,
"preview": "# inferno-animation\n\nHelper components and utils to add smooth CSS-animations to your Inferno apps. Extend from `<Animat"
},
{
"path": "packages/inferno-animation/src/AnimatedAllComponent.ts",
"chars": 848,
"preview": "import { Component, type InfernoNode, type ParentDOM } from 'inferno';\nimport {\n type AnimationClass,\n componentDidApp"
},
{
"path": "packages/inferno-animation/src/AnimatedComponent.ts",
"chars": 614,
"preview": "import { Component, type InfernoNode } from 'inferno';\nimport {\n type AnimationClass,\n componentDidAppear,\n component"
},
{
"path": "packages/inferno-animation/src/AnimatedMoveComponent.ts",
"chars": 516,
"preview": "import { Component, type InfernoNode } from 'inferno';\nimport { type AnimationClass, componentWillMove } from './animati"
},
{
"path": "packages/inferno-animation/src/animationCoordinator.ts",
"chars": 6675,
"preview": "import { forceReflow } from './utils';\n\n// This is only used for development and should be set to false for release\n// e"
},
{
"path": "packages/inferno-animation/src/animations.ts",
"chars": 10370,
"preview": "import {\n addClassName,\n clearDimensions,\n clearTransform,\n decrementMoveCbCount,\n forceReflow,\n getDimensions,\n "
},
{
"path": "packages/inferno-animation/src/index.ts",
"chars": 721,
"preview": "import {\n addClassName,\n clearDimensions,\n forceReflow,\n getDimensions,\n registerTransitionListener,\n removeClassN"
},
{
"path": "packages/inferno-animation/src/utils.ts",
"chars": 8426,
"preview": "import { isFunction } from 'inferno-shared';\n\nexport interface Dimensions {\n height: number;\n width: number;\n x: numb"
},
{
"path": "packages/inferno-clone-vnode/README.md",
"chars": 541,
"preview": "# Inferno-clone-vnode\n\nThis package can be used to clone Inferno virtual nodes. This package can also be aliased to `Rea"
},
{
"path": "packages/inferno-clone-vnode/__tests__/cloneVNode.spec.tsx",
"chars": 20887,
"preview": "import { cloneVNode } from 'inferno-clone-vnode';\nimport {\n Component,\n createTextVNode,\n Fragment,\n InfernoNode,\n "
},
{
"path": "packages/inferno-clone-vnode/index.cjs",
"chars": 171,
"preview": "'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./dist/index.min.cjs');\n} else {"
},
{
"path": "packages/inferno-clone-vnode/package.json",
"chars": 1400,
"preview": "{\n \"name\": \"inferno-clone-vnode\",\n \"version\": \"9.0.11\",\n \"license\": \"MIT\",\n \"type\": \"module\",\n \"description\": \"prov"
},
{
"path": "packages/inferno-clone-vnode/src/index.ts",
"chars": 2305,
"preview": "import {\n createComponentVNode,\n createFragment,\n createTextVNode,\n createVNode,\n EMPTY_OBJ,\n normalizeProps,\n ty"
},
{
"path": "packages/inferno-compat/README.md",
"chars": 4047,
"preview": "# inferno-compat\n\nThis module is a compatibility layer that makes React-based modules work with Inferno, without any cod"
},
{
"path": "packages/inferno-compat/__tests__/ReactChildren.spec.jsx",
"chars": 8266,
"preview": "/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n"
},
{
"path": "packages/inferno-compat/__tests__/ReactComponent.spec.jsx",
"chars": 4083,
"preview": "/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n"
},
{
"path": "packages/inferno-compat/__tests__/ReactComponentLifeCycle.spec.jsx",
"chars": 9327,
"preview": "/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n"
}
]
// ... and 241 more files (download for full content)
About this extraction
This page contains the full source code of the infernojs/inferno GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 441 files (3.0 MB), approximately 818.4k tokens, and a symbol index with 4474 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.