commit 0c8a6e21f0324e25d1ec59bcdddf8c5c49b01421
parent 7fb527b0009a29605c32e663ab9e6a812a8cc5a8
Author: Florian Dold <florian.dold@gmail.com>
Date: Wed, 5 Oct 2016 17:38:02 +0200
prettier syntax (JSX) for rendering
Diffstat:
7 files changed, 68 insertions(+), 59 deletions(-)
diff --git a/gulpfile.js b/gulpfile.js
@@ -121,6 +121,7 @@ const paths = {
const tsBaseArgs = {
target: "es6",
jsx: "react",
+ reactNamespace: "preact",
experimentalDecorators: true,
module: "system",
sourceMap: true,
diff --git a/lib/decl/preact.d.ts b/lib/decl/preact.d.ts
@@ -56,12 +56,16 @@ declare namespace preact {
function h<PropsType>(node:ComponentConstructor<PropsType, any>, 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<PropsType>(node:ComponentConstructor<PropsType, any>, 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;
diff --git a/lib/vendor/preact.js b/lib/vendor/preact.js
@@ -460,6 +460,7 @@
render: function() {}
});
exports.h = h;
+ exports.createElement = h;
exports.cloneElement = cloneElement;
exports.Component = Component;
exports.render = render;
diff --git a/lib/wallet/renderHtml.ts b/lib/wallet/renderHtml.ts
@@ -1,49 +0,0 @@
-/*
- This file is part of TALER
- (C) 2016 INRIA
-
- TALER is free software; you can redistribute it and/or modify it under the
- terms of the GNU General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- TALER is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE. See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
- */
-
-/**
- * Helpers functions to render Taler-related data structures to HTML.
- *
- * @author Florian Dold
- */
-
-
-import {AmountJson, Contract} from "./types";
-
-
-let h = preact.h;
-
-export function prettyAmount(amount: AmountJson) {
- let v = amount.value + amount.fraction / 1e6;
- return `${v.toFixed(2)} ${amount.currency}`;
-}
-
-export function renderContract(contract: Contract): JSX.Element {
- let merchantName = m("strong", contract.merchant.name);
- let amount = m("strong", prettyAmount(contract.amount));
-
- return h("div", {},
- h("p", {},
- i18n.parts`${merchantName}
- wants to enter a contract over ${amount}
- with you.`),
- h("p", {},
- i18n`You are about to purchase:`),
- h('ul', {},
- ...contract.products.map(
- (p: any) => h("li", {},
- `${p.description}: ${prettyAmount(p.price)}`))));
-}
-\ No newline at end of file
diff --git a/lib/wallet/renderHtml.tsx b/lib/wallet/renderHtml.tsx
@@ -0,0 +1,50 @@
+/*
+ This file is part of TALER
+ (C) 2016 INRIA
+
+ TALER is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ * Helpers functions to render Taler-related data structures to HTML.
+ *
+ * @author Florian Dold
+ */
+
+
+import {AmountJson, Contract} from "./types";
+
+export function prettyAmount(amount: AmountJson) {
+ let v = amount.value + amount.fraction / 1e6;
+ return `${v.toFixed(2)} ${amount.currency}`;
+}
+
+export function renderContract(contract: Contract): JSX.Element {
+ let merchantName = m("strong", contract.merchant.name);
+ let amount = m("strong", prettyAmount(contract.amount));
+
+ return (
+ <div>
+ <p>{
+ i18n.parts`${merchantName}
+ wants to enter a contract over ${amount}
+ with you.`}
+ </p>
+ <p>{i18n`You are about to purchase:`}</p>
+ <ul>
+ {contract.products.map(
+ (p: any) => (<li>{`${p.description}: ${prettyAmount(p.price)}`}</li>))
+ }
+ </ul>
+ </div>
+ );
+}
+\ No newline at end of file
diff --git a/pages/confirm-contract.tsx b/pages/confirm-contract.tsx
@@ -51,13 +51,14 @@ class Details extends preact.Component<DetailProps, DetailState> {
render(props: DetailProps, state: DetailState) {
if (state.collapsed) {
- return h("div", {},
- h("button", {
- className: "linky",
- onClick: () => {
- this.setState({collapsed: false});
- }
- }, "show more details"));
+ return (
+ <div>
+ <button className="linky"
+ onClick={() => { this.setState({collapsed: false})}}>
+ show more details
+ </button>
+ </div>
+ );
} else {
return h("div", {},
h("button", {
@@ -167,7 +168,7 @@ class ContractPrompt extends preact.Component<ContractPromptProps, ContractPromp
i18n`Confirm Payment`),
(state.error ? h("p",
{className: "errorbox"},
- state.error) : h("p", "")),
+ state.error) : h("p", "")),
h(Details, {contract: c})
);
}
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,6 +2,7 @@
"compilerOptions": {
"target": "es6",
"jsx": "react",
+ "reactNamespace": "preact",
"experimentalDecorators": true,
"module": "system",
"sourceMap": true,
@@ -26,11 +27,11 @@
"lib/wallet/helpers.ts",
"lib/wallet/http.ts",
"lib/wallet/query.ts",
- "lib/wallet/renderHtml.ts",
"lib/wallet/types.ts",
"lib/wallet/wallet.ts",
"lib/wallet/wxApi.ts",
"lib/wallet/wxMessaging.ts",
+ "lib/wallet/renderHtml.tsx",
"background/main.ts",
"content_scripts/notify.ts",
"popup/popup.tsx",
