updated build fast for web

contrib/build-fast-node.sh

@@ -3,59 +3,56 @@
 set -eu
 set -x
 
-export NODE_PATH=vendor:build
+export DIST=build/node
+export NODE_PATH=$DIST:vendor
 
 function build_idb() {
-  rm -rf packages/idb-bridge/node_modules
+  rm -rf packages/idb-bridge/{node_modules,lib,dist,tsconfig.tsbuildinfo}
-  idb_dir=build/@gnu-taler/idb-bridge
+  idb_dir=$DIST/@gnu-taler/idb-bridge
   mkdir -p $idb_dir
   esbuild --platform=node --bundle packages/idb-bridge/src/index.ts > $idb_dir/index.js
 }
 
 function build_taler_util() {
-  taler_util_dir=build/@gnu-taler/taler-util
+  rm -rf packages/taler-util/{node_modules,lib,dist,tsconfig.tsbuildinfo}
+  taler_util_dir=$DIST/@gnu-taler/taler-util
   mkdir -p $taler_util_dir
   esbuild --platform=node --bundle packages/taler-util/src/index.ts > $taler_util_dir/index.js
 }
 
 function build_fflate() {
-  fflate_dir=build/fflate
+  fflate_dir=$DIST/fflate
   mkdir -p $fflate_dir
   esbuild --platform=node --bundle vendor/fflate/src/index.ts > $fflate_dir/index.js
 }
 
 function build_ct() {
-  ct_dir=build/cancellationtoken
+  ct_dir=$DIST/cancellationtoken
   mkdir -p $ct_dir
   esbuild --target=es6 --platform=node --bundle vendor/cancellationtoken/src/index.ts > $ct_dir/index.js
 }
 
 function build_wallet_core() {
-  taler_wallet_core_dir=build/@gnu-taler/taler-wallet-core
+  rm -rf packages/taler-wallet-core/{node_modules,lib,dist,tsconfig.tsbuildinfo}
-
+  taler_wallet_core_dir=$DIST/@gnu-taler/taler-wallet-core
-  rm -rf packages/taler-wallet-core/node_modules
-  rm -rf packages/taler-wallet-core/lib
-  rm -rf packages/taler-wallet-core/dist
 
   mkdir -p $taler_wallet_core_dir
-  esbuild --platform=node --bundle packages/taler-wallet-core/src/index.node.ts > $taler_wallet_core_dir/index.js
+  esbuild --platform=node --bundle --external:@gnu-taler/taler-util packages/taler-wallet-core/src/index.node.ts > $taler_wallet_core_dir/index.js
 }
 
 function build_wallet_embedded() {
-  taler_wallet_embedded_dir=build/@gnu-taler/taler-wallet-embedded
+  rm -rf packages/taler-wallet-embedded/{node_modules,lib,dist,tsconfig.tsbuildinfo}
+  taler_wallet_embedded_dir=$DIST/@gnu-taler/taler-wallet-embedded
 
   mkdir -p $taler_wallet_embedded_dir
   esbuild --platform=node --bundle packages/taler-wallet-embedded/src/index.ts > $taler_wallet_embedded_dir/taler-wallet-embedded.js
 }
 
 function build_wallet_cli() {
-  taler_wallet_cli_dir=build/@gnu-taler/taler-wallet-cli
+  rm -rf packages/taler-wallet-cli/{node_modules,lib,dist,tsconfig.tsbuildinfo}
+  taler_wallet_cli_dir=$DIST/@gnu-taler/taler-wallet-cli
   mkdir -p $taler_wallet_cli_dir
 
-  rm -rf packages/taler-wallet-cli/node_modules
-  rm -rf packages/taler-wallet-cli/lib
-  rm -rf packages/taler-wallet-cli/dist
-
   esbuild --platform=node --bundle packages/taler-wallet-cli/src/index.ts > $taler_wallet_cli_dir/index.js
   cp $taler_wallet_cli_dir/index.js $taler_wallet_cli_dir/taler-wallet-cli.js
 }
@@ -67,4 +64,6 @@ build_fflate
 build_wallet_core
 build_wallet_embedded
 build_ct
+
 build_wallet_cli
+

contrib/build-fast-web.sh

