From 30b577138dda685f65a8529be1866afa6e321845 Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Tue, 4 Oct 2016 11:50:26 +0200 Subject: [PATCH] Squashed 'thirdparty/preact/' content from commit b2d90cc git-subtree-dir: thirdparty/preact git-subtree-split: b2d90cc116f1d1998f7a7c98dc6986bf4c1841f4 --- .editorconfig | 15 + .gitignore | 8 + .travis.yml | 30 ++ LICENSE | 21 + README.md | 345 +++++++++++++++ config/codemod-const.js | 39 ++ config/codemod-strip-tdz.js | 56 +++ config/eslint-config.js | 66 +++ config/rollup.config.aliases.js | 12 + config/rollup.config.js | 23 + package.json | 103 +++++ src/clone-element.js | 10 + src/component.js | 102 +++++ src/constants.js | 20 + src/dom/index.js | 100 +++++ src/dom/recycler.js | 25 ++ src/h.js | 51 +++ src/linked-state.js | 28 ++ src/options.js | 18 + src/preact.d.ts | 554 ++++++++++++++++++++++++ src/preact.js | 24 ++ src/preact.js.flow | 9 + src/render-queue.js | 23 + src/render.js | 20 + src/util.js | 68 +++ src/vdom/component-recycler.js | 32 ++ src/vdom/component.js | 270 ++++++++++++ src/vdom/diff.js | 247 +++++++++++ src/vdom/functional-component.js | 25 ++ src/vdom/index.js | 50 +++ src/vnode.js | 14 + test/browser/components.js | 713 +++++++++++++++++++++++++++++++ test/browser/context.js | 170 ++++++++ test/browser/keys.js | 85 ++++ test/browser/lifecycle.js | 493 +++++++++++++++++++++ test/browser/linked-state.js | 98 +++++ test/browser/performance.js | 245 +++++++++++ test/browser/refs.js | 287 +++++++++++++ test/browser/render.js | 439 +++++++++++++++++++ test/browser/spec.js | 124 ++++++ test/browser/svg.js | 112 +++++ test/karma.conf.js | 126 ++++++ test/node/index.js | 1 + test/shared/exports.js | 21 + test/shared/h.js | 201 +++++++++ typings.json | 5 + 46 files changed, 5528 insertions(+) create mode 100644 .editorconfig create mode 100644 .gitignore create mode 100644 .travis.yml create mode 100644 LICENSE create mode 100644 README.md create mode 100644 config/codemod-const.js create mode 100644 config/codemod-strip-tdz.js create mode 100644 config/eslint-config.js create mode 100644 config/rollup.config.aliases.js create mode 100644 config/rollup.config.js create mode 100644 package.json create mode 100644 src/clone-element.js create mode 100644 src/component.js create mode 100644 src/constants.js create mode 100644 src/dom/index.js create mode 100644 src/dom/recycler.js create mode 100644 src/h.js create mode 100644 src/linked-state.js create mode 100644 src/options.js create mode 100644 src/preact.d.ts create mode 100644 src/preact.js create mode 100644 src/preact.js.flow create mode 100644 src/render-queue.js create mode 100644 src/render.js create mode 100644 src/util.js create mode 100644 src/vdom/component-recycler.js create mode 100644 src/vdom/component.js create mode 100644 src/vdom/diff.js create mode 100644 src/vdom/functional-component.js create mode 100644 src/vdom/index.js create mode 100644 src/vnode.js create mode 100644 test/browser/components.js create mode 100644 test/browser/context.js create mode 100644 test/browser/keys.js create mode 100644 test/browser/lifecycle.js create mode 100644 test/browser/linked-state.js create mode 100644 test/browser/performance.js create mode 100644 test/browser/refs.js create mode 100644 test/browser/render.js create mode 100644 test/browser/spec.js create mode 100644 test/browser/svg.js create mode 100644 test/karma.conf.js create mode 100644 test/node/index.js create mode 100644 test/shared/exports.js create mode 100644 test/shared/h.js create mode 100644 typings.json diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..9c378bd19 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +root = true + +[*] +indent_style = tab +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[{package.json,.*rc,*.yml}] +indent_style = space +indent_size = 2 + +[*.md] +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..17acf3f20 --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +/node_modules +/npm-debug.log +.DS_Store +/dist +/_dev +/coverage +aliases.js +aliases.js.map diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 000000000..5953c1a84 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,30 @@ +sudo: false + +language: node_js + +node_js: + - "6" + +cache: + directories: + - node_modules + +install: + - npm install + +script: + - npm run build + - npm run test + - SAUCELABS=true COVERAGE=false FLAKEY=false PERFORMANCE=false npm run test:karma + +# Necessary to compile native modules for io.js v3 or Node.js v4 +env: + - CXX=g++-4.8 + +# Necessary to compile native modules for io.js v3 or Node.js v4 +addons: + apt: + sources: + - ubuntu-toolchain-r-test + packages: + - g++-4.8 diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000..445ef15a4 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 Jason Miller + +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. diff --git a/README.md b/README.md new file mode 100644 index 000000000..582c55216 --- /dev/null +++ b/README.md @@ -0,0 +1,345 @@ + +Preact + + +**Preact is a fast, `3kb` alternative to React, with the same ES2015 API.** + +Preact retains a large amount of compatibility with React, but only the modern ([ES6 Classes] and [stateless functional components](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components)) interfaces. +As one would expect coming from React, Components are simple building blocks for composing a User Interface. + +### :information_desk_person: Full documentation is available at the [Preact Website ➞](https://preactjs.com) + +[![npm](https://img.shields.io/npm/v/preact.svg)](http://npm.im/preact) +[![travis](https://travis-ci.org/developit/preact.svg?branch=master)](https://travis-ci.org/developit/preact) +[![gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/developit/preact) + +[![Browsers](https://saucelabs.com/browser-matrix/preact.svg)](https://saucelabs.com/u/preact) + + +--- + + +## Demos + +- [**ESBench**](http://esbench.com) is built using Preact. +- [**Nectarine.rocks**](http://nectarine.rocks) _([Github Project](https://github.com/developit/nectarine))_ :peach: +- [**Documentation Viewer**](https://documentation-viewer.firebaseapp.com) _([Github Project](https://github.com/developit/documentation-viewer))_ +- [**TodoMVC**](http://developit.github.io/preact-todomvc/) _([Github Project](https://github.com/developit/preact-todomvc))_ +- [**Hacker News Minimal**](https://developit.github.io/hn_minimal/) _([Github Project](https://github.com/developit/hn_minimal))_ +- [**Preact Boilerplate**](https://preact-boilerplate.surge.sh) _([Github Project](https://github.com/developit/preact-boilerplate))_ :zap: +- [**Preact Redux Example**](https://github.com/developit/preact-redux-example) :star: +- [**Flickr Browser**](http://codepen.io/developit/full/VvMZwK/) (@ CodePen) +- [**Animating Text**](http://codepen.io/developit/full/LpNOdm/) (@ CodePen) +- [**60FPS Rainbow Spiral**](http://codepen.io/developit/full/xGoagz/) (@ CodePen) +- [**Simple Clock**](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) (@ JSFiddle) +- [**3D + ThreeJS**](http://codepen.io/developit/pen/PPMNjd?editors=0010) (@ CodePen) +- [**Stock Ticker**](http://codepen.io/developit/pen/wMYoBb?editors=0010) (@ CodePen) +- [**Create your Own!**](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/) (@ JSFiddle) +- [**Preact Coffeescript**](https://github.com/crisward/preact-coffee) +- [**GuriVR**](https://gurivr.com) _([Github Project](https://github.com/opennewslabs/guri-vr))_ +- [**V2EX Preact**](https://github.com/yanni4night/v2ex-preact) + +## Libraries & Add-ons + +- :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components. +- :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering. +- :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact. *([full example](http://git.io/preact-compat-example))* +- :rocket: [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com). +- :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_ +- :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components +- :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component +- :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact. +- :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way: +- :construction: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): A utility method to create components without the `class` keyword +- :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements + + +## Getting Started + +> :information_desk_person: You [don't _have_ to use ES2015 to use Preact](https://github.com/developit/preact-without-babel)... but you should. + +The following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc. If you don't, start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010). + + +### Import what you need + +The `preact` module provides both named and default exports, so you can either import everything under a namespace of your choosing, or just what you need as locals: + +##### Named: + +```js +import { h, render, Component } from 'preact'; + +// Tell Babel to transform JSX into h() calls: +/** @jsx h */ +``` + +##### Default: + +```js +import preact from 'preact'; + +// Tell Babel to transform JSX into preact.h() calls: +/** @jsx preact.h */ +``` + +> Named imports work well for highly structured applications, whereas the default import is quick and never needs to be updated when using different parts of the library. +> +> Instead of declaring the `@jsx` pragma in your code, it's best to configure it globally in a `.babelrc`: +> +> **For Babel 5 and prior:** +> +> ```json +> { "jsxPragma": "h" } +> ``` +> +> **For Babel 6:** +> +> ```json +> { +> "plugins": [ +> ["transform-react-jsx", { "pragma":"h" }] +> ] +> } +> ``` + + +### Rendering JSX + +Out of the box, Preact provides an `h()` function that turns your JSX into Virtual DOM elements _([here's how](http://jasonformat.com/wtf-is-jsx))_. It also provides a `render()` function that creates a DOM tree from that Virtual DOM. + +To render some JSX, just import those two functions and use them like so: + +```js +import { h, render } from 'preact'; + +render(( +
+ Hello, world! + +
+), document.body); +``` + +This should seem pretty straightforward if you've used [hyperscript] or one of its many friends. + +Rendering hyperscript with a virtual DOM is pointless, though. We want to render components and have them updated when data changes - that's where the power of virtual DOM diffing shines. :star2: + + +### Components + +Preact exports a generic `Component` class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React [lifecycle methods], like `shouldComponentUpdate()` and `componentWillReceiveProps()`. Providing specific implementations of these methods is the preferred mechanism for controlling _when_ and _how_ components update. + +Components also have a `render()` method, but unlike React this method is passed `(props, state)` as arguments. This provides an ergonomic means to destructure `props` and `state` into local variables to be referenced from JSX. + +Let's take a look at a very simple `Clock` component, which shows the current time. + +```js +import { h, render, Component } from 'preact'; + +class Clock extends Component { + render() { + let time = new Date().toLocaleTimeString(); + return { time }; + } +} + +// render an instance of Clock into : +render(, document.body); +``` + + +That's great. Running this produces the following HTML DOM structure: + +```html +10:28:57 PM +``` + +In order to have the clock's time update every second, we need to know when `` gets mounted to the DOM. _If you've used HTML5 Custom Elements, this is similar to the `attachedCallback` and `detachedCallback` lifecycle methods._ Preact invokes the following lifecycle methods if they are defined for a Component: + +| Lifecycle method | When it gets called | +|-----------------------------|--------------------------------------------------| +| `componentWillMount` | before the component gets mounted to the DOM | +| `componentDidMount` | after the component gets mounted to the DOM | +| `componentWillUnmount` | prior to removal from the DOM | +| `componentDidUnmount` | after removal from the DOM | +| `componentWillReceiveProps` | before new props get accepted | +| `shouldComponentUpdate` | before `render()`. Return `false` to skip render | +| `componentWillUpdate` | before `render()` | +| `componentDidUpdate` | after `render()` | + + + +So, we want to have a 1-second timer start once the Component gets added to the DOM, and stop if it is removed. We'll create the timer and store a reference to it in `componentDidMount`, and stop the timer in `componentWillUnmount`. On each timer tick, we'll update the component's `state` object with a new time value. Doing this will automatically re-render the component. + +```js +import { h, render, Component } from 'preact'; + +class Clock extends Component { + constructor() { + super(); + // set initial time: + this.state.time = Date.now(); + } + + componentDidMount() { + // update time every second + this.timer = setInterval(() => { + this.setState({ time: Date.now() }); + }, 1000); + } + + componentWillUnmount() { + // stop when not renderable + clearInterval(this.timer); + } + + render(props, state) { + let time = new Date(state.time).toLocaleTimeString(); + return { time }; + } +} + +// render an instance of Clock into : +render(, document.body); +``` + +Now we have [a ticking clock](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/)! + + +### Props & State + +The concept (and nomenclature) for `props` and `state` is the same as in React. `props` are passed to a component by defining attributes in JSX, `state` is internal state. Changing either triggers a re-render, though by default Preact re-renders Components asynchronously for `state` changes and synchronously for `props` changes. You can tell Preact to render `prop` changes asynchronously by setting `options.syncComponentUpdates` to `false`. + + +--- + + +## Linked State + +One area Preact takes a little further than React is in optimizing state changes. A common pattern in ES2015 React code is to use Arrow functions within a `render()` method in order to update state in response to events. Creating functions enclosed in a scope on every render is inefficient and forces the garbage collector to do more work than is necessary. + +One solution to this is to bind component methods declaratively. +Here is an example using [decko](http://git.io/decko): + +```js +class Foo extends Component { + @bind + updateText(e) { + this.setState({ text: e.target.value }); + } + render({ }, { text }) { + return ; + } +} +``` + +While this achieves much better runtime performance, it's still a lot of unnecessary code to wire up state to UI. + +Fortunately there is a solution, in the form of `linkState()`. Calling `component.linkState('text')` returns a function that accepts an Event and uses it's associated value to update the given property in your component's state. Calls to linkState() with the same state property are cached, so there is no performance penalty. Here is the previous example rewritten using _Linked State_: + +```js +class Foo extends Component { + render({ }, { text }) { + return ; + } +} +``` + +Simple and effective. It handles linking state from any input type, or an optional second parameter can be used to explicitly provide a keypath to the new state value. + + +## Examples + +Here is a somewhat verbose Preact `` component: + +```js +class Link extends Component { + render(props, state) { + return { props.children }; + } +} +``` + +Since this is ES6/ES2015, we can further simplify: + +```js +class Link extends Component { + render({ href, children }) { + return ; + } +} + +// or, for wide-open props support: +class Link extends Component { + render(props) { + return ; + } +} + +// or, as a stateless functional component: +const Link = ({ children, ...props }) => ( + { children } +); +``` + + +## Extensions + +It is likely that some projects based on Preact would wish to extend Component with great new functionality. + +Perhaps automatic connection to stores for a Flux-like architecture, or mixed-in context bindings to make it feel more like `React.createClass()`. Just use ES2015 inheritance: + +```js +class BoundComponent extends Component { + constructor(props) { + super(props); + this.bind(); + } + bind() { + this.binds = {}; + for (let i in this) { + this.binds[i] = this[i].bind(this); + } + } +} + +// example usage +class Link extends BoundComponent { + click() { + open(this.href); + } + render() { + let { click } = this.binds; + return { children }; + } +} +``` + + +The possibilities are pretty endless here. You could even add support for rudimentary mixins: + +```js +class MixedComponent extends Component { + constructor() { + super(); + (this.mixins || []).forEach( m => Object.assign(this, m) ); + } +} +``` + + +## License + +MIT + + + +[![Preact](http://i.imgur.com/YqCHvEW.gif)](https://preactjs.com) + + + +[ES6 Classes]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes +[hyperscript]: https://github.com/dominictarr/hyperscript +[preact-boilerplate]: https://github.com/developit/preact-boilerplate +[lifecycle methods]: https://facebook.github.io/react/docs/component-specs.html diff --git a/config/codemod-const.js b/config/codemod-const.js new file mode 100644 index 000000000..4bffd9add --- /dev/null +++ b/config/codemod-const.js @@ -0,0 +1,39 @@ +/* eslint no-console:0 */ + +/** Find constants (identified by ALL_CAPS_DECLARATIONS), and inline them globally. + * This is safe because Preact *only* uses global constants. + */ +export default (file, api) => { + let j = api.jscodeshift, + code = j(file.source), + constants = {}, + found = 0; + + code.find(j.VariableDeclaration) + .filter( decl => { + for (let i=decl.value.declarations.length; i--; ) { + let node = decl.value.declarations[i], + name = node.id && node.id.name, + init = node.init; + if (name && init && name.match(/^[A-Z0-9_$]+$/g)) { + if (init.type==='Literal') { + console.log(`Inlining constant: ${name}=${init.raw}`); + found++; + constants[name] = init; + // remove declaration + decl.value.declarations.splice(i, 1); + // if it's the last, we'll remove the whole statement + return !decl.value.declarations.length; + } + } + } + return false; + }) + .remove(); + + code.find(j.Identifier) + .filter( path => path.value.name && constants.hasOwnProperty(path.value.name) ) + .replaceWith( path => (found++, constants[path.value.name]) ); + + return found ? code.toSource({ quote: 'single' }) : null; +}; diff --git a/config/codemod-strip-tdz.js b/config/codemod-strip-tdz.js new file mode 100644 index 000000000..a1f07fafe --- /dev/null +++ b/config/codemod-strip-tdz.js @@ -0,0 +1,56 @@ +/* eslint no-console:0 */ + + +// parent node types that we don't want to remove pointless initializations from (because it breaks hoisting) +const BLOCKED = ['ForStatement', 'WhileStatement']; // 'IfStatement', 'SwitchStatement' + +/** Removes var initialization to `void 0`, which Babel adds for TDZ strictness. */ +export default (file, api) => { + let { jscodeshift } = api, + found = 0; + + let code = jscodeshift(file.source) + .find(jscodeshift.VariableDeclaration) + .forEach(handleDeclaration); + + function handleDeclaration(decl) { + let p = decl, + remove = true; + + while ((p = p.parentPath)) { + if (~BLOCKED.indexOf(p.value.type)) { + remove = false; + break; + } + } + + decl.value.declarations.filter(isPointless).forEach( node => { + if (remove===false) { + console.log(`> Skipping removal of undefined init for "${node.id.name}": within ${p.value.type}`); + } + else { + removeNodeInitialization(node); + } + }); + } + + function removeNodeInitialization(node) { + node.init = null; + found++; + } + + function isPointless(node) { + let { init } = node; + if (init) { + if (init.type==='UnaryExpression' && init.operator==='void' && init.argument.value==0) { + return true; + } + if (init.type==='Identifier' && init.name==='undefined') { + return true; + } + } + return false; + } + + return found ? code.toSource({ quote: 'single' }) : null; +}; diff --git a/config/eslint-config.js b/config/eslint-config.js new file mode 100644 index 000000000..95ac48965 --- /dev/null +++ b/config/eslint-config.js @@ -0,0 +1,66 @@ +module.exports = { + parser: 'babel-eslint', + extends: 'eslint:recommended', + plugins: [ + 'react' + ], + env: { + browser: true, + mocha: true, + node: true, + es6: true + }, + parserOptions: { + ecmaFeatures: { + modules: true, + jsx: true + } + }, + globals: { + sinon: true, + expect: true + }, + rules: { + 'react/jsx-uses-react': 2, + 'react/jsx-uses-vars': 2, + 'no-unused-vars': [1, { varsIgnorePattern: '^h$' }], + 'no-cond-assign': 1, + 'no-empty': 0, + 'no-console': 1, + semi: 2, + camelcase: 0, + 'comma-style': 2, + 'comma-dangle': [2, 'never'], + indent: [2, 'tab', {SwitchCase: 1}], + 'no-mixed-spaces-and-tabs': [2, 'smart-tabs'], + 'no-trailing-spaces': [2, { skipBlankLines: true }], + 'max-nested-callbacks': [2, 3], + 'no-eval': 2, + 'no-implied-eval': 2, + 'no-new-func': 2, + 'guard-for-in': 0, + eqeqeq: 0, + 'no-else-return': 2, + 'no-redeclare': 2, + 'no-dupe-keys': 2, + radix: 2, + strict: [2, 'never'], + 'no-shadow': 0, + 'callback-return': [1, ['callback', 'cb', 'next', 'done']], + 'no-delete-var': 2, + 'no-undef-init': 2, + 'no-shadow-restricted-names': 2, + 'handle-callback-err': 0, + 'no-lonely-if': 2, + 'keyword-spacing': 2, + 'constructor-super': 2, + 'no-this-before-super': 2, + 'no-dupe-class-members': 2, + 'no-const-assign': 2, + 'prefer-spread': 2, + 'no-useless-concat': 2, + 'no-var': 2, + 'object-shorthand': 2, + 'prefer-arrow-callback': 2 + } +}; diff --git a/config/rollup.config.aliases.js b/config/rollup.config.aliases.js new file mode 100644 index 000000000..e5c549fc3 --- /dev/null +++ b/config/rollup.config.aliases.js @@ -0,0 +1,12 @@ +import memory from 'rollup-plugin-memory'; +import rollupConfig from './rollup.config'; + +export default Object.assign({}, rollupConfig, { + plugins: [ + memory({ + path: 'src/preact', + contents: `import { h } from './preact';export * from './preact';export { h as createElement };` + }), + ...rollupConfig.plugins.slice(1) + ] +}); diff --git a/config/rollup.config.js b/config/rollup.config.js new file mode 100644 index 000000000..57f71e1e7 --- /dev/null +++ b/config/rollup.config.js @@ -0,0 +1,23 @@ +import nodeResolve from 'rollup-plugin-node-resolve'; +import babel from 'rollup-plugin-babel'; +import memory from 'rollup-plugin-memory'; + +export default { + exports: 'named', + useStrict: false, + plugins: [ + memory({ + path: 'src/preact', + contents: "export * from './preact';" + }), + nodeResolve({ + main: true + }), + babel({ + sourceMap: true, + loose: 'all', + blacklist: ['es6.tailCall'], + exclude: 'node_modules/**' + }) + ] +}; diff --git a/package.json b/package.json new file mode 100644 index 000000000..293597fae --- /dev/null +++ b/package.json @@ -0,0 +1,103 @@ +{ + "name": "preact", + "amdName": "preact", + "version": "6.2.1", + "description": "Tiny & fast Component-based virtual DOM framework.", + "main": "dist/preact.js", + "jsnext:main": "src/preact.js", + "aliases:main": "aliases.js", + "dev:main": "dist/preact.dev.js", + "minified:main": "dist/preact.min.js", + "scripts": { + "clean": "rimraf dist/ $npm_package_aliases_main ${npm_package_aliases_main}.map", + "copy-flow-definition": "cp src/preact.js.flow dist/preact.js.flow", + "copy-typescript-definition": "cp src/preact.d.ts dist/preact.d.ts", + "build": "npm-run-all --silent clean transpile copy-flow-definition copy-typescript-definition strip optimize minify size", + "transpile:main": "rollup -c config/rollup.config.js -m ${npm_package_dev_main}.map -f umd -n $npm_package_amdName $npm_package_jsnext_main -o $npm_package_dev_main", + "transpile:aliases": "rollup -c config/rollup.config.aliases.js -m ${npm_package_aliases_main}.map -f umd -n $npm_package_amdName $npm_package_jsnext_main -o $npm_package_aliases_main", + "transpile": "npm-run-all transpile:main transpile:aliases", + "optimize": "uglifyjs $npm_package_dev_main -c conditionals=false,sequences=false,loops=false,join_vars=false,collapse_vars=false --pure-funcs=Object.defineProperty -b width=120,quote_style=3 -o $npm_package_main -p relative --in-source-map ${npm_package_dev_main}.map --source-map ${npm_package_main}.map", + "minify": "uglifyjs $npm_package_main -c collapse_vars,evaluate,screw_ie8,unsafe,loops=false,keep_fargs=false,pure_getters,unused,dead_code -m -o $npm_package_minified_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_minified_main}.map", + "strip": "jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/preact.dev.js && jscodeshift --run-in-band -s -t config/codemod-const.js dist/preact.dev.js", + "size": "size=$(gzip-size $npm_package_minified_main) && echo \"gzip size: $size / $(pretty-bytes $size)\"", + "test": "npm-run-all lint --parallel test:mocha test:karma", + "test:mocha": "mocha --recursive --compilers js:babel/register test/shared test/node", + "test:karma": "karma start test/karma.conf.js --single-run", + "test:mocha:watch": "npm run test:mocha -- --watch", + "test:karma:watch": "npm run test:karma -- no-single-run", + "lint": "eslint src test", + "prepublish": "npm run build", + "release": "npm run build && npm test && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish" + }, + "eslintConfig": { + "extends": "./config/eslint-config.js" + }, + "typings": "./src/preact.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/developit/preact.git" + }, + "files": [ + "src", + "dist", + "aliases.js", + "aliases.js.map", + "typings.json" + ], + "author": "Jason Miller ", + "license": "MIT", + "bugs": { + "url": "https://github.com/developit/preact/issues" + }, + "homepage": "https://github.com/developit/preact", + "devDependencies": { + "babel": "^5.8.23", + "babel-core": "^5.8.24", + "babel-eslint": "^6.1.0", + "babel-loader": "^5.3.2", + "babel-runtime": "^5.8.24", + "chai": "^3.4.1", + "diff": "^3.0.0", + "eslint": "^3.0.0", + "eslint-plugin-react": "^6.0.0", + "gzip-size-cli": "^1.0.0", + "isparta-loader": "^2.0.0", + "jscodeshift": "^0.3.25", + "karma": "^1.1.0", + "karma-babel-preprocessor": "^5.2.2", + "karma-chai": "^0.1.0", + "karma-chai-sinon": "^0.1.5", + "karma-coverage": "^1.0.0", + "karma-mocha": "^1.1.1", + "karma-mocha-reporter": "^2.0.4", + "karma-phantomjs-launcher": "^1.0.1", + "karma-sauce-launcher": "^1.0.0", + "karma-source-map-support": "^1.1.0", + "karma-sourcemap-loader": "^0.3.6", + "karma-webpack": "^1.7.0", + "mocha": "^3.0.1", + "npm-run-all": "^3.0.0", + "phantomjs-prebuilt": "^2.1.7", + "pretty-bytes-cli": "^2.0.0", + "rimraf": "^2.5.3", + "rollup": "^0.34.1", + "rollup-plugin-babel": "^1.0.0", + "rollup-plugin-memory": "^2.0.0", + "rollup-plugin-node-resolve": "^2.0.0", + "sinon": "^1.17.4", + "sinon-chai": "^2.8.0", + "uglify-js": "^2.7.0", + "webpack": "^1.13.1" + }, + "greenkeeper": { + "ignore": [ + "rollup-plugin-babel", + "babel", + "babel-core", + "babel-eslint", + "babel-loader", + "babel-runtime", + "jscodeshift" + ] + } +} diff --git a/src/clone-element.js b/src/clone-element.js new file mode 100644 index 000000000..fc7103056 --- /dev/null +++ b/src/clone-element.js @@ -0,0 +1,10 @@ +import { clone, extend } from './util'; +import { h } from './h'; + +export function cloneElement(vnode, props) { + return h( + vnode.nodeName, + extend(clone(vnode.attributes), props), + arguments.length>2 ? [].slice.call(arguments, 2) : vnode.children + ); +} diff --git a/src/component.js b/src/component.js new file mode 100644 index 000000000..aefaebe98 --- /dev/null +++ b/src/component.js @@ -0,0 +1,102 @@ +import { FORCE_RENDER } from './constants'; +import { extend, clone, isFunction } from './util'; +import { createLinkedState } from './linked-state'; +import { renderComponent } from './vdom/component'; +import { enqueueRender } from './render-queue'; + +/** Base Component class, for he ES6 Class method of creating Components + * @public + * + * @example + * class MyFoo extends Component { + * render(props, state) { + * return
; + * } + * } + */ +export function Component(props, context) { + /** @private */ + this._dirty = true; + // /** @public */ + // this._disableRendering = false; + // /** @public */ + // this.prevState = this.prevProps = this.prevContext = this.base = this.nextBase = this._parentComponent = this._component = this.__ref = this.__key = this._linkedStates = this._renderCallbacks = null; + /** @public */ + this.context = context; + /** @type {object} */ + this.props = props; + /** @type {object} */ + if (!this.state) this.state = {}; +} + + +extend(Component.prototype, { + + /** Returns a `boolean` value indicating if the component should re-render when receiving the given `props` and `state`. + * @param {object} nextProps + * @param {object} nextState + * @param {object} nextContext + * @returns {Boolean} should the component re-render + * @name shouldComponentUpdate + * @function + */ + // shouldComponentUpdate() { + // return true; + // }, + + + /** Returns a function that sets a state property when called. + * Calling linkState() repeatedly with the same arguments returns a cached link function. + * + * Provides some built-in special cases: + * - Checkboxes and radio buttons link their boolean `checked` value + * - Inputs automatically link their `value` property + * - Event paths fall back to any associated Component if not found on an element + * - If linked value is a function, will invoke it and use the result + * + * @param {string} key The path to set - can be a dot-notated deep key + * @param {string} [eventPath] If set, attempts to find the new state value at a given dot-notated path within the object passed to the linkedState setter. + * @returns {function} linkStateSetter(e) + * + * @example Update a "text" state value when an input changes: + * + * + * @example Set a deep state value on click + * foo, document.body); + */ +export function h(nodeName, attributes) { + let children, lastSimple, child, simple, i; + for (i=arguments.length; i-- > 2; ) { + stack.push(arguments[i]); + } + if (attributes && attributes.children) { + if (!stack.length) stack.push(attributes.children); + delete attributes.children; + } + while (stack.length) { + if ((child = stack.pop()) instanceof Array) { + for (i=child.length; i--; ) stack.push(child[i]); + } + else if (child!=null && child!==false) { + if (typeof child=='number' || child===true) child = String(child); + simple = typeof child=='string'; + if (simple && lastSimple) { + children[children.length-1] += child; + } + else { + if (children) children.push(child); + else children = [child]; + lastSimple = simple; + } + } + } + + let p = new VNode(nodeName, attributes || undefined, children); + + // if a "vnode hook" is defined, pass every created VNode to it + if (options.vnode) options.vnode(p); + + return p; +} diff --git a/src/linked-state.js b/src/linked-state.js new file mode 100644 index 000000000..ed72bd8bc --- /dev/null +++ b/src/linked-state.js @@ -0,0 +1,28 @@ +import { isString, delve } from './util'; + +/** Create an Event handler function that sets a given state property. + * @param {Component} component The component whose state should be updated + * @param {string} key A dot-notated key path to update in the component's state + * @param {string} eventPath A dot-notated key path to the value that should be retrieved from the Event or component + * @returns {function} linkedStateHandler + * @private + */ +export function createLinkedState(component, key, eventPath) { + let path = key.split('.'), + p0 = path[0]; + return function(e) { + let t = e && e.currentTarget || this, + s = component.state, + obj = s, + v = isString(eventPath) ? delve(e, eventPath) : t.nodeName ? ((t.nodeName+t.type).match(/^input(che|rad)/i) ? t.checked : t.value) : e, + i; + if (path.length>1) { + for (i=0; i|string; + attributes:{[name:string]:any}; + children:VNode[]; + key:string; + } + + interface ComponentLifecycle { + componentWillMount?():void; + + componentDidMount?():void; + + componentWillUnmount?():void; + + componentDidUnmount?():void; + + componentWillReceiveProps?(props:PropsType):void; + + shouldComponentUpdate?(props:PropsType):boolean; + + componentWillUpdate?():void; + + componentDidUpdate?():void; + } + + interface ComponentConstructor { + new (props?:PropsType):Component; + } + + abstract class Component implements ComponentLifecycle { + constructor(props?:PropsType); + + state:StateType; + props:PropsType & ComponentProps; + base:HTMLElement; + + linkState:(name:string) => void; + + setState(state:StateType, opts?:any):void; + + abstract render(props:PropsType & ComponentProps, state:any):JSX.Element; + } + + function h(node:ComponentConstructor, params:PropsType, ...children:(JSX.Element|string)[]):JSX.Element; + function h(node:string, params:JSX.HTMLAttributes&JSX.SVGAttributes, ...children:(JSX.Element|string)[]):JSX.Element; + + function render(node:JSX.Element, parent:Element, merge?:boolean):Element; + + function rerender():void; + + function cloneElement(element:JSX.Element, props:any):JSX.Element; + + var options:{ + syncComponentUpdates?:boolean; + debounceRendering?:(render:() => void) => void; + vnode?:(vnode:VNode) => void; + event?:(event:Event) => Event; + }; +} + +declare module "preact" { + export = preact; +} + +declare namespace JSX { + interface Element extends preact.VNode { + + } + + interface ElementClass extends preact.Component { + + } + + interface ElementAttributesProperty { + props:any; + } + + interface SVGAttributes { + clipPath?:string; + cx?:number | string; + cy?:number | string; + d?:string; + dx?:number | string; + dy?:number | string; + fill?:string; + fillOpacity?:number | string; + fontFamily?:string; + fontSize?:number | string; + fx?:number | string; + fy?:number | string; + gradientTransform?:string; + gradientUnits?:string; + markerEnd?:string; + markerMid?:string; + markerStart?:string; + offset?:number | string; + opacity?:number | string; + patternContentUnits?:string; + patternUnits?:string; + points?:string; + preserveAspectRatio?:string; + r?:number | string; + rx?:number | string; + ry?:number | string; + spreadMethod?:string; + stopColor?:string; + stopOpacity?:number | string; + stroke?:string; + strokeDasharray?:string; + strokeLinecap?:string; + strokeMiterlimit?:string; + strokeOpacity?:number | string; + strokeWidth?:number | string; + textAnchor?:string; + transform?:string; + version?:string; + viewBox?:string; + x1?:number | string; + x2?:number | string; + x?:number | string; + xlinkActuate?:string; + xlinkArcrole?:string; + xlinkHref?:string; + xlinkRole?:string; + xlinkShow?:string; + xlinkTitle?:string; + xlinkType?:string; + xmlBase?:string; + xmlLang?:string; + xmlSpace?:string; + y1?:number | string; + y2?:number | string; + y?:number | string; + } + + interface PathAttributes { + d:string; + } + + interface EventHandler { + (event:E):void; + } + + type ClipboardEventHandler = EventHandler; + type CompositionEventHandler = EventHandler; + type DragEventHandler = EventHandler; + type FocusEventHandler = EventHandler; + type KeyboardEventHandler = EventHandler; + type MouseEventHandler = EventHandler; + type TouchEventHandler = EventHandler; + type UIEventHandler = EventHandler; + type WheelEventHandler = EventHandler; + type AnimationEventHandler = EventHandler; + type TransitionEventHandler = EventHandler; + + type GenericEventHandler = EventHandler; + + interface DOMAttributed { + // Clipboard Events + onCopy?:ClipboardEventHandler; + onCut?:ClipboardEventHandler; + onPaste?:ClipboardEventHandler; + + // Composition Events + onCompositionEnd?:CompositionEventHandler; + onCompositionStart?:CompositionEventHandler; + onCompositionUpdate?:CompositionEventHandler; + + // Focus Events + onFocus?:FocusEventHandler; + onBlur?:FocusEventHandler; + + // Form Events + onChange?:GenericEventHandler; + onInput?:GenericEventHandler; + onSubmit?:GenericEventHandler; + + // Keyboard Events + onKeyDown?:KeyboardEventHandler; + onKeyPress?:KeyboardEventHandler; + onKeyUp?:KeyboardEventHandler; + + // Media Events + onAbort?:GenericEventHandler; + onCanPlay?:GenericEventHandler; + onCanPlayThrough?:GenericEventHandler; + onDurationChange?:GenericEventHandler; + onEmptied?:GenericEventHandler; + onEncrypted?:GenericEventHandler; + onEnded?:GenericEventHandler; + onLoadedData?:GenericEventHandler; + onLoadedMetadata?:GenericEventHandler; + onLoadStart?:GenericEventHandler; + onPause?:GenericEventHandler; + onPlay?:GenericEventHandler; + onPlaying?:GenericEventHandler; + onProgress?:GenericEventHandler; + onRateChange?:GenericEventHandler; + onSeeked?:GenericEventHandler; + onSeeking?:GenericEventHandler; + onStalled?:GenericEventHandler; + onSuspend?:GenericEventHandler; + onTimeUpdate?:GenericEventHandler; + onVolumeChange?:GenericEventHandler; + onWaiting?:GenericEventHandler; + + // MouseEvents + onClick?:MouseEventHandler; + onContextMenu?:MouseEventHandler; + onDoubleClick?:MouseEventHandler; + onDrag?:DragEventHandler; + onDragEnd?:DragEventHandler; + onDragEnter?:DragEventHandler; + onDragExit?:DragEventHandler; + onDragLeave?:DragEventHandler; + onDragOver?:DragEventHandler; + onDragStart?:DragEventHandler; + onDrop?:DragEventHandler; + onMouseDown?:MouseEventHandler; + onMouseEnter?:MouseEventHandler; + onMouseLeave?:MouseEventHandler; + onMouseMove?:MouseEventHandler; + onMouseOut?:MouseEventHandler; + onMouseOver?:MouseEventHandler; + onMouseUp?:MouseEventHandler; + + // Selection Events + onSelect?:GenericEventHandler; + + // Touch Events + onTouchCancel?:TouchEventHandler; + onTouchEnd?:TouchEventHandler; + onTouchMove?:TouchEventHandler; + onTouchStart?:TouchEventHandler; + + // UI Events + onScroll?:UIEventHandler; + + // Wheel Events + onWheel?:WheelEventHandler; + + // Animation Events + onAnimationStart?:AnimationEventHandler; + onAnimationEnd?:AnimationEventHandler; + onAnimationIteration?:AnimationEventHandler; + + // Transition Events + onTransitionEnd?:TransitionEventHandler; + } + + interface HTMLAttributes extends preact.PreactHTMLAttributes, DOMAttributed { + // Standard HTML Attributes + accept?:string; + acceptCharset?:string; + accessKey?:string; + action?:string; + allowFullScreen?:boolean; + allowTransparency?:boolean; + alt?:string; + async?:boolean; + autocomplete?:string; + autofocus?:boolean; + autoPlay?:boolean; + capture?:boolean; + cellPadding?:number | string; + cellSpacing?:number | string; + charSet?:string; + challenge?:string; + checked?:boolean; + class?:string; + className?:string; + cols?:number; + colSpan?:number; + content?:string; + contentEditable?:boolean; + contextMenu?:string; + controls?:boolean; + coords?:string; + crossOrigin?:string; + data?:string; + dateTime?:string; + default?:boolean; + defer?:boolean; + dir?:string; + disabled?:boolean; + download?:any; + draggable?:boolean; + encType?:string; + form?:string; + formAction?:string; + formEncType?:string; + formMethod?:string; + formNoValidate?:boolean; + formTarget?:string; + frameBorder?:number | string; + headers?:string; + height?:number | string; + hidden?:boolean; + high?:number; + href?:string; + hrefLang?:string; + for?:string; + httpEquiv?:string; + icon?:string; + id?:string; + inputMode?:string; + integrity?:string; + is?:string; + keyParams?:string; + keyType?:string; + kind?:string; + label?:string; + lang?:string; + list?:string; + loop?:boolean; + low?:number; + manifest?:string; + marginHeight?:number; + marginWidth?:number; + max?:number | string; + maxLength?:number; + media?:string; + mediaGroup?:string; + method?:string; + min?:number | string; + minLength?:number; + multiple?:boolean; + muted?:boolean; + name?:string; + noValidate?:boolean; + open?:boolean; + optimum?:number; + pattern?:string; + placeholder?:string; + poster?:string; + preload?:string; + radioGroup?:string; + readOnly?:boolean; + rel?:string; + required?:boolean; + role?:string; + rows?:number; + rowSpan?:number; + sandbox?:string; + scope?:string; + scoped?:boolean; + scrolling?:string; + seamless?:boolean; + selected?:boolean; + shape?:string; + size?:number; + sizes?:string; + span?:number; + spellCheck?:boolean; + src?:string; + srcset?:string; + srcDoc?:string; + srcLang?:string; + srcSet?:string; + start?:number; + step?:number | string; + style?:any; + summary?:string; + tabIndex?:number; + target?:string; + title?:string; + type?:string; + useMap?:string; + value?:string | string[]; + width?:number | string; + wmode?:string; + wrap?:string; + + // RDFa Attributes + about?:string; + datatype?:string; + inlist?:any; + prefix?:string; + property?:string; + resource?:string; + typeof?:string; + vocab?:string; + } + + interface IntrinsicElements { + // HTML + a:HTMLAttributes; + abbr:HTMLAttributes; + address:HTMLAttributes; + area:HTMLAttributes; + article:HTMLAttributes; + aside:HTMLAttributes; + audio:HTMLAttributes; + b:HTMLAttributes; + base:HTMLAttributes; + bdi:HTMLAttributes; + bdo:HTMLAttributes; + big:HTMLAttributes; + blockquote:HTMLAttributes; + body:HTMLAttributes; + br:HTMLAttributes; + button:HTMLAttributes; + canvas:HTMLAttributes; + caption:HTMLAttributes; + cite:HTMLAttributes; + code:HTMLAttributes; + col:HTMLAttributes; + colgroup:HTMLAttributes; + data:HTMLAttributes; + datalist:HTMLAttributes; + dd:HTMLAttributes; + del:HTMLAttributes; + details:HTMLAttributes; + dfn:HTMLAttributes; + dialog:HTMLAttributes; + div:HTMLAttributes; + dl:HTMLAttributes; + dt:HTMLAttributes; + em:HTMLAttributes; + embed:HTMLAttributes; + fieldset:HTMLAttributes; + figcaption:HTMLAttributes; + figure:HTMLAttributes; + footer:HTMLAttributes; + form:HTMLAttributes; + h1:HTMLAttributes; + h2:HTMLAttributes; + h3:HTMLAttributes; + h4:HTMLAttributes; + h5:HTMLAttributes; + h6:HTMLAttributes; + head:HTMLAttributes; + header:HTMLAttributes; + hr:HTMLAttributes; + html:HTMLAttributes; + i:HTMLAttributes; + iframe:HTMLAttributes; + img:HTMLAttributes; + input:HTMLAttributes; + ins:HTMLAttributes; + kbd:HTMLAttributes; + keygen:HTMLAttributes; + label:HTMLAttributes; + legend:HTMLAttributes; + li:HTMLAttributes; + link:HTMLAttributes; + main:HTMLAttributes; + map:HTMLAttributes; + mark:HTMLAttributes; + menu:HTMLAttributes; + menuitem:HTMLAttributes; + meta:HTMLAttributes; + meter:HTMLAttributes; + nav:HTMLAttributes; + noscript:HTMLAttributes; + object:HTMLAttributes; + ol:HTMLAttributes; + optgroup:HTMLAttributes; + option:HTMLAttributes; + output:HTMLAttributes; + p:HTMLAttributes; + param:HTMLAttributes; + picture:HTMLAttributes; + pre:HTMLAttributes; + progress:HTMLAttributes; + q:HTMLAttributes; + rp:HTMLAttributes; + rt:HTMLAttributes; + ruby:HTMLAttributes; + s:HTMLAttributes; + samp:HTMLAttributes; + script:HTMLAttributes; + section:HTMLAttributes; + select:HTMLAttributes; + small:HTMLAttributes; + source:HTMLAttributes; + span:HTMLAttributes; + strong:HTMLAttributes; + style:HTMLAttributes; + sub:HTMLAttributes; + summary:HTMLAttributes; + sup:HTMLAttributes; + table:HTMLAttributes; + tbody:HTMLAttributes; + td:HTMLAttributes; + textarea:HTMLAttributes; + tfoot:HTMLAttributes; + th:HTMLAttributes; + thead:HTMLAttributes; + time:HTMLAttributes; + title:HTMLAttributes; + tr:HTMLAttributes; + track:HTMLAttributes; + u:HTMLAttributes; + ul:HTMLAttributes; + "var":HTMLAttributes; + video:HTMLAttributes; + wbr:HTMLAttributes; + + //SVG + svg:SVGAttributes; + + circle:SVGAttributes; + clipPath:SVGAttributes; + defs:SVGAttributes; + ellipse:SVGAttributes; + feBlend:SVGAttributes; + feColorMatrix:SVGAttributes; + feComponentTransfer:SVGAttributes; + feComposite:SVGAttributes; + feConvolveMatrix:SVGAttributes; + feDiffuseLighting:SVGAttributes; + feDisplacementMap:SVGAttributes; + feFlood:SVGAttributes; + feGaussianBlur:SVGAttributes; + feImage:SVGAttributes; + feMerge:SVGAttributes; + feMergeNode:SVGAttributes; + feMorphology:SVGAttributes; + feOffset:SVGAttributes; + feSpecularLighting:SVGAttributes; + feTile:SVGAttributes; + feTurbulence:SVGAttributes; + filter:SVGAttributes; + foreignObject:SVGAttributes; + g:SVGAttributes; + image:SVGAttributes; + line:SVGAttributes; + linearGradient:SVGAttributes; + marker:SVGAttributes; + mask:SVGAttributes; + path:SVGAttributes; + pattern:SVGAttributes; + polygon:SVGAttributes; + polyline:SVGAttributes; + radialGradient:SVGAttributes; + rect:SVGAttributes; + stop:SVGAttributes; + symbol:SVGAttributes; + text:SVGAttributes; + tspan:SVGAttributes; + use:SVGAttributes; + } +} diff --git a/src/preact.js b/src/preact.js new file mode 100644 index 000000000..1fa169c04 --- /dev/null +++ b/src/preact.js @@ -0,0 +1,24 @@ +import { h } from './h'; +import { cloneElement } from './clone-element'; +import { Component } from './component'; +import { render } from './render'; +import { rerender } from './render-queue'; +import options from './options'; + +export default { + h, + cloneElement, + Component, + render, + rerender, + options +}; + +export { + h, + cloneElement, + Component, + render, + rerender, + options +}; diff --git a/src/preact.js.flow b/src/preact.js.flow new file mode 100644 index 000000000..37745faf6 --- /dev/null +++ b/src/preact.js.flow @@ -0,0 +1,9 @@ +/* @flow */ + +import { createElement as h, cloneElement, Component, render } from 'react'; + +export { h, cloneElement, Component, render }; +export default { h, cloneElement, Component, render }; + +declare export function rerender(): void; +declare export var options: Object; diff --git a/src/render-queue.js b/src/render-queue.js new file mode 100644 index 000000000..ff603611b --- /dev/null +++ b/src/render-queue.js @@ -0,0 +1,23 @@ +import options from './options'; +import { defer } from './util'; +import { renderComponent } from './vdom/component'; + +/** Managed queue of dirty components to be re-rendered */ + +// items/itemsOffline swap on each rerender() call (just a simple pool technique) +let items = []; + +export function enqueueRender(component) { + if (!component._dirty && (component._dirty = true) && items.push(component)==1) { + (options.debounceRendering || defer)(rerender); + } +} + + +export function rerender() { + let p, list = items; + items = []; + while ( (p = list.pop()) ) { + if (p._dirty) renderComponent(p); + } +} diff --git a/src/render.js b/src/render.js new file mode 100644 index 000000000..e0e8526ec --- /dev/null +++ b/src/render.js @@ -0,0 +1,20 @@ +import { diff } from './vdom/diff'; + +/** Render JSX into a `parent` Element. + * @param {VNode} vnode A (JSX) VNode to render + * @param {Element} parent DOM element to render into + * @param {Element} [merge] Attempt to re-use an existing DOM tree rooted at `merge` + * @public + * + * @example + * // render a div into : + * render(
hello!
, document.body); + * + * @example + * // render a "Thing" component into #foo: + * const Thing = ({ name }) => { name }; + * render(, document.querySelector('#foo')); + */ +export function render(vnode, parent, merge) { + return diff(merge, vnode, {}, false, parent); +} diff --git a/src/util.js b/src/util.js new file mode 100644 index 000000000..d2e63b090 --- /dev/null +++ b/src/util.js @@ -0,0 +1,68 @@ +/** Copy own-properties from `props` onto `obj`. + * @returns obj + * @private + */ +export function extend(obj, props) { + if (props) { + for (let i in props) obj[i] = props[i]; + } + return obj; +} + + +/** Fast clone. Note: does not filter out non-own properties. + * @see https://esbench.com/bench/56baa34f45df6895002e03b6 + */ +export function clone(obj) { + return extend({}, obj); +} + + +/** Get a deep property value from the given object, expressed in dot-notation. + * @private + */ +export function delve(obj, key) { + for (let p=key.split('.'), i=0; i lcCache[s] || (lcCache[s] = s.toLowerCase()); + + +/** Call a function asynchronously, as soon as possible. + * @param {Function} callback + */ +let resolved = typeof Promise!=='undefined' && Promise.resolve(); +export const defer = resolved ? (f => { resolved.then(f); }) : setTimeout; diff --git a/src/vdom/component-recycler.js b/src/vdom/component-recycler.js new file mode 100644 index 000000000..a70f0ece0 --- /dev/null +++ b/src/vdom/component-recycler.js @@ -0,0 +1,32 @@ +import { Component } from '../component'; + +/** Retains a pool of Components for re-use, keyed on component name. + * Note: since component names are not unique or even necessarily available, these are primarily a form of sharding. + * @private + */ +const components = {}; + + +export function collectComponent(component) { + let name = component.constructor.name, + list = components[name]; + if (list) list.push(component); + else components[name] = [component]; +} + + +export function createComponent(Ctor, props, context) { + let inst = new Ctor(props, context), + list = components[Ctor.name]; + Component.call(inst, props, context); + if (list) { + for (let i=list.length; i--; ) { + if (list[i].constructor===Ctor) { + inst.nextBase = list[i].nextBase; + list.splice(i, 1); + break; + } + } + } + return inst; +} diff --git a/src/vdom/component.js b/src/vdom/component.js new file mode 100644 index 000000000..bb2e4fa5d --- /dev/null +++ b/src/vdom/component.js @@ -0,0 +1,270 @@ +import { SYNC_RENDER, NO_RENDER, FORCE_RENDER, ASYNC_RENDER, ATTR_KEY } from '../constants'; +import options from '../options'; +import { isFunction, clone, extend } from '../util'; +import { enqueueRender } from '../render-queue'; +import { getNodeProps } from './index'; +import { diff, mounts, diffLevel, flushMounts, removeOrphanedChildren, recollectNodeTree } from './diff'; +import { isFunctionalComponent, buildFunctionalComponent } from './functional-component'; +import { createComponent, collectComponent } from './component-recycler'; +import { removeNode } from '../dom/index'; + + + +/** Set a component's `props` (generally derived from JSX attributes). + * @param {Object} props + * @param {Object} [opts] + * @param {boolean} [opts.renderSync=false] If `true` and {@link options.syncComponentUpdates} is `true`, triggers synchronous rendering. + * @param {boolean} [opts.render=true] If `false`, no render will be triggered. + */ +export function setComponentProps(component, props, opts, context, mountAll) { + if (component._disable) return; + component._disable = true; + + if ((component.__ref = props.ref)) delete props.ref; + if ((component.__key = props.key)) delete props.key; + + if (!component.base || mountAll) { + if (component.componentWillMount) component.componentWillMount(); + } + else if (component.componentWillReceiveProps) { + component.componentWillReceiveProps(props, context); + } + + if (context && context!==component.context) { + if (!component.prevContext) component.prevContext = component.context; + component.context = context; + } + + if (!component.prevProps) component.prevProps = component.props; + component.props = props; + + component._disable = false; + + if (opts!==NO_RENDER) { + if (opts===SYNC_RENDER || options.syncComponentUpdates!==false || !component.base) { + renderComponent(component, SYNC_RENDER, mountAll); + } + else { + enqueueRender(component); + } + } + + if (component.__ref) component.__ref(component); +} + + + +/** Render a Component, triggering necessary lifecycle events and taking High-Order Components into account. + * @param {Component} component + * @param {Object} [opts] + * @param {boolean} [opts.build=false] If `true`, component will build and store a DOM node if not already associated with one. + * @private + */ +export function renderComponent(component, opts, mountAll, isChild) { + if (component._disable) return; + + let skip, rendered, + props = component.props, + state = component.state, + context = component.context, + previousProps = component.prevProps || props, + previousState = component.prevState || state, + previousContext = component.prevContext || context, + isUpdate = component.base, + nextBase = component.nextBase, + initialBase = isUpdate || nextBase, + initialChildComponent = component._component, + inst, cbase; + + // if updating + if (isUpdate) { + component.props = previousProps; + component.state = previousState; + component.context = previousContext; + if (opts!==FORCE_RENDER + && component.shouldComponentUpdate + && component.shouldComponentUpdate(props, state, context) === false) { + skip = true; + } + else if (component.componentWillUpdate) { + component.componentWillUpdate(props, state, context); + } + component.props = props; + component.state = state; + component.context = context; + } + + component.prevProps = component.prevState = component.prevContext = component.nextBase = null; + component._dirty = false; + + if (!skip) { + if (component.render) rendered = component.render(props, state, context); + + // context to pass to the child, can be updated via (grand-)parent component + if (component.getChildContext) { + context = extend(clone(context), component.getChildContext()); + } + + while (isFunctionalComponent(rendered)) { + rendered = buildFunctionalComponent(rendered, context); + } + + let childComponent = rendered && rendered.nodeName, + toUnmount, base; + + if (isFunction(childComponent)) { + // set up high order component link + + + inst = initialChildComponent; + let childProps = getNodeProps(rendered); + + if (inst && inst.constructor===childComponent) { + setComponentProps(inst, childProps, SYNC_RENDER, context); + } + else { + toUnmount = inst; + + inst = createComponent(childComponent, childProps, context); + inst.nextBase = inst.nextBase || nextBase; + inst._parentComponent = component; + component._component = inst; + setComponentProps(inst, childProps, NO_RENDER, context); + renderComponent(inst, SYNC_RENDER, mountAll, true); + } + + base = inst.base; + } + else { + cbase = initialBase; + + // destroy high order component link + toUnmount = initialChildComponent; + if (toUnmount) { + cbase = component._component = null; + } + + if (initialBase || opts===SYNC_RENDER) { + if (cbase) cbase._component = null; + base = diff(cbase, rendered, context, mountAll || !isUpdate, initialBase && initialBase.parentNode, true); + } + } + + if (initialBase && base!==initialBase && inst!==initialChildComponent) { + let baseParent = initialBase.parentNode; + if (baseParent && base!==baseParent) { + baseParent.replaceChild(base, initialBase); + } + + if (!cbase && !toUnmount && component._parentComponent) { + initialBase._component = null; + recollectNodeTree(initialBase); + } + } + + if (toUnmount) { + unmountComponent(toUnmount, base!==initialBase); + } + + component.base = base; + if (base && !isChild) { + let componentRef = component, + t = component; + while ((t=t._parentComponent)) { componentRef = t; } + base._component = componentRef; + base._componentConstructor = componentRef.constructor; + } + } + + if (!isUpdate || mountAll) { + mounts.unshift(component); + } + else if (!skip && component.componentDidUpdate) { + component.componentDidUpdate(previousProps, previousState, previousContext); + } + + let cb = component._renderCallbacks, fn; + if (cb) while ( (fn = cb.pop()) ) fn.call(component); + + if (!diffLevel && !isChild) flushMounts(); +} + + + +/** Apply the Component referenced by a VNode to the DOM. + * @param {Element} dom The DOM node to mutate + * @param {VNode} vnode A Component-referencing VNode + * @returns {Element} dom The created/mutated element + * @private + */ +export function buildComponentFromVNode(dom, vnode, context, mountAll) { + let c = dom && dom._component, + oldDom = dom, + isDirectOwner = c && dom._componentConstructor===vnode.nodeName, + isOwner = isDirectOwner, + props = getNodeProps(vnode); + while (c && !isOwner && (c=c._parentComponent)) { + isOwner = c.constructor===vnode.nodeName; + } + + if (c && isOwner && (!mountAll || c._component)) { + setComponentProps(c, props, ASYNC_RENDER, context, mountAll); + dom = c.base; + } + else { + if (c && !isDirectOwner) { + unmountComponent(c, true); + dom = oldDom = null; + } + + c = createComponent(vnode.nodeName, props, context); + if (dom && !c.nextBase) c.nextBase = dom; + setComponentProps(c, props, SYNC_RENDER, context, mountAll); + dom = c.base; + + if (oldDom && dom!==oldDom) { + oldDom._component = null; + recollectNodeTree(oldDom); + } + } + + return dom; +} + + + +/** Remove a component from the DOM and recycle it. + * @param {Element} dom A DOM node from which to unmount the given Component + * @param {Component} component The Component instance to unmount + * @private + */ +export function unmountComponent(component, remove) { + // console.log(`${remove?'Removing':'Unmounting'} component: ${component.constructor.name}`); + let base = component.base; + + component._disable = true; + + if (component.componentWillUnmount) component.componentWillUnmount(); + + component.base = null; + + // recursively tear down & recollect high-order component children: + let inner = component._component; + if (inner) { + unmountComponent(inner, remove); + } + else if (base) { + if (base[ATTR_KEY] && base[ATTR_KEY].ref) base[ATTR_KEY].ref(null); + + component.nextBase = base; + + if (remove) { + removeNode(base); + collectComponent(component); + } + removeOrphanedChildren(base.childNodes, !remove); + } + + if (component.__ref) component.__ref(null); + if (component.componentDidUnmount) component.componentDidUnmount(); +} diff --git a/src/vdom/diff.js b/src/vdom/diff.js new file mode 100644 index 000000000..691434e98 --- /dev/null +++ b/src/vdom/diff.js @@ -0,0 +1,247 @@ +import { ATTR_KEY } from '../constants'; +import { isString, isFunction } from '../util'; +import { isSameNodeType, isNamedNode } from './index'; +import { isFunctionalComponent, buildFunctionalComponent } from './functional-component'; +import { buildComponentFromVNode } from './component'; +import { setAccessor } from '../dom/index'; +import { createNode, collectNode } from '../dom/recycler'; +import { unmountComponent } from './component'; + + +/** Diff recursion count, used to track the end of the diff cycle. */ +export const mounts = []; + +/** Diff recursion count, used to track the end of the diff cycle. */ +export let diffLevel = 0; + +let isSvgMode = false; + + +export function flushMounts() { + let c; + while ((c=mounts.pop())) { + if (c.componentDidMount) c.componentDidMount(); + } +} + + +/** Apply differences in a given vnode (and it's deep children) to a real DOM Node. + * @param {Element} [dom=null] A DOM node to mutate into the shape of the `vnode` + * @param {VNode} vnode A VNode (with descendants forming a tree) representing the desired DOM structure + * @returns {Element} dom The created/mutated element + * @private + */ +export function diff(dom, vnode, context, mountAll, parent, componentRoot) { + if (!diffLevel++) isSvgMode = parent instanceof SVGElement; + let ret = idiff(dom, vnode, context, mountAll); + if (parent && ret.parentNode!==parent) parent.appendChild(ret); + if (!--diffLevel && !componentRoot) flushMounts(); + return ret; +} + + +function idiff(dom, vnode, context, mountAll) { + let originalAttributes = vnode && vnode.attributes; + + while (isFunctionalComponent(vnode)) { + vnode = buildFunctionalComponent(vnode, context); + } + + if (vnode==null) vnode = ''; + + if (isString(vnode)) { + if (dom) { + if (dom instanceof Text && dom.parentNode) { + dom.nodeValue = vnode; + return dom; + } + recollectNodeTree(dom); + } + return document.createTextNode(vnode); + } + + if (isFunction(vnode.nodeName)) { + return buildComponentFromVNode(dom, vnode, context, mountAll); + } + + let out = dom, + nodeName = vnode.nodeName, + prevSvgMode = isSvgMode; + + if (!isString(nodeName)) { + nodeName = String(nodeName); + } + + isSvgMode = nodeName==='svg' ? true : nodeName==='foreignObject' ? false : isSvgMode; + + if (!dom) { + out = createNode(nodeName, isSvgMode); + } + else if (!isNamedNode(dom, nodeName)) { + out = createNode(nodeName, isSvgMode); + // move children into the replacement node + while (dom.firstChild) out.appendChild(dom.firstChild); + // reclaim element nodes + recollectNodeTree(dom); + } + + // fast-path for elements containing a single TextNode: + if (vnode.children && vnode.children.length===1 && typeof vnode.children[0]==='string' && out.childNodes.length===1 && out.firstChild instanceof Text) { + out.firstChild.nodeValue = vnode.children[0]; + } + else if (vnode.children || out.firstChild) { + innerDiffNode(out, vnode.children, context, mountAll); + } + + let props = out[ATTR_KEY]; + if (!props) { + out[ATTR_KEY] = props = {}; + for (let a=out.attributes, i=a.length; i--; ) props[a[i].name] = a[i].value; + } + + diffAttributes(out, vnode.attributes, props); + + if (originalAttributes && typeof originalAttributes.ref==='function') { + (props.ref = originalAttributes.ref)(out); + } + + isSvgMode = prevSvgMode; + + return out; +} + + +/** Apply child and attribute changes between a VNode and a DOM Node to the DOM. */ +function innerDiffNode(dom, vchildren, context, mountAll) { + let originalChildren = dom.childNodes, + children = [], + keyed = {}, + keyedLen = 0, + min = 0, + len = originalChildren.length, + childrenLen = 0, + vlen = vchildren && vchildren.length, + j, c, vchild, child; + + if (len) { + for (let i=0; i|undefined} */ + this.attributes = attributes; + + /** @type {array|undefined} */ + this.children = children; + + /** Reference to the given key. */ + this.key = attributes && attributes.key; +} diff --git a/test/browser/components.js b/test/browser/components.js new file mode 100644 index 000000000..b4649a719 --- /dev/null +++ b/test/browser/components.js @@ -0,0 +1,713 @@ +import { h, render, rerender, Component } from '../../src/preact'; +/** @jsx h */ + +let spyAll = obj => Object.keys(obj).forEach( key => sinon.spy(obj,key) ); + +function getAttributes(node) { + let attrs = {}; + if (node.attributes) { + for (let i=node.attributes.length; i--; ) { + attrs[node.attributes[i].name] = node.attributes[i].value; + } + } + return attrs; +} + +// hacky normalization of attribute order across browsers. +function sortAttributes(html) { + return html.replace(/<([a-z0-9-]+)((?:\s[a-z0-9:_.-]+=".*?")+)((?:\s*\/)?>)/gi, (s, pre, attrs, after) => { + let list = attrs.match(/\s[a-z0-9:_.-]+=".*?"/gi).sort( (a, b) => a>b ? 1 : -1 ); + if (~after.indexOf('/')) after = '>'; + return '<' + pre + list.join('') + after; + }); +} + +const Empty = () => null; + +describe('Components', () => { + let scratch; + + before( () => { + scratch = document.createElement('div'); + (document.body || document.documentElement).appendChild(scratch); + }); + + beforeEach( () => { + let c = scratch.firstElementChild; + if (c) render(, scratch, c); + scratch.innerHTML = ''; + }); + + after( () => { + scratch.parentNode.removeChild(scratch); + scratch = null; + }); + + it('should render components', () => { + class C1 extends Component { + render() { + return
C1
; + } + } + sinon.spy(C1.prototype, 'render'); + render(, scratch); + + expect(C1.prototype.render) + .to.have.been.calledOnce + .and.to.have.been.calledWithMatch({}, {}) + .and.to.have.returned(sinon.match({ nodeName:'div' })); + + expect(scratch.innerHTML).to.equal('
C1
'); + }); + + + it('should render functional components', () => { + const PROPS = { foo:'bar', onBaz:()=>{} }; + + const C3 = sinon.spy( props =>
); + + render(, scratch); + + expect(C3) + .to.have.been.calledOnce + .and.to.have.been.calledWith(PROPS) + .and.to.have.returned(sinon.match({ + nodeName: 'div', + attributes: PROPS + })); + + expect(scratch.innerHTML).to.equal('
'); + }); + + + it('should render components with props', () => { + const PROPS = { foo:'bar', onBaz:()=>{} }; + let constructorProps; + + class C2 extends Component { + constructor(props) { + super(props); + constructorProps = props; + } + render(props) { + return
; + } + } + sinon.spy(C2.prototype, 'render'); + + render(, scratch); + + expect(constructorProps).to.deep.equal(PROPS); + + expect(C2.prototype.render) + .to.have.been.calledOnce + .and.to.have.been.calledWithMatch(PROPS, {}) + .and.to.have.returned(sinon.match({ + nodeName: 'div', + attributes: PROPS + })); + + expect(scratch.innerHTML).to.equal('
'); + }); + + + // Test for Issue #73 + it('should remove orphaned elements replaced by Components', () => { + class Comp extends Component { + render() { + return span in a component; + } + } + + let root; + function test(content) { + root = render(content, scratch, root); + } + + test(); + test(
just a div
); + test(); + + expect(scratch.innerHTML).to.equal('span in a component'); + }); + + + // Test for Issue #176 + it('should remove children when root changes to text node', () => { + let comp; + + class Comp extends Component { + render(_, { alt }) { + return alt ? 'asdf' :
test
; + } + } + + render(comp=c} />, scratch); + + comp.setState({ alt:true }); + comp.forceUpdate(); + expect(scratch.innerHTML, 'switching to textnode').to.equal('asdf'); + + comp.setState({ alt:false }); + comp.forceUpdate(); + expect(scratch.innerHTML, 'switching to element').to.equal('
test
'); + + comp.setState({ alt:true }); + comp.forceUpdate(); + expect(scratch.innerHTML, 'switching to textnode 2').to.equal('asdf'); + }); + + + describe('props.children', () => { + it('should support passing children as a prop', () => { + const Foo = props =>
; + + render(bar, + '123', + 456 + ]} />, scratch); + + expect(scratch.innerHTML).to.equal('
bar123456
'); + }); + + it('should be ignored when explicit children exist', () => { + const Foo = props =>
a
; + + render(, scratch); + + expect(scratch.innerHTML).to.equal('
a
'); + }); + }); + + + describe('High-Order Components', () => { + it('should render nested functional components', () => { + const PROPS = { foo:'bar', onBaz:()=>{} }; + + const Outer = sinon.spy( + props => + ); + + const Inner = sinon.spy( + props =>
inner
+ ); + + render(, scratch); + + expect(Outer) + .to.have.been.calledOnce + .and.to.have.been.calledWith(PROPS) + .and.to.have.returned(sinon.match({ + nodeName: Inner, + attributes: PROPS + })); + + expect(Inner) + .to.have.been.calledOnce + .and.to.have.been.calledWith(PROPS) + .and.to.have.returned(sinon.match({ + nodeName: 'div', + attributes: PROPS, + children: ['inner'] + })); + + expect(scratch.innerHTML).to.equal('
inner
'); + }); + + it('should re-render nested functional components', () => { + let doRender = null; + class Outer extends Component { + componentDidMount() { + let i = 1; + doRender = () => this.setState({ i: ++i }); + } + componentWillUnmount() {} + render(props, { i }) { + return ; + } + } + sinon.spy(Outer.prototype, 'render'); + sinon.spy(Outer.prototype, 'componentWillUnmount'); + + let j = 0; + const Inner = sinon.spy( + props =>
inner
+ ); + + render(, scratch); + + // update & flush + doRender(); + rerender(); + + expect(Outer.prototype.componentWillUnmount) + .not.to.have.been.called; + + expect(Inner).to.have.been.calledTwice; + + expect(Inner.secondCall) + .to.have.been.calledWith({ foo:'bar', i:2 }) + .and.to.have.returned(sinon.match({ + attributes: { + j: 2, + i: 2, + foo: 'bar' + } + })); + + expect(getAttributes(scratch.firstElementChild)).to.eql({ + j: '2', + i: '2', + foo: 'bar' + }); + + // update & flush + doRender(); + rerender(); + + expect(Inner).to.have.been.calledThrice; + + expect(Inner.thirdCall) + .to.have.been.calledWith({ foo:'bar', i:3 }) + .and.to.have.returned(sinon.match({ + attributes: { + j: 3, + i: 3, + foo: 'bar' + } + })); + + expect(getAttributes(scratch.firstElementChild)).to.eql({ + j: '3', + i: '3', + foo: 'bar' + }); + }); + + it('should re-render nested components', () => { + let doRender = null, + alt = false; + + class Outer extends Component { + componentDidMount() { + let i = 1; + doRender = () => this.setState({ i: ++i }); + } + componentWillUnmount() {} + render(props, { i }) { + if (alt) return
; + return ; + } + } + sinon.spy(Outer.prototype, 'render'); + sinon.spy(Outer.prototype, 'componentDidMount'); + sinon.spy(Outer.prototype, 'componentWillUnmount'); + + let j = 0; + class Inner extends Component { + constructor(...args) { + super(); + this._constructor(...args); + } + _constructor() {} + componentWillMount() {} + componentDidMount() {} + componentWillUnmount() {} + componentDidUnmount() {} + render(props) { + return
inner
; + } + } + sinon.spy(Inner.prototype, '_constructor'); + sinon.spy(Inner.prototype, 'render'); + sinon.spy(Inner.prototype, 'componentWillMount'); + sinon.spy(Inner.prototype, 'componentDidMount'); + sinon.spy(Inner.prototype, 'componentDidUnmount'); + sinon.spy(Inner.prototype, 'componentWillUnmount'); + + render(, scratch); + + expect(Outer.prototype.componentDidMount).to.have.been.calledOnce; + + // update & flush + doRender(); + rerender(); + + expect(Outer.prototype.componentWillUnmount).not.to.have.been.called; + + expect(Inner.prototype._constructor).to.have.been.calledOnce; + expect(Inner.prototype.componentWillUnmount).not.to.have.been.called; + expect(Inner.prototype.componentDidUnmount).not.to.have.been.called; + expect(Inner.prototype.componentWillMount).to.have.been.calledOnce; + expect(Inner.prototype.componentDidMount).to.have.been.calledOnce; + expect(Inner.prototype.render).to.have.been.calledTwice; + + expect(Inner.prototype.render.secondCall) + .to.have.been.calledWith({ foo:'bar', i:2 }) + .and.to.have.returned(sinon.match({ + attributes: { + j: 2, + i: 2, + foo: 'bar' + } + })); + + expect(getAttributes(scratch.firstElementChild)).to.eql({ + j: '2', + i: '2', + foo: 'bar' + }); + + expect(sortAttributes(scratch.innerHTML)).to.equal(sortAttributes('
inner
')); + + // update & flush + doRender(); + rerender(); + + expect(Inner.prototype.componentWillUnmount).not.to.have.been.called; + expect(Inner.prototype.componentDidUnmount).not.to.have.been.called; + expect(Inner.prototype.componentWillMount).to.have.been.calledOnce; + expect(Inner.prototype.componentDidMount).to.have.been.calledOnce; + expect(Inner.prototype.render).to.have.been.calledThrice; + + expect(Inner.prototype.render.thirdCall) + .to.have.been.calledWith({ foo:'bar', i:3 }) + .and.to.have.returned(sinon.match({ + attributes: { + j: 3, + i: 3, + foo: 'bar' + } + })); + + expect(getAttributes(scratch.firstElementChild)).to.eql({ + j: '3', + i: '3', + foo: 'bar' + }); + + + // update & flush + alt = true; + doRender(); + rerender(); + + expect(Inner.prototype.componentWillUnmount).to.have.been.calledOnce; + expect(Inner.prototype.componentDidUnmount).to.have.been.calledOnce; + + expect(scratch.innerHTML).to.equal('
'); + + // update & flush + alt = false; + doRender(); + rerender(); + + expect(sortAttributes(scratch.innerHTML)).to.equal(sortAttributes('
inner
')); + }); + + it('should resolve intermediary functional component', () => { + let ctx = {}; + class Root extends Component { + getChildContext() { + return { ctx }; + } + render() { + return ; + } + } + const Func = sinon.spy( () => ); + class Inner extends Component { + componentWillMount() {} + componentDidMount() {} + componentWillUnmount() {} + componentDidUnmount() {} + render() { + return
inner
; + } + } + + spyAll(Inner.prototype); + + let root = render(, scratch); + + expect(Inner.prototype.componentWillMount).to.have.been.calledOnce; + expect(Inner.prototype.componentDidMount).to.have.been.calledOnce; + expect(Inner.prototype.componentWillMount).to.have.been.calledBefore(Inner.prototype.componentDidMount); + + root = render(, scratch, root); + + expect(Inner.prototype.componentWillUnmount).to.have.been.calledOnce; + expect(Inner.prototype.componentDidUnmount).to.have.been.calledOnce; + expect(Inner.prototype.componentWillUnmount).to.have.been.calledBefore(Inner.prototype.componentDidUnmount); + }); + + it('should unmount children of high-order components without unmounting parent', () => { + let outer, inner2, counter=0; + + class Outer extends Component { + constructor(props, context) { + super(props, context); + outer = this; + this.state = { + child: this.props.child + }; + } + componentWillUnmount(){} + componentDidUnmount(){} + componentWillMount(){} + componentDidMount(){} + render(_, { child:C }) { + return ; + } + } + spyAll(Outer.prototype); + + class Inner extends Component { + componentWillUnmount(){} + componentDidUnmount(){} + componentWillMount(){} + componentDidMount(){} + render() { + return h('element'+(++counter)); + } + } + spyAll(Inner.prototype); + + class Inner2 extends Component { + constructor(props, context) { + super(props, context); + inner2 = this; + } + componentWillUnmount(){} + componentDidUnmount(){} + componentWillMount(){} + componentDidMount(){} + render() { + return h('element'+(++counter)); + } + } + spyAll(Inner2.prototype); + + render(, scratch); + + // outer should only have been mounted once + expect(Outer.prototype.componentWillMount, 'outer initial').to.have.been.calledOnce; + expect(Outer.prototype.componentDidMount, 'outer initial').to.have.been.calledOnce; + expect(Outer.prototype.componentWillUnmount, 'outer initial').not.to.have.been.called; + expect(Outer.prototype.componentDidUnmount, 'outer initial').not.to.have.been.called; + + // inner should only have been mounted once + expect(Inner.prototype.componentWillMount, 'inner initial').to.have.been.calledOnce; + expect(Inner.prototype.componentDidMount, 'inner initial').to.have.been.calledOnce; + expect(Inner.prototype.componentWillUnmount, 'inner initial').not.to.have.been.called; + expect(Inner.prototype.componentDidUnmount, 'inner initial').not.to.have.been.called; + + outer.setState({ child:Inner2 }); + outer.forceUpdate(); + + expect(Inner2.prototype.render).to.have.been.calledOnce; + + // outer should still only have been mounted once + expect(Outer.prototype.componentWillMount, 'outer swap').to.have.been.calledOnce; + expect(Outer.prototype.componentDidMount, 'outer swap').to.have.been.calledOnce; + expect(Outer.prototype.componentWillUnmount, 'outer swap').not.to.have.been.called; + expect(Outer.prototype.componentDidUnmount, 'outer swap').not.to.have.been.called; + + // inner should only have been mounted once + expect(Inner2.prototype.componentWillMount, 'inner2 swap').to.have.been.calledOnce; + expect(Inner2.prototype.componentDidMount, 'inner2 swap').to.have.been.calledOnce; + expect(Inner2.prototype.componentWillUnmount, 'inner2 swap').not.to.have.been.called; + expect(Inner2.prototype.componentDidUnmount, 'inner2 swap').not.to.have.been.called; + + inner2.forceUpdate(); + + expect(Inner2.prototype.render, 'inner2 update').to.have.been.calledTwice; + expect(Inner2.prototype.componentWillMount, 'inner2 update').to.have.been.calledOnce; + expect(Inner2.prototype.componentDidMount, 'inner2 update').to.have.been.calledOnce; + expect(Inner2.prototype.componentWillUnmount, 'inner2 update').not.to.have.been.called; + expect(Inner2.prototype.componentDidUnmount, 'inner2 update').not.to.have.been.called; + }); + + it('should remount when swapping between HOC child types', () => { + class Outer extends Component { + render({ child: Child }) { + return ; + } + } + + class Inner extends Component { + componentWillMount() {} + componentWillUnmount() {} + render() { + return
foo
; + } + } + spyAll(Inner.prototype); + + const InnerFunc = () => ( +
bar
+ ); + + let root = render(, scratch, root); + + expect(Inner.prototype.componentWillMount, 'initial mount').to.have.been.calledOnce; + expect(Inner.prototype.componentWillUnmount, 'initial mount').not.to.have.been.called; + + Inner.prototype.componentWillMount.reset(); + root = render(, scratch, root); + + expect(Inner.prototype.componentWillMount, 'unmount').not.to.have.been.called; + expect(Inner.prototype.componentWillUnmount, 'unmount').to.have.been.calledOnce; + + Inner.prototype.componentWillUnmount.reset(); + root = render(, scratch, root); + + expect(Inner.prototype.componentWillMount, 'remount').to.have.been.calledOnce; + expect(Inner.prototype.componentWillUnmount, 'remount').not.to.have.been.called; + }); + }); + + describe('Component Nesting', () => { + let useIntermediary = false; + + let createComponent = (Intermediary) => { + class C extends Component { + componentWillMount() {} + componentDidUnmount() {} + render({ children }) { + if (!useIntermediary) return children[0]; + let I = useIntermediary===true ? Intermediary : useIntermediary; + return {children}; + } + } + spyAll(C.prototype); + return C; + }; + + let createFunction = () => sinon.spy( ({ children }) => children[0] ); + + let root; + let rndr = n => root = render(n, scratch, root); + + let F1 = createFunction(); + let F2 = createFunction(); + let F3 = createFunction(); + + let C1 = createComponent(F1); + let C2 = createComponent(F2); + let C3 = createComponent(F3); + + let reset = () => [C1, C2, C3].reduce( + (acc, c) => acc.concat( Object.keys(c.prototype).map(key => c.prototype[key]) ), + [F1, F2, F3] + ).forEach( c => c.reset && c.reset() ); + + + it('should handle lifecycle for no intermediary in component tree', () => { + reset(); + rndr(Some Text); + + expect(C1.prototype.componentWillMount, 'initial mount').to.have.been.calledOnce; + expect(C2.prototype.componentWillMount, 'initial mount').to.have.been.calledOnce; + expect(C3.prototype.componentWillMount, 'initial mount').to.have.been.calledOnce; + + reset(); + rndr(Some Text); + + expect(C1.prototype.componentWillMount, 'unmount innermost, C1').not.to.have.been.called; + expect(C2.prototype.componentWillMount, 'unmount innermost, C2').not.to.have.been.called; + expect(C3.prototype.componentDidUnmount, 'unmount innermost, C3').to.have.been.calledOnce; + + reset(); + rndr(Some Text); + + expect(C1.prototype.componentWillMount, 'swap innermost').not.to.have.been.called; + expect(C2.prototype.componentDidUnmount, 'swap innermost').to.have.been.calledOnce; + expect(C3.prototype.componentWillMount, 'swap innermost').to.have.been.calledOnce; + + reset(); + rndr(Some Text); + + expect(C1.prototype.componentDidUnmount, 'inject between, C1').not.to.have.been.called; + expect(C1.prototype.componentWillMount, 'inject between, C1').not.to.have.been.called; + expect(C2.prototype.componentWillMount, 'inject between, C2').to.have.been.calledOnce; + expect(C3.prototype.componentDidUnmount, 'inject between, C3').to.have.been.calledOnce; + expect(C3.prototype.componentWillMount, 'inject between, C3').to.have.been.calledOnce; + }); + + + it('should handle lifecycle for nested intermediary functional components', () => { + useIntermediary = true; + + rndr(
); + reset(); + rndr(Some Text); + + expect(C1.prototype.componentWillMount, 'initial mount w/ intermediary fn, C1').to.have.been.calledOnce; + expect(C2.prototype.componentWillMount, 'initial mount w/ intermediary fn, C2').to.have.been.calledOnce; + expect(C3.prototype.componentWillMount, 'initial mount w/ intermediary fn, C3').to.have.been.calledOnce; + + reset(); + rndr(Some Text); + + expect(C1.prototype.componentWillMount, 'unmount innermost w/ intermediary fn, C1').not.to.have.been.called; + expect(C2.prototype.componentWillMount, 'unmount innermost w/ intermediary fn, C2').not.to.have.been.called; + expect(C3.prototype.componentDidUnmount, 'unmount innermost w/ intermediary fn, C3').to.have.been.calledOnce; + + reset(); + rndr(Some Text); + + expect(C1.prototype.componentWillMount, 'swap innermost w/ intermediary fn').not.to.have.been.called; + expect(C2.prototype.componentDidUnmount, 'swap innermost w/ intermediary fn').to.have.been.calledOnce; + expect(C3.prototype.componentWillMount, 'swap innermost w/ intermediary fn').to.have.been.calledOnce; + + reset(); + rndr(Some Text); + + expect(C1.prototype.componentDidUnmount, 'inject between, C1 w/ intermediary fn').not.to.have.been.called; + expect(C1.prototype.componentWillMount, 'inject between, C1 w/ intermediary fn').not.to.have.been.called; + expect(C2.prototype.componentWillMount, 'inject between, C2 w/ intermediary fn').to.have.been.calledOnce; + expect(C3.prototype.componentDidUnmount, 'inject between, C3 w/ intermediary fn').to.have.been.calledOnce; + expect(C3.prototype.componentWillMount, 'inject between, C3 w/ intermediary fn').to.have.been.calledOnce; + }); + + + it('should handle lifecycle for nested intermediary elements', () => { + useIntermediary = 'div'; + + rndr(
); + reset(); + rndr(Some Text); + + expect(C1.prototype.componentWillMount, 'initial mount w/ intermediary div, C1').to.have.been.calledOnce; + expect(C2.prototype.componentWillMount, 'initial mount w/ intermediary div, C2').to.have.been.calledOnce; + expect(C3.prototype.componentWillMount, 'initial mount w/ intermediary div, C3').to.have.been.calledOnce; + + reset(); + rndr(Some Text); + + expect(C1.prototype.componentWillMount, 'unmount innermost w/ intermediary div, C1').not.to.have.been.called; + expect(C2.prototype.componentDidUnmount, 'unmount innermost w/ intermediary div, C2 ummount').not.to.have.been.called; + // @TODO this was just incorrect? + // expect(C2.prototype.componentWillMount, 'unmount innermost w/ intermediary div, C2').not.to.have.been.called; + expect(C3.prototype.componentDidUnmount, 'unmount innermost w/ intermediary div, C3').to.have.been.calledOnce; + + reset(); + rndr(Some Text); + + expect(C1.prototype.componentWillMount, 'swap innermost w/ intermediary div').not.to.have.been.called; + expect(C2.prototype.componentDidUnmount, 'swap innermost w/ intermediary div').to.have.been.calledOnce; + expect(C3.prototype.componentWillMount, 'swap innermost w/ intermediary div').to.have.been.calledOnce; + + reset(); + rndr(Some Text); + + expect(C1.prototype.componentDidUnmount, 'inject between, C1 w/ intermediary div').not.to.have.been.called; + expect(C1.prototype.componentWillMount, 'inject between, C1 w/ intermediary div').not.to.have.been.called; + expect(C2.prototype.componentWillMount, 'inject between, C2 w/ intermediary div').to.have.been.calledOnce; + expect(C3.prototype.componentDidUnmount, 'inject between, C3 w/ intermediary div').to.have.been.calledOnce; + expect(C3.prototype.componentWillMount, 'inject between, C3 w/ intermediary div').to.have.been.calledOnce; + }); + }); +}); diff --git a/test/browser/context.js b/test/browser/context.js new file mode 100644 index 000000000..e62a948a4 --- /dev/null +++ b/test/browser/context.js @@ -0,0 +1,170 @@ +import { h, render, Component } from '../../src/preact'; +/** @jsx h */ + +describe('context', () => { + let scratch; + + before( () => { + scratch = document.createElement('div'); + (document.body || document.documentElement).appendChild(scratch); + }); + + beforeEach( () => { + scratch.innerHTML = ''; + }); + + after( () => { + scratch.parentNode.removeChild(scratch); + scratch = null; + }); + + it('should pass context to grandchildren', () => { + const CONTEXT = { a:'a' }; + const PROPS = { b:'b' }; + // let inner; + + class Outer extends Component { + getChildContext() { + return CONTEXT; + } + render(props) { + return
; + } + } + sinon.spy(Outer.prototype, 'getChildContext'); + + class Inner extends Component { + // constructor() { + // super(); + // inner = this; + // } + shouldComponentUpdate() { return true; } + componentWillReceiveProps() {} + componentWillUpdate() {} + componentDidUpdate() {} + render(props, state, context) { + return
{ context && context.a }
; + } + } + sinon.spy(Inner.prototype, 'shouldComponentUpdate'); + sinon.spy(Inner.prototype, 'componentWillReceiveProps'); + sinon.spy(Inner.prototype, 'componentWillUpdate'); + sinon.spy(Inner.prototype, 'componentDidUpdate'); + sinon.spy(Inner.prototype, 'render'); + + render(, scratch, scratch.lastChild); + + expect(Outer.prototype.getChildContext).to.have.been.calledOnce; + + // initial render does not invoke anything but render(): + expect(Inner.prototype.render).to.have.been.calledWith({}, {}, CONTEXT); + + CONTEXT.foo = 'bar'; + render(, scratch, scratch.lastChild); + + expect(Outer.prototype.getChildContext).to.have.been.calledTwice; + + expect(Inner.prototype.shouldComponentUpdate).to.have.been.calledOnce.and.calledWith(PROPS, {}, CONTEXT); + expect(Inner.prototype.componentWillReceiveProps).to.have.been.calledWith(PROPS, CONTEXT); + expect(Inner.prototype.componentWillUpdate).to.have.been.calledWith(PROPS, {}); + expect(Inner.prototype.componentDidUpdate).to.have.been.calledWith({}, {}); + expect(Inner.prototype.render).to.have.been.calledWith(PROPS, {}, CONTEXT); + + + /* Future: + * Newly created context objects are *not* currently cloned. + * This test checks that they *are* cloned. + */ + // Inner.prototype.render.reset(); + // CONTEXT.foo = 'baz'; + // inner.forceUpdate(); + // expect(Inner.prototype.render).to.have.been.calledWith(PROPS, {}, { a:'a', foo:'bar' }); + }); + + it('should pass context to direct children', () => { + const CONTEXT = { a:'a' }; + const PROPS = { b:'b' }; + + class Outer extends Component { + getChildContext() { + return CONTEXT; + } + render(props) { + return ; + } + } + sinon.spy(Outer.prototype, 'getChildContext'); + + class Inner extends Component { + shouldComponentUpdate() { return true; } + componentWillReceiveProps() {} + componentWillUpdate() {} + componentDidUpdate() {} + render(props, state, context) { + return
{ context && context.a }
; + } + } + sinon.spy(Inner.prototype, 'shouldComponentUpdate'); + sinon.spy(Inner.prototype, 'componentWillReceiveProps'); + sinon.spy(Inner.prototype, 'componentWillUpdate'); + sinon.spy(Inner.prototype, 'componentDidUpdate'); + sinon.spy(Inner.prototype, 'render'); + + render(, scratch, scratch.lastChild); + + expect(Outer.prototype.getChildContext).to.have.been.calledOnce; + + // initial render does not invoke anything but render(): + expect(Inner.prototype.render).to.have.been.calledWith({}, {}, CONTEXT); + + CONTEXT.foo = 'bar'; + render(, scratch, scratch.lastChild); + + expect(Outer.prototype.getChildContext).to.have.been.calledTwice; + + expect(Inner.prototype.shouldComponentUpdate).to.have.been.calledOnce.and.calledWith(PROPS, {}, CONTEXT); + expect(Inner.prototype.componentWillReceiveProps).to.have.been.calledWith(PROPS, CONTEXT); + expect(Inner.prototype.componentWillUpdate).to.have.been.calledWith(PROPS, {}); + expect(Inner.prototype.componentDidUpdate).to.have.been.calledWith({}, {}); + expect(Inner.prototype.render).to.have.been.calledWith(PROPS, {}, CONTEXT); + + // make sure render() could make use of context.a + expect(Inner.prototype.render).to.have.returned(sinon.match({ children:['a'] })); + }); + + it('should preserve existing context properties when creating child contexts', () => { + let outerContext = { outer:true }, + innerContext = { inner:true }; + class Outer extends Component { + getChildContext() { + return { outerContext }; + } + render() { + return
; + } + } + + class Inner extends Component { + getChildContext() { + return { innerContext }; + } + render() { + return ; + } + } + + class InnerMost extends Component { + render() { + return test; + } + } + + sinon.spy(Inner.prototype, 'render'); + sinon.spy(InnerMost.prototype, 'render'); + + render(, scratch); + + expect(Inner.prototype.render).to.have.been.calledWith({}, {}, { outerContext }); + expect(InnerMost.prototype.render).to.have.been.calledWith({}, {}, { outerContext, innerContext }); + }); +}); diff --git a/test/browser/keys.js b/test/browser/keys.js new file mode 100644 index 000000000..e0a6b9ae8 --- /dev/null +++ b/test/browser/keys.js @@ -0,0 +1,85 @@ +import { h, Component, render } from '../../src/preact'; +/** @jsx h */ + +describe('keys', () => { + let scratch; + + before( () => { + scratch = document.createElement('div'); + (document.body || document.documentElement).appendChild(scratch); + }); + + beforeEach( () => { + scratch.innerHTML = ''; + }); + + after( () => { + scratch.parentNode.removeChild(scratch); + scratch = null; + }); + + // See developit/preact-compat#21 + it('should remove orphaned keyed nodes', () => { + let root = render(( +
+
1
+
  • a
    • +
    + ), scratch); + + root = render(( +
    +
    2
    +
  • b
    • +
    + ), scratch, root); + + expect(scratch.innerHTML).to.equal('
    2
  • b
    • '); + }); + + it('should set VNode#key property', () => { + expect(
    ).to.have.property('key').that.is.empty; + expect(
    ).to.have.property('key').that.is.empty; + expect(
    ).to.have.property('key', '1'); + }); + + it('should remove keyed nodes (#232)', () => { + class App extends Component { + componentDidMount() { + setTimeout(() => this.setState({opened: true,loading: true}), 10); + setTimeout(() => this.setState({opened: true,loading: false}), 20); + } + + render({ opened, loading }) { + return ( + +
    This div needs to be here for this to break
    + { opened && !loading &&
    {[]}
    } +     + ); + } + } + + class BusyIndicator extends Component { + render({ children, busy }) { + return
    + { children && children.length ? children :
    } +
    +
    indicator
    +
    indicator
    +
    indicator
    +
    +
    ; + } + } + + let root; + + root = render(, scratch, root); + root = render(, scratch, root); + root = render(, scratch, root); + + let html = String(root.innerHTML).replace(/ class=""/g, ''); + expect(html).to.equal('
    This div needs to be here for this to break
    indicator
    indicator
    indicator
    '); + }); +}); diff --git a/test/browser/lifecycle.js b/test/browser/lifecycle.js new file mode 100644 index 000000000..d6204ca8f --- /dev/null +++ b/test/browser/lifecycle.js @@ -0,0 +1,493 @@ +import { h, render, rerender, Component } from '../../src/preact'; +/** @jsx h */ + +let spyAll = obj => Object.keys(obj).forEach( key => sinon.spy(obj,key) ); + +describe('Lifecycle methods', () => { + let scratch; + + before( () => { + scratch = document.createElement('div'); + (document.body || document.documentElement).appendChild(scratch); + }); + + beforeEach( () => { + scratch.innerHTML = ''; + }); + + after( () => { + scratch.parentNode.removeChild(scratch); + scratch = null; + }); + + + describe('#componentWillUpdate', () => { + it('should NOT be called on initial render', () => { + class ReceivePropsComponent extends Component { + componentWillUpdate() {} + render() { + return
    ; + } + } + sinon.spy(ReceivePropsComponent.prototype, 'componentWillUpdate'); + render(, scratch); + expect(ReceivePropsComponent.prototype.componentWillUpdate).not.to.have.been.called; + }); + + it('should be called when rerender with new props from parent', () => { + let doRender; + class Outer extends Component { + constructor(p, c) { + super(p, c); + this.state = { i: 0 }; + } + componentDidMount() { + doRender = () => this.setState({ i: this.state.i + 1 }); + } + render(props, { i }) { + return ; + } + } + class Inner extends Component { + componentWillUpdate(nextProps, nextState) { + expect(nextProps).to.be.deep.equal({i: 1}); + expect(nextState).to.be.deep.equal({}); + } + render() { + return
    ; + } + } + sinon.spy(Inner.prototype, 'componentWillUpdate'); + sinon.spy(Outer.prototype, 'componentDidMount'); + + // Initial render + render(, scratch); + expect(Inner.prototype.componentWillUpdate).not.to.have.been.called; + + // Rerender inner with new props + doRender(); + rerender(); + expect(Inner.prototype.componentWillUpdate).to.have.been.called; + }); + + it('should be called on new state', () => { + let doRender; + class ReceivePropsComponent extends Component { + componentWillUpdate() {} + componentDidMount() { + doRender = () => this.setState({ i: this.state.i + 1 }); + } + render() { + return
    ; + } + } + sinon.spy(ReceivePropsComponent.prototype, 'componentWillUpdate'); + render(, scratch); + expect(ReceivePropsComponent.prototype.componentWillUpdate).not.to.have.been.called; + + doRender(); + rerender(); + expect(ReceivePropsComponent.prototype.componentWillUpdate).to.have.been.called; + }); + }); + + describe('#componentWillReceiveProps', () => { + it('should NOT be called on initial render', () => { + class ReceivePropsComponent extends Component { + componentWillReceiveProps() {} + render() { + return
    ; + } + } + sinon.spy(ReceivePropsComponent.prototype, 'componentWillReceiveProps'); + render(, scratch); + expect(ReceivePropsComponent.prototype.componentWillReceiveProps).not.to.have.been.called; + }); + + it('should be called when rerender with new props from parent', () => { + let doRender; + class Outer extends Component { + constructor(p, c) { + super(p, c); + this.state = { i: 0 }; + } + componentDidMount() { + doRender = () => this.setState({ i: this.state.i + 1 }); + } + render(props, { i }) { + return ; + } + } + class Inner extends Component { + componentWillMount() { + expect(this.props.i).to.be.equal(0); + } + componentWillReceiveProps(nextProps) { + expect(nextProps.i).to.be.equal(1); + } + render() { + return
    ; + } + } + sinon.spy(Inner.prototype, 'componentWillReceiveProps'); + sinon.spy(Outer.prototype, 'componentDidMount'); + + // Initial render + render(, scratch); + expect(Inner.prototype.componentWillReceiveProps).not.to.have.been.called; + + // Rerender inner with new props + doRender(); + rerender(); + expect(Inner.prototype.componentWillReceiveProps).to.have.been.called; + }); + + it('should be called in right execution order', () => { + let doRender; + class Outer extends Component { + constructor(p, c) { + super(p, c); + this.state = { i: 0 }; + } + componentDidMount() { + doRender = () => this.setState({ i: this.state.i + 1 }); + } + render(props, { i }) { + return ; + } + } + class Inner extends Component { + componentDidUpdate() { + expect(Inner.prototype.componentWillReceiveProps).to.have.been.called; + expect(Inner.prototype.componentWillUpdate).to.have.been.called; + } + componentWillReceiveProps() { + expect(Inner.prototype.componentWillUpdate).not.to.have.been.called; + expect(Inner.prototype.componentDidUpdate).not.to.have.been.called; + } + componentWillUpdate() { + expect(Inner.prototype.componentWillReceiveProps).to.have.been.called; + expect(Inner.prototype.componentDidUpdate).not.to.have.been.called; + } + render() { + return
    ; + } + } + sinon.spy(Inner.prototype, 'componentWillReceiveProps'); + sinon.spy(Inner.prototype, 'componentDidUpdate'); + sinon.spy(Inner.prototype, 'componentWillUpdate'); + sinon.spy(Outer.prototype, 'componentDidMount'); + + render(, scratch); + doRender(); + rerender(); + + expect(Inner.prototype.componentWillReceiveProps).to.have.been.calledBefore(Inner.prototype.componentWillUpdate); + expect(Inner.prototype.componentWillUpdate).to.have.been.calledBefore(Inner.prototype.componentDidUpdate); + }); + }); + + + let _it = it; + describe('#constructor and component(Did|Will)(Mount|Unmount)', () => { + /* global DISABLE_FLAKEY */ + let it = DISABLE_FLAKEY ? xit : _it; + + let setState; + class Outer extends Component { + constructor(p, c) { + super(p, c); + this.state = { show:true }; + setState = s => this.setState(s); + } + render(props, { show }) { + return ( +
    + { show && ( + + ) } +
    + ); + } + } + + class LifecycleTestComponent extends Component { + constructor(p, c) { super(p, c); this._constructor(); } + _constructor() {} + componentWillMount() {} + componentDidMount() {} + componentWillUnmount() {} + componentDidUnmount() {} + render() { return
    ; } + } + + class Inner extends LifecycleTestComponent { + render() { + return ( +
    + +
    + ); + } + } + + class InnerMost extends LifecycleTestComponent { + render() { return
    ; } + } + + let spies = ['_constructor', 'componentWillMount', 'componentDidMount', 'componentWillUnmount', 'componentDidUnmount']; + + let verifyLifycycleMethods = (TestComponent) => { + let proto = TestComponent.prototype; + spies.forEach( s => sinon.spy(proto, s) ); + let reset = () => spies.forEach( s => proto[s].reset() ); + + it('should be invoked for components on initial render', () => { + reset(); + render(, scratch); + expect(proto._constructor).to.have.been.called; + expect(proto.componentDidMount).to.have.been.called; + expect(proto.componentWillMount).to.have.been.calledBefore(proto.componentDidMount); + expect(proto.componentDidMount).to.have.been.called; + }); + + it('should be invoked for components on unmount', () => { + reset(); + setState({ show:false }); + rerender(); + + expect(proto.componentDidUnmount).to.have.been.called; + expect(proto.componentWillUnmount).to.have.been.calledBefore(proto.componentDidUnmount); + expect(proto.componentDidUnmount).to.have.been.called; + }); + + it('should be invoked for components on re-render', () => { + reset(); + setState({ show:true }); + rerender(); + + expect(proto._constructor).to.have.been.called; + expect(proto.componentDidMount).to.have.been.called; + expect(proto.componentWillMount).to.have.been.calledBefore(proto.componentDidMount); + expect(proto.componentDidMount).to.have.been.called; + }); + }; + + describe('inner components', () => { + verifyLifycycleMethods(Inner); + }); + + describe('innermost components', () => { + verifyLifycycleMethods(InnerMost); + }); + + describe('when shouldComponentUpdate() returns false', () => { + let setState; + + class Outer extends Component { + constructor() { + super(); + this.state = { show:true }; + setState = s => this.setState(s); + } + render(props, { show }) { + return ( +
    + { show && ( +
    + +
    + ) } +
    + ); + } + } + + class Inner extends Component { + shouldComponentUpdate(){ return false; } + componentWillMount() {} + componentDidMount() {} + componentWillUnmount() {} + componentDidUnmount() {} + render() { + return
    ; + } + } + + let proto = Inner.prototype; + let spies = ['componentWillMount', 'componentDidMount', 'componentWillUnmount', 'componentDidUnmount']; + spies.forEach( s => sinon.spy(proto, s) ); + + let reset = () => spies.forEach( s => proto[s].reset() ); + + beforeEach( () => reset() ); + + it('should be invoke normally on initial mount', () => { + render(, scratch); + expect(proto.componentWillMount).to.have.been.called; + expect(proto.componentWillMount).to.have.been.calledBefore(proto.componentDidMount); + expect(proto.componentDidMount).to.have.been.called; + }); + + it('should be invoked normally on unmount', () => { + setState({ show:false }); + rerender(); + + expect(proto.componentWillUnmount).to.have.been.called; + expect(proto.componentWillUnmount).to.have.been.calledBefore(proto.componentDidUnmount); + expect(proto.componentDidUnmount).to.have.been.called; + }); + + it('should still invoke mount for shouldComponentUpdate():false', () => { + setState({ show:true }); + rerender(); + + expect(proto.componentWillMount).to.have.been.called; + expect(proto.componentWillMount).to.have.been.calledBefore(proto.componentDidMount); + expect(proto.componentDidMount).to.have.been.called; + }); + + it('should still invoke unmount for shouldComponentUpdate():false', () => { + setState({ show:false }); + rerender(); + + expect(proto.componentWillUnmount).to.have.been.called; + expect(proto.componentWillUnmount).to.have.been.calledBefore(proto.componentDidUnmount); + expect(proto.componentDidUnmount).to.have.been.called; + }); + }); + }); + + describe('Lifecycle DOM Timing', () => { + it('should be invoked when dom does (DidMount, WillUnmount) or does not (WillMount, DidUnmount) exist', () => { + let setState; + class Outer extends Component { + constructor() { + super(); + this.state = { show:true }; + setState = s => { + this.setState(s); + this.forceUpdate(); + }; + } + componentWillMount() { + expect(document.getElementById('OuterDiv'), 'Outer componentWillMount').to.not.exist; + } + componentDidMount() { + expect(document.getElementById('OuterDiv'), 'Outer componentDidMount').to.exist; + } + componentWillUnmount() { + expect(document.getElementById('OuterDiv'), 'Outer componentWillUnmount').to.exist; + } + componentDidUnmount() { + expect(document.getElementById('OuterDiv'), 'Outer componentDidUnmount').to.not.exist; + } + render(props, { show }) { + return ( +
    + { show && ( +
    + +
    + ) } +
    + ); + } + } + + class Inner extends Component { + componentWillMount() { + expect(document.getElementById('InnerDiv'), 'Inner componentWillMount').to.not.exist; + } + componentDidMount() { + expect(document.getElementById('InnerDiv'), 'Inner componentDidMount').to.exist; + } + componentWillUnmount() { + // @TODO Component mounted into elements (non-components) + // are currently unmounted after those elements, so their + // DOM is unmounted prior to the method being called. + //expect(document.getElementById('InnerDiv'), 'Inner componentWillUnmount').to.exist; + } + componentDidUnmount() { + expect(document.getElementById('InnerDiv'), 'Inner componentDidUnmount').to.not.exist; + } + + render() { + return
    ; + } + } + + let proto = Inner.prototype; + let spies = ['componentWillMount', 'componentDidMount', 'componentWillUnmount', 'componentDidUnmount']; + spies.forEach( s => sinon.spy(proto, s) ); + + let reset = () => spies.forEach( s => proto[s].reset() ); + + render(, scratch); + expect(proto.componentWillMount).to.have.been.called; + expect(proto.componentWillMount).to.have.been.calledBefore(proto.componentDidMount); + expect(proto.componentDidMount).to.have.been.called; + + reset(); + setState({ show:false }); + + expect(proto.componentWillUnmount).to.have.been.called; + expect(proto.componentWillUnmount).to.have.been.calledBefore(proto.componentDidUnmount); + expect(proto.componentDidUnmount).to.have.been.called; + + reset(); + setState({ show:true }); + + expect(proto.componentWillMount).to.have.been.called; + expect(proto.componentWillMount).to.have.been.calledBefore(proto.componentDidMount); + expect(proto.componentDidMount).to.have.been.called; + }); + + it('should remove this.base for HOC', () => { + let createComponent = (name, fn) => { + class C extends Component { + componentWillUnmount() { + expect(this.base, `${name}.componentWillUnmount`).to.exist; + } + componentDidUnmount() { + expect(this.base, `${name}.componentDidUnmount`).not.to.exist; + } + render(props) { return fn(props); } + } + spyAll(C.prototype); + return C; + }; + + class Wrapper extends Component { + render({ children }) { + return
    {children}
    ; + } + } + + let One = createComponent('One', () => one ); + let Two = createComponent('Two', () => two ); + let Three = createComponent('Three', () => three ); + + let components = [One, Two, Three]; + + let Selector = createComponent('Selector', ({ page }) => { + let Child = components[page]; + return ; + }); + + class App extends Component { + render(_, { page }) { + return ; + } + } + + let app; + render( app=c } />, scratch); + + for (let i=0; i<20; i++) { + app.setState({ page: i%components.length }); + app.forceUpdate(); + } + }); + }); +}); diff --git a/test/browser/linked-state.js b/test/browser/linked-state.js new file mode 100644 index 000000000..1ca84cdc6 --- /dev/null +++ b/test/browser/linked-state.js @@ -0,0 +1,98 @@ +import { Component } from '../../src/preact'; +import { createLinkedState } from '../../src/linked-state'; + +describe('linked-state', () => { + class TestComponent extends Component { } + let testComponent, linkFunction; + + before( () => { + testComponent = new TestComponent(); + sinon.spy(TestComponent.prototype, 'setState'); + }); + + describe('createLinkedState without eventPath argument', () => { + + before( () => { + linkFunction = createLinkedState(testComponent,'testStateKey'); + expect(linkFunction).to.be.a('function'); + }); + + beforeEach( () => { + TestComponent.prototype['setState'].reset(); + }); + + it('should use value attribute on text input when no eventPath is supplied', () => { + let element = document.createElement('input'); + element.type= 'text'; + element.value = 'newValue'; + + linkFunction({ currentTarget: element }); + + expect(TestComponent.prototype.setState).to.have.been.calledOnce; + expect(TestComponent.prototype.setState).to.have.been.calledWith({'testStateKey': 'newValue'}); + + linkFunction.call(element); + + expect(TestComponent.prototype.setState).to.have.been.calledTwice; + expect(TestComponent.prototype.setState.secondCall).to.have.been.calledWith({'testStateKey': 'newValue'}); + }); + + it('should use checked attribute on checkbox input when no eventPath is supplied', () => { + let checkboxElement = document.createElement('input'); + checkboxElement.type= 'checkbox'; + checkboxElement.checked = true; + + linkFunction({ currentTarget: checkboxElement }); + + expect(TestComponent.prototype.setState).to.have.been.calledOnce; + expect(TestComponent.prototype.setState).to.have.been.calledWith({'testStateKey': true}); + }); + + it('should use checked attribute on radio input when no eventPath is supplied', () => { + let radioElement = document.createElement('input'); + radioElement.type= 'radio'; + radioElement.checked = true; + + linkFunction({ currentTarget: radioElement }); + + expect(TestComponent.prototype.setState).to.have.been.calledOnce; + expect(TestComponent.prototype.setState).to.have.been.calledWith({'testStateKey': true}); + }); + + + it('should set dot notated state key appropriately', () => { + linkFunction = createLinkedState(testComponent,'nested.state.key'); + let element = document.createElement('input'); + element.type= 'text'; + element.value = 'newValue'; + + linkFunction({ currentTarget: element }); + + expect(TestComponent.prototype.setState).to.have.been.calledOnce; + expect(TestComponent.prototype.setState).to.have.been.calledWith({nested: {state: {key: 'newValue'}}}); + }); + + }); + + describe('createLinkedState with eventPath argument', () => { + + before( () => { + linkFunction = createLinkedState(testComponent,'testStateKey', 'nested.path'); + expect(linkFunction).to.be.a('function'); + }); + + beforeEach( () => { + TestComponent.prototype['setState'].reset(); + }); + + it('should give precedence to nested.path on event over nested.path on component', () => { + let event = {nested: {path: 'nestedPathValueFromEvent'}}; + let component = {_component: {nested: {path: 'nestedPathValueFromComponent'}}}; + + linkFunction.call(component, event); + + expect(TestComponent.prototype.setState).to.have.been.calledOnce; + expect(TestComponent.prototype.setState).to.have.been.calledWith({'testStateKey': 'nestedPathValueFromEvent'}); + }); + }); +}); diff --git a/test/browser/performance.js b/test/browser/performance.js new file mode 100644 index 000000000..e1f7d7956 --- /dev/null +++ b/test/browser/performance.js @@ -0,0 +1,245 @@ +/*global coverage, ENABLE_PERFORMANCE, NODE_ENV*/ +/*eslint no-console:0*/ +/** @jsx h */ + +let { h, Component, render } = require(NODE_ENV==='production' ? '../../dist/preact.min.js' : '../../src/preact'); + +const MULTIPLIER = ENABLE_PERFORMANCE ? (coverage ? 5 : 1) : 999999; + + +let now = typeof performance!=='undefined' && performance.now ? () => performance.now() : () => +new Date(); + +function loop(iter, time) { + let start = now(), + count = 0; + while ( now()-start < time ) { + count++; + iter(); + } + return count; +} + + +function benchmark(iter, callback) { + let a = 0; + function noop() { + try { a++; } finally { a += Math.random(); } + } + + // warm + for (let i=3; i--; ) noop(), iter(); + + let count = 5, + time = 200, + passes = 0, + noops = loop(noop, time), + iterations = 0; + + function next() { + iterations += loop(iter, time); + setTimeout(++passes===count ? done : next, 10); + } + + function done() { + let ticks = Math.round(noops / iterations * count), + hz = iterations / count / time * 1000, + message = `${hz|0}/s (${ticks} ticks)`; + callback({ iterations, noops, count, time, ticks, hz, message }); + } + + next(); +} + + +describe('performance', function() { + let scratch; + + this.timeout(10000); + + before( () => { + if (coverage) { + console.warn('WARNING: Code coverage is enabled, which dramatically reduces performance. Do not pay attention to these numbers.'); + } + scratch = document.createElement('div'); + (document.body || document.documentElement).appendChild(scratch); + }); + + beforeEach( () => { + scratch.innerHTML = ''; + }); + + after( () => { + scratch.parentNode.removeChild(scratch); + scratch = null; + }); + + it('should rerender without changes fast', done => { + let jsx = ( +
    +
    +

    a {'b'} c {0} d

    + +
    +
    +
    {}}> + + +
    + + +
    + + + + + + +
    +
    +
    + ); + + let root; + benchmark( () => { + root = render(jsx, scratch, root); + }, ({ ticks, message }) => { + console.log(`PERF: empty diff: ${message}`); + expect(ticks).to.be.below(350 * MULTIPLIER); + done(); + }); + }); + + it('should rerender repeated trees fast', done => { + class Header extends Component { + render() { + return ( +
    +

    a {'b'} c {0} d

    + +
    + ); + } + } + class Form extends Component { + render() { + return ( +
    {}}> + + +
    + + +
    + + + ); + } + } + class ButtonBar extends Component { + render() { + return ( + + + + + + + ); + } + } + class Button extends Component { + render(props) { + return + + + + + + +
    + ); + }, ({ ticks, message }) => { + console.log(`PERF: large VTree: ${message}`); + expect(ticks).to.be.below(2000 * MULTIPLIER); + done(); + }); + }); +}); diff --git a/test/browser/refs.js b/test/browser/refs.js new file mode 100644 index 000000000..89678b76e --- /dev/null +++ b/test/browser/refs.js @@ -0,0 +1,287 @@ +import { h, render, Component } from '../../src/preact'; +/** @jsx h */ + +// gives call count and argument errors names (otherwise sinon just uses "spy"): +let spy = (name, ...args) => { + let spy = sinon.spy(...args); + spy.displayName = `spy('${name}')`; + return spy; +}; + +describe('refs', () => { + let scratch; + + before( () => { + scratch = document.createElement('div'); + (document.body || document.documentElement).appendChild(scratch); + }); + + beforeEach( () => { + scratch.innerHTML = ''; + }); + + after( () => { + scratch.parentNode.removeChild(scratch); + scratch = null; + }); + + it('should invoke refs in render()', () => { + let ref = spy('ref'); + render(
    , scratch); + expect(ref).to.have.been.calledOnce.and.calledWith(scratch.firstChild); + }); + + it('should invoke refs in Component.render()', () => { + let outer = spy('outer'), + inner = spy('inner'); + class Foo extends Component { + render() { + return ( +
    + +
    + ); + } + } + render(, scratch); + + expect(outer).to.have.been.calledWith(scratch.firstChild); + expect(inner).to.have.been.calledWith(scratch.firstChild.firstChild); + }); + + it('should pass components to ref functions', () => { + let ref = spy('ref'), + instance; + class Foo extends Component { + constructor() { + super(); + instance = this; + } + render() { + return
    ; + } + } + render(, scratch); + + expect(ref).to.have.been.calledOnce.and.calledWith(instance); + }); + + it('should pass rendered DOM from functional components to ref functions', () => { + let ref = spy('ref'); + + const Foo = () =>
    ; + + let root = render(, scratch); + expect(ref).to.have.been.calledOnce.and.calledWith(scratch.firstChild); + + ref.reset(); + render(, scratch, root); + expect(ref).to.have.been.calledOnce.and.calledWith(scratch.firstChild); + + ref.reset(); + render(, scratch, root); + expect(ref).to.have.been.calledOnce.and.calledWith(null); + }); + + it('should pass children to ref functions', () => { + let outer = spy('outer'), + inner = spy('inner'), + rerender, inst; + class Outer extends Component { + constructor() { + super(); + rerender = () => this.forceUpdate(); + } + render() { + return ( +
    + +
    + ); + } + } + class Inner extends Component { + constructor() { + super(); + inst = this; + } + render() { + return ; + } + } + + let root = render(, scratch); + + expect(outer).to.have.been.calledOnce.and.calledWith(inst); + expect(inner).to.have.been.calledOnce.and.calledWith(inst.base); + + outer.reset(); + inner.reset(); + + rerender(); + + expect(outer).to.have.been.calledOnce.and.calledWith(inst); + expect(inner).to.have.been.calledOnce.and.calledWith(inst.base); + + outer.reset(); + inner.reset(); + + render(
    , scratch, root); + + expect(outer).to.have.been.calledOnce.and.calledWith(null); + expect(inner).to.have.been.calledOnce.and.calledWith(null); + }); + + it('should pass high-order children to ref functions', () => { + let outer = spy('outer'), + inner = spy('inner'), + innermost = spy('innermost'), + outerInst, + innerInst; + class Outer extends Component { + constructor() { + super(); + outerInst = this; + } + render() { + return ; + } + } + class Inner extends Component { + constructor() { + super(); + innerInst = this; + } + render() { + return ; + } + } + + let root = render(, scratch); + + expect(outer, 'outer initial').to.have.been.calledOnce.and.calledWith(outerInst); + expect(inner, 'inner initial').to.have.been.calledOnce.and.calledWith(innerInst); + expect(innermost, 'innerMost initial').to.have.been.calledOnce.and.calledWith(innerInst.base); + + outer.reset(); + inner.reset(); + innermost.reset(); + root = render(, scratch, root); + + expect(outer, 'outer update').to.have.been.calledOnce.and.calledWith(outerInst); + expect(inner, 'inner update').to.have.been.calledOnce.and.calledWith(innerInst); + expect(innermost, 'innerMost update').to.have.been.calledOnce.and.calledWith(innerInst.base); + + outer.reset(); + inner.reset(); + innermost.reset(); + root = render(
    , scratch, root); + + expect(outer, 'outer unmount').to.have.been.calledOnce.and.calledWith(null); + expect(inner, 'inner unmount').to.have.been.calledOnce.and.calledWith(null); + expect(innermost, 'innerMost unmount').to.have.been.calledOnce.and.calledWith(null); + }); + + it('should not pass ref into component as a prop', () => { + let foo = spy('foo'), + bar = spy('bar'); + + class Foo extends Component { + render(){ return
    ; } + } + const Bar = spy('Bar', () =>
    ); + + sinon.spy(Foo.prototype, 'render'); + + render(( +
    + + +
    + ), scratch); + + expect(Foo.prototype.render).to.have.been.calledWithExactly({ a:'a' }, { }, { }); + expect(Bar).to.have.been.calledWithExactly({ b:'b', ref:bar }, { }); + }); + + // Test for #232 + it('should only null refs after unmount', () => { + let root, outer, inner; + + class TestUnmount extends Component { + componentWillUnmount() { + expect(this).to.have.property('outer', outer); + expect(this).to.have.property('inner', inner); + } + + componentDidUnmount() { + expect(this).to.have.property('outer', null); + expect(this).to.have.property('inner', null); + } + + render() { + return ( +
    this.outer=c }> +
    this.inner=c } /> +
    + ); + } + } + + sinon.spy(TestUnmount.prototype, 'componentWillUnmount'); + sinon.spy(TestUnmount.prototype, 'componentDidUnmount'); + + root = render(
    , scratch, root); + outer = scratch.querySelector('#outer'); + inner = scratch.querySelector('#inner'); + + expect(TestUnmount.prototype.componentWillUnmount).not.to.have.been.called; + expect(TestUnmount.prototype.componentDidUnmount).not.to.have.been.called; + + root = render(
    , scratch, root); + + expect(TestUnmount.prototype.componentWillUnmount).to.have.been.calledOnce; + expect(TestUnmount.prototype.componentDidUnmount).to.have.been.calledOnce; + }); + + it('should null and re-invoke refs when swapping component root element type', () => { + let inst; + + class App extends Component { + render() { + return
    ; + } + } + + class Child extends Component { + constructor(props, context) { + super(props, context); + this.state = { show:false }; + inst = this; + } + handleMount(){} + render(_, { show }) { + if (!show) return
    ; + return some test content; + } + } + sinon.spy(Child.prototype, 'handleMount'); + + render(, scratch); + expect(inst.handleMount).to.have.been.calledOnce.and.calledWith(scratch.querySelector('#div')); + inst.handleMount.reset(); + + inst.setState({ show:true }); + inst.forceUpdate(); + expect(inst.handleMount).to.have.been.calledTwice; + expect(inst.handleMount.firstCall).to.have.been.calledWith(null); + expect(inst.handleMount.secondCall).to.have.been.calledWith(scratch.querySelector('#span')); + inst.handleMount.reset(); + + inst.setState({ show:false }); + inst.forceUpdate(); + expect(inst.handleMount).to.have.been.calledTwice; + expect(inst.handleMount.firstCall).to.have.been.calledWith(null); + expect(inst.handleMount.secondCall).to.have.been.calledWith(scratch.querySelector('#div')); + }); +}); diff --git a/test/browser/render.js b/test/browser/render.js new file mode 100644 index 000000000..5d18fb282 --- /dev/null +++ b/test/browser/render.js @@ -0,0 +1,439 @@ +/* global DISABLE_FLAKEY */ + +import { h, render } from '../../src/preact'; +/** @jsx h */ + +function getAttributes(node) { + let attrs = {}; + for (let i=node.attributes.length; i--; ) { + attrs[node.attributes[i].name] = node.attributes[i].value; + } + return attrs; +} + +// hacky normalization of attribute order across browsers. +function sortAttributes(html) { + return html.replace(/<([a-z0-9-]+)((?:\s[a-z0-9:_.-]+=".*?")+)((?:\s*\/)?>)/gi, (s, pre, attrs, after) => { + let list = attrs.match(/\s[a-z0-9:_.-]+=".*?"/gi).sort( (a, b) => a>b ? 1 : -1 ); + if (~after.indexOf('/')) after = '>'; + return '<' + pre + list.join('') + after; + }); +} + +describe('render()', () => { + let scratch; + + before( () => { + scratch = document.createElement('div'); + (document.body || document.documentElement).appendChild(scratch); + }); + + beforeEach( () => { + scratch.innerHTML = ''; + }); + + after( () => { + scratch.parentNode.removeChild(scratch); + scratch = null; + }); + + it('should create empty nodes (<* />)', () => { + render(
    , scratch); + expect(scratch.childNodes) + .to.have.length(1) + .and.to.have.deep.property('0.nodeName', 'DIV'); + + scratch.innerHTML = ''; + + render(, scratch); + expect(scratch.childNodes) + .to.have.length(1) + .and.to.have.deep.property('0.nodeName', 'SPAN'); + + scratch.innerHTML = ''; + + render(, scratch); + render(, scratch); + expect(scratch.childNodes).to.have.length(2); + expect(scratch.childNodes[0]).to.have.property('nodeName', 'FOO'); + expect(scratch.childNodes[1]).to.have.property('nodeName', 'X-BAR'); + }); + + it('should nest empty nodes', () => { + render(( +
    + + + +
    + ), scratch); + + expect(scratch.childNodes) + .to.have.length(1) + .and.to.have.deep.property('0.nodeName', 'DIV'); + + let c = scratch.childNodes[0].childNodes; + expect(c).to.have.length(3); + expect(c).to.have.deep.property('0.nodeName', 'SPAN'); + expect(c).to.have.deep.property('1.nodeName', 'FOO'); + expect(c).to.have.deep.property('2.nodeName', 'X-BAR'); + }); + + it('should not render falsey values', () => { + render(( +
    + {null},{undefined},{false},{0},{NaN} +
    + ), scratch); + + expect(scratch.firstChild).to.have.property('innerHTML', ',,,0,NaN'); + }); + + it('should clear falsey attributes', () => { + let root = render(( +
    + ), scratch); + + root = render(( +
    + ), scratch, root); + + expect(getAttributes(scratch.firstChild), 'from previous truthy values').to.eql({ + a0: '0', + anan: 'NaN' + }); + + scratch.innerHTML = ''; + + root = render(( +
    + ), scratch); + + expect(getAttributes(scratch.firstChild), 'initial render').to.eql({ + a0: '0', + anan: 'NaN' + }); + }); + + it('should clear falsey input values', () => { + let root = render(( +
    + + + + +
    + ), scratch); + + expect(root.children[0]).to.have.property('value', '0'); + expect(root.children[1]).to.have.property('value', 'false'); + expect(root.children[2]).to.have.property('value', ''); + expect(root.children[3]).to.have.property('value', ''); + }); + + it('should clear falsey DOM properties', () => { + let root; + function test(val) { + root = render(( +
    + + + + ), scratch, root); + } + + test('2'); + test(false); + expect(scratch).to.have.property('innerHTML', '
    ', 'for false'); + + test('3'); + test(null); + expect(scratch).to.have.property('innerHTML', '
    ', 'for null'); + + test('4'); + test(undefined); + expect(scratch).to.have.property('innerHTML', '
    ', 'for undefined'); + }); + + it('should apply string attributes', () => { + render(
    , scratch); + + let div = scratch.childNodes[0]; + expect(div).to.have.deep.property('attributes.length', 2); + + expect(div).to.have.deep.property('attributes[0].name', 'foo'); + expect(div).to.have.deep.property('attributes[0].value', 'bar'); + + expect(div).to.have.deep.property('attributes[1].name', 'data-foo'); + expect(div).to.have.deep.property('attributes[1].value', 'databar'); + }); + + it('should apply class as String', () => { + render(
    , scratch); + expect(scratch.childNodes[0]).to.have.property('className', 'foo'); + }); + + it('should alias className to class', () => { + render(
    , scratch); + expect(scratch.childNodes[0]).to.have.property('className', 'bar'); + }); + + it('should apply style as String', () => { + render(
    , scratch); + expect(scratch.childNodes[0]).to.have.deep.property('style.cssText') + .that.matches(/top\s*:\s*5px\s*/) + .and.matches(/position\s*:\s*relative\s*/); + }); + + it('should only register on* functions as handlers', () => { + let click = () => {}, + onclick = () => {}; + + let proto = document.createElement('div').constructor.prototype; + + sinon.spy(proto, 'addEventListener'); + + render(
    , scratch); + + expect(scratch.childNodes[0]).to.have.deep.property('attributes.length', 0); + + expect(proto.addEventListener).to.have.been.calledOnce + .and.to.have.been.calledWithExactly('click', sinon.match.func, false); + + proto.addEventListener.restore(); + }); + + it('should add and remove event handlers', () => { + let click = sinon.spy(), + mousedown = sinon.spy(); + + let proto = document.createElement('div').constructor.prototype; + sinon.spy(proto, 'addEventListener'); + sinon.spy(proto, 'removeEventListener'); + + function fireEvent(on, type) { + let e = document.createEvent('Event'); + e.initEvent(type, true, true); + on.dispatchEvent(e); + } + + render(
    click(1) } onMouseDown={ mousedown } />, scratch); + + expect(proto.addEventListener).to.have.been.calledTwice + .and.to.have.been.calledWith('click') + .and.calledWith('mousedown'); + + fireEvent(scratch.childNodes[0], 'click'); + expect(click).to.have.been.calledOnce + .and.calledWith(1); + + proto.addEventListener.reset(); + click.reset(); + + render(
    click(2) } />, scratch, scratch.firstChild); + + expect(proto.addEventListener).not.to.have.been.called; + + expect(proto.removeEventListener) + .to.have.been.calledOnce + .and.calledWith('mousedown'); + + fireEvent(scratch.childNodes[0], 'click'); + expect(click).to.have.been.calledOnce + .and.to.have.been.calledWith(2); + + fireEvent(scratch.childNodes[0], 'mousedown'); + expect(mousedown).not.to.have.been.called; + + proto.removeEventListener.reset(); + click.reset(); + mousedown.reset(); + + render(
    , scratch, scratch.firstChild); + + expect(proto.removeEventListener) + .to.have.been.calledOnce + .and.calledWith('click'); + + fireEvent(scratch.childNodes[0], 'click'); + expect(click).not.to.have.been.called; + + proto.addEventListener.restore(); + proto.removeEventListener.restore(); + }); + + it('should use capturing for events that do not bubble', () => { + let click = sinon.spy(), + focus = sinon.spy(); + + let root = render(( +
    +
    + ), scratch); + + root.firstElementChild.click(); + root.firstElementChild.focus(); + + expect(click, 'click').to.have.been.calledOnce; + + if (DISABLE_FLAKEY!==true) { + // Focus delegation requires a 50b hack I'm not sure we want to incur + expect(focus, 'focus').to.have.been.calledOnce; + + // IE doesn't set it + expect(click).to.have.been.calledWithMatch({ eventPhase: 0 }); // capturing + expect(focus).to.have.been.calledWithMatch({ eventPhase: 0 }); // capturing + } + }); + + it('should serialize style objects', () => { + let root = render(( +
    + test +
    + ), scratch); + + let { style } = scratch.childNodes[0]; + expect(style).to.have.property('color').that.equals('rgb(255, 255, 255)'); + expect(style).to.have.property('background').that.contains('rgb(255, 100, 0)'); + expect(style).to.have.property('backgroundPosition').that.equals('10px 10px'); + expect(style).to.have.property('backgroundSize', 'cover'); + expect(style).to.have.property('padding', '5px'); + expect(style).to.have.property('top', '100px'); + expect(style).to.have.property('left', '100%'); + + root = render(( +
    test
    + ), scratch, root); + + expect(root).to.have.deep.property('style.cssText').that.equals('color: rgb(0, 255, 255);'); + + root = render(( +
    test
    + ), scratch, root); + + expect(root).to.have.deep.property('style.cssText').that.equals('display: inline;'); + + root = render(( +
    test
    + ), scratch, root); + + expect(root).to.have.deep.property('style.cssText').that.equals('background-color: rgb(0, 255, 255);'); + }); + + it('should serialize class/className', () => { + render(
    , scratch); + + let { className } = scratch.childNodes[0]; + expect(className).to.be.a.string; + expect(className.split(' ')) + .to.include.members(['yes1', 'yes2', 'yes3', 'yes4', 'yes5']) + .and.not.include.members(['no1', 'no2', 'no3', 'no4', 'no5']); + }); + + it('should support dangerouslySetInnerHTML', () => { + let html = 'foo & bar'; + let root = render(
    , scratch); + + expect(scratch.firstChild).to.have.property('innerHTML', html); + expect(scratch.innerHTML).to.equal('
    '+html+'
    '); + + root = render(
    ab
    , scratch, root); + + expect(scratch).to.have.property('innerHTML', `
    ab
    `); + + root = render(
    , scratch, root); + + expect(scratch.innerHTML).to.equal('
    '+html+'
    '); + }); + + it('should reconcile mutated DOM attributes', () => { + let check = p => render(, scratch, scratch.lastChild), + value = () => scratch.lastChild.checked, + setValue = p => scratch.lastChild.checked = p; + check(true); + expect(value()).to.equal(true); + check(false); + expect(value()).to.equal(false); + check(true); + expect(value()).to.equal(true); + setValue(true); + check(false); + expect(value()).to.equal(false); + setValue(false); + check(true); + expect(value()).to.equal(true); + }); + + it('should ignore props.children if children are manually specified', () => { + expect( +
    c
    + ).to.eql( +
    c
    + ); + }); + + it('should reorder child pairs', () => { + let root = render(( +
    + a + b +
    + ), scratch, root); + + let a = scratch.firstChild.firstChild; + let b = scratch.firstChild.lastChild; + + expect(a).to.have.property('nodeName', 'A'); + expect(b).to.have.property('nodeName', 'B'); + + root = render(( +
    + b + a +
    + ), scratch, root); + + expect(scratch.firstChild.firstChild).to.have.property('nodeName', 'B'); + expect(scratch.firstChild.lastChild).to.have.property('nodeName', 'A'); + expect(scratch.firstChild.firstChild).to.equal(b); + expect(scratch.firstChild.lastChild).to.equal(a); + }); + + // Discussion: https://github.com/developit/preact/issues/287 + ('HTMLDataListElement' in window ? it : xit)('should allow to pass through as an attribute', () => { + render(( +
    + + + + + + +
    + ), scratch); + + let html = scratch.firstElementChild.firstElementChild.outerHTML; + expect(sortAttributes(html)).to.equal(sortAttributes('')); + }); +}); diff --git a/test/browser/spec.js b/test/browser/spec.js new file mode 100644 index 000000000..eb48151f0 --- /dev/null +++ b/test/browser/spec.js @@ -0,0 +1,124 @@ +import { h, render, rerender, Component } from '../../src/preact'; +/** @jsx h */ + +describe('Component spec', () => { + let scratch; + + before( () => { + scratch = document.createElement('div'); + (document.body || document.documentElement).appendChild(scratch); + }); + + beforeEach( () => { + scratch.innerHTML = ''; + }); + + after( () => { + scratch.parentNode.removeChild(scratch); + scratch = null; + }); + + describe('defaultProps', () => { + it('should apply default props on initial render', () => { + class WithDefaultProps extends Component { + constructor(props, context) { + super(props, context); + expect(props).to.be.deep.equal({ + fieldA: 1, fieldB: 2, + fieldC: 1, fieldD: 2 + }); + } + render() { + return
    ; + } + } + WithDefaultProps.defaultProps = { fieldC: 1, fieldD: 1 }; + render(, scratch); + }); + + it('should apply default props on rerender', () => { + let doRender; + class Outer extends Component { + constructor() { + super(); + this.state = { i:1 }; + } + componentDidMount() { + doRender = () => this.setState({ i: 2 }); + } + render(props, { i }) { + return ; + } + } + class WithDefaultProps extends Component { + constructor(props, context) { + super(props, context); + this.ctor(props, context); + } + ctor(){} + componentWillReceiveProps() {} + render() { + return
    ; + } + } + WithDefaultProps.defaultProps = { fieldC: 1, fieldD: 1 }; + + let proto = WithDefaultProps.prototype; + sinon.spy(proto, 'ctor'); + sinon.spy(proto, 'componentWillReceiveProps'); + sinon.spy(proto, 'render'); + + render(, scratch); + doRender(); + + const PROPS1 = { + fieldA: 1, fieldB: 1, + fieldC: 1, fieldD: 1 + }; + + const PROPS2 = { + fieldA: 1, fieldB: 2, + fieldC: 1, fieldD: 2 + }; + + expect(proto.ctor).to.have.been.calledWith(PROPS1); + expect(proto.render).to.have.been.calledWith(PROPS1); + + rerender(); + + // expect(proto.ctor).to.have.been.calledWith(PROPS2); + expect(proto.componentWillReceiveProps).to.have.been.calledWith(PROPS2); + expect(proto.render).to.have.been.calledWith(PROPS2); + }); + + // @TODO: migrate this to preact-compat + xit('should cache default props', () => { + class WithDefaultProps extends Component { + constructor(props, context) { + super(props, context); + expect(props).to.be.deep.equal({ + fieldA: 1, fieldB: 2, + fieldC: 1, fieldD: 2, + fieldX: 10 + }); + } + getDefaultProps() { + return { fieldA: 1, fieldB: 1 }; + } + render() { + return
    ; + } + } + WithDefaultProps.defaultProps = { fieldC: 1, fieldD: 1 }; + sinon.spy(WithDefaultProps.prototype, 'getDefaultProps'); + render(( +
    + + + +
    + ), scratch); + expect(WithDefaultProps.prototype.getDefaultProps).to.be.calledOnce; + }); + }); +}); diff --git a/test/browser/svg.js b/test/browser/svg.js new file mode 100644 index 000000000..684f4dd96 --- /dev/null +++ b/test/browser/svg.js @@ -0,0 +1,112 @@ +import { h, render } from '../../src/preact'; +/** @jsx h */ + + +// hacky normalization of attribute order across browsers. +function sortAttributes(html) { + return html.replace(/<([a-z0-9-]+)((?:\s[a-z0-9:_.-]+=".*?")+)((?:\s*\/)?>)/gi, (s, pre, attrs, after) => { + let list = attrs.match(/\s[a-z0-9:_.-]+=".*?"/gi).sort( (a, b) => a>b ? 1 : -1 ); + if (~after.indexOf('/')) after = '>'; + return '<' + pre + list.join('') + after; + }); +} + + +describe('svg', () => { + let scratch; + + before( () => { + scratch = document.createElement('div'); + (document.body || document.documentElement).appendChild(scratch); + }); + + beforeEach( () => { + scratch.innerHTML = ''; + }); + + after( () => { + scratch.parentNode.removeChild(scratch); + scratch = null; + }); + + it('should render SVG to string', () => { + render(( + + + + ), scratch); + + let html = sortAttributes(String(scratch.innerHTML).replace(' xmlns="http://www.w3.org/2000/svg"', '')); + expect(html).to.equal(sortAttributes(` + + + + `.replace(/[\n\t]+/g,''))); + }); + + it('should render SVG to DOM', () => { + const Demo = () => ( + + + + ); + render(, scratch); + + let html = sortAttributes(String(scratch.innerHTML).replace(' xmlns="http://www.w3.org/2000/svg"', '')); + expect(html).to.equal(sortAttributes('')); + }); + + it('should use attributes for className', () => { + const Demo = ({ c }) => ( + + + + ); + let root = render(, scratch, root); + sinon.spy(root, 'removeAttribute'); + root = render(, scratch, root); + expect(root.removeAttribute).to.have.been.calledOnce.and.calledWith('class'); + root.removeAttribute.restore(); + + root = render(
    , scratch, root); + root = render(, scratch, root); + sinon.spy(root, 'setAttribute'); + root = render(, scratch, root); + expect(root.setAttribute).to.have.been.calledOnce.and.calledWith('class', 'foo_2'); + root.setAttribute.restore(); + root = render(, scratch, root); + root = render(, scratch, root); + }); + + it('should still support class attribute', () => { + render(( + + ), scratch); + + expect(scratch.innerHTML).to.contain(` class="foo bar"`); + }); + + it('should serialize class', () => { + render(( + + ), scratch); + + expect(scratch.innerHTML).to.contain(` class="foo other"`); + }); + + it('should switch back to HTML for ', () => { + render(( + + + + test + + + + ), scratch); + + expect(scratch.getElementsByTagName('a')) + .to.have.property('0') + .that.is.a('HTMLAnchorElement'); + }); +}); diff --git a/test/karma.conf.js b/test/karma.conf.js new file mode 100644 index 000000000..6ed5397fb --- /dev/null +++ b/test/karma.conf.js @@ -0,0 +1,126 @@ +/*eslint no-var:0, object-shorthand:0 */ + +var coverage = String(process.env.COVERAGE)!=='false', + sauceLabs = String(process.env.SAUCELABS).match(/^(1|true)$/gi) && !String(process.env.TRAVIS_PULL_REQUEST).match(/^(1|true)$/gi), + performance = !coverage && !sauceLabs && String(process.env.PERFORMANCE)!=='false', + webpack = require('webpack'); + +var sauceLabsLaunchers = { + sl_chrome: { + base: 'SauceLabs', + browserName: 'chrome' + }, + sl_firefox: { + base: 'SauceLabs', + browserName: 'firefox' + }, + sl_ios_safari: { + base: 'SauceLabs', + browserName: 'iphone', + platform: 'OS X 10.9', + version: '7.1' + }, + sl_ie_11: { + base: 'SauceLabs', + browserName: 'internet explorer', + version: '11' + }, + sl_ie_10: { + base: 'SauceLabs', + browserName: 'internet explorer', + version: '10' + }, + sl_ie_9: { + base: 'SauceLabs', + browserName: 'internet explorer', + version: '9' + } +}; + +module.exports = function(config) { + config.set({ + browsers: sauceLabs ? Object.keys(sauceLabsLaunchers) : ['PhantomJS'], + + frameworks: ['source-map-support', 'mocha', 'chai-sinon'], + + reporters: ['mocha'].concat( + coverage ? 'coverage' : [], + sauceLabs ? 'saucelabs' : [] + ), + + coverageReporter: { + reporters: [ + { + type: 'text-summary' + }, + { + type: 'html', + dir: __dirname+'/../coverage' + } + ] + }, + + mochaReporter: { + showDiff: true + }, + + browserLogOptions: { terminal: true }, + browserConsoleLogOptions: { terminal: true }, + + browserNoActivityTimeout: 5 * 60 * 1000, + + // sauceLabs: { + // tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER || ('local'+require('./package.json').version), + // startConnect: false + // }, + + customLaunchers: sauceLabsLaunchers, + + files: [ + { pattern: '{browser,shared}/**.js', watched: false } + ], + + preprocessors: { + '**/*': ['webpack', 'sourcemap'] + }, + + webpack: { + devtool: 'inline-source-map', + module: { + /* Transpile source and test files */ + preLoaders: [ + { + test: /\.jsx?$/, + exclude: /node_modules/, + loader: 'babel', + query: { + loose: 'all', + blacklist: ['es6.tailCall'] + } + } + ], + /* Only Instrument our source files for coverage */ + loaders: [].concat( coverage ? { + test: /\.jsx?$/, + loader: 'isparta', + include: /src/ + } : []) + }, + resolve: { + modulesDirectories: [__dirname, 'node_modules'] + }, + plugins: [ + new webpack.DefinePlugin({ + coverage: coverage, + NODE_ENV: JSON.stringify(process.env.NODE_ENV || ''), + ENABLE_PERFORMANCE: performance, + DISABLE_FLAKEY: !!String(process.env.FLAKEY).match(/^(0|false)$/gi) + }) + ] + }, + + webpackMiddleware: { + noInfo: true + } + }); +}; diff --git a/test/node/index.js b/test/node/index.js new file mode 100644 index 000000000..81fb567fb --- /dev/null +++ b/test/node/index.js @@ -0,0 +1 @@ +// this is just a placeholder diff --git a/test/shared/exports.js b/test/shared/exports.js new file mode 100644 index 000000000..7ef3c659b --- /dev/null +++ b/test/shared/exports.js @@ -0,0 +1,21 @@ +import preact, { h, Component, render, rerender, options } from '../../src/preact'; +import { expect } from 'chai'; + +describe('preact', () => { + it('should be available as a default export', () => { + expect(preact).to.be.an('object'); + expect(preact).to.have.property('h', h); + expect(preact).to.have.property('Component', Component); + expect(preact).to.have.property('render', render); + expect(preact).to.have.property('rerender', rerender); + expect(preact).to.have.property('options', options); + }); + + it('should be available as named exports', () => { + expect(h).to.be.a('function'); + expect(Component).to.be.a('function'); + expect(render).to.be.a('function'); + expect(rerender).to.be.a('function'); + expect(options).to.exist.and.be.an('object'); + }); +}); diff --git a/test/shared/h.js b/test/shared/h.js new file mode 100644 index 000000000..b0cf7f0e8 --- /dev/null +++ b/test/shared/h.js @@ -0,0 +1,201 @@ +import { h } from '../../src/preact'; +import { VNode } from '../../src/vnode'; +import { expect } from 'chai'; + +/*eslint-env browser, mocha */ + +/** @jsx h */ + +let flatten = obj => JSON.parse(JSON.stringify(obj)); + +describe('h(jsx)', () => { + it('should return a VNode', () => { + let r; + expect( () => r = h('foo') ).not.to.throw(); + expect(r).to.be.an('object'); + expect(r).to.be.an.instanceof(VNode); + expect(r).to.have.property('nodeName', 'foo'); + expect(r).to.have.property('attributes', undefined); + expect(r).to.have.property('children', undefined); + }); + + it('should perserve raw attributes', () => { + let attrs = { foo:'bar', baz:10, func:()=>{} }, + r = h('foo', attrs); + expect(r).to.be.an('object') + .with.property('attributes') + .that.deep.equals(attrs); + }); + + it('should support element children', () => { + let r = h( + 'foo', + null, + h('bar'), + h('baz') + ); + + expect(r).to.be.an('object') + .with.property('children') + .that.deep.equals([ + new VNode('bar'), + new VNode('baz') + ]); + }); + + it('should support multiple element children, given as arg list', () => { + let r = h( + 'foo', + null, + h('bar'), + h('baz', null, h('test')) + ); + + r = flatten(r); + + expect(r).to.be.an('object') + .with.property('children') + .that.deep.equals([ + { nodeName:'bar' }, + { nodeName:'baz', children:[ + { nodeName:'test' } + ]} + ]); + }); + + it('should handle multiple element children, given as an array', () => { + let r = h( + 'foo', + null, + [ + h('bar'), + h('baz', null, h('test')) + ] + ); + + r = flatten(r); + + expect(r).to.be.an('object') + .with.property('children') + .that.deep.equals([ + { nodeName:'bar' }, + { nodeName:'baz', children:[ + { nodeName:'test' } + ]} + ]); + }); + + it('should handle multiple children, flattening one layer as needed', () => { + let r = h( + 'foo', + null, + h('bar'), + [ + h('baz', null, h('test')) + ] + ); + + r = flatten(r); + + expect(r).to.be.an('object') + .with.property('children') + .that.deep.equals([ + { nodeName:'bar' }, + { nodeName:'baz', children:[ + { nodeName:'test' } + ]} + ]); + }); + + it('should support nested children', () => { + const m = x => h(x); + expect( + h('foo', null, m('a'), [m('b'), m('c')], m('d')) + ).to.have.property('children').that.eql(['a', 'b', 'c', 'd'].map(m)); + + expect( + h('foo', null, [m('a'), [m('b'), m('c')], m('d')]) + ).to.have.property('children').that.eql(['a', 'b', 'c', 'd'].map(m)); + + expect( + h('foo', { children: [m('a'), [m('b'), m('c')], m('d')] }) + ).to.have.property('children').that.eql(['a', 'b', 'c', 'd'].map(m)); + + expect( + h('foo', { children: [[m('a'), [m('b'), m('c')], m('d')]] }) + ).to.have.property('children').that.eql(['a', 'b', 'c', 'd'].map(m)); + + expect( + h('foo', { children: m('a') }) + ).to.have.property('children').that.eql([m('a')]); + + expect( + h('foo', { children: 'a' }) + ).to.have.property('children').that.eql(['a']); + }); + + it('should support text children', () => { + let r = h( + 'foo', + null, + 'textstuff' + ); + + expect(r).to.be.an('object') + .with.property('children') + .with.length(1) + .with.property('0') + .that.equals('textstuff'); + }); + + it('should merge adjacent text children', () => { + let r = h( + 'foo', + null, + 'one', + 'two', + h('bar'), + 'three', + h('baz'), + h('baz'), + 'four', + null, + 'five', + 'six' + ); + + r = flatten(r); + + expect(r).to.be.an('object') + .with.property('children') + .that.deep.equals([ + 'onetwo', + { nodeName:'bar' }, + 'three', + { nodeName:'baz' }, + { nodeName:'baz' }, + 'fourfivesix' + ]); + }); + + it('should merge nested adjacent text children', () => { + let r = h( + 'foo', + null, + 'one', + ['two', null, 'three'], + null, + ['four', null, 'five', null], + 'six', + null + ); + + r = flatten(r); + + expect(r).to.be.an('object') + .with.property('children') + .that.deep.equals([ + 'onetwothreefourfivesix' + ]); + }); +}); diff --git a/typings.json b/typings.json new file mode 100644 index 000000000..196fc9b6b --- /dev/null +++ b/typings.json @@ -0,0 +1,5 @@ +{ + "name": "preact", + "main": "src/preact.d.ts", + "version": false +}