From 30f86f8748a0d9c23538e972d30270a4f1e83941 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 7 May 2021 10:38:28 -0300 Subject: [PATCH] migrate to preact --- .eslintrc.js | 9 +- .../taler-wallet-webextension/package.json | 35 +- .../src/browserHttpLib.ts | 1 - .../taler-wallet-webextension/src/i18n.tsx | 30 +- .../src/pageEntryPoint.ts | 4 +- .../src/pages/pay.tsx | 17 +- .../src/pages/payback.tsx | 3 +- .../src/pages/popup.tsx | 61 +- .../src/pages/refund.tsx | 7 +- .../src/pages/reset-required.tsx | 11 +- .../src/pages/return-coins.tsx | 4 +- .../src/pages/tip.tsx | 6 +- .../src/pages/welcome.tsx | 9 +- .../src/pages/withdraw.tsx | 8 +- .../src/renderHtml.tsx | 25 +- .../src/wxBackend.ts | 3 +- .../tests/__mocks__/fileMocks.ts | 24 + .../tests/__mocks__/fileTransformer.js | 31 + .../tests/__mocks__/setupTests.ts | 33 + .../i18n-test.tsx => tests/i18n.test.tsx} | 34 +- .../taler-wallet-webextension/tsconfig.json | 4 +- pnpm-lock.yaml | 13066 +++++++++++++--- 22 files changed, 10753 insertions(+), 2672 deletions(-) create mode 100644 packages/taler-wallet-webextension/tests/__mocks__/fileMocks.ts create mode 100644 packages/taler-wallet-webextension/tests/__mocks__/fileTransformer.js create mode 100644 packages/taler-wallet-webextension/tests/__mocks__/setupTests.ts rename packages/taler-wallet-webextension/{src/i18n-test.tsx => tests/i18n.test.tsx} (70%) diff --git a/.eslintrc.js b/.eslintrc.js index 407115ac4..50146fe7b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -6,15 +6,8 @@ module.exports = { "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", - "plugin:react/recommended", - "plugin:react-hooks/recommended", + "preact", ], - settings: { - "react": { - "version": "16.9.6", - }, - - }, rules: { "no-constant-condition": ["error", { "checkLoops": false }], "prefer-const": ["warn", { destructuring: "all" }], diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json index 69c504006..f9756fd32 100644 --- a/packages/taler-wallet-webextension/package.json +++ b/packages/taler-wallet-webextension/package.json @@ -9,34 +9,53 @@ "private": false, "scripts": { "clean": "rimraf dist lib tsconfig.tsbuildinfo", + "test": "jest ./tests", "compile": "tsc && rollup -c" }, "dependencies": { - "moment": "^2.29.1", - "@gnu-taler/taler-wallet-core": "workspace:*", "@gnu-taler/taler-util": "workspace:*", + "@gnu-taler/taler-wallet-core": "workspace:*", + "preact": "^10.5.13", + "preact-router": "^3.2.1", "tslib": "^2.1.0" }, "devDependencies": { + "@babel/core": "^7.14.0", + "@babel/plugin-transform-react-jsx-source": "^7.12.13", + "@babel/preset-typescript": "^7.13.0", "@rollup/plugin-commonjs": "^17.0.0", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^11.1.0", "@rollup/plugin-replace": "^2.3.4", + "@testing-library/preact": "^2.0.1", "@types/chrome": "^0.0.128", - "@types/enzyme": "^3.10.8", - "@types/enzyme-adapter-react-16": "^1.0.6", + "@types/jest": "^26.0.23", "@types/node": "^14.14.22", - "@types/react": "^17.0.0", - "@types/react-dom": "^17.0.0", "ava": "3.15.0", + "babel-plugin-transform-react-jsx": "^6.24.1", "enzyme": "^3.11.0", - "react": "^17.0.1", - "react-dom": "^17.0.1", + "enzyme-adapter-preact-pure": "^3.1.0", + "jest": "^26.6.3", + "jest-preset-preact": "^4.0.3", + "preact-cli": "^3.0.5", + "preact-render-to-string": "^5.1.19", "rimraf": "^3.0.2", "rollup": "^2.37.1", "rollup-plugin-ignore": "^1.0.9", "rollup-plugin-sourcemaps": "^0.6.3", "rollup-plugin-terser": "^7.0.2", "typescript": "^4.1.3" + }, + "jest": { + "preset": "jest-preset-preact", + "setupFiles": [ + "/tests/__mocks__/setupTests.ts" + ], + "moduleNameMapper": { + "\\.(css|less)$": "identity-obj-proxy" + }, + "transform": { + "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|po)$": "/tests/__mocks__/fileTransformer.js" + } } } diff --git a/packages/taler-wallet-webextension/src/browserHttpLib.ts b/packages/taler-wallet-webextension/src/browserHttpLib.ts index 5c27becb2..fe12289d2 100644 --- a/packages/taler-wallet-webextension/src/browserHttpLib.ts +++ b/packages/taler-wallet-webextension/src/browserHttpLib.ts @@ -24,7 +24,6 @@ import { HttpRequestOptions, HttpResponse, Headers, - bytesToString, } from "@gnu-taler/taler-wallet-core"; import { TalerErrorCode } from "@gnu-taler/taler-util"; diff --git a/packages/taler-wallet-webextension/src/i18n.tsx b/packages/taler-wallet-webextension/src/i18n.tsx index 86c712b8c..83de768c4 100644 --- a/packages/taler-wallet-webextension/src/i18n.tsx +++ b/packages/taler-wallet-webextension/src/i18n.tsx @@ -21,9 +21,9 @@ /** * Imports */ -import React from "react"; import * as i18nCore from "@gnu-taler/taler-wallet-core"; +import { Component, ComponentChildren, h, JSX, toChildArray, VNode } from "preact"; /** * Convert template strings to a msgid */ @@ -50,7 +50,7 @@ interface TranslateSwitchProps { function stringifyChildren(children: any): string { let n = 1; - const ss = React.Children.map(children, (c) => { + const ss = toChildArray(children).map((c) => { if (typeof c === "string") { return c; } @@ -76,10 +76,10 @@ interface TranslateProps { function getTranslatedChildren( translation: string, - children: React.ReactNode, -): React.ReactNode[] { + children: ComponentChildren, +): ComponentChildren { const tr = translation.split(/%(\d+)\$s/); - const childArray = React.Children.toArray(children); + const childArray = toChildArray(children); // Merge consecutive string children. const placeholderChildren = []; for (let i = 0; i < childArray.length; i++) { @@ -117,15 +117,15 @@ function getTranslatedChildren( * * ``` */ -export class Translate extends React.Component { - render(): JSX.Element { +export class Translate extends Component { + render() { const s = stringifyChildren(this.props.children); const translation: string = i18nCore.jed.ngettext(s, s, 1); const result = getTranslatedChildren(translation, this.props.children); if (!this.props.wrap) { return
{result}
; } - return React.createElement(this.props.wrap, this.props.wrapProps, result); + return h(this.props.wrap, this.props.wrapProps, result); } } @@ -141,16 +141,16 @@ export class Translate extends React.Component { * * ``` */ -export class TranslateSwitch extends React.Component< +export class TranslateSwitch extends Component< TranslateSwitchProps, void > { render(): JSX.Element { - let singular: React.ReactElement | undefined; - let plural: React.ReactElement | undefined; + let singular: VNode | undefined; + let plural: VNode | undefined; const children = this.props.children; if (children) { - React.Children.forEach(children, (child: any) => { + toChildArray(children).forEach((child: any) => { if (child.type === TranslatePlural) { plural = child; } @@ -161,7 +161,7 @@ export class TranslateSwitch extends React.Component< } if (!singular || !plural) { console.error("translation not found"); - return React.createElement("span", {}, ["translation not found"]); + return h("span", {}, ["translation not found"]); } singular.props.target = this.props.target; plural.props.target = this.props.target; @@ -178,7 +178,7 @@ interface TranslationPluralProps { /** * See [[TranslateSwitch]]. */ -export class TranslatePlural extends React.Component< +export class TranslatePlural extends Component< TranslationPluralProps, void > { @@ -193,7 +193,7 @@ export class TranslatePlural extends React.Component< /** * See [[TranslateSwitch]]. */ -export class TranslateSingular extends React.Component< +export class TranslateSingular extends Component< TranslationPluralProps, void > { diff --git a/packages/taler-wallet-webextension/src/pageEntryPoint.ts b/packages/taler-wallet-webextension/src/pageEntryPoint.ts index 028ba1058..06dc594c5 100644 --- a/packages/taler-wallet-webextension/src/pageEntryPoint.ts +++ b/packages/taler-wallet-webextension/src/pageEntryPoint.ts @@ -20,7 +20,7 @@ * @author Florian Dold */ -import ReactDOM from "react-dom"; +import {render} from "preact"; import { createPopup } from "./pages/popup"; import { createWithdrawPage } from "./pages/withdraw"; import { createWelcomePage } from "./pages/welcome"; @@ -63,7 +63,7 @@ function main(): void { if (!container) { throw Error("container not found, can't mount page contents"); } - ReactDOM.render(mainElement, container); + render(mainElement, container); } catch (e) { console.error("got error", e); document.body.innerText = `Fatal error: "${e.message}". Please report this bug at https://bugs.gnunet.org/.`; diff --git a/packages/taler-wallet-webextension/src/pages/pay.tsx b/packages/taler-wallet-webextension/src/pages/pay.tsx index 9c6b10951..80d846d67 100644 --- a/packages/taler-wallet-webextension/src/pages/pay.tsx +++ b/packages/taler-wallet-webextension/src/pages/pay.tsx @@ -27,7 +27,7 @@ import * as i18n from "../i18n"; import { renderAmount, ProgressButton } from "../renderHtml"; import * as wxApi from "../wxApi"; -import React, { useState, useEffect } from "react"; +import { useState, useEffect } from "preact/hooks"; import { getJsonI18n } from "@gnu-taler/taler-wallet-core"; import { @@ -39,10 +39,11 @@ import { ContractTerms, ConfirmPayResultType, } from "@gnu-taler/taler-util"; +import { JSX, VNode } from "preact"; function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { - const [payStatus, setPayStatus] = useState(); - const [payResult, setPayResult] = useState(); + const [payStatus, setPayStatus] = useState(undefined); + const [payResult, setPayResult] = useState(undefined); const [payErrMsg, setPayErrMsg] = useState(""); const [numTries, setNumTries] = useState(0); const [loading, setLoading] = useState(false); @@ -66,8 +67,8 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { } if (payStatus.status === PreparePayResultType.PaymentPossible) { - let amountRaw = Amounts.parseOrThrow(payStatus.amountRaw); - let amountEffective: AmountJson = Amounts.parseOrThrow( + const amountRaw = Amounts.parseOrThrow(payStatus.amountRaw); + const amountEffective: AmountJson = Amounts.parseOrThrow( payStatus.amountEffective, ); totalFees = Amounts.sub(amountEffective, amountRaw).amount; @@ -95,7 +96,7 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { } } - let contractTerms: ContractTerms = payStatus.contractTerms; + const contractTerms: ContractTerms = payStatus.contractTerms; if (!contractTerms) { return ( @@ -105,7 +106,7 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { ); } - let merchantName: React.ReactElement; + let merchantName: VNode; if (contractTerms.merchant && contractTerms.merchant.name) { merchantName = {contractTerms.merchant.name}; } else { @@ -200,7 +201,7 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element { ) : (
doPayment()} > diff --git a/packages/taler-wallet-webextension/src/pages/payback.tsx b/packages/taler-wallet-webextension/src/pages/payback.tsx index 5d42f5f47..4233b1f96 100644 --- a/packages/taler-wallet-webextension/src/pages/payback.tsx +++ b/packages/taler-wallet-webextension/src/pages/payback.tsx @@ -14,6 +14,8 @@ TALER; see the file COPYING. If not, see */ +import { JSX } from "preact/jsx-runtime"; + /** * View and edit auditors. * @@ -23,7 +25,6 @@ /** * Imports. */ -import * as React from "react"; export function makePaybackPage(): JSX.Element { return
not implemented
; diff --git a/packages/taler-wallet-webextension/src/pages/popup.tsx b/packages/taler-wallet-webextension/src/pages/popup.tsx index 4d12d9a83..cf76044ce 100644 --- a/packages/taler-wallet-webextension/src/pages/popup.tsx +++ b/packages/taler-wallet-webextension/src/pages/popup.tsx @@ -41,18 +41,18 @@ import { amountFractionalBase, } from "@gnu-taler/taler-util"; -import { abbrev, renderAmount, PageLink } from "../renderHtml"; +import { renderAmount, PageLink } from "../renderHtml"; import * as wxApi from "../wxApi"; -import React, { Fragment, useState, useEffect } from "react"; +import { useState, useEffect } from "preact/hooks"; -import moment from "moment"; import { PermissionsCheckbox } from "./welcome"; +import { JSXInternal } from "preact/src/jsx"; +import { Component, ComponentChild, ComponentChildren, JSX, toChildArray, VNode } from "preact"; // FIXME: move to newer react functions -/* eslint-disable react/no-deprecated */ -class Router extends React.Component { +class Router extends Component { static setRoute(s: string): void { window.location.hash = s; } @@ -85,21 +85,21 @@ class Router extends React.Component { render(): JSX.Element { const route = window.location.hash.substring(1); console.log("rendering route", route); - let defaultChild: React.ReactChild | null = null; - let foundChild: React.ReactChild | null = null; - React.Children.forEach(this.props.children, (child) => { + let defaultChild: ComponentChild | null = null; + let foundChild: ComponentChild | null = null; + toChildArray(this.props.children).forEach((child) => { const childProps: any = (child as any).props; if (!childProps) { return; } if (childProps.default) { - defaultChild = child as React.ReactChild; + defaultChild = child; } if (childProps.route === route) { - foundChild = child as React.ReactChild; + foundChild = child; } }); - const c: React.ReactChild | null = foundChild || defaultChild; + const c: ComponentChild | null = foundChild || defaultChild; if (!c) { throw Error("unknown route"); } @@ -110,7 +110,7 @@ class Router extends React.Component { interface TabProps { target: string; - children?: React.ReactNode; + children?: ComponentChildren; } function Tab(props: TabProps): JSX.Element { @@ -118,7 +118,7 @@ function Tab(props: TabProps): JSX.Element { if (props.target === Router.getRoute()) { cssClass = "active"; } - const onClick = (e: React.MouseEvent): void => { + const onClick = (e: JSXInternal.TargetedMouseEvent): void => { Router.setRoute(props.target); e.preventDefault(); }; @@ -129,7 +129,7 @@ function Tab(props: TabProps): JSX.Element { ); } -class WalletNavBar extends React.Component { +class WalletNavBar extends Component { private cancelSubscription: any; componentWillMount(): void { @@ -179,7 +179,7 @@ function EmptyBalanceView(): JSX.Element { ); } -class WalletBalanceView extends React.Component { +class WalletBalanceView extends Component { private balance?: BalancesResponse; private gotError = false; private canceler: (() => void) | undefined = undefined; @@ -323,7 +323,7 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element { case "unknown": sign = ""; } - const style: React.CSSProperties = { + const style: JSX.AllCSSProperties = { marginLeft: "auto", display: "flex", flexDirection: "column", @@ -476,7 +476,7 @@ function TransactionItem(props: { tx: Transaction }): JSX.Element { function WalletHistory(props: any): JSX.Element { const [transactions, setTransactions] = useState< TransactionsResponse | undefined - >(); + >(undefined); useEffect(() => { const fetchData = async (): Promise => { @@ -484,7 +484,6 @@ function WalletHistory(props: any): JSX.Element { setTransactions(res); }; fetchData(); - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); if (!transactions) { @@ -495,14 +494,14 @@ function WalletHistory(props: any): JSX.Element { return (
- {txs.map((tx) => ( - + {txs.map((tx,i) => ( + ))}
); } -class WalletSettings extends React.Component { +class WalletSettings extends Component { render(): JSX.Element { return (
@@ -522,14 +521,14 @@ function reload(): void { } } -function confirmReset(): void { +async function confirmReset(): Promise { if ( confirm( "Do you want to IRREVOCABLY DESTROY everything inside your" + " wallet and LOSE ALL YOUR COINS?", ) ) { - wxApi.resetDb(); + await wxApi.resetDb(); window.close(); } } @@ -554,14 +553,14 @@ function openExtensionPage(page: string) { }; } -function openTab(page: string) { - return (evt: React.SyntheticEvent) => { - evt.preventDefault(); - chrome.tabs.create({ - url: page, - }); - }; -} +// function openTab(page: string) { +// return (evt: React.SyntheticEvent) => { +// evt.preventDefault(); +// chrome.tabs.create({ +// url: page, +// }); +// }; +// } function makeExtensionUrlWithParams( url: string, diff --git a/packages/taler-wallet-webextension/src/pages/refund.tsx b/packages/taler-wallet-webextension/src/pages/refund.tsx index 8096378fc..6525f68c6 100644 --- a/packages/taler-wallet-webextension/src/pages/refund.tsx +++ b/packages/taler-wallet-webextension/src/pages/refund.tsx @@ -20,17 +20,18 @@ * @author Florian Dold */ -import React, { useEffect, useState } from "react"; import * as wxApi from "../wxApi"; import { AmountView } from "../renderHtml"; import { - PurchaseDetails, ApplyRefundResponse, Amounts, } from "@gnu-taler/taler-util"; +// import { h } from 'preact'; +import { useEffect, useState } from "preact/hooks"; +import { JSX } from "preact/jsx-runtime"; function RefundStatusView(props: { talerRefundUri: string }): JSX.Element { - const [applyResult, setApplyResult] = useState(); + const [applyResult, setApplyResult] = useState(undefined); const [errMsg, setErrMsg] = useState(undefined); useEffect(() => { diff --git a/packages/taler-wallet-webextension/src/pages/reset-required.tsx b/packages/taler-wallet-webextension/src/pages/reset-required.tsx index 0ef5fe8b7..7f2676263 100644 --- a/packages/taler-wallet-webextension/src/pages/reset-required.tsx +++ b/packages/taler-wallet-webextension/src/pages/reset-required.tsx @@ -20,8 +20,7 @@ * @author Florian Dold */ -import * as React from "react"; - +import { Component, JSX } from "preact"; import * as wxApi from "../wxApi"; interface State { @@ -36,7 +35,7 @@ interface State { resetRequired: boolean; } -class ResetNotification extends React.Component { +class ResetNotification extends Component { constructor(props: any) { super(props); this.state = { checked: false, resetRequired: true }; @@ -50,7 +49,7 @@ class ResetNotification extends React.Component { if (this.state.resetRequired) { return (
-

Manual Reset Reqired

+

Manual Reset Required

The wallet's database in your browser is incompatible with the{" "} currently installed wallet. Please reset manually. @@ -63,7 +62,9 @@ class ResetNotification extends React.Component { id="check" type="checkbox" checked={this.state.checked} - onChange={(e) => this.setState({ checked: e.target.checked })} + onChange={() => { + this.setState(prev => ({ checked: prev.checked })) + }} />{" "}

handleExtendedPerm(x.target.checked)} + onChange={() => handleExtendedPerm()} type="checkbox" id="checkbox-perm" style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} diff --git a/packages/taler-wallet-webextension/src/pages/withdraw.tsx b/packages/taler-wallet-webextension/src/pages/withdraw.tsx index c4a02817c..1d628be22 100644 --- a/packages/taler-wallet-webextension/src/pages/withdraw.tsx +++ b/packages/taler-wallet-webextension/src/pages/withdraw.tsx @@ -25,19 +25,20 @@ import * as i18n from "../i18n"; import { renderAmount } from "../renderHtml"; -import React, { useState, useEffect } from "react"; +import { useState, useEffect } from "preact/hooks"; import { acceptWithdrawal, onUpdateNotification, getWithdrawalDetailsForUri, } from "../wxApi"; import { WithdrawUriInfoResponse } from "@gnu-taler/taler-util"; +import { JSX } from "preact/jsx-runtime"; function WithdrawalDialog(props: { talerWithdrawUri: string }): JSX.Element { - const [details, setDetails] = useState(); + const [details, setDetails] = useState(undefined); const [selectedExchange, setSelectedExchange] = useState< string | undefined - >(); + >(undefined); const talerWithdrawUri = props.talerWithdrawUri; const [cancelled, setCancelled] = useState(false); const [selecting, setSelecting] = useState(false); @@ -48,7 +49,6 @@ function WithdrawalDialog(props: { talerWithdrawUri: string }): JSX.Element { return onUpdateNotification(() => { setUpdateCounter(updateCounter + 1); }); - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { diff --git a/packages/taler-wallet-webextension/src/renderHtml.tsx b/packages/taler-wallet-webextension/src/renderHtml.tsx index 3e66e5c5d..5574e96ea 100644 --- a/packages/taler-wallet-webextension/src/renderHtml.tsx +++ b/packages/taler-wallet-webextension/src/renderHtml.tsx @@ -23,12 +23,13 @@ /** * Imports. */ -import React from "react"; import { AmountJson, Amounts, amountFractionalBase, } from "@gnu-taler/taler-util"; +import { Component, ComponentChildren, JSX } from "preact"; +import { JSXInternal } from "preact/src/jsx"; /** * Render amount as HTML, which non-breaking space between @@ -87,7 +88,7 @@ interface CollapsibleProps { * Component that shows/hides its children when clicking * a heading. */ -export class Collapsible extends React.Component< +export class Collapsible extends Component< CollapsibleProps, CollapsibleState > { @@ -139,24 +140,18 @@ export function ExpanderText({ text }: ExpanderTextProps): JSX.Element { return {text}; } -export interface LoadingButtonProps { - loading: boolean; +export interface LoadingButtonProps extends JSX.HTMLAttributes { + isLoading: boolean; } -export function ProgressButton( - props: React.PropsWithChildren & - React.DetailedHTMLProps< - React.ButtonHTMLAttributes, - HTMLButtonElement - >, -): JSX.Element { +export function ProgressButton({isLoading, ...rest}: LoadingButtonProps): JSX.Element { return (