From 7c3ed93291990fd3928cdb02efe6465287eb5d0b Mon Sep 17 00:00:00 2001 From: Jason Rogers Date: Wed, 1 Mar 2017 11:36:04 -0500 Subject: [PATCH 01/19] Add TypeScript typings for functional components and inclusive components --- src/preact.d.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/preact.d.ts b/src/preact.d.ts index 9961441de9..ebb6c9f5f3 100644 --- a/src/preact.d.ts +++ b/src/preact.d.ts @@ -36,6 +36,16 @@ declare namespace preact { new (props?:PropsType):Component; } + interface FunctionalComponent { + (props:PropsType & ComponentProps, context?:any):JSX.Element; + displayName?:string; + defaultProps?:any; + } + + // An "inclusive" component is a component that is either a functional + // component or a more full-fledged component. + type InclusiveComponent = FunctionalComponent | typeof Component; + abstract class Component implements ComponentLifecycle { constructor(props?:PropsType); From 63538d55a94cfcb5d0c8223215dd1e7465a4dcbf Mon Sep 17 00:00:00 2001 From: Jason Rogers Date: Sun, 12 Mar 2017 20:44:07 -0400 Subject: [PATCH 02/19] Use 'AnyComponent' and 'StatelessComponent' for types --- src/preact.d.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/preact.d.ts b/src/preact.d.ts index 64d01a6ecb..6ecc600395 100644 --- a/src/preact.d.ts +++ b/src/preact.d.ts @@ -1,5 +1,5 @@ declare namespace preact { - interface ComponentProps> { + interface ComponentProps | StatelessComponent)> { children?:JSX.Element[]; key?:string | number | any; ref?:(el: C) => void; @@ -37,15 +37,14 @@ declare namespace preact { new (props?:PropsType):Component; } - interface FunctionalComponent { - (props:PropsType & ComponentProps, context?:any):JSX.Element; + interface StatelessComponent { + (props:PropsType & ComponentProps, context?:any):JSX.Element; displayName?:string; defaultProps?:any; } - // An "inclusive" component is a component that is either a functional - // component or a more full-fledged component. - type InclusiveComponent = FunctionalComponent | typeof Component; + // Type alias for a component considered generally, whether stateless or stateful. + type AnyComponent = StatelessComponent | typeof Component; abstract class Component implements ComponentLifecycle { constructor(props?:PropsType); From 2c124e8440c937d2f25c57b9ef5efb82e05dd774 Mon Sep 17 00:00:00 2001 From: Bill Neff Date: Thu, 16 Mar 2017 18:33:11 -0400 Subject: [PATCH 03/19] protectOlderBrowsers Protect against instantiating Map in browsers that don't support it in devtools --- devtools/devtools.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/devtools/devtools.js b/devtools/devtools.js index 8259b37adb..1cb2531960 100644 --- a/devtools/devtools.js +++ b/devtools/devtools.js @@ -132,7 +132,7 @@ function createReactCompositeComponent(component) { * The same React*Component instance must be used when notifying devtools * about the initial mount of a component and subsequent updates. */ -let instanceMap = new Map(); +let instanceMap = typeof Map==='function' && new Map(); /** * Update (and create if necessary) the ReactDOMComponent|ReactCompositeComponent-like @@ -177,7 +177,7 @@ function findRoots(node, roots) { /** * Map of functional component name -> wrapper class. */ -let functionalComponentWrappers = new Map(); +let functionalComponentWrappers = typeof Map==='function' && new Map(); /** * Wrap a functional component with a stateful component. From 595dfb43cb4f94ec5bed105a0899955ed769fcc4 Mon Sep 17 00:00:00 2001 From: Neil Kistner Date: Thu, 16 Mar 2017 18:25:13 -0500 Subject: [PATCH 04/19] Add optional callback to forceUpdate method --- src/component.js | 4 +++- src/preact.d.ts | 2 +- test/browser/spec.js | 45 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 49 insertions(+), 2 deletions(-) diff --git a/src/component.js b/src/component.js index fc91a0c12a..4636b2e2af 100644 --- a/src/component.js +++ b/src/component.js @@ -83,9 +83,11 @@ extend(Component.prototype, { /** Immediately perform a synchronous re-render of the component. + * @param {function} callback A function to be called after component is re-rendered. * @private */ - forceUpdate() { + forceUpdate(callback) { + if (callback) (this._renderCallbacks = (this._renderCallbacks || [])).push(callback); renderComponent(this, FORCE_RENDER); }, diff --git a/src/preact.d.ts b/src/preact.d.ts index e1fc202f36..ba621e7088 100644 --- a/src/preact.d.ts +++ b/src/preact.d.ts @@ -52,7 +52,7 @@ declare namespace preact { setState(state:Pick, callback?:() => void):void; setState(fn:(prevState:StateType, props:PropsType) => Pick, callback?:() => void):void; - forceUpdate(): void; + forceUpdate(callback?:() => void): void; abstract render(props:PropsType & ComponentProps, state:any):JSX.Element; } diff --git a/test/browser/spec.js b/test/browser/spec.js index d33cdb93fa..87785ff46e 100644 --- a/test/browser/spec.js +++ b/test/browser/spec.js @@ -124,4 +124,49 @@ describe('Component spec', () => { expect(WithDefaultProps.prototype.getDefaultProps).to.be.calledOnce; }); }); + + describe('forceUpdate', () => { + it('should force a rerender', () => { + let forceUpdate; + class ForceUpdateComponent extends Component { + componentWillUpdate() {} + componentDidMount() { + forceUpdate = () => this.forceUpdate(); + } + render() { + return
; + } + } + sinon.spy(ForceUpdateComponent.prototype, 'componentWillUpdate'); + sinon.spy(ForceUpdateComponent.prototype, 'forceUpdate'); + render(, scratch); + expect(ForceUpdateComponent.prototype.componentWillUpdate).not.to.have.been.called; + + forceUpdate(); + + expect(ForceUpdateComponent.prototype.componentWillUpdate).to.have.been.called; + expect(ForceUpdateComponent.prototype.forceUpdate).to.have.been.called; + }); + + it('should add callback to renderCallbacks', () => { + let forceUpdate; + let callback = sinon.spy(); + class ForceUpdateComponent extends Component { + componentDidMount() { + forceUpdate = () => this.forceUpdate(callback); + } + render() { + return
; + } + } + sinon.spy(ForceUpdateComponent.prototype, 'forceUpdate'); + render(, scratch); + + forceUpdate(); + + expect(ForceUpdateComponent.prototype.forceUpdate).to.have.been.called; + expect(ForceUpdateComponent.prototype.forceUpdate).to.have.been.calledWith(callback); + expect(callback).to.have.been.called; + }); + }); }); From 00cf45f91e7cda9f80f6cf27f3fd7d28918434e2 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Sat, 18 Mar 2017 23:41:18 -0400 Subject: [PATCH 05/19] Spruce up the readme. --- README.md | 58 +++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 46 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 269f5f68d2..23e568d42c 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,54 @@ - +

