Fast 3kB alternative to React, with the same ES2015 API.
**All the power of Virtual DOM components, without the overhead:** - Familiar React API & patterns: [ES6 Class] and [Functional Components] - Extensive React compatibility via a simple [preact-compat] alias - Everything you need: JSX, VDOM, React DevTools, HMR, SSR.. - A highly optimized diff algorithm and seamless Server Side Rendering - Transparent asynchronous rendering with a pluggable scheduler - 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)** ### 💁 More information at the [Preact Website ➞](https://preactjs.com) --- - [Demos](#demos) - [Libraries & Add-ons](#libraries--add-ons) - [Getting Started](#getting-started) - [Import what you need](#import-what-you-need) - [Rendering JSX](#rendering-jsx) - [Components](#components) - [Props & State](#props--state) - [Linked State](#linked-state) - [Examples](#examples) - [Extensions](#extensions) - [Developer Tools](#developer-tools) - [Backers](#backers) - [Sponsors](#sponsors) - [License](#license) # Preact [](http://npm.im/preact) [](https://cdnjs.com/libraries/preact) [](https://preact-slack.now.sh) [](#backers) [](#sponsors) [](https://travis-ci.org/developit/preact) [](https://coveralls.io/github/developit/preact) [](https://unpkg.com/preact/dist/preact.min.js) Preact supports modern browsers and IE9+: [](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**](https://preact-todomvc.surge.sh) _([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 Offline Starter**](https://preact-starter.now.sh) _([GitHub Project](https://github.com/lukeed/preact-starter))_ :100: - [**Preact PWA**](https://preact-pwa.appspot.com/) _([GitHub Project](https://github.com/ezekielchentnik/preact-pwa))_ :hamburger: - [**Preact Mobx Starter**](https://awaw00.github.io/preact-mobx-starter/) _([GitHub Project](https://github.com/awaw00/preact-mobx-starter))_ :sunny: - [**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) - [**BigWebQuiz**](https://bigwebquiz.com/) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_ - [**Color Picker**](https://colors.now.sh) _([GitHub Project](https://github.com/lukeed/colors-app))_ :art: - [**Rainbow Explorer**](https://use-the-platform.com/rainbow-explorer/) _([GitHub Project](https://github.com/vaneenige/rainbow-explorer/))_ :rainbow: - [**Offline Gallery**](https://use-the-platform.com/offline-gallery/) _([GitHub Project](https://github.com/vaneenige/offline-gallery/))_ :balloon: - [**Periodic Weather**](https://use-the-platform.com/periodic-weather/) _([GitHub Project](https://github.com/vaneenige/periodic-weather/))_ :sunny: - [**Play.cash**](https://play.cash) :notes: - [**Rugby News Board**](http://nbrugby.com) _[(GitHub Project)](https://github.com/rugby-board/rugby-board-node)_ ## Libraries & Add-ons - :raised_hands: [**preact-compat**](https://git.io/preact-compat): use any React library with Preact *([full example](http://git.io/preact-compat-example))* - :page_facing_up: [**preact-render-to-string**](https://git.io/preact-render-to-string): Universal rendering. - :loop: [**preact-render-to-json**](https://git.io/preact-render-to-json): Render for Jest Snapshot testing. - :earth_americas: [**preact-router**](https://git.io/preact-router): URL routing for your components - :bookmark_tabs: [**preact-markup**](https://git.io/preact-markup): Render HTML & Custom Elements as JSX & Components - :satellite: [**preact-portal**](https://git.io/preact-portal): Render Preact components into (a) SPACE :milky_way: - :pencil: [**preact-richtextarea**](https://git.io/preact-richtextarea): Simple HTML editor component - :bookmark: [**preact-token-input**](https://github.com/developit/preact-token-input): Text field that tokenizes input, for things like tags - :card_index: [**preact-virtual-list**](https://github.com/developit/preact-virtual-list): Easily render lists with millions of rows ([demo](https://jsfiddle.net/developit/qqan9pdo/)) - :repeat: [**preact-cycle**](https://git.io/preact-cycle): Functional-reactive paradigm for Preact - :triangular_ruler: [**preact-layout**](https://download.github.io/preact-layout/): Small and simple layout library - :thought_balloon: [**preact-socrates**](https://github.com/matthewmueller/preact-socrates): Preact plugin for [Socrates](http://github.com/matthewmueller/socrates) - :rowboat: [**preact-flyd**](https://github.com/xialvjun/preact-flyd): Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX - :speech_balloon: [**preact-i18nline**](https://github.com/download/preact-i18nline): Integrates the ecosystem around [i18n-js](https://github.com/everydayhero/i18n-js) with Preact via [i18nline](https://github.com/download/i18nline). - :microscope: [**preact-jsx-chai**](https://git.io/preact-jsx-chai): JSX assertion testing _(no DOM, right in Node)_ - :tophat: [**preact-classless-component**](https://github.com/ld0rman/preact-classless-component): create preact components without the class keyword - :hammer: [**preact-hyperscript**](https://github.com/queckezz/preact-hyperscript): Hyperscript-like syntax for creating elements - :white_check_mark: [**shallow-compare**](https://github.com/tkh44/shallow-compare): simplified `shouldComponentUpdate` helper. - :shaved_ice: [**preact-codemod**](https://github.com/vutran/preact-codemod): Transform your React code to Preact. - :construction_worker: [**preact-helmet**](https://github.com/download/preact-helmet): A document head manager for Preact - :necktie: [**preact-delegate**](https://github.com/NekR/preact-delegate): Delegate DOM events #### UI Component Libraries > Want to prototype something or speed up your development? Try one of these toolkits: - [**preact-material-components**](https://github.com/prateekbh/preact-material-components): Material Design Components for Preact ([website](https://prateekbh.github.io/preact-material-components/)) - [**preact-mdc**](https://github.com/BerndWessels/preact-mdc): Material Design Components for Preact ([demo](https://github.com/BerndWessels/preact-mdc-demo)) - [**preact-mui**](https://git.io/v1aVO): The MUI CSS Preact library. - [**preact-photon**](https://git.io/preact-photon): build beautiful desktop UI with [photon](http://photonkit.com) - [**preact-mdl**](https://git.io/preact-mdl): [Material Design Lite](https://getmdl.io) for Preact - [**preact-weui**](https://github.com/afeiship/preact-weui): [Weui](https://github.com/afeiship/preact-weui) for Preact --- ## Getting Started > 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_ The easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌. The following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc. You can also 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((
## Sponsors
Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]
## License
MIT
[](https://preactjs.com)
[preact-compat]: https://github.com/developit/preact-compat
[ES6 Class]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes
[Functional Components]: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components
[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
preact-8.2.5/config/ 0000775 0000000 0000000 00000000000 13151101465 0014246 5 ustar 00root root 0000000 0000000 preact-8.2.5/config/codemod-const.js 0000664 0000000 0000000 00000002241 13151101465 0017341 0 ustar 00root root 0000000 0000000 /* 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) && !init.regex) {
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;
};
preact-8.2.5/config/codemod-let-name.js 0000664 0000000 0000000 00000000670 13151101465 0017721 0 ustar 00root root 0000000 0000000 /**
* Restores var names transformed by babel's let block scoping
*/
export default (file, api) => {
let j = api.jscodeshift;
let code = j(file.source);
// @TODO unsafe, but without it we gain 20b gzipped: https://www.diffchecker.com/bVrOJWTO
code.findVariableDeclarators().filter(d => /^_i/.test(d.value.id.name)).renameTo('i');
code.findVariableDeclarators('_key').renameTo('key');
return code.toSource({ quote: 'single' });
};
preact-8.2.5/config/codemod-strip-tdz.js 0000664 0000000 0000000 00000002527 13151101465 0020162 0 ustar 00root root 0000000 0000000 /* 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;
};
preact-8.2.5/config/eslint-config.js 0000664 0000000 0000000 00000002555 13151101465 0017354 0 ustar 00root root 0000000 0000000 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
}
};
preact-8.2.5/config/properties.json 0000664 0000000 0000000 00000001134 13151101465 0017334 0 ustar 00root root 0000000 0000000 {
"props": {
"cname": 16,
"props": {
"$_dirty": "__d",
"$_disable": "__x",
"$_listeners": "__l",
"$_renderCallbacks": "__h",
"$__key": "__k",
"$__ref": "__r",
"$normalizedNodeName": "__n",
"$nextBase": "__b",
"$prevContext": "__c",
"$prevProps": "__p",
"$prevState": "__s",
"$_parentComponent": "__u",
"$_componentConstructor": "_componentConstructor",
"$__html": "__html",
"$_component": "_component",
"$__preactattr_": "__preactattr_"
}
},
"vars": {
"cname": -1,
"props": {}
}
} preact-8.2.5/config/rollup.config.devtools.js 0000664 0000000 0000000 00000001043 13151101465 0021221 0 ustar 00root root 0000000 0000000 import babel from 'rollup-plugin-babel';
export default {
input: 'devtools/index.js',
output: {
format: 'umd',
file: 'devtools.js',
name: 'preactDevTools',
sourcemap: true
},
external: ['preact'],
globals: {
preact: 'preact'
},
plugins: [
babel({
sourceMap: true,
exclude: 'node_modules/**',
babelrc: false,
presets: [
['env', {
modules: false,
loose: true,
exclude: ['transform-es2015-typeof-symbol'],
targets: {
browsers: ['last 2 versions', 'IE >= 9']
}
}]
]
})
]
};
preact-8.2.5/config/rollup.config.esm.js 0000664 0000000 0000000 00000000314 13151101465 0020146 0 ustar 00root root 0000000 0000000 import config from './rollup.config';
// ES output
config.output.format = 'es';
config.output.file = 'dist/preact.esm.js';
// remove memory() plugin
config.plugins.splice(0, 1);
export default config;
preact-8.2.5/config/rollup.config.js 0000664 0000000 0000000 00000001467 13151101465 0017375 0 ustar 00root root 0000000 0000000 import nodeResolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import memory from 'rollup-plugin-memory';
export default {
strict: true,
input: 'src/preact.js',
output: {
format: 'iife',
file: 'dist/preact.dev.js',
name: 'preact',
sourcemap: true
},
plugins: [
memory({
path: 'src/preact.js',
contents: `
import preact from './preact';
if (typeof module!='undefined') module.exports = preact;
else self.preact = preact;
`
}),
nodeResolve({
main: true
}),
babel({
sourceMap: true,
exclude: 'node_modules/**',
babelrc: false,
presets: [
['env', {
modules: false,
loose: true,
exclude: ['transform-es2015-typeof-symbol'],
targets: {
browsers: ['last 2 versions', 'IE >= 9']
}
}]
]
})
]
};
preact-8.2.5/debug/ 0000775 0000000 0000000 00000000000 13151101465 0014067 5 ustar 00root root 0000000 0000000 preact-8.2.5/debug/index.js 0000664 0000000 0000000 00000004756 13151101465 0015550 0 ustar 00root root 0000000 0000000 /* eslint-disable no-console */
if (process.env.NODE_ENV === 'development') {
const { options } = require('preact');
const oldVnodeOption = options.vnode;
options.vnode = function(vnode) {
const { nodeName, attributes, children } = vnode;
if (nodeName === void 0) {
console.error('Undefined component passed to preact.h()\n'+serializeVNode(vnode));
}
if (
attributes && attributes.ref !== void 0 &&
typeof attributes.ref !== 'function' &&
!('$$typeof' in vnode) // allow string refs when preact-compat is installed
) {
throw new Error(
`Component's "ref" property should be a function,` +
` but [${typeof attributes.ref}] passed\n` + serializeVNode(vnode)
);
}
{
const keys = {};
inspectChildren(children, (deepChild) => {
if (!deepChild || deepChild.key==null) return;
// In Preact, all keys are stored as object values, i.e. being strings
const key = deepChild.key + '';
if (keys.hasOwnProperty(key)) {
console.error(
'Following component has two or more children with the ' +
'same "key" attribute. This may cause glitches and misbehavior ' +
'in rendering process. Component: \n\n' +
serializeVNode(vnode)
);
// Return early to not spam the console
return true;
}
keys[key] = true;
});
}
if (oldVnodeOption) oldVnodeOption.call(this, vnode);
};
const inspectChildren = (children, inspect) => {
if (!Array.isArray(children)) {
children = [children];
}
return children.some((child, i) => {
if (Array.isArray(child)) {
return inspectChildren(child, inspect);
}
return inspect(child, i);
});
};
const serializeVNode = ({ nodeName, attributes, children }) => {
if (typeof nodeName==='function') {
nodeName = nodeName.name || nodeName.displayName;
}
let props = '';
if (attributes) {
for (let attr in attributes) {
if (attributes.hasOwnProperty(attr) && attr!=='children') {
let value = attributes[attr];
// If it is an object but doesn't have toString(), use Object.toString
if (typeof value==='function') {
value = `function ${value.displayName || value.name}() {}`;
}
if (Object(value) === value && !value.toString) {
value = Object.prototype.toString.call(value);
}
else {
value = value + '';
}
props += ` ${attr}=${JSON.stringify(value)}`;
}
}
}
return `<${nodeName}${props}${children && children.length ? ('>..') : ' />'}`;
};
require('preact/devtools');
}
preact-8.2.5/devtools/ 0000775 0000000 0000000 00000000000 13151101465 0014640 5 ustar 00root root 0000000 0000000 preact-8.2.5/devtools/devtools.js 0000664 0000000 0000000 00000030046 13151101465 0017040 0 ustar 00root root 0000000 0000000 /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
import { options } from 'preact';
// Internal helpers from preact
import { ATTR_KEY } from '../src/constants';
/**
* Return a ReactElement-compatible object for the current state of a preact
* component.
*/
function createReactElement(component) {
return {
type: component.constructor,
key: component.key,
ref: null, // Unsupported
props: component.props
};
}
/**
* Create a ReactDOMComponent-compatible object for a given DOM node rendered
* by preact.
*
* This implements the subset of the ReactDOMComponent interface that
* React DevTools requires in order to display DOM nodes in the inspector with
* the correct type and properties.
*
* @param {Node} node
*/
function createReactDOMComponent(node) {
const childNodes = node.nodeType === Node.ELEMENT_NODE ?
Array.from(node.childNodes) : [];
const isText = node.nodeType === Node.TEXT_NODE;
return {
// --- ReactDOMComponent interface
_currentElement: isText ? node.textContent : {
type: node.nodeName.toLowerCase(),
props: node[ATTR_KEY]
},
_renderedChildren: childNodes.map(child => {
if (child._component) {
return updateReactComponent(child._component);
}
return updateReactComponent(child);
}),
_stringText: isText ? node.textContent : null,
// --- Additional properties used by preact devtools
// A flag indicating whether the devtools have been notified about the
// existence of this component instance yet.
// This is used to send the appropriate notifications when DOM components
// are added or updated between composite component updates.
_inDevTools: false,
node
};
}
/**
* Return the name of a component created by a `ReactElement`-like object.
*
* @param {ReactElement} element
*/
function typeName(element) {
if (typeof element.type === 'function') {
return element.type.displayName || element.type.name;
}
return element.type;
}
/**
* Return a ReactCompositeComponent-compatible object for a given preact
* component instance.
*
* This implements the subset of the ReactCompositeComponent interface that
* the DevTools requires in order to walk the component tree and inspect the
* component's properties.
*
* See https://github.com/facebook/react-devtools/blob/e31ec5825342eda570acfc9bcb43a44258fceb28/backend/getData.js
*/
function createReactCompositeComponent(component) {
const _currentElement = createReactElement(component);
const node = component.base;
let instance = {
// --- ReactDOMComponent properties
getName() {
return typeName(_currentElement);
},
_currentElement: createReactElement(component),
props: component.props,
state: component.state,
forceUpdate: component.forceUpdate && component.forceUpdate.bind(component),
setState: component.setState && component.setState.bind(component),
// --- Additional properties used by preact devtools
node
};
// React DevTools exposes the `_instance` field of the selected item in the
// component tree as `$r` in the console. `_instance` must refer to a
// React Component (or compatible) class instance with `props` and `state`
// fields and `setState()`, `forceUpdate()` methods.
instance._instance = component;
// If the root node returned by this component instance's render function
// was itself a composite component, there will be a `_component` property
// containing the child component instance.
if (component._component) {
instance._renderedComponent = updateReactComponent(component._component);
} else {
// Otherwise, if the render() function returned an HTML/SVG element,
// create a ReactDOMComponent-like object for the DOM node itself.
instance._renderedComponent = updateReactComponent(node);
}
return instance;
}
/**
* Map of Component|Node to ReactDOMComponent|ReactCompositeComponent-like
* object.
*
* The same React*Component instance must be used when notifying devtools
* about the initial mount of a component and subsequent updates.
*/
let instanceMap = typeof Map==='function' && new Map();
/**
* Update (and create if necessary) the ReactDOMComponent|ReactCompositeComponent-like
* instance for a given preact component instance or DOM Node.
*
* @param {Component|Node} componentOrNode
*/
function updateReactComponent(componentOrNode) {
const newInstance = componentOrNode instanceof Node ?
createReactDOMComponent(componentOrNode) :
createReactCompositeComponent(componentOrNode);
if (instanceMap.has(componentOrNode)) {
let inst = instanceMap.get(componentOrNode);
Object.assign(inst, newInstance);
return inst;
}
instanceMap.set(componentOrNode, newInstance);
return newInstance;
}
function nextRootKey(roots) {
return '.' + Object.keys(roots).length;
}
/**
* Find all root component instances rendered by preact in `node`'s children
* and add them to the `roots` map.
*
* @param {DOMElement} node
* @param {[key: string] => ReactDOMComponent|ReactCompositeComponent}
*/
function findRoots(node, roots) {
Array.from(node.childNodes).forEach(child => {
if (child._component) {
roots[nextRootKey(roots)] = updateReactComponent(child._component);
} else {
findRoots(child, roots);
}
});
}
/**
* Create a bridge for exposing preact's component tree to React DevTools.
*
* It creates implementations of the interfaces that ReactDOM passes to
* devtools to enable it to query the component tree and hook into component
* updates.
*
* See https://github.com/facebook/react/blob/59ff7749eda0cd858d5ee568315bcba1be75a1ca/src/renderers/dom/ReactDOM.js
* for how ReactDOM exports its internals for use by the devtools and
* the `attachRenderer()` function in
* https://github.com/facebook/react-devtools/blob/e31ec5825342eda570acfc9bcb43a44258fceb28/backend/attachRenderer.js
* for how the devtools consumes the resulting objects.
*/
function createDevToolsBridge() {
// The devtools has different paths for interacting with the renderers from
// React Native, legacy React DOM and current React DOM.
//
// Here we emulate the interface for the current React DOM (v15+) lib.
// ReactDOMComponentTree-like object
const ComponentTree = {
getNodeFromInstance(instance) {
return instance.node;
},
getClosestInstanceFromNode(node) {
while (node && !node._component) {
node = node.parentNode;
}
return node ? updateReactComponent(node._component) : null;
}
};
// Map of root ID (the ID is unimportant) to component instance.
let roots = {};
findRoots(document.body, roots);
// ReactMount-like object
//
// Used by devtools to discover the list of root component instances and get
// notified when new root components are rendered.
const Mount = {
_instancesByReactRootID: roots,
// Stub - React DevTools expects to find this method and replace it
// with a wrapper in order to observe new root components being added
_renderNewRootComponent(/* instance, ... */) { }
};
// ReactReconciler-like object
const Reconciler = {
// Stubs - React DevTools expects to find these methods and replace them
// with wrappers in order to observe components being mounted, updated and
// unmounted
mountComponent(/* instance, ... */) { },
performUpdateIfNecessary(/* instance, ... */) { },
receiveComponent(/* instance, ... */) { },
unmountComponent(/* instance, ... */) { }
};
/** Notify devtools that a new component instance has been mounted into the DOM. */
const componentAdded = component => {
const instance = updateReactComponent(component);
if (isRootComponent(component)) {
instance._rootID = nextRootKey(roots);
roots[instance._rootID] = instance;
Mount._renderNewRootComponent(instance);
}
visitNonCompositeChildren(instance, childInst => {
childInst._inDevTools = true;
Reconciler.mountComponent(childInst);
});
Reconciler.mountComponent(instance);
};
/** Notify devtools that a component has been updated with new props/state. */
const componentUpdated = component => {
const prevRenderedChildren = [];
visitNonCompositeChildren(instanceMap.get(component), childInst => {
prevRenderedChildren.push(childInst);
});
// Notify devtools about updates to this component and any non-composite
// children
const instance = updateReactComponent(component);
Reconciler.receiveComponent(instance);
visitNonCompositeChildren(instance, childInst => {
if (!childInst._inDevTools) {
// New DOM child component
childInst._inDevTools = true;
Reconciler.mountComponent(childInst);
} else {
// Updated DOM child component
Reconciler.receiveComponent(childInst);
}
});
// For any non-composite children that were removed by the latest render,
// remove the corresponding ReactDOMComponent-like instances and notify
// the devtools
prevRenderedChildren.forEach(childInst => {
if (!document.body.contains(childInst.node)) {
instanceMap.delete(childInst.node);
Reconciler.unmountComponent(childInst);
}
});
};
/** Notify devtools that a component has been unmounted from the DOM. */
const componentRemoved = component => {
const instance = updateReactComponent(component);
visitNonCompositeChildren(childInst => {
instanceMap.delete(childInst.node);
Reconciler.unmountComponent(childInst);
});
Reconciler.unmountComponent(instance);
instanceMap.delete(component);
if (instance._rootID) {
delete roots[instance._rootID];
}
};
return {
componentAdded,
componentUpdated,
componentRemoved,
// Interfaces passed to devtools via __REACT_DEVTOOLS_GLOBAL_HOOK__.inject()
ComponentTree,
Mount,
Reconciler
};
}
/**
* Return `true` if a preact component is a top level component rendered by
* `render()` into a container Element.
*/
function isRootComponent(component) {
// `_parentComponent` is actually `__u` after minification
if (component._parentComponent || component.__u) {
// Component with a composite parent
return false;
}
if (component.base.parentElement && component.base.parentElement[ATTR_KEY]) {
// Component with a parent DOM element rendered by Preact
return false;
}
return true;
}
/**
* Visit all child instances of a ReactCompositeComponent-like object that are
* not composite components (ie. they represent DOM elements or text)
*
* @param {Component} component
* @param {(Component) => void} visitor
*/
function visitNonCompositeChildren(component, visitor) {
if (component._renderedComponent) {
if (!component._renderedComponent._component) {
visitor(component._renderedComponent);
visitNonCompositeChildren(component._renderedComponent, visitor);
}
} else if (component._renderedChildren) {
component._renderedChildren.forEach(child => {
visitor(child);
if (!child._component) visitNonCompositeChildren(child, visitor);
});
}
}
/**
* Create a bridge between the preact component tree and React's dev tools
* and register it.
*
* After this function is called, the React Dev Tools should be able to detect
* "React" on the page and show the component tree.
*
* This function hooks into preact VNode creation in order to expose functional
* components correctly, so it should be called before the root component(s)
* are rendered.
*
* Returns a cleanup function which unregisters the hooks.
*/
export function initDevTools() {
if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
// React DevTools are not installed
return;
}
// Notify devtools when preact components are mounted, updated or unmounted
const bridge = createDevToolsBridge();
const nextAfterMount = options.afterMount;
options.afterMount = component => {
bridge.componentAdded(component);
if (nextAfterMount) nextAfterMount(component);
};
const nextAfterUpdate = options.afterUpdate;
options.afterUpdate = component => {
bridge.componentUpdated(component);
if (nextAfterUpdate) nextAfterUpdate(component);
};
const nextBeforeUnmount = options.beforeUnmount;
options.beforeUnmount = component => {
bridge.componentRemoved(component);
if (nextBeforeUnmount) nextBeforeUnmount(component);
};
// Notify devtools about this instance of "React"
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject(bridge);
return () => {
options.afterMount = nextAfterMount;
options.afterUpdate = nextAfterUpdate;
options.beforeUnmount = nextBeforeUnmount;
};
}
preact-8.2.5/devtools/index.js 0000664 0000000 0000000 00000000075 13151101465 0016307 0 ustar 00root root 0000000 0000000 import { initDevTools } from './devtools';
initDevTools();
preact-8.2.5/package.json 0000664 0000000 0000000 00000013134 13151101465 0015271 0 ustar 00root root 0000000 0000000 {
"name": "preact",
"version": "8.2.5",
"description": "Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.",
"main": "dist/preact.js",
"jsnext:main": "dist/preact.esm.js",
"module": "dist/preact.esm.js",
"dev:main": "dist/preact.dev.js",
"minified:main": "dist/preact.min.js",
"scripts": {
"clean": "rimraf dist/ devtools.js devtools.js.map debug.js debug.js.map",
"copy-flow-definition": "copyfiles -f src/preact.js.flow dist",
"copy-typescript-definition": "copyfiles -f src/preact.d.ts dist",
"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",
"transpile:devtools": "rollup -c config/rollup.config.devtools.js",
"transpile:esm": "rollup -c config/rollup.config.esm.js",
"transpile:debug": "babel debug/ -o debug.js -s",
"transpile": "npm-run-all transpile:main transpile:esm transpile:devtools transpile:debug",
"optimize": "uglifyjs dist/preact.dev.js -c conditionals=false,sequences=false,loops=false,join_vars=false,collapse_vars=false --pure-funcs=Object.defineProperty --mangle-props --mangle-regex=\"/^(_|normalizedNodeName|nextBase|prev[CPS]|_parentC)/\" --name-cache config/properties.json -b width=120,quote_style=3 -o dist/preact.js -p relative --in-source-map dist/preact.dev.js.map --source-map dist/preact.js.map",
"minify": "uglifyjs dist/preact.js -c collapse_vars,evaluate,screw_ie8,unsafe,loops=false,keep_fargs=false,pure_getters,unused,dead_code -m -o dist/preact.min.js -p relative --in-source-map dist/preact.js.map --source-map dist/preact.min.js.map",
"strip:main": "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 && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/preact.dev.js",
"strip:esm": "jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/preact.esm.js && jscodeshift --run-in-band -s -t config/codemod-const.js dist/preact.esm.js && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/preact.esm.js",
"strip": "npm-run-all strip:main strip:esm",
"size": "node -e \"process.stdout.write('gzip size: ')\" && gzip-size --raw dist/preact.min.js",
"test": "npm-run-all lint --parallel test:mocha test:karma test:ts test:size",
"test:ts": "tsc -p test/ts/",
"test:mocha": "mocha --recursive --require 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",
"test:size": "bundlesize",
"lint": "eslint debug devtools src test",
"prepublish": "npm run build",
"smart-release": "npm run build && npm test && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish",
"release": "cross-env npm run smart-release",
"postinstall": "node -e \"console.log('\\u001b[35m\\u001b[1mLove Preact? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/preact/donate\\u001b[0m')\""
},
"eslintConfig": {
"extends": "./config/eslint-config.js"
},
"typings": "./dist/preact.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/developit/preact.git"
},
"files": [
"devtools",
"debug",
"src",
"dist",
"devtools.js",
"devtools.js.map",
"debug.js",
"debug.js.map",
"typings.json"
],
"keywords": [
"preact",
"react",
"virtual dom",
"vdom",
"components",
"virtual",
"dom"
],
"author": "Jason Miller p1
p2
p3
p4