diff --git a/README.md b/README.md index 0d998c6189..5be3f32f34 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@

-Preact + +![Preact](/logo.svg "Preact") +

Fast 3kB alternative to React with the same modern API.

@@ -66,6 +68,7 @@ Preact supports modern browsers and IE9+: - [**Preact Hacker News**](https://hn.kristoferbaxter.com) _([GitHub Project](https://github.com/kristoferbaxter/preact-hn))_ - [**Play.cash**](https://play.cash) :notes: _([GitHub Project](https://github.com/feross/play.cash))_ - [**BitMidi**](https://bitmidi.com/) 🎹 Wayback machine for free MIDI files _([GitHub Project](https://github.com/feross/bitmidi.com))_ +- [**Ultimate Guitar**](https://www.ultimate-guitar.com) 🎸speed boosted by Preact. - [**ESBench**](http://esbench.com) is built using Preact. - [**BigWebQuiz**](https://bigwebquiz.com) _([GitHub Project](https://github.com/jakearchibald/big-web-quiz))_ - [**Nectarine.rocks**](http://nectarine.rocks) _([GitHub Project](https://github.com/developit/nectarine))_ :peach: @@ -206,6 +209,16 @@ import preact from 'preact'; > ] > } > ``` +> +> **For Babel 7:** +> +> ```json +> { +> "plugins": [ +> ["@babel/plugin-transform-react-jsx", { "pragma":"h" }] +> ] +> } +> ``` > **For using Preact along with TypeScript add to `tsconfig.json`:** > > ```json diff --git a/logo.svg b/logo.svg new file mode 100644 index 0000000000..f487acdae2 --- /dev/null +++ b/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + PREACT + diff --git a/src/preact.d.ts b/src/preact.d.ts index 7d5384f14d..a4ce14ece2 100644 --- a/src/preact.d.ts +++ b/src/preact.d.ts @@ -4,8 +4,8 @@ export as namespace preact; declare namespace preact { type Key = string | number; type Ref = (instance: T) => void; - type ComponentChild = VNode | string | number | null; - type ComponentChildren = ComponentChild[] | ComponentChild | object | string | number | null; + type ComponentChild = VNode | object | string | number | boolean | null; + type ComponentChildren = ComponentChild[] | ComponentChild; /** * @deprecated @@ -22,7 +22,7 @@ declare namespace preact { type PreactHTMLAttributes = ClassAttributes; interface Attributes { - key?: string | number | any; + key?: Key; jsx?: boolean; } @@ -69,7 +69,7 @@ declare namespace preact { } // Type alias for a component considered generally, whether stateless or stateful. - type AnyComponent

= FunctionalComponent

| Component; + type AnyComponent

= FunctionalComponent

| ComponentConstructor; interface Component

{ componentWillMount?(): void; @@ -421,6 +421,7 @@ declare global { interface DOMAttributes extends preact.PreactDOMAttributes { // Image Events onLoad?: GenericEventHandler; + onError?: GenericEventHandler; onLoadCapture?: GenericEventHandler; // Clipboard Events diff --git a/src/preact.js.flow b/src/preact.js.flow index 271d1b8047..a36c45cbd9 100644 --- a/src/preact.js.flow +++ b/src/preact.js.flow @@ -2,7 +2,7 @@ import { createElement, cloneElement, Component, type Node } from 'react'; -declare var h: createElement; +declare var h: typeof createElement; declare function render(vnode: Node, parent: Element, toReplace?: Element): Element; diff --git a/src/vdom/component.js b/src/vdom/component.js index 64fd32970e..df8ea659b9 100644 --- a/src/vdom/component.js +++ b/src/vdom/component.js @@ -189,7 +189,7 @@ export function renderComponent(component, renderMode, mountAll, isChild) { } if (!isUpdate || mountAll) { - mounts.unshift(component); + mounts.push(component); } else if (!skip) { // Ensure that pending componentDidMount() hooks of child components @@ -282,7 +282,7 @@ export function unmountComponent(component) { unmountComponent(inner); } else if (base) { - if (base[ATTR_KEY] && base[ATTR_KEY].ref) base[ATTR_KEY].ref(null); + if (base[ATTR_KEY]!=null) applyRef(base[ATTR_KEY].ref, null); component.nextBase = base; diff --git a/src/vdom/diff.js b/src/vdom/diff.js index a2db0f90fd..ff32fbb533 100644 --- a/src/vdom/diff.js +++ b/src/vdom/diff.js @@ -24,11 +24,13 @@ let hydrating = false; /** Invoke queued componentDidMount lifecycle methods */ export function flushMounts() { - let c; - while ((c=mounts.pop())) { + let c, i; + for (i=0; i { @@ -18,6 +18,9 @@ class SimpleComponent extends Component<{}, {}> { const SimpleFunctionalComponent = () =>

; +const a: AnyComponent = SimpleComponent; +const b: AnyComponent = SimpleFunctionalComponent; + describe("VNode", () => { it("is returned by h", () => { const actual =
; @@ -58,8 +61,38 @@ describe("VNode", () => { }); }); -class TypedChildren extends Component<{children: (num: number) => string}> { - render() { return null } +class ComponentWithFunctionChild extends Component<{ children: (num: number) => string; }> { + render() { return null; } +} + +{num => num.toFixed(2)}; + +class ComponentWithStringChild extends Component<{ children: string; }> { + render() { return null; } +} + +child; + +class ComponentWithNumberChild extends Component<{ children: number; }> { + render() { return null; } +} + +{1}; + +class ComponentWithBooleanChild extends Component<{ children: boolean; }> { + render() { return null; } +} + +{false}; + +class ComponentWithNullChild extends Component<{ children: null; }> { + render() { return null; } +} + +{null}; + +class ComponentWithNumberChildren extends Component<{ children: number[]; }> { + render() { return null; } } -const typedChild = {num => num.toFixed(2)} +{1}{2};