From b2128609ac8159a14224deba399144b3400c8c20 Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Sun, 13 Nov 2016 08:16:12 +0100 Subject: [PATCH] Finally give in and use React, minor tweeks. Preact (a minimalistic React alternative) had too many bugs ... --- .gitignore | 2 + README | 11 +- gulpfile.js | 2 +- lib/components.ts | 5 +- lib/decl/preact.d.ts | 560 - lib/decl/react-dom.d.ts | 75 + lib/decl/react-global.d.ts | 11 + lib/decl/react.d.ts | 2547 +++ lib/refs.d.ts | 1 + lib/vendor/preact.js | 480 - lib/vendor/react-dom.js | 18525 ++++++++++++++++ lib/vendor/react.js | 3783 ++++ lib/wallet/emscriptif.ts | 271 +- lib/wallet/helpers.ts | 71 + lib/wallet/http.ts | 13 + lib/wallet/renderHtml.tsx | 2 +- lib/wallet/wallet.ts | 125 +- lib/wallet/wxApi.ts | 2 +- pages/confirm-contract.html | 3 +- pages/confirm-contract.tsx | 29 +- pages/confirm-create-reserve.html | 3 +- pages/confirm-create-reserve.tsx | 11 +- pages/tree.html | 5 +- pages/tree.tsx | 89 +- popup/popup.html | 3 +- popup/popup.tsx | 85 +- thirdparty/README | 6 - thirdparty/preact/.editorconfig | 15 - thirdparty/preact/.gitignore | 10 - thirdparty/preact/.travis.yml | 36 - thirdparty/preact/LICENSE | 21 - thirdparty/preact/README.md | 372 - thirdparty/preact/config/codemod-const.js | 39 - thirdparty/preact/config/codemod-strip-tdz.js | 56 - thirdparty/preact/config/eslint-config.js | 66 - .../preact/config/rollup.config.aliases.js | 12 - .../preact/config/rollup.config.devtools.js | 20 - thirdparty/preact/config/rollup.config.js | 23 - thirdparty/preact/devtools/devtools.js | 427 - thirdparty/preact/devtools/index.js | 4 - thirdparty/preact/package.json | 111 - thirdparty/preact/src/clone-element.js | 10 - thirdparty/preact/src/component.js | 102 - thirdparty/preact/src/constants.js | 20 - thirdparty/preact/src/dom/index.js | 99 - thirdparty/preact/src/dom/recycler.js | 25 - thirdparty/preact/src/h.js | 50 - thirdparty/preact/src/linked-state.js | 24 - thirdparty/preact/src/options.js | 27 - thirdparty/preact/src/preact.d.ts | 565 - thirdparty/preact/src/preact.js | 24 - thirdparty/preact/src/preact.js.flow | 9 - thirdparty/preact/src/render-queue.js | 23 - thirdparty/preact/src/render.js | 20 - thirdparty/preact/src/util.js | 68 - .../preact/src/vdom/component-recycler.js | 32 - thirdparty/preact/src/vdom/component.js | 281 - thirdparty/preact/src/vdom/diff.js | 254 - .../preact/src/vdom/functional-component.js | 25 - thirdparty/preact/src/vdom/index.js | 49 - thirdparty/preact/src/vnode.js | 14 - thirdparty/preact/test/browser/components.js | 712 - thirdparty/preact/test/browser/context.js | 174 - thirdparty/preact/test/browser/devtools.js | 234 - thirdparty/preact/test/browser/keys.js | 85 - thirdparty/preact/test/browser/lifecycle.js | 495 - .../preact/test/browser/linked-state.js | 110 - thirdparty/preact/test/browser/performance.js | 245 - thirdparty/preact/test/browser/refs.js | 305 - thirdparty/preact/test/browser/render.js | 439 - thirdparty/preact/test/browser/spec.js | 127 - thirdparty/preact/test/browser/svg.js | 112 - thirdparty/preact/test/karma.conf.js | 155 - thirdparty/preact/test/node/index.js | 1 - thirdparty/preact/test/polyfills.js | 5 - thirdparty/preact/test/shared/exports.js | 21 - thirdparty/preact/test/shared/h.js | 196 - thirdparty/preact/typings.json | 5 - tsconfig.json | 2 +- 79 files changed, 25373 insertions(+), 7703 deletions(-) delete mode 100644 lib/decl/preact.d.ts create mode 100644 lib/decl/react-dom.d.ts create mode 100644 lib/decl/react-global.d.ts create mode 100644 lib/decl/react.d.ts delete mode 100644 lib/vendor/preact.js create mode 100644 lib/vendor/react-dom.js create mode 100644 lib/vendor/react.js delete mode 100644 thirdparty/preact/.editorconfig delete mode 100644 thirdparty/preact/.gitignore delete mode 100644 thirdparty/preact/.travis.yml delete mode 100644 thirdparty/preact/LICENSE delete mode 100644 thirdparty/preact/README.md delete mode 100644 thirdparty/preact/config/codemod-const.js delete mode 100644 thirdparty/preact/config/codemod-strip-tdz.js delete mode 100644 thirdparty/preact/config/eslint-config.js delete mode 100644 thirdparty/preact/config/rollup.config.aliases.js delete mode 100644 thirdparty/preact/config/rollup.config.devtools.js delete mode 100644 thirdparty/preact/config/rollup.config.js delete mode 100644 thirdparty/preact/devtools/devtools.js delete mode 100644 thirdparty/preact/devtools/index.js delete mode 100644 thirdparty/preact/package.json delete mode 100644 thirdparty/preact/src/clone-element.js delete mode 100644 thirdparty/preact/src/component.js delete mode 100644 thirdparty/preact/src/constants.js delete mode 100644 thirdparty/preact/src/dom/index.js delete mode 100644 thirdparty/preact/src/dom/recycler.js delete mode 100644 thirdparty/preact/src/h.js delete mode 100644 thirdparty/preact/src/linked-state.js delete mode 100644 thirdparty/preact/src/options.js delete mode 100644 thirdparty/preact/src/preact.d.ts delete mode 100644 thirdparty/preact/src/preact.js delete mode 100644 thirdparty/preact/src/preact.js.flow delete mode 100644 thirdparty/preact/src/render-queue.js delete mode 100644 thirdparty/preact/src/render.js delete mode 100644 thirdparty/preact/src/util.js delete mode 100644 thirdparty/preact/src/vdom/component-recycler.js delete mode 100644 thirdparty/preact/src/vdom/component.js delete mode 100644 thirdparty/preact/src/vdom/diff.js delete mode 100644 thirdparty/preact/src/vdom/functional-component.js delete mode 100644 thirdparty/preact/src/vdom/index.js delete mode 100644 thirdparty/preact/src/vnode.js delete mode 100644 thirdparty/preact/test/browser/components.js delete mode 100644 thirdparty/preact/test/browser/context.js delete mode 100644 thirdparty/preact/test/browser/devtools.js delete mode 100644 thirdparty/preact/test/browser/keys.js delete mode 100644 thirdparty/preact/test/browser/lifecycle.js delete mode 100644 thirdparty/preact/test/browser/linked-state.js delete mode 100644 thirdparty/preact/test/browser/performance.js delete mode 100644 thirdparty/preact/test/browser/refs.js delete mode 100644 thirdparty/preact/test/browser/render.js delete mode 100644 thirdparty/preact/test/browser/spec.js delete mode 100644 thirdparty/preact/test/browser/svg.js delete mode 100644 thirdparty/preact/test/karma.conf.js delete mode 100644 thirdparty/preact/test/node/index.js delete mode 100644 thirdparty/preact/test/polyfills.js delete mode 100644 thirdparty/preact/test/shared/exports.js delete mode 100644 thirdparty/preact/test/shared/h.js delete mode 100644 thirdparty/preact/typings.json diff --git a/.gitignore b/.gitignore index 8563e66cd..6d1e30dc6 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,5 @@ taler-wallet-*.sig # Even though node_modules are tracked in git, # per default we don't want them to show up in git status node_modules + +coverage diff --git a/README b/README index 710d19e86..78c70dc00 100644 --- a/README +++ b/README @@ -13,12 +13,13 @@ containing the extension in ./build/taler-wallet-$VERSION.zip Dependencies ============ -This project has the following third-party runtime dependencies: +See thirdparty/README for a list of dependencies that are checked into this +repository as a git subtree. + +This project also has the following third-party runtime dependencies, which +are checked in compiled or minified form: +- React (Facebook Inc., BSD License) -* URI.js: URL parsing and construction -* jed: gettext parsing for JavaScript -* system.js: Module loader for browsers that don't support - ES6 modules Emscripten compiled dependencies: * libgnunetutil diff --git a/gulpfile.js b/gulpfile.js index 1cd0beaec..37e32cb59 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -128,7 +128,7 @@ const paths = { const tsBaseArgs = { target: "es6", jsx: "react", - reactNamespace: "preact", + reactNamespace: "React", experimentalDecorators: true, module: "system", sourceMap: true, diff --git a/lib/components.ts b/lib/components.ts index fb802ab47..066e6d07f 100644 --- a/lib/components.ts +++ b/lib/components.ts @@ -30,16 +30,15 @@ export interface StateHolder { * Component that doesn't hold its state in one object, * but has multiple state holders. */ -export abstract class ImplicitStateComponent extends preact.Component { +export abstract class ImplicitStateComponent extends React.Component { makeState(initial: StateType): StateHolder { let state: StateType = initial; return (s?: StateType): StateType => { if (s !== undefined) { state = s; - // In preact, this will always schedule a (debounced) redraw this.setState({} as any); } return state; }; } -} \ No newline at end of file +} diff --git a/lib/decl/preact.d.ts b/lib/decl/preact.d.ts deleted file mode 100644 index dfa094e0e..000000000 --- a/lib/decl/preact.d.ts +++ /dev/null @@ -1,560 +0,0 @@ -declare namespace preact { - interface ComponentProps { - children?:JSX.Element[]; - key?:string; - } - - interface PreactHTMLAttributes { - key?:string; - } - - interface VNode { - nodeName:ComponentConstructor|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; - - forceUpdate():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 createElement(node:ComponentConstructor, params:PropsType, ...children:(JSX.Element|string)[]):JSX.Element; - function createElement(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/lib/decl/react-dom.d.ts b/lib/decl/react-dom.d.ts new file mode 100644 index 000000000..1f6ca6efd --- /dev/null +++ b/lib/decl/react-dom.d.ts @@ -0,0 +1,75 @@ +// Type definitions for React v0.14 (react-dom) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// + +declare namespace __React { + namespace __DOM { + function findDOMNode(instance: ReactInstance): E; + function findDOMNode(instance: ReactInstance): Element; + + function render

