Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/developit/preact
Browse files Browse the repository at this point in the history
  • Loading branch information
Kye Hohenberger committed Aug 22, 2017
2 parents 0f08806 + 0dea3b7 commit eec3951
Show file tree
Hide file tree
Showing 22 changed files with 442 additions and 90 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Expand Up @@ -8,3 +8,5 @@
# Additional bundles
/devtools.js
/devtools.js.map
/debug.js
/debug.js.map
46 changes: 46 additions & 0 deletions CODE_OF_CONDUCT.md
@@ -0,0 +1,46 @@
# Contributor Covenant Code of Conduct

## Our Pledge

In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.

## Our Standards

Examples of behavior that contributes to creating a positive environment include:

* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members

Examples of unacceptable behavior by participants include:

* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting

## Our Responsibilities

Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.

Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.

## Scope

This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.

## Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@preactjs.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.

Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.

## Attribution

This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]

[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
59 changes: 34 additions & 25 deletions README.md
Expand Up @@ -12,6 +12,7 @@
- Everything you need: JSX, <abbr title="Virtual DOM">VDOM</abbr>, React DevTools, <abbr title="Hot Module Replacement">HMR</abbr>, <abbr title="Server-Side Rendering">SSR</abbr>..
- 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)

Expand Down Expand Up @@ -60,14 +61,14 @@ Preact supports modern browsers and IE9+:
## 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:
- [**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)
Expand All @@ -77,18 +78,21 @@ Preact supports modern browsers and IE9+:
- [**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))_
- [**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:
- [**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:
Expand Down Expand Up @@ -117,15 +121,20 @@ Preact supports modern browsers and IE9+:
- [**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

> 💁 You [don't _have_ to use ES2015 to use Preact](https://github.com/developit/preact-without-babel)... but you should.
> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_
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).
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
Expand Down Expand Up @@ -329,7 +338,7 @@ Here is a somewhat verbose Preact `<Link>` component:
```js
class Link extends Component {
render(props, state) {
return <a href={ props.href }>{ props.children }</a>;
return <a href={props.href}>{props.children}</a>;
}
}
```
Expand All @@ -338,21 +347,21 @@ Since this is ES6/ES2015, we can further simplify:

```js
class Link extends Component {
render({ href, children }) {
return <a {...{ href, children }} />;
}
render({ href, children }) {
return <a {...{ href, children }} />;
}
}

// or, for wide-open props support:
class Link extends Component {
render(props) {
return <a {...props} />;
}
render(props) {
return <a {...props} />;
}
}

// or, as a stateless functional component:
const Link = ({ children, ...props }) => (
<a {...props}>{ children }</a>
<a {...props}>{ children }</a>
);
```

Expand Down Expand Up @@ -458,7 +467,7 @@ Support us with a monthly donation and help us continue our activities. [[Become


## 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)]
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)]

<a href="https://opencollective.com/preact/sponsor/0/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/1/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/1/avatar.svg"></a>
Expand Down
2 changes: 1 addition & 1 deletion config/codemod-const.js
Expand Up @@ -17,7 +17,7 @@ export default (file, api) => {
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}`);
// console.log(`Inlining constant: ${name}=${init.raw}`);
found++;
constants[name] = init;
// remove declaration
Expand Down
13 changes: 13 additions & 0 deletions config/codemod-let-name.js
@@ -0,0 +1,13 @@
/**
* 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' });
};
18 changes: 13 additions & 5 deletions config/rollup.config.devtools.js
@@ -1,4 +1,3 @@
import nodeResolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';

export default {
Expand All @@ -12,9 +11,18 @@ export default {
plugins: [
babel({
sourceMap: true,
loose: 'all',
blacklist: ['es6.tailCall'],
exclude: 'node_modules/**'
exclude: 'node_modules/**',
babelrc: false,
presets: [
['env', {
modules: false,
loose: true,
exclude: ['transform-es2015-typeof-symbol'],
targets: {
browsers: ['last 2 versions', 'IE >= 9']
}
}]
]
})
]
}
};
9 changes: 9 additions & 0 deletions config/rollup.config.esm.js
@@ -0,0 +1,9 @@
import config from './rollup.config';

// ES output
config.format = 'es';

// remove memory() plugin
config.plugins.splice(0, 1);

export default config;
15 changes: 12 additions & 3 deletions config/rollup.config.js
Expand Up @@ -20,9 +20,18 @@ export default {
}),
babel({
sourceMap: true,
loose: 'all',
blacklist: ['es6.tailCall'],
exclude: 'node_modules/**'
exclude: 'node_modules/**',
babelrc: false,
presets: [
['env', {
modules: false,
loose: true,
exclude: ['transform-es2015-typeof-symbol'],
targets: {
browsers: ['last 2 versions', 'IE >= 9']
}
}]
]
})
]
};
95 changes: 95 additions & 0 deletions debug/index.js
@@ -0,0 +1,95 @@
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) {
throw new Error('Undefined component passed to preact.h()');
}

if (
attributes && attributes.ref !== void 0 &&
typeof attributes.ref !== 'function'
) {
throw new Error(
`Component's "ref" property should be a function,` +
` but [${typeof attributes.ref}] passed`
);
}

{
const keys = {};

inspectChildren(children, (deepChild) => {
if (!deepChild) return;

// In Preact, all keys are stored as object values, i.e. being strings
const key = deepChild.key + '';

if (keys.hasOwnProperty(key)) {
/* eslint-disable no-console */
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) + '\n\n'
);

// Return early to not spam the console
return true;
}

keys[key] = true;
});
}

return oldVnodeOption.call(this, vnode);
};

const inspectChildren = (children, inspect) => {
return children.some((child, i) => {
if (Array.isArray(child)) {
return inspectChildren(child, inspect);
}

return inspect(child, i);
});
};

const serializeVNode = ({ nodeName, attributes }) => {
let name;
let props;

if (typeof nodeName === 'function') {
name = nodeName.name || nodeName.displayName;
} else {
name = nodeName;
}

if (attributes) {
props = Object.keys(attributes).map(attr => {
const attrValue = attributes[attr];
let attrValueString;

// If it is an object but doesn't have toString(), use Object.toString
if (Object(attrValue) === attrValue && !attrValue.toString) {
attrValueString = Object.prototype.toString.call(attrValue);
} else {
attrValueString = attrValue + '';
}

return `${attr}=${JSON.stringify(attrValueString)}`;
});
}

if (!props) {
return `<${name} />`;
}

return `<${name} ${props.join(' ')} />`;
};

require('preact/devtools');
}

0 comments on commit eec3951

Please sign in to comment.