+ Preact +

+

Fast 3kB alternative to React, with the same ES2015 API.

-**Preact is a fast, `3kB` alternative to React, with the same ES2015 API.** +**All the power of Virtual DOM components, without the overhead:** -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. +- 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 -### :information_desk_person: Full documentation is available at the [Preact Website ➞](https://preactjs.com) +### 💁 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 -[![CDNJS](https://img.shields.io/cdnjs/v/preact.svg)](https://cdnjs.com/libraries/preact) [![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) -[![coveralls](https://img.shields.io/coveralls/developit/preact/master.svg)](https://coveralls.io/github/developit/preact) +[![CDNJS](https://img.shields.io/cdnjs/v/preact.svg)](https://cdnjs.com/libraries/preact) [![Preact Slack Community](https://preact-slack.now.sh/badge.svg)](https://preact-slack.now.sh) [![OpenCollective Backers](https://opencollective.com/preact/backers/badge.svg)](#backers) [![OpenCollective Sponsors](https://opencollective.com/preact/sponsors/badge.svg)](#sponsors) +[![travis](https://travis-ci.org/developit/preact.svg?branch=master)](https://travis-ci.org/developit/preact) +[![coveralls](https://img.shields.io/coveralls/developit/preact/master.svg)](https://coveralls.io/github/developit/preact) -Preact supports modern browsers and IE9+. The chart below shows test status for `master`: +Preact supports modern browsers and IE9+: [![Browsers](https://saucelabs.com/browser-matrix/preact.svg)](https://saucelabs.com/u/preact) @@ -77,9 +108,11 @@ Preact supports modern browsers and IE9+. The chart below shows test status for - :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 +--- + ## 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. +> 💁 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). @@ -450,8 +483,9 @@ MIT [![Preact](http://i.imgur.com/YqCHvEW.gif)](https://preactjs.com) - -[ES6 Classes]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes +[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 From 1be9fe76079f6872d8354080be0de452d922f3a1 Mon Sep 17 00:00:00 2001 From: Georgios Valotasios Date: Sun, 19 Mar 2017 20:30:43 +0100 Subject: [PATCH 06/19] Added types for functional components --- src/preact.d.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/preact.d.ts b/src/preact.d.ts index e1fc202f36..91cafd76ba 100644 --- a/src/preact.d.ts +++ b/src/preact.d.ts @@ -1,5 +1,5 @@ declare namespace preact { - interface ComponentProps> { + interface ComponentProps | FunctionalComponent> { children?:JSX.Element[]; key?:string | number | any; ref?:(el: C) => void; @@ -33,6 +33,8 @@ declare namespace preact { componentDidUpdate?(previousProps:PropsType,previousState:StateType,previousContext:any):void; } + type FunctionalComponent = (props: PropsType & ComponentProps>, state: StateType) => JSX.Element; + interface ComponentConstructor { new (props?:PropsType):Component; } @@ -57,7 +59,7 @@ declare namespace preact { abstract render(props:PropsType & ComponentProps, state:any):JSX.Element; } - function h(node:ComponentConstructor, params:PropsType, ...children:(JSX.Element|JSX.Element[]|string)[]):JSX.Element; + function h(node:ComponentConstructor | FunctionalComponent, params:PropsType, ...children:(JSX.Element|JSX.Element[]|string)[]):JSX.Element; function h(node:string, params:JSX.HTMLAttributes&JSX.SVGAttributes&{[propName: string]: any}, ...children:(JSX.Element|JSX.Element[]|string)[]):JSX.Element; function render(node:JSX.Element, parent:Element, mergeWith?:Element):Element; function rerender():void; From de2479b3d0b55cdd49ab5cc0e81af91d38a92a28 Mon Sep 17 00:00:00 2001 From: Georgios Valotasios Date: Sun, 19 Mar 2017 22:01:42 +0100 Subject: [PATCH 07/19] Make use of interface and added context to the Component's constructor --- src/preact.d.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/preact.d.ts b/src/preact.d.ts index 91cafd76ba..900c7dd6f7 100644 --- a/src/preact.d.ts +++ b/src/preact.d.ts @@ -33,14 +33,16 @@ declare namespace preact { componentDidUpdate?(previousProps:PropsType,previousState:StateType,previousContext:any):void; } - type FunctionalComponent = (props: PropsType & ComponentProps>, state: StateType) => JSX.Element; + interface FunctionalComponent { + (props?: PropsType & ComponentProps, state?: StateType): JSX.Element + } interface ComponentConstructor { new (props?:PropsType):Component; } abstract class Component implements ComponentLifecycle { - constructor(props?:PropsType); + constructor(props?:PropsType, context?:any); static displayName?:string; static defaultProps?:any; From 491bddb34d55b20af4bcbbc7769704e14854dcbd Mon Sep 17 00:00:00 2001 From: Kayo Phoenix Date: Mon, 20 Mar 2017 16:48:55 +0500 Subject: [PATCH 08/19] Fixed type of render function --- src/preact.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/preact.d.ts b/src/preact.d.ts index e1fc202f36..9810a2b418 100644 --- a/src/preact.d.ts +++ b/src/preact.d.ts @@ -59,7 +59,7 @@ declare namespace preact { function h(node:ComponentConstructor, params:PropsType, ...children:(JSX.Element|JSX.Element[]|string)[]):JSX.Element; function h(node:string, params:JSX.HTMLAttributes&JSX.SVGAttributes&{[propName: string]: any}, ...children:(JSX.Element|JSX.Element[]|string)[]):JSX.Element; - function render(node:JSX.Element, parent:Element, mergeWith?:Element):Element; + function render(node:JSX.Element, parent:Element|Document, mergeWith?:Element):Element; function rerender():void; function cloneElement(element:JSX.Element, props:any):JSX.Element; From c72fe9204bc8d53708aa2e26063b460e5c3d5328 Mon Sep 17 00:00:00 2001 From: Georgios Valotasios Date: Mon, 20 Mar 2017 21:02:49 +0100 Subject: [PATCH 09/19] Adapted ComponentConstructor with context --- src/preact.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/preact.d.ts b/src/preact.d.ts index 900c7dd6f7..c5ab5c0386 100644 --- a/src/preact.d.ts +++ b/src/preact.d.ts @@ -38,7 +38,7 @@ declare namespace preact { } interface ComponentConstructor { - new (props?:PropsType):Component; + new (props?:PropsType, context?: any):Component; } abstract class Component implements ComponentLifecycle { @@ -49,6 +49,7 @@ declare namespace preact { state:StateType; props:PropsType & ComponentProps; + context: any; base:HTMLElement; linkState:(name:string) => (event: Event) => void; From cbca369f8c2d47f79108749e07919342197f8f52 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Thu, 23 Mar 2017 20:57:28 -0400 Subject: [PATCH 10/19] Warning from createReactCompositeComponent would trigger a lot of warnings. Also, I think we're moving towards a world where it's totally fine to not extend Component. For now, let's nix the warning. --- devtools/devtools.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/devtools/devtools.js b/devtools/devtools.js index 1cb2531960..1bd79ade65 100644 --- a/devtools/devtools.js +++ b/devtools/devtools.js @@ -86,10 +86,6 @@ function createReactCompositeComponent(component) { const _currentElement = createReactElement(component); const node = component.base; - if (!component.forceUpdate || !component.setState) { - console.warn('Warning: Preact encountered a Component which does not extend Preact.Component. Please ensure that you are rendering valid Preact component for ' + component.constructor.name); - } - let instance = { // --- ReactDOMComponent properties getName() { From 07074426e468d9072d32d60d2540d949875cc70a Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Thu, 23 Mar 2017 20:59:12 -0400 Subject: [PATCH 11/19] 7.2.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 492c59bd78..b5f370f475 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "preact", "amdName": "preact", - "version": "7.2.0", + "version": "7.2.1", "description": "Tiny & fast Component-based virtual DOM framework.", "main": "dist/preact.js", "jsnext:main": "src/preact.js", From 7d792cd44bcb05dbdbfc4cec19af31b90a644a5d Mon Sep 17 00:00:00 2001 From: Georgios Valotasios Date: Fri, 24 Mar 2017 18:27:31 +0100 Subject: [PATCH 12/19] Removed StateType from FunctionalComponent and added context --- src/preact.d.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/preact.d.ts b/src/preact.d.ts index c5ab5c0386..3d00e2f1b1 100644 --- a/src/preact.d.ts +++ b/src/preact.d.ts @@ -33,8 +33,8 @@ declare namespace preact { componentDidUpdate?(previousProps:PropsType,previousState:StateType,previousContext:any):void; } - interface FunctionalComponent { - (props?: PropsType & ComponentProps, state?: StateType): JSX.Element + interface FunctionalComponent { + (props?: PropsType & ComponentProps, context?: any): JSX.Element } interface ComponentConstructor { @@ -59,10 +59,10 @@ declare namespace preact { forceUpdate(): void; - abstract render(props:PropsType & ComponentProps, state:any):JSX.Element; + abstract render(props?:PropsType & ComponentProps, state?:StateType, context?: any):JSX.Element; } - function h(node:ComponentConstructor | FunctionalComponent, params:PropsType, ...children:(JSX.Element|JSX.Element[]|string)[]):JSX.Element; + function h(node:ComponentConstructor | FunctionalComponent, params:PropsType, ...children:(JSX.Element|JSX.Element[]|string)[]):JSX.Element; function h(node:string, params:JSX.HTMLAttributes&JSX.SVGAttributes&{[propName: string]: any}, ...children:(JSX.Element|JSX.Element[]|string)[]):JSX.Element; function render(node:JSX.Element, parent:Element, mergeWith?:Element):Element; function rerender():void; From 8567c8bc13bc7fc60eeff4cad3bc9217822b4577 Mon Sep 17 00:00:00 2001 From: juicelink Date: Sat, 25 Mar 2017 19:11:13 +0100 Subject: [PATCH 13/19] add slot support for typescript (#608) --- src/preact.d.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/preact.d.ts b/src/preact.d.ts index e1fc202f36..70b9697f07 100644 --- a/src/preact.d.ts +++ b/src/preact.d.ts @@ -365,6 +365,7 @@ declare namespace JSX { shape?:string; size?:number; sizes?:string; + slot?:string; span?:number; spellCheck?:boolean; src?:string; @@ -487,6 +488,7 @@ declare namespace JSX { script:HTMLAttributes; section:HTMLAttributes; select:HTMLAttributes; + slot:HTMLAttributes; small:HTMLAttributes; source:HTMLAttributes; span:HTMLAttributes; From 4ee46bef6bf9bb97f67f893e0fdcba8ffb49ed0a Mon Sep 17 00:00:00 2001 From: asolove Date: Sat, 25 Mar 2017 20:03:25 -0600 Subject: [PATCH 14/19] More specific if conditions lead to ~10% faster render. --- src/vdom/diff.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/vdom/diff.js b/src/vdom/diff.js index bd1cb7650f..cbdff514f8 100644 --- a/src/vdom/diff.js +++ b/src/vdom/diff.js @@ -187,10 +187,10 @@ function innerDiffNode(dom, vchildren, context, mountAll, absorb) { min = 0, len = originalChildren.length, childrenLen = 0, - vlen = vchildren && vchildren.length, + vlen = vchildren ? vchildren.length : 0, j, c, vchild, child; - if (len) { + if (len!==0) { for (let i=0; i Date: Mon, 27 Mar 2017 03:28:20 +0200 Subject: [PATCH 15/19] add svg typescript definitions (#609) * add svg type definitions * fix whitespaces --- src/preact.d.ts | 190 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 187 insertions(+), 3 deletions(-) diff --git a/src/preact.d.ts b/src/preact.d.ts index 70b9697f07..9fcf358579 100644 --- a/src/preact.d.ts +++ b/src/preact.d.ts @@ -92,48 +92,227 @@ declare namespace JSX { } interface SVGAttributes extends HTMLAttributes { + accentHeight?:number | string; + accumulate?:"none" | "sum"; + additive?:"replace" | "sum"; + alignmentBaseline?:"auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit"; + allowReorder?:"no" | "yes"; + alphabetic?:number | string; + amplitude?:number | string; + arabicForm?:"initial" | "medial" | "terminal" | "isolated"; + ascent?:number | string; + attributeName?:string; + attributeType?:string; + autoReverse?:number | string; + azimuth?:number | string; + baseFrequency?:number | string; + baselineShift?:number | string; + baseProfile?:number | string; + bbox?:number | string; + begin?:number | string; + bias?:number | string; + by?:number | string; + calcMode?:number | string; + capHeight?:number | string; + clip?:number | string; clipPath?:string; + clipPathUnits?:number | string; + clipRule?:number | string; + colorInterpolation?:number | string; + colorInterpolationFilters?:"auto" | "sRGB" | "linearRGB" | "inherit"; + colorProfile?:number | string; + colorRendering?:number | string; + contentScriptType?:number | string; + contentStyleType?:number | string; + cursor?:number | string; cx?:number | string; cy?:number | string; d?:string; + decelerate?:number | string; + descent?:number | string; + diffuseConstant?:number | string; + direction?:number | string; + display?:number | string; + divisor?:number | string; + dominantBaseline?:number | string; + dur?:number | string; dx?:number | string; dy?:number | string; + edgeMode?:number | string; + elevation?:number | string; + enableBackground?:number | string; + end?:number | string; + exponent?:number | string; + externalResourcesRequired?:number | string; fill?:string; fillOpacity?:number | string; + fillRule?:"nonzero" | "evenodd" | "inherit"; + filter?:string; + filterRes?:number | string; + filterUnits?:number | string; + floodColor?:number | string; + floodOpacity?:number | string; + focusable?:number | string; fontFamily?:string; fontSize?:number | string; + fontSizeAdjust?:number | string; + fontStretch?:number | string; + fontStyle?:number | string; + fontVariant?:number | string; + fontWeight?:number | string; + format?:number | string; + from?:number | string; fx?:number | string; fy?:number | string; + g1?:number | string; + g2?:number | string; + glyphName?:number | string; + glyphOrientationHorizontal?:number | string; + glyphOrientationVertical?:number | string; + glyphRef?:number | string; gradientTransform?:string; gradientUnits?:string; + hanging?:number | string; + horizAdvX?:number | string; + horizOriginX?:number | string; + ideographic?:number | string; + imageRendering?:number | string; + in2?:number | string; + in?:string; + intercept?:number | string; + k1?:number | string; + k2?:number | string; + k3?:number | string; + k4?:number | string; + k?:number | string; + kernelMatrix?:number | string; + kernelUnitLength?:number | string; + kerning?:number | string; + keyPoints?:number | string; + keySplines?:number | string; + keyTimes?:number | string; + lengthAdjust?:number | string; + letterSpacing?:number | string; + lightingColor?:number | string; + limitingConeAngle?:number | string; + local?:number | string; markerEnd?:string; + markerHeight?:number | string; markerMid?:string; markerStart?:string; + markerUnits?:number | string; + markerWidth?:number | string; + mask?:string; + maskContentUnits?:number | string; + maskUnits?:number | string; + mathematical?:number | string; + mode?:number | string; + numOctaves?:number | string; offset?:number | string; opacity?:number | string; + operator?:number | string; + order?:number | string; + orient?:number | string; + orientation?:number | string; + origin?:number | string; + overflow?:number | string; + overlinePosition?:number | string; + overlineThickness?:number | string; + paintOrder?:number | string; + panose1?:number | string; + pathLength?:number | string; patternContentUnits?:string; + patternTransform?:number | string; patternUnits?:string; + pointerEvents?:number | string; points?:string; + pointsAtX?:number | string; + pointsAtY?:number | string; + pointsAtZ?:number | string; + preserveAlpha?:number | string; preserveAspectRatio?:string; + primitiveUnits?:number | string; r?:number | string; + radius?:number | string; + refX?:number | string; + refY?:number | string; + renderingIntent?:number | string; + repeatCount?:number | string; + repeatDur?:number | string; + requiredExtensions?:number | string; + requiredFeatures?:number | string; + restart?:number | string; + result?:string; + rotate?:number | string; rx?:number | string; ry?:number | string; + scale?:number | string; + seed?:number | string; + shapeRendering?:number | string; + slope?:number | string; + spacing?:number | string; + specularConstant?:number | string; + specularExponent?:number | string; + speed?:number | string; spreadMethod?:string; + startOffset?:number | string; + stdDeviation?:number | string; + stemh?:number | string; + stemv?:number | string; + stitchTiles?:number | string; stopColor?:string; stopOpacity?:number | string; + strikethroughPosition?:number | string; + strikethroughThickness?:number | string; + string?:number | string; stroke?:string; - strokeDasharray?:string; - strokeLinecap?:string; + strokeDasharray?:string | number; + strokeDashoffset?:string | number; + strokeLinecap?:"butt" | "round" | "square" | "inherit"; + strokeLinejoin?:"miter" | "round" | "bevel" | "inherit"; strokeMiterlimit?:string; strokeOpacity?:number | string; strokeWidth?:number | string; + surfaceScale?:number | string; + systemLanguage?:number | string; + tableValues?:number | string; + targetX?:number | string; + targetY?:number | string; textAnchor?:string; + textDecoration?:number | string; + textLength?:number | string; + textRendering?:number | string; + to?:number | string; transform?:string; + u1?:number | string; + u2?:number | string; + underlinePosition?:number | string; + underlineThickness?:number | string; + unicode?:number | string; + unicodeBidi?:number | string; + unicodeRange?:number | string; + unitsPerEm?:number | string; + vAlphabetic?:number | string; + values?:string; + vectorEffect?:number | string; version?:string; + vertAdvY?:number | string; + vertOriginX?:number | string; + vertOriginY?:number | string; + vHanging?:number | string; + vIdeographic?:number | string; viewBox?:string; + viewTarget?:number | string; + visibility?:number | string; + vMathematical?:number | string; + widths?:number | string; + wordSpacing?:number | string; + writingMode?:number | string; x1?:number | string; x2?:number | string; x?:number | string; + xChannelSelector?:string; + xHeight?:number | string; xlinkActuate?:string; xlinkArcrole?:string; xlinkHref?:string; @@ -143,10 +322,15 @@ declare namespace JSX { xlinkType?:string; xmlBase?:string; xmlLang?:string; + xmlns?:string; + xmlnsXlink?:string; xmlSpace?:string; y1?:number | string; y2?:number | string; y?:number | string; + yChannelSelector?:string; + z?:number | string; + zoomAndPan?:string; } interface PathAttributes { @@ -516,7 +700,7 @@ declare namespace JSX { //SVG svg:SVGAttributes; - + animate:SVGAttributes; circle:SVGAttributes; clipPath:SVGAttributes; defs:SVGAttributes; From d5ae93359185a02a5a6876b2f0ab1f5000ef7d60 Mon Sep 17 00:00:00 2001 From: Georgios Valotasios Date: Mon, 27 Mar 2017 20:38:07 +0200 Subject: [PATCH 16/19] Fix compilation error --- src/preact.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/preact.d.ts b/src/preact.d.ts index 3d00e2f1b1..f66506a5e1 100644 --- a/src/preact.d.ts +++ b/src/preact.d.ts @@ -1,5 +1,5 @@ declare namespace preact { - interface ComponentProps | FunctionalComponent> { + interface ComponentProps | FunctionalComponent> { children?:JSX.Element[]; key?:string | number | any; ref?:(el: C) => void; From 3cae58071691926b4660f6426e68965877742baf Mon Sep 17 00:00:00 2001 From: Georgios Valotasios Date: Mon, 27 Mar 2017 21:43:25 +0200 Subject: [PATCH 17/19] Added tests for preact.d.ts --- package.json | 4 +++- test/ts/prect-test.tsx | 32 ++++++++++++++++++++++++++++++++ test/ts/tsconfig.json | 24 ++++++++++++++++++++++++ 3 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 test/ts/prect-test.tsx create mode 100644 test/ts/tsconfig.json diff --git a/package.json b/package.json index 492c59bd78..3e095bbbc8 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "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": "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": "node -e \"process.stdout.write('gzip size: ')\" && gzip-size dist/preact.min.js", - "test": "npm-run-all lint --parallel test:mocha test:karma", + "test": "npm-run-all lint --parallel test:mocha test:karma test:ts", + "test:ts": "tsc -p test/ts/", "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", @@ -104,6 +105,7 @@ "rollup-plugin-node-resolve": "^2.0.0", "sinon": "^1.17.4", "sinon-chai": "^2.8.0", + "typescript": "^2.2.2", "uglify-js": "^2.7.5", "webpack": "^1.13.1" }, diff --git a/test/ts/prect-test.tsx b/test/ts/prect-test.tsx new file mode 100644 index 0000000000..a3ee555ad1 --- /dev/null +++ b/test/ts/prect-test.tsx @@ -0,0 +1,32 @@ +import { h, render, Component } from 'preact'; + +interface DummyProps { + initialInput: string; +} + +interface DummyState { + input: string; +} + +class DummyComponent extends Component { + constructor(props: DummyProps) { + super(props); + this.state = { + input: `x${this.props}x` + } + } + + render({ initialInput }: DummyProps, { input }: DummyState) { + return + } +} + +interface DummerComponentProps extends DummyProps, DummyState { + +} + +function DummerComponent({ input, initialInput }: DummerComponentProps) { + return
Input: {input}, initial: {initialInput}
; +} + +render(h(DummerComponent, { initialInput: "The input" }), document.getElementById("xxx")); diff --git a/test/ts/tsconfig.json b/test/ts/tsconfig.json new file mode 100644 index 0000000000..8a11992246 --- /dev/null +++ b/test/ts/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": false, + "typeRoots": [ + "../../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react", + "jsxFactory": "h" + }, + "files": [ + "prect-test.tsx", + "../../src/preact.d.ts" + ] +} From 1444485fd482536717114ab675c9637c672939c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Carmona?= Date: Tue, 28 Mar 2017 21:16:34 +0200 Subject: [PATCH 18/19] Update README.md (#606) * Update README.md Change setState to keep consistency with the rest of examples. * Update README --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 23e568d42c..9a37497e6a 100644 --- a/README.md +++ b/README.md @@ -235,7 +235,9 @@ class Clock extends Component { constructor() { super(); // set initial time: - this.state.time = Date.now(); + this.state = { + time: Date.now() + }; } componentDidMount() { From 8c82d4bea35295588f23ce5cc0811004f83b38f8 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Wed, 29 Mar 2017 11:00:55 -0400 Subject: [PATCH 19/19] Remove unused `amdName` property from package.json. Fixes #613 (#614) --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index b5f370f475..dd9a467cb3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,5 @@ { "name": "preact", - "amdName": "preact", "version": "7.2.1", "description": "Tiny & fast Component-based virtual DOM framework.", "main": "dist/preact.js",