( + element: DOMElement, + container: Element, + callback?: (element: T) => any): T; + function render

( + element: SFCElement

, + container: Element, + callback?: () => any): void; + function render>( + element: CElement, + container: Element, + callback?: (component: T) => any): T; + function render

( + element: ReactElement

, + container: Element, + callback?: (component?: Component | Element) => any): Component | Element | void; + + function unmountComponentAtNode(container: Element): boolean; + + var version: string; + + function unstable_batchedUpdates(callback: (a: A, b: B) => any, a: A, b: B): void; + function unstable_batchedUpdates(callback: (a: A) => any, a: A): void; + function unstable_batchedUpdates(callback: () => any): void; + + function unstable_renderSubtreeIntoContainer

( + parentComponent: Component, + element: DOMElement, + container: Element, + callback?: (element: T) => any): T; + function unstable_renderSubtreeIntoContainer>( + parentComponent: Component, + element: CElement, + container: Element, + callback?: (component: T) => any): T; + function render

( + parentComponent: Component, + element: SFCElement

, + container: Element, + callback?: () => any): void; + function unstable_renderSubtreeIntoContainer

( + parentComponent: Component, + element: ReactElement

, + container: Element, + callback?: (component?: Component | Element) => any): Component | Element | void; + } + + namespace __DOMServer { + function renderToString(element: ReactElement): string; + function renderToStaticMarkup(element: ReactElement): string; + var version: string; + } +} + +declare module "react-dom" { + import DOM = __React.__DOM; + export = DOM; +} + +declare module "react-dom/server" { + import DOMServer = __React.__DOMServer; + export = DOMServer; +} diff --git a/lib/decl/react-global.d.ts b/lib/decl/react-global.d.ts new file mode 100644 index 000000000..912d029e9 --- /dev/null +++ b/lib/decl/react-global.d.ts @@ -0,0 +1,11 @@ +// Type definitions for React v0.14 (namespace) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// +/// + +import React = __React; +import ReactDOM = __React.__DOM; + diff --git a/lib/decl/react.d.ts b/lib/decl/react.d.ts new file mode 100644 index 000000000..5cba33227 --- /dev/null +++ b/lib/decl/react.d.ts @@ -0,0 +1,2547 @@ +// Type definitions for React v0.14 +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft , John Reilly +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +declare namespace __React { + + // + // React Elements + // ---------------------------------------------------------------------- + + type ReactType = string | ComponentClass | StatelessComponent; + + type Key = string | number; + type Ref = string | ((instance: T) => any); + type ComponentState = {} | void; + + interface Attributes { + key?: Key; + } + interface ClassAttributes extends Attributes { + ref?: Ref; + } + + interface ReactElement

