diff options
Diffstat (limited to 'packages/taler-wallet-webextension')
46 files changed, 77 insertions, 118 deletions
diff --git a/packages/taler-wallet-webextension/.storybook/preview.js b/packages/taler-wallet-webextension/.storybook/preview.js index 1b6f62400..920e6b1ca 100644 --- a/packages/taler-wallet-webextension/.storybook/preview.js +++ b/packages/taler-wallet-webextension/.storybook/preview.js @@ -14,7 +14,7 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { Fragment } from "preact" +import { h, Fragment } from "preact" import { NavBar } from '../src/NavigationBar' import { LogoHeader } from '../src/components/LogoHeader' import { TranslationProvider } from '../src/context/translation' @@ -123,8 +123,8 @@ export const decorators = [ font-family: Arial, Helvetica, sans-serif; }`} </style> - <link key="1" rel="stylesheet" type="text/css" href="/style/pure.css" /> - <link key="2" rel="stylesheet" type="text/css" href="/style/wallet.css" /> + <link key="1" rel="stylesheet" type="text/css" href="/static/style/pure.css" /> + <link key="2" rel="stylesheet" type="text/css" href="/static/style/wallet.css" /> <Story /> </div> } @@ -158,8 +158,8 @@ export const decorators = [ </style> <LogoHeader /> <NavBar path={path} devMode={path === '/dev'} /> - {/* <link key="1" rel="stylesheet" type="text/css" href="/style/pure.css" /> - <link key="2" rel="stylesheet" type="text/css" href="/style/wallet.css" /> */} + <link key="1" rel="stylesheet" type="text/css" href="/static/style/pure.css" /> + <link key="2" rel="stylesheet" type="text/css" href="/static/style/wallet.css" /> <Story /> </div> } diff --git a/packages/taler-wallet-webextension/clean_and_build_fast.sh b/packages/taler-wallet-webextension/clean_and_build_fast.sh new file mode 100755 index 000000000..707070437 --- /dev/null +++ b/packages/taler-wallet-webextension/clean_and_build_fast.sh @@ -0,0 +1,4 @@ +#!/usr/bin/env bash +# This file is in the public domain. +rm -rf dist lib tsconfig.tsbuildinfo && (cd ../.. && rm -rf build/web && ./contrib/build-fast-web.sh) && rm -rf extension/ && ./pack.sh && (cd extension/ && unzip taler*.zip) + diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json index e41c6cb86..74b57637f 100644 --- a/packages/taler-wallet-webextension/package.json +++ b/packages/taler-wallet-webextension/package.json @@ -19,6 +19,7 @@ "@gnu-taler/taler-util": "workspace:*", "@gnu-taler/taler-wallet-core": "workspace:*", "date-fns": "^2.22.1", + "history": "4.10.1", "preact": "^10.5.13", "preact-router": "^3.2.1", "tslib": "^2.1.0" @@ -27,15 +28,12 @@ "@babel/core": "^7.14.0", "@babel/plugin-transform-react-jsx-source": "^7.12.13", "@babel/preset-typescript": "^7.13.0", - "@linaria/babel-preset": "^3.0.0-beta.4", "@linaria/core": "^3.0.0-beta.4", "@linaria/react": "^3.0.0-beta.7", "@linaria/rollup": "^3.0.0-beta.7", - "@linaria/shaker": "^3.0.0-beta.7", "@linaria/webpack-loader": "^3.0.0-beta.7", "@rollup/plugin-alias": "^3.1.2", - "@rollup/plugin-commonjs": "^17.0.0", "@rollup/plugin-image": "^2.0.6", "@rollup/plugin-json": "^4.1.0", @@ -54,7 +52,6 @@ "babel-plugin-transform-react-jsx": "^6.24.1", "enzyme": "^3.11.0", "enzyme-adapter-preact-pure": "^3.1.0", - "history": "4.10.1", "jest": "^26.6.3", "jest-preset-preact": "^4.0.3", "preact-cli": "^3.0.5", diff --git a/packages/taler-wallet-webextension/rollup.config.js b/packages/taler-wallet-webextension/rollup.config.js index 5a3f0db5f..150db1fff 100644 --- a/packages/taler-wallet-webextension/rollup.config.js +++ b/packages/taler-wallet-webextension/rollup.config.js @@ -44,9 +44,6 @@ const makePlugins = () => [ linaria({ sourceMap: process.env.NODE_ENV !== 'production', }), - css({ - output: 'styles.css', - }), ]; @@ -59,7 +56,12 @@ const webExtensionWalletEntryPoint = { exports: "none", name: "webExtensionWalletEntry", }, - plugins: makePlugins(), + plugins: [ + ...makePlugins(), + css({ + output: 'walletEntryPoint.css', + }), + ], }; const webExtensionPopupEntryPoint = { @@ -70,7 +72,12 @@ const webExtensionPopupEntryPoint = { exports: "none", name: "webExtensionPopupEntry", }, - plugins: makePlugins(), + plugins: [ + ...makePlugins(), + css({ + output: 'popupEntryPoint.css', + }), + ], }; const webExtensionBackgroundPageScript = { diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx index e07032d0a..9ddf610cd 100644 --- a/packages/taler-wallet-webextension/src/NavigationBar.tsx +++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx @@ -25,7 +25,7 @@ * Imports. */ import { i18n } from "@gnu-taler/taler-util"; -import { ComponentChildren, JSX } from "preact"; +import { ComponentChildren, JSX, h } from "preact"; import Match from "preact-router/match"; import { useDevContext } from "./context/devContext"; import { PopupNavigation } from './components/styled' diff --git a/packages/taler-wallet-webextension/src/components/Checkbox.tsx b/packages/taler-wallet-webextension/src/components/Checkbox.tsx index 6b3dc024e..2d7b98087 100644 --- a/packages/taler-wallet-webextension/src/components/Checkbox.tsx +++ b/packages/taler-wallet-webextension/src/components/Checkbox.tsx @@ -15,6 +15,7 @@ */ import { JSX } from "preact/jsx-runtime"; +import { h } from "preact"; interface Props { enabled: boolean; diff --git a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx index 7534629fb..f0c682ccb 100644 --- a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx +++ b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx @@ -14,7 +14,7 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ - import { JSX } from "preact"; + import { JSX, h } from "preact"; export function DebugCheckbox({ enabled, onToggle }: { enabled: boolean; onToggle: () => void; }): JSX.Element { return ( diff --git a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx index b36525dbf..c98710149 100644 --- a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx +++ b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx @@ -1,8 +1,7 @@ -import { useState, useEffect } from "preact/hooks"; -import { getDiagnostics } from "../wxApi"; -import { PageLink } from "../renderHtml"; import { WalletDiagnostics } from "@gnu-taler/taler-util"; +import { h } from "preact"; import { JSX } from "preact/jsx-runtime"; +import { PageLink } from "../renderHtml"; interface Props { timedOut: boolean; diff --git a/packages/taler-wallet-webextension/src/components/EditableText.tsx b/packages/taler-wallet-webextension/src/components/EditableText.tsx index 82983d13a..6f3388bf9 100644 --- a/packages/taler-wallet-webextension/src/components/EditableText.tsx +++ b/packages/taler-wallet-webextension/src/components/EditableText.tsx @@ -14,7 +14,7 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { VNode } from "preact"; +import { h } from "preact"; import { useRef, useState } from "preact/hooks"; import { JSX } from "preact/jsx-runtime"; @@ -27,7 +27,7 @@ interface Props { } export function EditableText({ name, value, onChange, label, description }: Props): JSX.Element { const [editing, setEditing] = useState(false) - const ref = useRef<HTMLInputElement>() + const ref = useRef<HTMLInputElement>(null) let InputText; if (!editing) { InputText = () => <div style={{ display: 'flex', justifyContent: 'space-between' }}> @@ -42,7 +42,7 @@ export function EditableText({ name, value, onChange, label, description }: Prop type="text" id={`text-${name}`} /> - <button onClick={() => { onChange(ref.current.value).then(r => setEditing(false)) }}>confirm</button> + <button onClick={() => { if (ref.current) onChange(ref.current.value).then(r => setEditing(false)) }}>confirm</button> </div> } return ( diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx index 6bbdd26dc..4aef66d36 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx @@ -1,4 +1,4 @@ -import { VNode } from "preact"; +import { VNode, h } from "preact"; import { useState } from "preact/hooks"; import arrowDown from '../../static/img/chevron-down.svg'; import { ErrorBox } from "./styled"; diff --git a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx index 0217289eb..b45dcb353 100644 --- a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx +++ b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx @@ -1,3 +1,5 @@ +import { h } from "preact"; + export function LogoHeader() { return <div style={{ display: 'flex', diff --git a/packages/taler-wallet-webextension/src/components/SelectList.tsx b/packages/taler-wallet-webextension/src/components/SelectList.tsx index 74b221777..f92bcfb2e 100644 --- a/packages/taler-wallet-webextension/src/components/SelectList.tsx +++ b/packages/taler-wallet-webextension/src/components/SelectList.tsx @@ -16,6 +16,7 @@ import { JSX } from "preact/jsx-runtime"; import { NiceSelect } from "./styled/index"; +import { h } from "preact"; interface Props { value: string; diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx index a5849bb28..24c76ce6c 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx @@ -39,7 +39,7 @@ import { ContractTerms, ConfirmPayResultType, } from "@gnu-taler/taler-util"; -import { JSX, VNode } from "preact"; +import { JSX, VNode, h } from "preact"; interface Props { talerPayUri?: string diff --git a/packages/taler-wallet-webextension/src/cta/Refund.tsx b/packages/taler-wallet-webextension/src/cta/Refund.tsx index bb26d933b..943095360 100644 --- a/packages/taler-wallet-webextension/src/cta/Refund.tsx +++ b/packages/taler-wallet-webextension/src/cta/Refund.tsx @@ -28,6 +28,7 @@ import { } from "@gnu-taler/taler-util"; import { useEffect, useState } from "preact/hooks"; import { JSX } from "preact/jsx-runtime"; +import { h } from 'preact'; interface Props { talerRefundUri?: string diff --git a/packages/taler-wallet-webextension/src/cta/Tip.tsx b/packages/taler-wallet-webextension/src/cta/Tip.tsx index 69886668b..dc1feaed3 100644 --- a/packages/taler-wallet-webextension/src/cta/Tip.tsx +++ b/packages/taler-wallet-webextension/src/cta/Tip.tsx @@ -25,6 +25,7 @@ import { PrepareTipResult } from "@gnu-taler/taler-util"; import { AmountView } from "../renderHtml"; import * as wxApi from "../wxApi"; import { JSX } from "preact/jsx-runtime"; +import { h } from 'preact'; interface Props { talerTipUri?: string diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx index b5182b070..d5f3c89ae 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx @@ -30,6 +30,7 @@ import { onUpdateNotification, getWithdrawalDetailsForUri, } from "../wxApi"; +import { h } from 'preact'; import { WithdrawUriInfoResponse } from "@gnu-taler/taler-util"; import { JSX } from "preact/jsx-runtime"; import { WalletAction } from '../components/styled'; @@ -131,7 +132,7 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: Props): JSX.Element setSelectedExchange(res.defaultExchangeBaseUrl); } } catch (e) { - console.error('error',JSON.stringify(e,undefined,2)) + console.error('error', JSON.stringify(e, undefined, 2)) setError(true) } }; diff --git a/packages/taler-wallet-webextension/src/cta/payback.tsx b/packages/taler-wallet-webextension/src/cta/payback.tsx index 4233b1f96..1e27fd912 100644 --- a/packages/taler-wallet-webextension/src/cta/payback.tsx +++ b/packages/taler-wallet-webextension/src/cta/payback.tsx @@ -15,6 +15,7 @@ */ import { JSX } from "preact/jsx-runtime"; +import { h } from 'preact'; /** * View and edit auditors. diff --git a/packages/taler-wallet-webextension/src/cta/reset-required.tsx b/packages/taler-wallet-webextension/src/cta/reset-required.tsx index 87751561c..e66c0db57 100644 --- a/packages/taler-wallet-webextension/src/cta/reset-required.tsx +++ b/packages/taler-wallet-webextension/src/cta/reset-required.tsx @@ -20,7 +20,7 @@ * @author Florian Dold */ -import { Component, JSX } from "preact"; +import { Component, JSX, h } from "preact"; import * as wxApi from "../wxApi"; interface State { diff --git a/packages/taler-wallet-webextension/src/cta/return-coins.tsx b/packages/taler-wallet-webextension/src/cta/return-coins.tsx index 2273d1454..43d73b5fe 100644 --- a/packages/taler-wallet-webextension/src/cta/return-coins.tsx +++ b/packages/taler-wallet-webextension/src/cta/return-coins.tsx @@ -15,7 +15,7 @@ */ import { JSX } from "preact/jsx-runtime"; - +import { h } from 'preact'; /** * Return coins to own bank account. * diff --git a/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx b/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx index 1c1c47663..d256f6d98 100644 --- a/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx @@ -21,8 +21,8 @@ import { ProviderPaymentType } from '@gnu-taler/taler-wallet-core'; import { addDays } from 'date-fns'; -import { FunctionalComponent } from 'preact'; import { BackupView as TestedComponent } from './BackupPage'; +import { createExample } from '../test-utils'; export default { title: 'popup/backup/list', @@ -35,12 +35,6 @@ export default { }; -function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { - const r = (args: any) => <Component {...args} /> - r.args = props - return r -} - export const LotOfProviders = createExample(TestedComponent, { providers: [{ "active": true, diff --git a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx index 72139e1f8..695f3abaa 100644 --- a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx @@ -18,7 +18,7 @@ import { i18n, Timestamp } from "@gnu-taler/taler-util"; import { ProviderInfo, ProviderPaymentStatus } from "@gnu-taler/taler-wallet-core"; import { differenceInMonths, formatDuration, intervalToDuration } from "date-fns"; -import { Fragment, JSX, VNode } from "preact"; +import { Fragment, JSX, VNode, h } from "preact"; import { BoldLight, ButtonPrimary, ButtonSuccess, Centered, CenteredText, CenteredTextBold, PopupBox, RowBorderGray, diff --git a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx index a1b5e7c52..4a2e1045b 100644 --- a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { ComponentChildren, FunctionalComponent, h } from 'preact'; +import { createExample, NullLink } from '../test-utils'; import { BalanceView as TestedComponent } from './BalancePage'; export default { @@ -30,16 +30,9 @@ export default { }; -function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { - const r = (args: any) => <Component {...args} /> - r.args = props - return r -} - export const NotYetLoaded = createExample(TestedComponent, { }); -const NullLink = ({ children }: { children?: ComponentChildren }) => h('a', { children, href: 'javascript:void(0);' }) export const GotError = createExample(TestedComponent, { balance: { error: true diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx index 5a2b9f747..350d4b861 100644 --- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx @@ -19,7 +19,7 @@ import { Balance, BalancesResponse, i18n } from "@gnu-taler/taler-util"; -import { JSX } from "preact"; +import { JSX, h } from "preact"; import { PopupBox, Centered } from "../components/styled/index"; import { BalancesHook, useBalances } from "../hooks/useBalances"; import { PageLink, renderAmount } from "../renderHtml"; diff --git a/packages/taler-wallet-webextension/src/popup/Debug.tsx b/packages/taler-wallet-webextension/src/popup/Debug.tsx index 33b82b05b..3968b0191 100644 --- a/packages/taler-wallet-webextension/src/popup/Debug.tsx +++ b/packages/taler-wallet-webextension/src/popup/Debug.tsx @@ -14,7 +14,7 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { JSX } from "preact"; +import { JSX, h } from "preact"; import { Diagnostics } from "../components/Diagnostics"; import { useDiagnostics } from "../hooks/useDiagnostics.js"; import * as wxApi from "../wxApi"; diff --git a/packages/taler-wallet-webextension/src/popup/History.stories.tsx b/packages/taler-wallet-webextension/src/popup/History.stories.tsx index 5337a6c1c..c92033d49 100644 --- a/packages/taler-wallet-webextension/src/popup/History.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/History.stories.tsx @@ -26,7 +26,7 @@ import { TransactionWithdrawal, WithdrawalType } from '@gnu-taler/taler-util'; -import { FunctionalComponent } from 'preact'; +import { createExample } from '../test-utils'; import { HistoryView as TestedComponent } from './History'; export default { @@ -105,12 +105,6 @@ const exampleData = { } as TransactionRefund, } -function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { - const r = (args: any) => <Component {...args} /> - r.args = props - return r -} - export const Empty = createExample(TestedComponent, { list: [], balances: [{ diff --git a/packages/taler-wallet-webextension/src/popup/History.tsx b/packages/taler-wallet-webextension/src/popup/History.tsx index 7c9eae54b..fd97d975f 100644 --- a/packages/taler-wallet-webextension/src/popup/History.tsx +++ b/packages/taler-wallet-webextension/src/popup/History.tsx @@ -16,7 +16,7 @@ import { AmountString, Balance, Timestamp, Transaction, TransactionsResponse, TransactionType } from "@gnu-taler/taler-util"; import { formatDistance } from "date-fns"; -import { JSX } from "preact"; +import { JSX, h } from "preact"; import { useEffect, useState } from "preact/hooks"; import imageBank from '../../static/img/ri-bank-line.svg'; import imageHandHeart from '../../static/img/ri-hand-heart-line.svg'; diff --git a/packages/taler-wallet-webextension/src/popup/Popup.stories.tsx b/packages/taler-wallet-webextension/src/popup/Popup.stories.tsx index ce5b11c32..cd443e9d4 100644 --- a/packages/taler-wallet-webextension/src/popup/Popup.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/Popup.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { Fragment, FunctionalComponent } from 'preact'; +import { createExample } from '../test-utils'; import { NavBar as TestedComponent } from '../NavigationBar'; export default { @@ -33,12 +33,6 @@ export default { }; -function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { - const r = (args: any) => <Component {...args} /> - r.args = props - return r -} - export const OnBalance = createExample(TestedComponent, { devMode:false, path:'/balance' diff --git a/packages/taler-wallet-webextension/src/popup/ProviderAddConfirmProvider.stories.tsx b/packages/taler-wallet-webextension/src/popup/ProviderAddConfirmProvider.stories.tsx index f286870c1..de1f67b96 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderAddConfirmProvider.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderAddConfirmProvider.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { FunctionalComponent } from 'preact'; +import { createExample } from '../test-utils'; import { ConfirmProviderView as TestedComponent } from './ProviderAddPage'; export default { @@ -33,12 +33,6 @@ export default { }; -function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { - const r = (args: any) => <Component {...args} /> - r.args = props - return r -} - export const DemoService = createExample(TestedComponent, { url: 'https://sync.demo.taler.net/', provider: { diff --git a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx index 2680345f7..050614978 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx @@ -1,6 +1,6 @@ import { Amounts, BackupBackupProviderTerms, canonicalizeBaseUrl, i18n } from "@gnu-taler/taler-util"; import { verify } from "@gnu-taler/taler-wallet-core/src/crypto/primitives/nacl-fast"; -import { VNode } from "preact"; +import { VNode, h } from "preact"; import { useEffect, useState } from "preact/hooks"; import { Checkbox } from "../components/Checkbox"; import { ErrorMessage } from "../components/ErrorMessage"; diff --git a/packages/taler-wallet-webextension/src/popup/ProviderAddSetUrl.stories.tsx b/packages/taler-wallet-webextension/src/popup/ProviderAddSetUrl.stories.tsx index dfee115bb..2daf49e0c 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderAddSetUrl.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderAddSetUrl.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { FunctionalComponent } from 'preact'; +import { createExample } from '../test-utils'; import { SetUrlView as TestedComponent } from './ProviderAddPage'; export default { @@ -33,12 +33,6 @@ export default { }; -function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { - const r = (args: any) => <Component {...args} /> - r.args = props - return r -} - export const Initial = createExample(TestedComponent, { }); diff --git a/packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx b/packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx index d82e8f588..4416608f8 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx @@ -20,7 +20,7 @@ */ import { ProviderPaymentType } from '@gnu-taler/taler-wallet-core'; -import { FunctionalComponent } from 'preact'; +import { createExample } from '../test-utils'; import { ProviderView as TestedComponent } from './ProviderDetailPage'; export default { @@ -34,12 +34,6 @@ export default { }; -function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { - const r = (args: any) => <Component {...args} /> - r.args = props - return r -} - export const Active = createExample(TestedComponent, { info: { "active": true, diff --git a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx index 707e6c33a..bfc32a8f3 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx @@ -18,7 +18,7 @@ import { i18n, Timestamp } from "@gnu-taler/taler-util"; import { ProviderInfo, ProviderPaymentStatus, ProviderPaymentType } from "@gnu-taler/taler-wallet-core"; import { format, formatDuration, intervalToDuration } from "date-fns"; -import { Fragment, VNode } from "preact"; +import { Fragment, VNode, h } from "preact"; import { ErrorMessage } from "../components/ErrorMessage"; import { Button, ButtonDestructive, ButtonPrimary, PaymentStatus, PopupBox, SmallTextLight } from "../components/styled"; import { useProviderStatus } from "../hooks/useProviderStatus"; diff --git a/packages/taler-wallet-webextension/src/popup/Settings.stories.tsx b/packages/taler-wallet-webextension/src/popup/Settings.stories.tsx index 07e1538b7..06e33c9d3 100644 --- a/packages/taler-wallet-webextension/src/popup/Settings.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/Settings.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { FunctionalComponent } from 'preact'; +import { createExample } from '../test-utils'; import { SettingsView as TestedComponent } from './Settings'; export default { @@ -30,13 +30,6 @@ export default { } }; - -function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { - const r = (args: any) => <Component {...args} /> - r.args = props - return r -} - export const AllOff = createExample(TestedComponent, { deviceName: 'this-is-the-device-name', setDeviceName: () => Promise.resolve(), diff --git a/packages/taler-wallet-webextension/src/popup/Settings.tsx b/packages/taler-wallet-webextension/src/popup/Settings.tsx index 40ab51561..52e72ee2f 100644 --- a/packages/taler-wallet-webextension/src/popup/Settings.tsx +++ b/packages/taler-wallet-webextension/src/popup/Settings.tsx @@ -16,7 +16,7 @@ import { i18n } from "@gnu-taler/taler-util"; -import { VNode } from "preact"; +import { VNode, h } from "preact"; import { Checkbox } from "../components/Checkbox"; import { EditableText } from "../components/EditableText"; import { SelectList } from "../components/SelectList"; diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx index 4e63b9242..65302babb 100644 --- a/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx @@ -26,7 +26,7 @@ import { TransactionWithdrawal, WithdrawalType } from '@gnu-taler/taler-util'; -import { FunctionalComponent } from 'preact'; +import { createExample } from '../test-utils'; import { TransactionView as TestedComponent } from './Transaction'; export default { @@ -117,12 +117,6 @@ const transactionError = { message: 'message' } -function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { - const r = (args: any) => <Component {...args} /> - r.args = props - return r -} - export const Withdraw = createExample(TestedComponent, { transaction: exampleData.withdraw }); diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.tsx index 8177b74ad..117a098bc 100644 --- a/packages/taler-wallet-webextension/src/popup/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/popup/Transaction.tsx @@ -16,7 +16,7 @@ import { AmountJson, Amounts, i18n, Transaction, TransactionType } from "@gnu-taler/taler-util"; import { format } from "date-fns"; -import { Fragment, JSX, VNode } from "preact"; +import { Fragment, JSX, VNode, h } from "preact"; import { route } from 'preact-router'; import { useEffect, useState } from "preact/hooks"; import * as wxApi from "../wxApi"; diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx index 4a9fe9abc..77c19c150 100644 --- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx @@ -22,9 +22,9 @@ import { setupI18n } from "@gnu-taler/taler-util"; import { createHashHistory } from "history"; -import { render } from "preact"; +import { render, h } from "preact"; import Router, { route, Route } from "preact-router"; -import { useEffect } from "preact/hooks"; +import { useEffect, useState } from "preact/hooks"; import { DevContextProvider } from "./context/devContext"; import { useTalerActionURL } from "./hooks/useTalerActionURL"; import { strings } from "./i18n/strings"; diff --git a/packages/taler-wallet-webextension/src/renderHtml.tsx b/packages/taler-wallet-webextension/src/renderHtml.tsx index 1101b80d6..bbe8e465c 100644 --- a/packages/taler-wallet-webextension/src/renderHtml.tsx +++ b/packages/taler-wallet-webextension/src/renderHtml.tsx @@ -28,8 +28,7 @@ import { Amounts, amountFractionalBase, } from "@gnu-taler/taler-util"; -import { Component, ComponentChildren, JSX } from "preact"; -import { JSXInternal } from "preact/src/jsx"; +import { Component, ComponentChildren, JSX, h } from "preact"; /** * Render amount as HTML, which non-breaking space between diff --git a/packages/taler-wallet-webextension/src/test-utils.ts b/packages/taler-wallet-webextension/src/test-utils.ts index 16262b3c2..7ef47b314 100644 --- a/packages/taler-wallet-webextension/src/test-utils.ts +++ b/packages/taler-wallet-webextension/src/test-utils.ts @@ -1,4 +1,4 @@ -import { FunctionalComponent, h as render } from 'preact'; +import { ComponentChildren, FunctionalComponent, h as render } from 'preact'; export function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { const r = (args: any) => render(Component, args) @@ -6,3 +6,7 @@ export function createExample<Props>(Component: FunctionalComponent<Props>, prop return r } + +export function NullLink({ children }: { children?: ComponentChildren }) { + return render('a', { children, href: 'javascript:void(0);' }) +} diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx index f50fd3b68..7db13fef5 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx @@ -26,8 +26,9 @@ import { TransactionWithdrawal, WithdrawalType } from '@gnu-taler/taler-util'; -import { FunctionalComponent } from 'preact'; import { HistoryView as TestedComponent } from './History'; +import { createExample } from '../test-utils'; + export default { title: 'wallet/history/list', @@ -106,12 +107,6 @@ const exampleData = { } as TransactionRefund, } -function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { - const r = (args: any) => <Component {...args} /> - r.args = props - return r -} - export const Empty = createExample(TestedComponent, { list: [], balances: [{ diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index 6ef5047ae..7f9a9b1a8 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -16,7 +16,7 @@ import { AmountString, Balance, Timestamp, Transaction, TransactionsResponse, TransactionType } from "@gnu-taler/taler-util"; import { format } from "date-fns"; -import { Fragment, JSX } from "preact"; +import { Fragment, JSX, h } from "preact"; import { useEffect, useState } from "preact/hooks"; import imageBank from '../../static/img/ri-bank-line.svg'; import imageHandHeart from '../../static/img/ri-hand-heart-line.svg'; diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx index 0738e14b6..d11070d9a 100644 --- a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx @@ -27,6 +27,7 @@ import { Diagnostics } from "../components/Diagnostics"; import { WalletBox } from "../components/styled"; import { useDiagnostics } from "../hooks/useDiagnostics"; import { WalletDiagnostics } from "@gnu-taler/taler-util"; +import { h } from 'preact'; export function WelcomePage() { const [permissionsEnabled, togglePermissions] = useExtendedPermissions() diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx index f8191a0fb..61df45e7e 100644 --- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx @@ -20,7 +20,7 @@ * @author Florian Dold <dold@taler.net> */ -import { Fragment, render } from "preact"; +import { Fragment, render, h } from "preact"; import { setupI18n } from "@gnu-taler/taler-util"; import { strings } from "./i18n/strings"; import { createHashHistory } from 'history'; diff --git a/packages/taler-wallet-webextension/static/popup.html b/packages/taler-wallet-webextension/static/popup.html index 06e447924..9c1246456 100644 --- a/packages/taler-wallet-webextension/static/popup.html +++ b/packages/taler-wallet-webextension/static/popup.html @@ -4,7 +4,7 @@ <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="/static/style/pure.css" /> <link rel="stylesheet" type="text/css" href="/static/style/popup.css" /> - <link rel="stylesheet" type="text/css" href="/dist/styles.css" /> + <link rel="stylesheet" type="text/css" href="/dist/popupEntryPoint.css" /> <link rel="icon" href="/static/img/icon.png" /> <script src="/dist/popupEntryPoint.js"></script> </head> diff --git a/packages/taler-wallet-webextension/static/wallet.html b/packages/taler-wallet-webextension/static/wallet.html index 817e8bfb8..a1c069d74 100644 --- a/packages/taler-wallet-webextension/static/wallet.html +++ b/packages/taler-wallet-webextension/static/wallet.html @@ -4,7 +4,7 @@ <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="/static/style/pure.css" /> <link rel="stylesheet" type="text/css" href="/static/style/wallet.css" /> - <link rel="stylesheet" type="text/css" href="/dist/styles.css" /> + <link rel="stylesheet" type="text/css" href="/dist/popupEntryPoint.css" /> <link rel="icon" href="/static/img/icon.png" /> <script src="/dist/walletEntryPoint.js"></script> </head> diff --git a/packages/taler-wallet-webextension/tsconfig.json b/packages/taler-wallet-webextension/tsconfig.json index cff3d8857..75e2ce016 100644 --- a/packages/taler-wallet-webextension/tsconfig.json +++ b/packages/taler-wallet-webextension/tsconfig.json @@ -2,8 +2,9 @@ "compilerOptions": { "composite": true, "lib": ["es6", "DOM"], - "jsx": "react-jsx", - "jsxImportSource": "preact", + "jsx": "react", + "jsxFactory": "h", + "jsxFragmentFactory": "Fragment", "moduleResolution": "Node", "module": "ESNext", "target": "ES6", |