15 |
16 |
17 | );
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/test/data/separate-render/parentsecondseparate.tsx:
--------------------------------------------------------------------------------
1 | import Component from 'inferno-component';
2 | import { ChildSeparate } from './childseparate';
3 |
4 | export class ParentSecondSeparate extends Component
15 |
16 |
17 | );
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/browser/jsfiddle-integration-babel.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | var tag = document.querySelector(
3 | 'script[type="application/javascript;version=1.7"]'
4 | );
5 | if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
6 | alert('Bad JSFiddle configuration, please fork the original Inferno JSFiddle');
7 | }
8 | tag.setAttribute('type', 'text/babel');
9 | tag.textContent = tag.textContent.replace(/^\/\/ Inferno package with helpers to create Inferno elements
3 |
4 | ## Install
5 |
6 | ```
7 | npm install inferno-create-element
8 | ```
9 |
10 | ## Usage
11 |
12 | ```js
13 | import createElement from 'inferno-create-element';
14 | import Inferno from 'inferno';
15 |
16 | Inferno.render(
17 | createElement('div', { className: 'test' }, "I'm a child!"),
18 | document.getElementById("app")
19 | );
20 | ```
21 |
--------------------------------------------------------------------------------
/packages/inferno-component/README.md:
--------------------------------------------------------------------------------
1 | # inferno-component
2 | > Inferno package for working with ES2015 stateful components
3 |
4 | ## Install
5 |
6 | ```
7 | npm install inferno-component
8 | ```
9 |
10 | ## Contents
11 |
12 | * Component
13 |
14 | ## Usage
15 |
16 | ```js
17 | import Inferno from 'inferno';
18 | import Component from 'inferno-component';
19 |
20 | class MyComponent extends Component {
21 | render() {
22 | return ;
23 | }
24 | }
25 | ```
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/packages/inferno-compat/src/isValidElement.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'inferno';
2 | import { isNull, isObject } from 'inferno-shared';
3 | import VNodeFlags from 'inferno-vnode-flags';
4 |
5 | export default function isValidElement(obj: VNode): boolean {
6 | const isNotANullObject = isObject(obj) && isNull(obj) === false;
7 | if (isNotANullObject === false) {
8 | return false;
9 | }
10 | const flags = obj.flags;
11 |
12 | return (flags & (VNodeFlags.Component | VNodeFlags.Element)) > 0;
13 | }
14 |
--------------------------------------------------------------------------------
/benchmarks/dbmonster/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
25 | {this.props.name}
26 | {this.state.data}
27 |
28 | );
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/test/lint/letter-only-props.js:
--------------------------------------------------------------------------------
1 | // for making sure obj properties are letters only
2 | module.exports = {
3 | parser: 'typescript-eslint-parser',
4 | parserOptions: {
5 | sourceType: 'module'
6 | },
7 | ext: [ '.ts', '.js', '.jsx', '.tsx' ],
8 | ecmaVersion: 2017,
9 | globals: {
10 | document: true,
11 | window: true,
12 | require: true
13 | },
14 | ecmaFeatures: {
15 | jsx: true,
16 | modules: true,
17 | es6: true
18 | },
19 | env: {
20 | browser: true,
21 | es6: true,
22 | node: true
23 | },
24 | rules: {
25 | 'id-match': [ 'error', '^([A-Za-z]+)*$' ]
26 | }
27 | };
28 |
--------------------------------------------------------------------------------
/packages/inferno-create-element/__tests__/data/common-render/child.jsx:
--------------------------------------------------------------------------------
1 | import Component from 'inferno-component';
2 |
3 | export class ChildCommon extends Component {
4 | constructor(props) {
5 | super(props);
6 |
7 | this._update = this._update.bind(this);
8 | }
9 |
10 | _update() {
11 | this.setState({
12 | data: 'bar'
13 | });
14 | }
15 |
16 | componentWillMount() {
17 | this.setState({
18 | data: 'foo'
19 | });
20 | }
21 |
22 | render() {
23 | return (
24 |
25 | {this.props.name}
26 | {this.state.data}
27 |
28 | );
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/inferno-server/README.md:
--------------------------------------------------------------------------------
1 | # inferno-server
2 | > Inferno package for working with the server
3 |
4 | This package serves as the entry point of the Server-related rendering paths. It is intended to be paired with the isomorphic Inferno, which will be shipped as inferno to npm.
5 |
6 | ## Install
7 |
8 | ```
9 | npm install inferno inferno-server
10 | ```
11 |
12 | ## Contents
13 |
14 | * renderToString
15 |
16 | ## Usage
17 |
18 | ```js
19 | import Inferno from 'inferno';
20 | import InfernoServer from 'inferno-server';
21 |
22 | InfernoServer.renderToString(Hello world
, container);
23 | ```
24 |
25 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | *Before* submitting a PR please:
2 | - Include tests for the functionality you are adding! See CONTRIBUTING.md for details how to run tests.
3 | - Make sure you have based your branch off the [dev branch](https://github.com/infernojs/inferno/tree/dev).
4 | - Submit your PR against the [dev branch](https://github.com/infernojs/inferno/tree/dev).
5 | - Run `npm run build` and check that the build succeeds.
6 | - Ensure that the PR hasn't been submitted before.
7 |
8 | ---
9 |
10 | ## PR Template
11 |
12 | **Objective**
13 |
14 | This PR...
15 |
16 | **Closes Issue**
17 |
18 | It closes Issue #...
19 |
--------------------------------------------------------------------------------
/fixtures/packaging/requirejs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/inferno-mobx/src/index.ts:
--------------------------------------------------------------------------------
1 | import connect from './connect';
2 | import EventEmitter from './EventEmitter';
3 | import inject from './inject';
4 | import { componentByNodeRegistery, renderReporter, trackComponents } from './makeReactive';
5 | import Provider from './Provider';
6 |
7 | export default {
8 | EventEmitter,
9 | Provider,
10 | componentByNodeRegistery,
11 | connect,
12 | inject,
13 | observer: connect,
14 | renderReporter,
15 | trackComponents
16 | };
17 |
18 | export {
19 | EventEmitter,
20 | Provider,
21 | componentByNodeRegistery,
22 | connect as observer,
23 | connect,
24 | inject,
25 | renderReporter,
26 | trackComponents
27 | };
28 |
--------------------------------------------------------------------------------
/examples/playground/playground.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | let t = Inferno.createElement;
3 |
4 | Inferno.render(t('div', null,
5 | t('span', { className: 'foo' }, 'This is a span!')
6 | ), document.getElementById('app'));
7 |
8 | Inferno.render(t('header', null,
9 | t('h1', { className: 'foo' }, 'This is a h1!')
10 | ), document.getElementById('app'));
11 |
12 | Inferno.render(t('header', null,
13 | t('span', { className: 'foo' }, 'This is a span again!')
14 | ), document.getElementById('app'));
15 |
16 | Inferno.render(t('header', null,
17 | 1, t('span', { className: 'foo' }, 'This is a span again!'), 2, 3
18 | ), document.getElementById('app'));
19 |
20 | })();
21 |
--------------------------------------------------------------------------------
/fixtures/packaging/browserify/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-test",
3 | "private": true,
4 | "dependencies": {
5 | "browserify": "^13.3.0",
6 | "cross-env": "^3.2.4"
7 | },
8 | "scripts": {
9 | "dev": "rm -f dev.js && cross-env NODE_ENV=production && cross-env NODE_PATH=../../../packages/ browserify ./input.js -t [ envify --NODE_ENV development ] > dev.js",
10 | "prod": "rm -f prod.js && cross-env NODE_ENV=production && cross-env NODE_PATH=../../../packages/ browserify ./input.js -t [ envify --NODE_ENV production ] > prod.js",
11 | "build": "npm run dev && npm run prod"
12 | },
13 | "devDependencies": {
14 | "envify": "^4.0.0"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/inferno-mobx/src/EventEmitter.ts:
--------------------------------------------------------------------------------
1 | export default class EventEmitter {
2 |
3 | private listeners: Function[] = [];
4 |
5 | public on(cb: Function) {
6 | this.listeners.push(cb);
7 | return () => {
8 | const index = this.listeners.indexOf(cb);
9 | if (index !== -1) {
10 | this.listeners.splice(index, 1);
11 | }
12 | };
13 | }
14 |
15 | public emit(data: any) {
16 | const listeners = this.listeners;
17 | for (let i = 0, len = listeners.length; i < len; i++) {
18 | listeners[ i ](data);
19 | }
20 | }
21 |
22 | public getTotalListeners(): number {
23 | return this.listeners.length;
24 | }
25 |
26 | public clearListeners(): void {
27 | this.listeners = [];
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/benchmarks/async-render/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | {[ a, a, a, a ]}
, container);
22 |
23 | expect(container.innerHTML).to.eql('foobarfoobarfoobarfoobar
');
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/packages/inferno-create-class/README.md:
--------------------------------------------------------------------------------
1 | # inferno-create-class
2 | > Provides a helper to create Inferno Components without needing ES2015
3 |
4 | Note: this is similar to `React.createClass` in that methods are out-bound. However, this module does not support mixins.
5 |
6 | ## Install
7 |
8 | ```
9 | npm install inferno-create-class
10 | ```
11 |
12 | ## Usage
13 |
14 | ```js
15 | var createClass = require('inferno-create-class');
16 | var Inferno = require('inferno');
17 | var InfernoDOM = require('inferno-dom');
18 |
19 | var MyComponent = createClass({
20 | displayName: 'MyComponent',
21 | render: function() {
22 | return Hell world!
;
23 | }
24 | });
25 |
26 | InfernoDOM.render(Virtual DOM Benchmark: InfernoJS
10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/inferno-router/src/index.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'inferno';
2 | import createRoutes, { IPlainRouteConfig } from './createRoutes';
3 | import IndexLink from './IndexLink';
4 | import IndexRoute from './IndexRoute';
5 | import Link from './Link';
6 | import match from './match';
7 | import Redirect from './Redirect';
8 | import Route from './Route';
9 | import Router from './Router';
10 | import RouterContext from './RouterContext';
11 |
12 | export {
13 | IndexLink,
14 | Redirect as IndexRedirect,
15 | IndexRoute,
16 | IPlainRouteConfig,
17 | Link,
18 | Redirect,
19 | Route,
20 | Router,
21 | RouterContext,
22 | VNode,
23 | createRoutes,
24 | match
25 | };
26 |
27 | export default {
28 | IndexLink,
29 | IndexRedirect: Redirect,
30 | IndexRoute,
31 | Link,
32 | Redirect,
33 | Route,
34 | Router,
35 | RouterContext,
36 | createRoutes,
37 | match
38 | };
39 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 |
3 | node_js:
4 | - '6'
5 |
6 | notifications:
7 | email:
8 | on_success: change
9 | on_failure: always
10 |
11 | # Use container-based Travis infrastructure.
12 | sudo: required
13 | dist: trusty
14 |
15 | env:
16 | - CXX=g++-4.8
17 | addons:
18 | firefox: "latest"
19 | apt:
20 | sources:
21 | - ubuntu-toolchain-r-test
22 | packages:
23 | - g++-4.8
24 |
25 | addons:
26 | at:
27 | sources:
28 | - google-chrome
29 | packages:
30 | - google-chrome-stable
31 | - google-chrome-beta
32 |
33 | before_install:
34 | - "nvm use $TRAVIS_NODE_VERSION"
35 | # Repo for newer Node.js versions
36 | - curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
37 |
38 | before_script:
39 | - "export DISPLAY=:99.0"
40 | - "sh -e /etc/init.d/xvfb start"
41 |
42 | after_script:
43 | - npm run test:publish
44 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "tslint:recommended",
3 | "rules": {
4 | "forin": false,
5 | "indent": [ true, "tabs" ],
6 | "interface-name": false,
7 | "ban-types": true,
8 | "max-classes-per-file": true,
9 | "max-line-length": false,
10 | "member-access": true,
11 | "member-ordering": false,
12 | "no-bitwise": false,
13 | "no-conditional-assignment": false,
14 | "no-debugger": false,
15 | "no-empty": true,
16 | "no-namespace": false,
17 | "no-unused-expression": true,
18 | "object-literal-sort-keys": true,
19 | "one-variable-per-declaration": [true, "ignore-for-loop"],
20 | "only-arrow-functions": [false],
21 | "ordered-imports": true,
22 | "prefer-const": true,
23 | "prefer-for-of": false,
24 | "quotemark": [ true, "single", "jsx-double" ],
25 | "trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
26 | "variable-name": false
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/packages/inferno-compat/lib/ReactTransitionEvents.js:
--------------------------------------------------------------------------------
1 | var supported, prefix;
2 |
3 | if (typeof document !== 'undefined' && document.createElement) {
4 | var d = document.createElement('div');
5 | for (var i in d.style) {
6 | var m = i.match(/^(moz|webkit|ms|)(transition|animation)$/i);
7 | if (m) supported = true;
8 | if (m && m[ 1 ]) prefix = m[ 1 ];
9 | }
10 | }
11 |
12 | function each(node, fn, listener, prefix) {
13 | node[ fn ]((prefix || '') + 'TransitionEnd', listener);
14 | node[ fn ]((prefix || '') + 'AnimationEnd', listener);
15 | if (prefix) each(node, fn, listener);
16 | }
17 |
18 | module.exports = {
19 | addEndEventListener(el, listener) {
20 | if (supported) each(el, 'addEventListener', listener, prefix);
21 | else setTimeout(listener, 0);
22 | },
23 | removeEndEventListener(el, listener) {
24 | if (supported) each(el, 'removeEventListener', listener, prefix);
25 | }
26 | };
27 |
--------------------------------------------------------------------------------
/bin/link:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | const { ensureSymlinkSync } = require('fs-extra');
4 | const { resolve, join } = require('path');
5 | const rimraf = require('rimraf');
6 |
7 | const PROJECT_FOLDER = resolve(__dirname, '..');
8 | // TODO: Remove this once new inferno-vnode-flags is published
9 | rimraf.sync(join(PROJECT_FOLDER, 'node_modules', 'inferno'));
10 | rimraf.sync(join(PROJECT_FOLDER, 'node_modules', 'inferno-vnode-flags'));
11 |
12 | const cwd = process.cwd();
13 |
14 | ensureSymlinkSync(join(PROJECT_FOLDER, 'tsconfig.json'), join(cwd, 'tsconfig.json'));
15 | ensureSymlinkSync(join(PROJECT_FOLDER, '.npmignore'), join(cwd, '.npmignore'));
16 |
17 | ensureSymlinkSync(join(PROJECT_FOLDER, 'packages', 'inferno-vnode-flags'), join(PROJECT_FOLDER, 'node_modules', 'inferno-vnode-flags'));
18 | // ensureSymlinkSync(join(PROJECT_FOLDER, 'packages', 'inferno'), join(PROJECT_FOLDER, 'node_modules', 'inferno'));
19 |
--------------------------------------------------------------------------------
/packages/inferno-create-element/__tests__/normalizeProps.spec.jsx:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import { internal_normalize as normalize } from 'inferno';
3 |
4 | describe('normalizeProps', () => {
5 | it('should delete ref from props', () => {
6 | const vNode = {
7 | children: null,
8 | dom: null,
9 | events: null,
10 | flags: 0,
11 | key: null,
12 | props: {
13 | ref: () => {
14 | }
15 | },
16 | ref: null,
17 | type: null
18 | };
19 |
20 | normalize(vNode);
21 |
22 | expect(vNode.props).to.not.have.property('ref');
23 | });
24 |
25 | it('should delete key from props', () => {
26 | const vNode = {
27 | children: null,
28 | dom: null,
29 | events: null,
30 | flags: 0,
31 | key: null,
32 | props: { key: 'key' },
33 | ref: null,
34 | type: null
35 | };
36 |
37 | normalize(vNode);
38 |
39 | expect(vNode.props).to.not.have.property('key');
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/packages/inferno-server/src/utils.ts:
--------------------------------------------------------------------------------
1 | const ecapeCharacters = {
2 | '"': '"',
3 | '&': '&',
4 | '\'': ''',
5 | '<': '<',
6 | '>': '>'
7 | };
8 | const escapeChar = (char) => ecapeCharacters[ char ] || char;
9 |
10 | export function escapeText(text) {
11 | return String(text).replace(/[<>"'&]/g, escapeChar);
12 | }
13 |
14 | const uppercasePattern = /[A-Z]/g;
15 | const msPattern = /^ms-/;
16 |
17 | export function toHyphenCase(str) {
18 | return str.replace(uppercasePattern, '-$&').toLowerCase().replace(msPattern, '-ms-');
19 | }
20 |
21 | const voidElements = {
22 | area: true,
23 | base: true,
24 | br: true,
25 | col: true,
26 | command: true,
27 | embed: true,
28 | hr: true,
29 | img: true,
30 | input: true,
31 | keygen: true,
32 | link: true,
33 | meta: true,
34 | param: true,
35 | source: true,
36 | track: true,
37 | wbr: true
38 | };
39 |
40 | export function isVoidElement(str) {
41 | return !!voidElements[ str ];
42 | }
43 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | *Before* submitting an issue please:
2 | - 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).
3 | - Check that the bug has not been fixed in the latest development version. Use our [CDN @ Edge](http://cdn.infernojs.org/edge/inferno.js).
4 | - Check that the issue has not been brought up before on [Github issues](http://www.github.com/infernojs/inferno/issues).
5 |
6 | **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.**
7 | ---
8 |
9 | ## Issue Template
10 |
11 | **Observed Behaviour**
12 |
13 | Inferno is...
14 |
15 | **Expected Current Behaviour**
16 |
17 | Inferno should...
18 |
19 | **Inferno Metadata**
20 |
21 | macOS / Windowx / Linux
22 | Safari / Chrome / Firefox / ...
23 |
--------------------------------------------------------------------------------
/packages/inferno-hyperscript/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "inferno-hyperscript",
3 | "version": "3.3.1",
4 | "license": "MIT",
5 | "description": "Bridging hyperscript to InfernoJS",
6 | "author": "Terin Stock
19 | Test
20 |
21 | );
22 | }
23 | }
24 | const tree = renderIntoDocument(
44 | Test
45 |
46 | );
47 | }
48 | }
49 | const tree = renderIntoDocument(123
123
20 |
21 |
22 |
23 |
24 |
25 |
52 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/test/karma/bench.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | Object.entries = Object.entries || require('object.entries');
4 |
5 | function loadResult(file, cb) {
6 | try {
7 | const result = require(path.join(__dirname, '..', 'data', file));
8 | cb(null, result);
9 | } catch (e) {
10 | cb(e, null);
11 | }
12 | }
13 |
14 | function calculateResult(testName, resultOps, baselineOps) {
15 | const testFailure = (baselineOps <= resultOps) || Math.abs(baselineOps - resultOps) <= baselineOps * 0.1;
16 | const testResultMessage = testFailure ? 'PASSED' : 'FAILED';
17 |
18 | const message = testResultMessage + ': ' + testName + ' performs ' + resultOps + ' ops/s. Baseline: ' + baselineOps + ' ops/s';
19 | console.log(message);
20 |
21 | return testFailure;
22 | }
23 |
24 | loadResult('baseline.json', (baselineErr, baseline) => {
25 | loadResult('result.json', (testResultErr, testResult) => {
26 | if (baseline === null && testResult !== null) {
27 | const newbaselines = JSON.stringify(testResult);
28 | return fs.writeFile(path.join(__dirname, '..', 'data', 'baseline.json'), newbaselines, (err) => {
29 | if (err) {
30 | throw new Error(err);
31 | }
32 | console.log('New baseline written');
33 | process.exit(0);
34 | });
35 | } else if (baseline === null) {
36 | throw new Error(baselineErr);
37 | } else if (testResult === null) {
38 | throw new Error(testResultErr);
39 | }
40 |
41 | const baselineTests = Object.entries(baseline);
42 | if (baselineTests.length !== Object.keys(testResult).length) {
43 | throw new Error('Inconsistent number of tests, please regenerate baseline');
44 | }
45 |
46 | let failed = false;
47 | if (failed) {
48 | return process.exit(1);
49 | }
50 |
51 | for (let i = 0; i < baselineTests.length; i += 1) {
52 | const [ testName, baselineResult ] = baselineTests[i];
53 | const resultMeta = testResult[ testName ];
54 | const result = calculateResult(testName, parseInt(1 / resultMeta.time , 10), parseInt(1 / baselineResult.time , 10));
55 |
56 | if (!result) {
57 | failed = true;
58 | }
59 | }
60 |
61 | if (failed) {
62 | return process.exit(1);
63 | }
64 |
65 | return process.exit(0);
66 | });
67 | });
68 |
--------------------------------------------------------------------------------
/packages/inferno-create-element/__benchmarks__/functionalcomponents.js:
--------------------------------------------------------------------------------
1 | import { createVNode, render } from 'inferno';
2 | import InfernoVNodeFlags from 'inferno-vnode-flags';
3 |
4 | suite('functional components', function() {
5 | benchmark('single functional component (with div) + render', function() {
6 | function Com() {
7 | return createVNode(InfernoVNodeFlags.Element, 'div', null, '1');
8 | }
9 |
10 | render(createVNode(InfernoVNodeFlags.ComponentFunction, Com), this.testDiv);
11 | }, {
12 | setup: function() {
13 | this.testDiv = document.createElement('div');
14 | },
15 |
16 | teardown: function() {
17 | this.testDiv.innerHTML = '';
18 | }
19 | });
20 |
21 | benchmark('20 children functional components', function() {
22 |
23 | function Com() {
24 | return createVNode(InfernoVNodeFlags.Element, 'div', null, '1');
25 | }
26 |
27 | render(createVNode(InfernoVNodeFlags.ComponentFunction, Com, null, [
28 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
29 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
30 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
31 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
32 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
33 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
34 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
35 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
36 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
37 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
38 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
39 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
40 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
41 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
42 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
43 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
44 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
45 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
46 | createVNode(InfernoVNodeFlags.ComponentFunction, Com),
47 | createVNode(InfernoVNodeFlags.ComponentFunction, Com)
48 | ]), this.testDiv);
49 | }, {
50 | setup: function() {
51 | this.testDiv = document.createElement('div');
52 | },
53 |
54 | teardown: function() {
55 | this.testDiv.innerHTML = '';
56 | }
57 | });
58 | });
59 |
--------------------------------------------------------------------------------
/packages/inferno-test-utils/src/jest.ts:
--------------------------------------------------------------------------------
1 | import { VNode } from 'inferno';
2 | import { isArray, isNull, isObject, isString } from 'inferno-shared';
3 | import { getTagNameOfVNode, isDOMVNode, renderIntoDocument } from './index';
4 |
5 | // Jest Snapshot Utilities
6 | // Jest formats it's snapshots prettily because it knows how to play with the React test renderer.
7 | // Symbols and algorithm have been reversed from the following file:
8 | // https://github.com/facebook/react/blob/v15.4.2/src/renderers/testing/ReactTestRenderer.js#L98
9 |
10 | function createSnapshotObject(object: object) {
11 | Object.defineProperty(object, '$$typeof', {
12 | value: Symbol.for('react.test.json')
13 | });
14 |
15 | return object;
16 | }
17 |
18 | export function vNodeToSnapshot(node: VNode) {
19 | let object;
20 | const children: any[] = [];
21 |
22 | if (isDOMVNode(node)) {
23 | const props = { ...node.props };
24 |
25 | // Remove undefined props
26 | Object.keys(props).forEach((propKey) => {
27 | if (props[propKey] === undefined) {
28 | delete props[propKey];
29 | }
30 | });
31 |
32 | // Create the actual object that Jest will interpret as the snapshot for this VNode
33 | object = createSnapshotObject({
34 | props,
35 | type: getTagNameOfVNode(node)
36 | });
37 | }
38 |
39 | if (isArray(node.children)) {
40 | node.children.forEach((child) => {
41 | const asJSON = vNodeToSnapshot(child as VNode);
42 | if (asJSON) {
43 | children.push(asJSON);
44 | }
45 | });
46 | } else if (isString(node.children)) {
47 | children.push(node.children);
48 | } else if (isObject(node.children) && !isNull(node.children)) {
49 | const asJSON = vNodeToSnapshot(node.children);
50 | if (asJSON) {
51 | children.push(asJSON);
52 | }
53 | }
54 |
55 | if (object) {
56 | object.children = children.length ? children : null;
57 | return object;
58 | }
59 |
60 | if (children.length > 1) {
61 | return children;
62 | } else if (children.length === 1) {
63 | return children[0];
64 | }
65 |
66 | return object;
67 | }
68 |
69 | export function renderToSnapshot(input: VNode) {
70 | const vnode = renderIntoDocument(input) as VNode;
71 |
72 | if (!isNull(vnode.props)) {
73 | const snapshot = vNodeToSnapshot(vnode.props.children as VNode);
74 | delete snapshot.props.children;
75 | return snapshot;
76 | }
77 |
78 | return undefined;
79 | }
80 |
81 | export default {
82 | createSnapshotObject,
83 | renderToSnapshot,
84 | vNodeToSnapshot
85 | };
86 |
--------------------------------------------------------------------------------
/packages/inferno/src/DOM/wrappers/TextareaWrapper.ts:
--------------------------------------------------------------------------------
1 | import { isNullOrUndef } from 'inferno-shared';
2 | import { EMPTY_OBJ } from '../utils';
3 |
4 | function wrappedOnChange(e) {
5 | const props = this.vNode.props || EMPTY_OBJ;
6 | const event = props.onChange;
7 |
8 | if (event.event) {
9 | event.event(event.data, e);
10 | } else {
11 | event(e);
12 | }
13 | }
14 |
15 | function onTextareaInputChange(e) {
16 | const vNode = this.vNode;
17 | const props = vNode.props || EMPTY_OBJ;
18 | const previousValue = props.value;
19 |
20 | if (props.onInput) {
21 | const event = props.onInput;
22 |
23 | if (event.event) {
24 | event.event(event.data, e);
25 | } else {
26 | event(e);
27 | }
28 | } else if (props.oninput) {
29 | props.oninput(e);
30 | }
31 |
32 | // the user may have updated the vNode from the above onInput events syncronously
33 | // so we need to get it from the context of `this` again
34 | const newVNode = this.vNode;
35 | const newProps = newVNode.props || EMPTY_OBJ;
36 |
37 | // If render is going async there is no value change yet, it will come back to process input soon
38 | if (previousValue !== newProps.value) {
39 | // When this happens we need to store current cursor position and restore it, to avoid jumping
40 |
41 | applyValue(newVNode, vNode.dom, false);
42 | }
43 | }
44 |
45 | export function processTextarea(vNode, dom, nextPropsOrEmpty, mounting: boolean, isControlled: boolean) {
46 | applyValue(nextPropsOrEmpty, dom, mounting);
47 |
48 | if (isControlled) {
49 | dom.vNode = vNode; // TODO: Remove this when implementing Fiber's
50 |
51 | if (mounting) {
52 | dom.oninput = onTextareaInputChange;
53 | dom.oninput.wrapped = true;
54 | if (nextPropsOrEmpty.onChange) {
55 | dom.onchange = wrappedOnChange;
56 | dom.onchange.wrapped = true;
57 | }
58 | }
59 | }
60 | }
61 |
62 | export function applyValue(nextPropsOrEmpty, dom, mounting: boolean) {
63 | const value = nextPropsOrEmpty.value;
64 | const domValue = dom.value;
65 |
66 | if (isNullOrUndef(value)) {
67 | if (mounting) {
68 | const defaultValue = nextPropsOrEmpty.defaultValue;
69 |
70 | if (!isNullOrUndef(defaultValue)) {
71 | if (defaultValue !== domValue) {
72 | dom.value = defaultValue;
73 | }
74 | } else if (domValue !== '') {
75 | dom.value = '';
76 | }
77 | }
78 | } else {
79 | /* There is value so keep it controlled */
80 | if (domValue !== value) {
81 | dom.value = value;
82 | }
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/packages/inferno-create-element/__tests__/findDOMNodes.spec.jsx:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import { findDOMNode, options, render } from 'inferno';
3 | import Component from 'inferno-component';
4 |
5 | describe('findDOMNodes (JSX)', () => {
6 | let container;
7 |
8 | beforeEach(function () {
9 | container = document.createElement('div');
10 | document.body.appendChild(container);
11 | });
12 |
13 | afterEach(function () {
14 | render(null, container);
15 | container.innerHTML = '';
16 | document.body.removeChild(container);
17 | });
18 |
19 | describe('various tests to see if the DOM node is right for the component', () => {
20 | options.findDOMNodeEnabled = true;
21 | let instance1;
22 | let instance2;
23 | let instance3;
24 | let ref;
25 | const refFunc = (dom) => {
26 | if (dom) {
27 | ref = dom;
28 | }
29 | };
30 |
31 | class Example1 extends Component {
32 | render() {
33 | instance1 = this;
34 | return ;
35 | }
36 | }
37 |
38 | class Example2 extends Component {
39 | render() {
40 | instance2 = this;
41 | return ;
42 | }
43 | }
44 |
45 | class Example3 extends Component {
46 | render() {
47 | instance3 = this;
48 | return
45 | { this.props.children }
46 |
;
47 | }
48 | }
49 |
50 | class BasicComponent1 extends Component {
51 | render() {
52 | const store = this.context.store;
53 | const state = store.getState();
54 |
55 | const onClick = e => {
56 | e.preventDefault();
57 | store.dispatch({
58 | type: 'CHANGE_NAME',
59 | name: 'Jerry'
60 | });
61 | };
62 |
63 | return (
64 |
65 |
66 | Hello { state.name || 'Tom' }
67 |
68 |
69 | );
70 | }
71 | }
72 |
73 | class BasicComponent2 extends Component {
74 | render() {
75 | const store = this.context.store;
76 | const state = store.getState();
77 |
78 | return (
79 |
80 | { state.name === 'Jerry' ? 'You\'re a mouse!' : 'You\'re a cat!' }
81 |
82 | );
83 | }
84 | }
85 |
86 | InfernoDOM.render((
87 | 13 |
15 | 16 | This package provides the bindings for MobX and Inferno. 17 | Exports `observer` and `connect` decorators, a `Provider` and some development utilities. 18 | 19 | ## Install 20 | 21 | ``` 22 | npm install --save inferno-mobx 23 | ``` 24 | 25 | Also install [mobx](https://github.com/mobxjs/mobx) dependency _(required)_ if you don't already have it 26 | 27 | ``` 28 | npm install --save mobx 29 | ``` 30 | 31 | ## Example 32 | 33 | You can inject props using the following syntax 34 | 35 | ```javascript 36 | // MyComponent.js 37 | import Inferno from 'inferno' 38 | import Component from 'inferno-component' 39 | import { connect } from 'inferno-mobx' 40 | 41 | @connect(['englishStore', 'frenchStore']) 42 | class MyComponent extends Component { 43 | render({ englishStore, frenchStore }) { 44 | return
45 |
48 | }
49 | }
50 |
51 | export default MyComponent
52 | ```
53 |
54 | Just make sure that you provided your stores using the `Provider`. Ex:
55 |
56 | ```javascript
57 | // index.js
58 | import Inferno from 'inferno'
59 | import { Provider } from 'inferno-mobx'
60 | import { observable } from 'mobx'
61 | import MyComponent from './MyComponent'
62 |
63 | const englishStore = observable({
64 | title: 'Hello World'
65 | })
66 |
67 | const frenchStore = observable({
68 | title: 'Bonjour tout le monde'
69 | })
70 |
71 | Inferno.render({ englishStore.title }
46 |{ frenchStore.title }
47 |123
123
123
123
bar2
');
99 | document.body.removeChild(container);
100 | });
101 | });
102 | });
103 | });
104 |
105 | function streamPromise(dom) {
106 | return new Promise(function (res, rej) {
107 | streamAsStaticMarkup(dom)
108 | .on('error', rej)
109 | .pipe(concatStream(function (buffer) {
110 | res(buffer.toString('utf-8'));
111 | }));
112 | });
113 | }
114 |
--------------------------------------------------------------------------------
/packages/inferno-component/__tests__/state.spec.jsx:
--------------------------------------------------------------------------------
1 | import { createVNode, render } from 'inferno';
2 | import Component from '../dist-es';
3 | import VNodeFlags from 'inferno-vnode-flags';
4 |
5 | class TestCWRP extends Component {
6 | constructor(props) {
7 | super(props);
8 |
9 | this.state = {
10 | a: 0,
11 | b: 0
12 | };
13 | }
14 |
15 | componentWillReceiveProps() {
16 | this.setStateSync({ a: 1 });
17 |
18 | if (this.state.a !== 1) {
19 | this.props.done('state is not correct');
20 | return;
21 | }
22 |
23 | this.props.done();
24 | }
25 |
26 | render() {
27 | return bar2
{JSON.stringify(this.state)}
;
28 | }
29 | }
30 |
31 | describe('state', () => {
32 | let container;
33 |
34 | beforeEach(function () {
35 | container = document.createElement('div');
36 | document.body.appendChild(container);
37 | });
38 |
39 | afterEach(function () {
40 | render(null, container);
41 | container.innerHTML = '';
42 | document.body.removeChild(container);
43 | });
44 |
45 | // As per React
46 | it('Should not have state defined in base constructor', () => {
47 | class Foo extends Component {
48 | constructor(p, c) {
49 | super(p, c);
50 |
51 | expect(this.state).to.be.a('null');
52 | }
53 | }
54 |
55 | const f = new Foo({}, {});
56 |
57 | expect(f).not.to.be.a('null');
58 | });
59 |
60 | describe('setting state', () => {
61 |
62 | it('setStateSync should apply state during componentWillReceiveProps', (done) => {
63 | const node = createVNode(VNodeFlags.ComponentClass, TestCWRP, null, null, { done }, null);
64 | render(node, container);
65 | node.props.foo = 1;
66 | render(node, container);
67 | });
68 | });
69 |
70 |
71 | describe('didUpdate and setState', () => {
72 | it('order', (done) => {
73 | class Test extends Component {
74 |
75 | constructor(props, context) {
76 | super(props, context);
77 |
78 | this.state = {
79 | testScrollTop: 0
80 | };
81 | }
82 |
83 | componentWillReceiveProps(nextProps) {
84 | console.log('CWRP', nextProps.scrollTop);
85 | if (nextProps.scrollTop !== 0){
86 | this.setState({ testScrollTop: nextProps.scrollTop });
87 | }
88 | }
89 |
90 | componentDidUpdate(prevProps, prevState) {
91 | expect(prevState.testScrollTop).to.equal(0);
92 | expect(this.state.testScrollTop).to.equal(200);
93 | }
94 |
95 | render(){
96 | return (aa
);
97 | }
98 |
99 | }
100 |
101 | class Example extends Component{
102 |
103 | constructor(props, context) {
104 | super(props, context);
105 | this.state = {
106 | exampleScrollTop: 0
107 | };
108 | }
109 |
110 | render(){
111 | return ({ children }
;
112 | }
113 | }
114 |
115 | ReactDOM.render((
116 |
44 |
45 |
);
48 |
49 | // FRP
50 | const model$ = scan(update, 0, actions$);
51 | const vNodes$ = map(view(actions$), model$);
52 |
53 | // Logging
54 | // observe(state => console.log('model', state), model$) // eslint-disable-line fp/no-unused-expression
55 |
56 | const renderer = createRenderer();
57 |
58 | const runApp = () => reduce(renderer, container, vNodes$);
59 |
60 | runApp();
61 | setTimeout(() => {
62 | /*
63 | {model}
46 |
47 |
64 |
65 |
68 | */
69 | const outerDiv = container.firstChild;
70 |
71 | expect(outerDiv.style.fontSize).to.eql('48px');
72 | expect(outerDiv.style.fontFamily).to.eql('monospace');
73 | expect(outerDiv.style.width).to.eql('100%');
74 | expect(outerDiv.style.textAlign).to.eql('center');
75 | expect(outerDiv.tagName).to.eql('DIV');
76 |
77 | const firstButton = outerDiv.childNodes[ 0 ];
78 | expect(firstButton.getAttribute('id')).to.eql('decrement');
79 | expect(firstButton.innerHTML).to.eql('-');
80 |
81 | const midDiv = outerDiv.childNodes[ 1 ];
82 | expect(midDiv.style.fontSize).to.eql('48px');
83 | expect(midDiv.style.fontFamily).to.eql('monospace');
84 | expect(midDiv.style.width).to.eql('100%');
85 | expect(midDiv.style.textAlign).to.eql('center');
86 | expect(midDiv.tagName).to.eql('DIV');
87 | expect(midDiv.innerHTML).to.eql('0');
88 |
89 | const secondButton = outerDiv.childNodes[ 2 ];
90 | expect(secondButton.getAttribute('id')).to.eql('increment');
91 | expect(secondButton.innerHTML).to.eql('+');
92 | done();
93 | }, 10);
94 | });
95 | });
96 |
--------------------------------------------------------------------------------
/packages/inferno-create-element/__tests__/svgXlink.spec.jsx:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import { render } from 'inferno';
3 |
4 |
5 | describe('createTree - SVG (JSX)', () => {
6 | let container;
7 |
8 | beforeEach(function () {
9 | container = document.createElement('div');
10 | });
11 |
12 | afterEach(function () {
13 | render(null, container);
14 | });
15 |
16 | it('should remove namespaced SVG attributes', () => {
17 | render(, container);
20 |
21 | expect(container.firstChild.tagName).to.eql('svg');
22 | expect(container.firstChild.firstChild.hasAttributeNS(
23 | 'http://www.w3.org/1999/xlink',
24 | 'href'
25 | )).to.equal(true);
26 |
27 | render(, container);
30 |
31 | expect(container.firstChild.tagName).to.eql('svg');
32 | expect(container.firstChild.firstChild.hasAttributeNS(
33 | 'http://www.w3.org/1999/xlink',
34 | 'href'
35 | )).to.equal(false);
36 | });
37 |
38 | it('should update namespaced SVG attributes', () => {
39 | render(, container);
42 |
43 | expect(container.firstChild.tagName).to.eql('svg');
44 | expect(container.firstChild.firstChild.hasAttributeNS(
45 | 'http://www.w3.org/1999/xlink',
46 | 'href'
47 | )).to.equal(true);
48 |
49 | render(, container);
52 |
53 | expect(container.firstChild.tagName).to.eql('svg');
54 | expect(container.firstChild.firstChild.getAttributeNS(
55 | 'http://www.w3.org/1999/xlink',
56 | 'href'
57 | )).to.equal('http://i.imgur.com/JvqCM2p.png');
58 | });
59 |
60 | it('should add / change / remove xlink:href attribute', () => {
61 | render(, container);
64 |
65 | expect(container.firstChild.firstChild.getAttributeNS(
66 | 'http://www.w3.org/1999/xlink',
67 | 'href'
68 | )).to.equal('#test');
69 |
70 | render(, container);
73 |
74 | expect(container.firstChild.firstChild.getAttributeNS(
75 | 'http://www.w3.org/1999/xlink',
76 | 'href'
77 | )).to.equal('#changed');
78 |
79 | render(, container);
82 |
83 | expect(container.firstChild.firstChild.hasAttributeNS(
84 | 'http://www.w3.org/1999/xlink',
85 | 'href'
86 | )).to.equal(false);
87 | });
88 |
89 | it('should add / change / remove xlinkHref attribute (babel plugin should transpile it)', () => {
90 | render(, container);
93 |
94 | expect(container.firstChild.firstChild.getAttributeNS(
95 | 'http://www.w3.org/1999/xlink',
96 | 'href'
97 | )).to.equal('#test');
98 |
99 | render(, container);
102 |
103 | expect(container.firstChild.firstChild.getAttributeNS(
104 | 'http://www.w3.org/1999/xlink',
105 | 'href'
106 | )).to.equal('#changed');
107 |
108 | render(, container);
111 |
112 | expect(container.firstChild.firstChild.hasAttributeNS(
113 | 'http://www.w3.org/1999/xlink',
114 | 'href'
115 | )).to.equal(false);
116 | });
117 | });
118 |
--------------------------------------------------------------------------------
/packages/inferno-router/src/utils.ts:
--------------------------------------------------------------------------------
1 | import { isArray, isString } from 'inferno-shared';
2 |
3 | export const emptyObject = {};
4 |
5 | export function decode(val: any): any {
6 | return typeof val !== 'string' ? val : decodeURIComponent(val);
7 | }
8 |
9 | export function isEmpty(children): boolean {
10 | return !children || !(isArray(children) ? children : Object.keys(children)).length;
11 | }
12 |
13 | export function flatten(oldArray) {
14 | const newArray = [];
15 |
16 | flattenArray(oldArray, newArray);
17 | return newArray;
18 | }
19 |
20 | export function getURLString(location): string {
21 | return isString(location) ? location : (location.pathname + location.search);
22 | }
23 |
24 | /**
25 | * Maps a querystring to an object
26 | * Supports arrays and utf-8 characters
27 | * @param search
28 | * @returns {any}
29 | */
30 | export function mapSearchParams(search): any {
31 | if (search === '') {
32 | return {};
33 | }
34 |
35 | // Create an object with no prototype
36 | const map = Object.create(null);
37 | const fragments = search.split('&');
38 |
39 | for (let i = 0, len = fragments.length; i < len; i++) {
40 | const fragment = fragments[ i ];
41 | const [ k, v ] = fragment.split('=').map(mapFragment).map(decodeURIComponent);
42 |
43 | if (map[ k ]) {
44 | map[ k ] = isArray(map[ k ]) ? map[ k ] : [ map[ k ] ];
45 | map[ k ].push(v);
46 | } else {
47 | map[ k ] = v;
48 | }
49 | }
50 | return map;
51 | }
52 |
53 | /**
54 | * Gets the relevant part of the URL for matching
55 | * @param fullURL
56 | * @param partURL
57 | * @returns {string}
58 | */
59 | export function toPartialURL(fullURL: string, partURL: string) {
60 | if (fullURL.indexOf(partURL) === 0) {
61 | return fullURL.substr(partURL.length);
62 | }
63 | return fullURL;
64 | }
65 |
66 | /**
67 | * Simulates ... operator by returning first argument
68 | * with the keys in the second argument excluded
69 | * @param _args
70 | * @param excluded
71 | * @returns {{}}
72 | */
73 | export function rest(_args, excluded) {
74 | const t = {};
75 | for (const p in _args) {
76 | if (excluded.indexOf(p) < 0) {
77 | t[ p ] = _args[ p ];
78 | }
79 | }
80 | return t;
81 | }
82 |
83 | /**
84 | * Sorts an array according to its `path` prop length
85 | * @param a
86 | * @param b
87 | * @returns {number}
88 | */
89 | export function pathRankSort(a: any, b: any) {
90 | const aAttr = a.props || emptyObject;
91 | const bAttr = b.props || emptyObject;
92 | const diff = rank(bAttr.path) - rank(aAttr.path);
93 | return diff || ((bAttr.path && aAttr.path) ? (bAttr.path.length - aAttr.path.length) : 0);
94 | }
95 |
96 | /**
97 | * Helper function for parsing querystring arrays
98 | */
99 | function mapFragment(p: string, isVal: number): string {
100 | return decodeURIComponent(isVal | 0 ? p : p.replace('[]', ''));
101 | }
102 |
103 | function strip(url: string): string {
104 | return url.replace(/(^\/+|\/+$)/g, '');
105 | }
106 |
107 | function rank(url: string = ''): number {
108 | return (strip(url).match(/\/+/g) || '').length;
109 | }
110 |
111 | function flattenArray(oldArray, newArray) {
112 | for (let i = 0, len = oldArray.length; i < len; i++) {
113 | const item = oldArray[ i ];
114 |
115 | if (isArray(item)) {
116 | flattenArray(item, newArray);
117 | } else {
118 | newArray.push(item);
119 | }
120 | }
121 | }
122 |
--------------------------------------------------------------------------------
/packages/inferno/src/DOM/constants.ts:
--------------------------------------------------------------------------------
1 | export const xlinkNS = 'http://www.w3.org/1999/xlink';
2 | export const xmlNS = 'http://www.w3.org/XML/1998/namespace';
3 | export const svgNS = 'http://www.w3.org/2000/svg';
4 |
5 | export const strictProps = new Set0
66 |
67 |