{ + type: string | ComponentClass

| SFC

; + props: P; + key?: Key; + } + + interface SFCElement

extends ReactElement

{ + type: SFC

; + } + + type CElement> = ComponentElement; + interface ComponentElement> extends ReactElement

{ + type: ComponentClass

; + ref?: Ref; + } + + type ClassicElement

= CElement>; + + interface DOMElement

extends ReactElement

{ + type: string; + ref: Ref; + } + + interface ReactHTMLElement extends DOMElement { + } + + interface ReactSVGElement extends DOMElement { + } + + // + // Factories + // ---------------------------------------------------------------------- + + interface Factory

{ + (props?: P & Attributes, ...children: ReactNode[]): ReactElement

; + } + + interface SFCFactory

{ + (props?: P & Attributes, ...children: ReactNode[]): SFCElement

; + } + + interface ComponentFactory> { + (props?: P & ClassAttributes, ...children: ReactNode[]): CElement; + } + + type CFactory> = ComponentFactory; + type ClassicFactory

= CFactory>; + + interface DOMFactory

{ + (props?: P & ClassAttributes, ...children: ReactNode[]): DOMElement; + } + + interface HTMLFactory extends DOMFactory { + } + + interface SVGFactory extends DOMFactory { + } + + // + // React Nodes + // http://facebook.github.io/react/docs/glossary.html + // ---------------------------------------------------------------------- + + type ReactText = string | number; + type ReactChild = ReactElement | ReactText; + + // Should be Array but type aliases cannot be recursive + type ReactFragment = {} | Array; + type ReactNode = ReactChild | ReactFragment | boolean; + + // + // Top Level API + // ---------------------------------------------------------------------- + + function createClass(spec: ComponentSpec): ClassicComponentClass