@@ -0,0 +1,139 @@
+#!/usr/bin/env bash
+
+set -eu
+set -x
+
+export DIST=build/web
+export NODE_PATH=$DIST:vendor
+
+export BUNDLE_OPTIONS='--bundle --format=esm --target=esnext'
+
+function build_idb() {
+  rm -rf packages/idb-bridge/{node_modules,lib,dist,tsconfig.tsbuildinfo}
+  idb_dir=$DIST/@gnu-taler/idb-bridge
+  mkdir -p $idb_dir
+  esbuild $BUNDLE_OPTIONS packages/idb-bridge/src/index.ts > $idb_dir/index.js
+}
+
+function build_taler_util() {
+  taler_util_dir=$DIST/@gnu-taler/taler-util
+  mkdir -p $taler_util_dir
+  rm -rf packages/taler-util/{node_modules,lib,dist,tsconfig.tsbuildinfo}
+
+  esbuild $BUNDLE_OPTIONS packages/taler-util/src/index.ts > $taler_util_dir/index.js
+}
+
+function build_fflate() {
+  fflate_dir=$DIST/fflate
+  mkdir -p $fflate_dir
+  esbuild $BUNDLE_OPTIONS vendor/fflate/src/index.ts > $fflate_dir/index.js
+}
+
+function build_ct() {
+  ct_dir=$DIST/cancellationtoken
+  mkdir -p $ct_dir
+  esbuild $BUNDLE_OPTIONS vendor/cancellationtoken/src/index.ts > $ct_dir/index.js
+}
+
+function build_wallet_core() {
+  taler_wallet_core_dir=$DIST/@gnu-taler/taler-wallet-core
+
+  rm -rf packages/taler-wallet-core/{node_modules,lib,dist,tsconfig.tsbuildinfo}
+
+  mkdir -p $taler_wallet_core_dir
+  esbuild $BUNDLE_OPTIONS --external:@gnu-taler/taler-util packages/taler-wallet-core/src/index.browser.ts > $taler_wallet_core_dir/index.js
+}
+
+function build_wallet_embedded() {
+  taler_wallet_embedded_dir=$DIST/@gnu-taler/taler-wallet-embedded
+  rm -rf packages/taler-wallet-embedded/{node_modules,lib,dist,tsconfig.tsbuildinfo}
+
+  mkdir -p $taler_wallet_embedded_dir
+  esbuild $BUNDLE_OPTIONS packages/taler-wallet-embedded/src/index.ts > $taler_wallet_embedded_dir/taler-wallet-embedded.js
+}
+
+function build_vendor() {
+  mkdir -p $DIST/$1
+
+  esbuild $BUNDLE_OPTIONS vendor/$1/src/index.js > $DIST/$1/index.js
+}
+
+function build_preact() {
+  mkdir -p $DIST/preact/{debug,hooks}
+
+  esbuild $BUNDLE_OPTIONS vendor/preact/src/index.js > $DIST/preact/index.js
+  esbuild $BUNDLE_OPTIONS --external:preact vendor/preact/hooks/src/index.js > $DIST/preact/hooks/index.js
+  esbuild $BUNDLE_OPTIONS --external:preact vendor/preact/debug/src/index.js > $DIST/preact/debug/index.js
+}
+
+function build_preact-router() {
+  mkdir -p $DIST/preact-router/match
+
+  esbuild $BUNDLE_OPTIONS --external:preact vendor/preact-router/src/index.js > $DIST/preact-router/index.js
+  esbuild $BUNDLE_OPTIONS --loader:.js=jsx --external:preact --external:preact-router vendor/preact-router/src/match.js > $DIST/preact-router/match/index.js
+}
+
+function build_preact_compat() {
+  mkdir -p $DIST/{react/jsx-runtime,react-dom/test-utils}
+
+  esbuild $BUNDLE_OPTIONS --loader:.js=jsx vendor/preact/compat/src/index.js > $DIST/react/index.js
+
+  esbuild $BUNDLE_OPTIONS --loader:.js=jsx --external:preact vendor/preact/compat/src/index.js > $DIST/react/index.js
+  esbuild $BUNDLE_OPTIONS --loader:.js=jsx --external:preact vendor/preact/compat/src/index.js > $DIST/react-dom/index.js
+  esbuild $BUNDLE_OPTIONS --loader:.js=jsx vendor/preact/jsx-runtime/src/index.js > $DIST/react/jsx-runtime/index.js
+  esbuild $BUNDLE_OPTIONS --loader:.js=jsx vendor/preact/test-utils/src/index.js > $DIST/react-dom/test-utils/index.js
+}
+
+function build_history() {
+  mkdir -p $DIST/{history,resolve-pathname,value-equal,tiny-warning,tiny-invariant}
+
+  esbuild $BUNDLE_OPTIONS --loader:.js=ts vendor/tiny-warning/src/index.js > $DIST/tiny-warning/index.js
+  esbuild $BUNDLE_OPTIONS --loader:.js=ts vendor/tiny-invariant/src/index.js > $DIST/tiny-invariant/index.js
+
+  esbuild $BUNDLE_OPTIONS vendor/resolve-pathname/modules/index.js > $DIST/resolve-pathname/index.js
+  esbuild $BUNDLE_OPTIONS vendor/value-equal/modules/index.js > $DIST/value-equal/index.js
+
+  esbuild $BUNDLE_OPTIONS vendor/history/modules/index.js > $DIST/history/index.js
+}
+
+function build_linaria() {
+  mkdir -p $DIST/@linaria/{react,core}
+  mkdir -p $DIST/@emotion/is-prop-valid
+
+  esbuild $BUNDLE_OPTIONS vendor/@emotion/is-prop-valid/index.js > $DIST/@emotion/is-prop-valid/index.js
+
+  esbuild $BUNDLE_OPTIONS vendor/@linaria/packages/core/src/index.ts > $DIST/@linaria/core/index.js
+  esbuild $BUNDLE_OPTIONS --external:preact vendor/@linaria/packages/react/src/index.ts > $DIST/@linaria/react/index.js
+}
+
+function build_wallet_webextension() {
+  rm -rf packages/taler-wallet-webextension/{node_modules,lib,dist,tsconfig.tsbuildinfo,extension}
+
+  taler_wallet_webextension_dir=packages/taler-wallet-webextension/dist
+  mkdir -p $taler_wallet_webextension_dir
+
+  esbuild $BUNDLE_OPTIONS packages/taler-wallet-webextension/src/background.ts > $taler_wallet_webextension_dir/background.js
+  esbuild $BUNDLE_OPTIONS packages/taler-wallet-webextension/src/browserWorkerEntry.ts > $taler_wallet_webextension_dir/browserWorkerEntry.js
+
+  # implemented as a script because right now esbuild binary does not support plugins
+  # FIXME: remove javascript when possible
+  node ./contrib/build-fast-with-linaria.mjs packages/taler-wallet-webextension/src/popupEntryPoint.tsx $taler_wallet_webextension_dir
+  node ./contrib/build-fast-with-linaria.mjs packages/taler-wallet-webextension/src/walletEntryPoint.tsx $taler_wallet_webextension_dir
+}
+
+
+build_idb
+build_taler_util
+build_fflate
+build_wallet_core
+
+build_vendor date-fns
+
+build_preact
+build_preact-router
+build_preact_compat
+
+build_history
+build_linaria
+
+build_wallet_webextension

