prettier syntax (JSX) for rendering

gulpfile.js

@@ -121,6 +121,7 @@ const paths = {
 const tsBaseArgs = {
   target: "es6",
   jsx: "react",
+  reactNamespace: "preact",
   experimentalDecorators: true,
   module: "system",
   sourceMap: true,

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;

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;

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>
+  );
 }

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})
     );
   }

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",