; + + function createFactory

( + type: string): DOMFactory; + function createFactory

(type: SFC

): SFCFactory

; + function createFactory

( + type: ClassType, ClassicComponentClass

>): CFactory>; + function createFactory, C extends ComponentClass

>( + type: ClassType): CFactory; + function createFactory

(type: ComponentClass

| SFC

): Factory

; + + function createElement

( + type: string, + props?: P & ClassAttributes, + ...children: ReactNode[]): DOMElement; + function createElement

( + type: SFC

, + props?: P & Attributes, + ...children: ReactNode[]): SFCElement

; + function createElement

( + type: ClassType, ClassicComponentClass

>, + props?: P & ClassAttributes>, + ...children: ReactNode[]): CElement>; + function createElement, C extends ComponentClass

>( + type: ClassType, + props?: P & ClassAttributes, + ...children: ReactNode[]): CElement; + function createElement

( + type: ComponentClass

| SFC

, + props?: P & Attributes, + ...children: ReactNode[]): ReactElement

; + + function cloneElement

( + element: DOMElement, + props?: P & ClassAttributes, + ...children: ReactNode[]): DOMElement; + function cloneElement

( + element: SFCElement

, + props?: Q, // should be Q & Attributes, but then Q is inferred as {} + ...children: ReactNode[]): SFCElement

; + function cloneElement

>( + element: CElement, + props?: Q, // should be Q & ClassAttributes + ...children: ReactNode[]): CElement; + function cloneElement

( + element: ReactElement

, + props?: Q, // should be Q & Attributes + ...children: ReactNode[]): ReactElement

; + + function isValidElement

(object: {}): object is ReactElement

; + + var DOM: ReactDOM; + var PropTypes: ReactPropTypes; + var Children: ReactChildren; + var version: string; + + // + // Component API + // ---------------------------------------------------------------------- + + type ReactInstance = Component | Element; + + // Base component for plain JS classes + class Component implements ComponentLifecycle { + constructor(props?: P, context?: any); + setState(f: (prevState: S, props: P) => S, callback?: () => any): void; + setState(state: S, callback?: () => any): void; + forceUpdate(callback?: () => any): void; + render(): JSX.Element; + + // React.Props is now deprecated, which means that the `children` + // property is not available on `P` by default, even though you can + // always pass children as variadic arguments to `createElement`. + // In the future, if we can define its call signature conditionally + // on the existence of `children` in `P`, then we should remove this. + props: P & { children?: ReactNode }; + state: S; + context: any; + refs: { + [key: string]: ReactInstance + }; + } + + class PureComponent extends Component {} + + interface ClassicComponent extends Component { + replaceState(nextState: S, callback?: () => any): void; + isMounted(): boolean; + getInitialState?(): S; + } + + interface ChildContextProvider { + getChildContext(): CC; + } + + // + // Class Interfaces + // ---------------------------------------------------------------------- + + type SFC

= StatelessComponent

; + interface StatelessComponent

{ + (props: P, context?: any): ReactElement; + propTypes?: ValidationMap

; + contextTypes?: ValidationMap; + defaultProps?: P; + displayName?: string; + } + + interface ComponentClass

{ + new(props?: P, context?: any): Component; + propTypes?: ValidationMap

; + contextTypes?: ValidationMap; + childContextTypes?: ValidationMap; + defaultProps?: P; + displayName?: string; + } + + interface ClassicComponentClass

extends ComponentClass

{ + new(props?: P, context?: any): ClassicComponent; + getDefaultProps?(): P; + } + + /** + * We use an intersection type to infer multiple type parameters from + * a single argument, which is useful for many top-level API defs. + * See https://github.com/Microsoft/TypeScript/issues/7234 for more info. + */ + type ClassType, C extends ComponentClass

> = + C & + (new() => T) & + (new() => { props: P }); + + // + // Component Specs and Lifecycle + // ---------------------------------------------------------------------- + + interface ComponentLifecycle { + componentWillMount?(): void; + componentDidMount?(): void; + componentWillReceiveProps?(nextProps: P, nextContext: any): void; + shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean; + componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void; + componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void; + componentWillUnmount?(): void; + } + + interface Mixin extends ComponentLifecycle { + mixins?: Mixin; + statics?: { + [key: string]: any; + }; + + displayName?: string; + propTypes?: ValidationMap; + contextTypes?: ValidationMap; + childContextTypes?: ValidationMap; + + getDefaultProps?(): P; + getInitialState?(): S; + } + + interface ComponentSpec extends Mixin { + render(): ReactElement; + + [propertyName: string]: any; + } + + // + // Event System + // ---------------------------------------------------------------------- + + interface SyntheticEvent { + bubbles: boolean; + cancelable: boolean; + currentTarget: EventTarget; + defaultPrevented: boolean; + eventPhase: number; + isTrusted: boolean; + nativeEvent: Event; + preventDefault(): void; + isDefaultPrevented(): boolean; + stopPropagation(): void; + isPropagationStopped(): boolean; + persist(): void; + target: EventTarget; + timeStamp: Date; + type: string; + } + + interface ClipboardEvent extends SyntheticEvent { + clipboardData: DataTransfer; + } + + interface CompositionEvent extends SyntheticEvent { + data: string; + } + + interface DragEvent extends MouseEvent { + dataTransfer: DataTransfer; + } + + interface FocusEvent extends SyntheticEvent { + relatedTarget: EventTarget; + } + + interface FormEvent extends SyntheticEvent { + } + + interface KeyboardEvent extends SyntheticEvent { + altKey: boolean; + charCode: number; + ctrlKey: boolean; + getModifierState(key: string): boolean; + key: string; + keyCode: number; + locale: string; + location: number; + metaKey: boolean; + repeat: boolean; + shiftKey: boolean; + which: number; + } + + interface MouseEvent extends SyntheticEvent { + altKey: boolean; + button: number; + buttons: number; + clientX: number; + clientY: number; + ctrlKey: boolean; + getModifierState(key: string): boolean; + metaKey: boolean; + pageX: number; + pageY: number; + relatedTarget: EventTarget; + screenX: number; + screenY: number; + shiftKey: boolean; + } + + interface TouchEvent extends SyntheticEvent { + altKey: boolean; + changedTouches: TouchList; + ctrlKey: boolean; + getModifierState(key: string): boolean; + metaKey: boolean; + shiftKey: boolean; + targetTouches: TouchList; + touches: TouchList; + } + + interface UIEvent extends SyntheticEvent { + detail: number; + view: AbstractView; + } + + interface WheelEvent extends MouseEvent { + deltaMode: number; + deltaX: number; + deltaY: number; + deltaZ: number; + } + + interface AnimationEvent extends SyntheticEvent { + animationName: string; + pseudoElement: string; + elapsedTime: number; + } + + interface TransitionEvent extends SyntheticEvent { + propertyName: string; + pseudoElement: string; + elapsedTime: number; + } + + // + // Event Handler Types + // ---------------------------------------------------------------------- + + interface EventHandler { + (event: E): void; + } + + type ReactEventHandler = EventHandler; + + type ClipboardEventHandler = EventHandler; + type CompositionEventHandler = EventHandler; + type DragEventHandler = EventHandler; + type FocusEventHandler = EventHandler; + type FormEventHandler = EventHandler; + type KeyboardEventHandler = EventHandler; + type MouseEventHandler = EventHandler; + type TouchEventHandler = EventHandler; + type UIEventHandler = EventHandler; + type WheelEventHandler = EventHandler; + type AnimationEventHandler = EventHandler; + type TransitionEventHandler = EventHandler; + + // + // Props / DOM Attributes + // ---------------------------------------------------------------------- + + /** + * @deprecated. This was used to allow clients to pass `ref` and `key` + * to `createElement`, which is no longer necessary due to intersection + * types. If you need to declare a props object before passing it to + * `createElement` or a factory, use `ClassAttributes`: + * + * ```ts + * var b: Button; + * var props: ButtonProps & ClassAttributes - {(state.error ?

{state.error}

:

)} -

+ {(this.state.error ?

{this.state.error}

:

)} +

); } @@ -204,6 +203,6 @@ export function main() { console.dir(offer); let contract = offer.contract; - preact.render(, document.getElementById( + ReactDOM.render(, document.getElementById( "contract")!); } diff --git a/pages/confirm-create-reserve.html b/pages/confirm-create-reserve.html index 5c42a68f6..c31a4aa8a 100644 --- a/pages/confirm-create-reserve.html +++ b/pages/confirm-create-reserve.html @@ -7,7 +7,8 @@ - + + diff --git a/pages/confirm-create-reserve.tsx b/pages/confirm-create-reserve.tsx index 9bff0e42a..833bfed27 100644 --- a/pages/confirm-create-reserve.tsx +++ b/pages/confirm-create-reserve.tsx @@ -31,7 +31,6 @@ import {ImplicitStateComponent, StateHolder} from "../lib/components"; "use strict"; -let h = preact.h; function delay(delayMs: number, value: T): Promise { return new Promise((resolve, reject) => { @@ -227,7 +226,7 @@ class ExchangeSelection extends ImplicitStateComponent { if (this.statusString()) { return (

- A problem occured, see below. + A problem occured, see below.

); } @@ -238,12 +237,12 @@ class ExchangeSelection extends ImplicitStateComponent { ); } - render(props: ExchangeSelectionProps): JSX.Element { + render(): JSX.Element { return (

{"You are about to withdraw "} - {amountToPretty(props.amount)} + {amountToPretty(this.props.amount)} {" from your bank account into your wallet."}

{this.renderFeeStatus()} @@ -359,7 +358,7 @@ class ExchangeSelection extends ImplicitStateComponent { renderStatus(): any { if (this.statusString()) { - return

{this.statusString()}

; + return

{this.statusString()}

; } else if (!this.reserveCreationInfo()) { return

Checking URL, please wait ...

; } @@ -384,7 +383,7 @@ export async function main() { amount }; - preact.render(, document.getElementById( + ReactDOM.render(, document.getElementById( "exchange-selection")!); } catch (e) { diff --git a/pages/tree.html b/pages/tree.html index ee12a82e4..1075655f6 100644 --- a/pages/tree.html +++ b/pages/tree.html @@ -10,7 +10,8 @@ - + + @@ -29,4 +30,4 @@ } - \ No newline at end of file + diff --git a/pages/tree.tsx b/pages/tree.tsx index e782877a5..c8a67dac2 100644 --- a/pages/tree.tsx +++ b/pages/tree.tsx @@ -20,7 +20,6 @@ * @author Florian Dold */ -/// import { IExchangeInfo } from "../lib/wallet/types"; import { ReserveRecord, Coin, PreCoin, Denomination } from "../lib/wallet/types"; @@ -30,12 +29,13 @@ import { refresh } from "../lib/wallet/wxApi"; import { prettyAmount, abbrev } from "../lib/wallet/renderHtml"; +import { getTalerStampDate } from "../lib/wallet/helpers"; interface ReserveViewProps { reserve: ReserveRecord; } -class ReserveView extends preact.Component { +class ReserveView extends React.Component { render(): JSX.Element { let r: ReserveRecord = this.props.reserve; return ( @@ -78,7 +78,7 @@ class Toggle extends ImplicitStateComponent { } render() { return ( -
+
{this.renderButton()} {this.props.expanded() ? this.props.children : []}
); @@ -99,7 +99,7 @@ class RefreshDialog extends ImplicitStateComponent { render(): JSX.Element { if (!this.refreshRequested()) { return ( -
+
); @@ -114,7 +114,7 @@ class RefreshDialog extends ImplicitStateComponent { } } -class CoinView extends preact.Component { +class CoinView extends React.Component { render() { let c = this.props.coin; return ( @@ -137,7 +137,7 @@ interface PreCoinViewProps { precoin: PreCoin; } -class PreCoinView extends preact.Component { +class PreCoinView extends React.Component { render() { let c = this.props.precoin; return ( @@ -160,14 +160,18 @@ class CoinList extends ImplicitStateComponent { constructor(props: CoinListProps) { super(props); - this.update(); + this.update(props); } - async update() { - let coins = await getCoins(this.props.exchangeBaseUrl); + async update(props: CoinListProps) { + let coins = await getCoins(props.exchangeBaseUrl); this.coins(coins); } + componentWillReceiveProps(newProps: CoinListProps) { + this.update(newProps); + } + render(): JSX.Element { if (!this.coins()) { return
...
; @@ -223,6 +227,49 @@ interface DenominationListProps { exchange: IExchangeInfo; } +interface ExpanderTextProps { + text: string; +} + +class ExpanderText extends ImplicitStateComponent { + expanded = this.makeState(false); + textArea: any = undefined; + + componentDidUpdate() { + if (this.expanded() && this.textArea) { + this.textArea.focus(); + this.textArea.scrollTop = 0; + } + } + + render(): JSX.Element { + if (!this.expanded()) { + return ( + { this.expanded(true); }}> + {(this.props.text.length <= 10) + ? this.props.text + : ( + + {this.props.text.substring(0,10)} + ... + + ) + } + + ); + } + return ( + + ); + } +} + class DenominationList extends ImplicitStateComponent { expanded = this.makeState(false); @@ -235,6 +282,11 @@ class DenominationList extends ImplicitStateComponent {
  • Refresh fee: {prettyAmount(d.fee_refresh)}
  • Deposit fee: {prettyAmount(d.fee_deposit)}
  • Refund fee: {prettyAmount(d.fee_refund)}
    • +
  • Start: {getTalerStampDate(d.stamp_start)!.toString()}
    • +
  • Withdraw expiration: {getTalerStampDate(d.stamp_expire_withdraw)!.toString()}
    • +
  • Legal expiration: {getTalerStampDate(d.stamp_expire_legal)!.toString()}
    • +
  • Deposit expiration: {getTalerStampDate(d.stamp_expire_deposit)!.toString()}
    • +
  • Denom pub:
    • ); @@ -287,12 +339,15 @@ interface ExchangeProps { exchange: IExchangeInfo; } -class ExchangeView extends preact.Component { +class ExchangeView extends React.Component { render(): JSX.Element { let e = this.props.exchange; return (
    - Url: {this.props.exchange.baseUrl} +
      +
    • Exchange Base Url: {this.props.exchange.baseUrl}
      • +
    • Master public key:
      • +
    @@ -306,9 +361,17 @@ interface ExchangesListState { exchanges: IExchangeInfo[]; } -class ExchangesList extends preact.Component { +class ExchangesList extends React.Component { constructor() { super(); + let port = chrome.runtime.connect(); + port.onMessage.addListener((msg: any) => { + if (msg.notify) { + console.log("got notified"); + this.update(); + } + }); + this.update(); } @@ -332,5 +395,5 @@ class ExchangesList extends preact.Component { } export function main() { - preact.render(, document.body); + ReactDOM.render(, document.body); } diff --git a/popup/popup.html b/popup/popup.html index 39678c80f..9059c0da1 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -7,7 +7,8 @@ - + + diff --git a/popup/popup.tsx b/popup/popup.tsx index 5e439417a..fa21d76e3 100644 --- a/popup/popup.tsx +++ b/popup/popup.tsx @@ -36,15 +36,19 @@ import {abbrev, prettyAmount} from "../lib/wallet/renderHtml"; declare var i18n: any; -function onUpdateNotification(f: () => void) { +function onUpdateNotification(f: () => void): () => void { let port = chrome.runtime.connect({name: "notifications"}); - port.onMessage.addListener((msg, port) => { + let listener = (msg: any, port: any) => { f(); - }); + }; + port.onMessage.addListener(listener); + return () => { + port.onMessage.removeListener(listener); + } } -class Router extends preact.Component { +class Router extends React.Component { static setRoute(s: string): void { window.location.hash = s; } @@ -79,24 +83,29 @@ class Router extends preact.Component { } - render(props: any, state: any): JSX.Element { + render(): JSX.Element { let route = window.location.hash.substring(1); console.log("rendering route", route); - let defaultChild: JSX.Element|null = null; - for (let child of props.children) { - if (child.attributes["default"]) { + let defaultChild: React.ReactChild|null = null; + let foundChild: React.ReactChild|null = null; + React.Children.forEach(this.props.children, (child) => { + let childProps: any = (child as any).props; + if (!childProps) { + return; + } + if (childProps["default"]) { defaultChild = child; } - if (child.attributes["route"] == route) { - return
    {child}
    ; + if (childProps["route"] == route) { + foundChild = child; } - } - if (defaultChild == null) { + }) + let child: React.ReactChild | null = foundChild || defaultChild; + if (!child) { throw Error("unknown route"); } - console.log("rendering default route"); - Router.setRoute(defaultChild.attributes["route"]); - return
    {defaultChild}
    ; + Router.setRoute((child as any).props["route"]); + return
    {child}
    ; } } @@ -106,7 +115,7 @@ export function main() { let el = (
    -
    +
    @@ -116,11 +125,12 @@ export function main() {
    ); - preact.render(el, document.getElementById("content")!); + ReactDOM.render(el, document.getElementById("content")!); } -interface TabProps extends preact.ComponentProps { +interface TabProps { target: string; + children?: React.ReactNode; } function Tab(props: TabProps) { @@ -128,7 +138,7 @@ function Tab(props: TabProps) { if (props.target == Router.getRoute()) { cssClass = "active"; } - let onClick = (e: Event) => { + let onClick = (e: React.MouseEvent) => { Router.setRoute(props.target); e.preventDefault(); }; @@ -140,7 +150,7 @@ function Tab(props: TabProps) { } -class WalletNavBar extends preact.Component { +class WalletNavBar extends React.Component { cancelSubscription: any; componentWillMount() { @@ -158,7 +168,7 @@ class WalletNavBar extends preact.Component { render() { console.log("rendering nav bar"); return ( -