contrib/build-fast-with-linaria.mjs

@@ -0,0 +1,42 @@
+
+import linaria from '@linaria/esbuild'
+import esbuild from 'esbuild'
+
+if (process.argv.length !== 4) {
+  console.log(`
+Usage:
+  ${process.argv[1]} <entryPoint> <outDir>
+
+entryPoint: file to be converted
+outputDir: destination directory
+`)
+  process.exit(1)
+}
+
+esbuild
+  .build({
+    entryPoints: [process.argv[2]],
+    bundle: true,
+    outdir: process.argv[3],
+    minify: false,
+    nodePaths: ['build/web', 'vendor'],
+    loader: {
+      '.svg': 'dataurl',
+      '.png': 'dataurl',
+    },
+    target: [
+      'esnext'
+    ],
+    format: 'esm',
+    jsxFactory: 'h',
+    jsxFragment: 'Fragment',
+    define: {
+      'process.env.NODE_ENV' : '"development"',
+    },
+    plugins: [
+      linaria.default({
+        sourceMap: true,
+      }),
+    ],
+  })
+  .catch (() => process.exit(1));

package.json

@@ -6,5 +6,10 @@
     "clean": "pnpm run --filter '{packages}' clean",
     "pretty": "pnpm run --filter '{packages}' pretty",
     "check": "pnpm run --filter '{packages}' --if-present test"
+  },
+  "devDependencies": {
+    "@linaria/esbuild": "^3.0.0-beta.7",
+    "@linaria/shaker": "^3.0.0-beta.7",
+    "esbuild": "^0.12.21"
   }
 }

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="1" rel="stylesheet" type="text/css" href="/static/style/pure.css" />
-        <link key="2" rel="stylesheet" type="text/css" href="/style/wallet.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="1" rel="stylesheet" type="text/css" href="/static/style/pure.css" />
-        <link key="2" rel="stylesheet" type="text/css" href="/style/wallet.css" /> */}
+        <link key="2" rel="stylesheet" type="text/css" href="/static/style/wallet.css" />
         <Story />
       </div>
     }

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

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

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 = {

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'

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;

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 (

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;

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 (

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

packages/taler-wallet-webextension/src/components/LogoHeader.tsx

@@ -1,3 +1,5 @@
+import { h } from "preact";
+
 export function LogoHeader() {
   return <div style={{
     display: 'flex',

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;

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

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

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

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

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.

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 {

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.
  *

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,

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,

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

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

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

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: [{

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';

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'

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: {

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

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

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,

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

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(),

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

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

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

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

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 { Component, ComponentChildren, JSX, h } from "preact";
-import { JSXInternal } from "preact/src/jsx";
 
 /**
  * Render amount as HTML, which non-breaking space between

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

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: [{

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';

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()

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';

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>

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>

packages/taler-wallet-webextension/tsconfig.json

@@ -2,8 +2,9 @@
   "compilerOptions": {
     "composite": true,
     "lib": ["es6", "DOM"],
-    "jsx": "react-jsx",
+    "jsx": "react",
-    "jsxImportSource": "preact",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
     "moduleResolution": "Node",
     "module": "ESNext",
     "target": "ES6",

vendor

@@ -1 +1 @@
-Subproject commit f26125e039143b92dc0d84e7775f508ab0cdcaa8
+Subproject commit 38acabfa6089ab8ac469c12b5f55022fb96935e5