aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFlorian Dold <florian.dold@gmail.com>2016-10-05 17:38:02 +0200
committerFlorian Dold <florian.dold@gmail.com>2016-10-05 17:38:02 +0200
commit0c8a6e21f0324e25d1ec59bcdddf8c5c49b01421 (patch)
treeccfa63b417a9570c5af2bdbeaa416be5ffa2d312
parent7fb527b0009a29605c32e663ab9e6a812a8cc5a8 (diff)
prettier syntax (JSX) for rendering
-rw-r--r--gulpfile.js1
-rw-r--r--lib/decl/preact.d.ts4
-rw-r--r--lib/vendor/preact.js1
-rw-r--r--lib/wallet/renderHtml.tsx (renamed from lib/wallet/renderHtml.ts)27
-rw-r--r--pages/confirm-contract.tsx17
-rw-r--r--tsconfig.json3
6 files changed, 31 insertions, 22 deletions
diff --git a/gulpfile.js b/gulpfile.js
index 40461b27a..fabfcbdeb 100644
--- 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
index fb8a0b764..dfa094e0e 100644
--- 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
index 3b06bb6af..e0239355e 100644
--- 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.tsx
index 022bce113..f3059f940 100644
--- a/lib/wallet/renderHtml.ts
+++ b/lib/wallet/renderHtml.tsx
@@ -23,9 +23,6 @@
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}`;
@@ -35,15 +32,19 @@ 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}
+ return (
+ <div>
+ <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)}`))));
+ 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
index 8e553b05b..9c1752568 100644
--- 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
index ced83818b..7c964ff94 100644
--- 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",