From 0c8a6e21f0324e25d1ec59bcdddf8c5c49b01421 Mon Sep 17 00:00:00 2001
From: Florian Dold <florian.dold@gmail.com>
Date: Wed, 5 Oct 2016 17:38:02 +0200
Subject: [PATCH] prettier syntax (JSX) for rendering

---
 gulpfile.js                                  |  1 +
 lib/decl/preact.d.ts                         |  4 +++
 lib/vendor/preact.js                         |  1 +
 lib/wallet/{renderHtml.ts => renderHtml.tsx} | 27 ++++++++++----------
 pages/confirm-contract.tsx                   | 17 ++++++------
 tsconfig.json                                |  3 ++-
 6 files changed, 31 insertions(+), 22 deletions(-)
 rename lib/wallet/{renderHtml.ts => renderHtml.tsx} (75%)

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
similarity index 75%
rename from lib/wallet/renderHtml.ts
rename to 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",