chore: update module resolution to bundler (#1387)

* chore: update module resolution to bundler

* fix: linter issues

* fix jest

* fix: build

* use import type

* lint

eslint.config.js

@@ -4,5 +4,10 @@
 import baseConfig from '@polkadot/dev/config/eslint';
 
 export default [
-  ...baseConfig
+  ...baseConfig,
+  {
+    rules: {
+      'import/extensions': 'off'
+    }
+  }
 ];

packages/extension-base/package.json

@@ -39,6 +39,7 @@
     "tslib": "^2.6.2"
   },
   "devDependencies": {
+    "@polkadot/dev-test": "^0.79.3",
     "@polkadot/extension-mocks": "0.48.3-1-x"
   }
 }

packages/extension-base/src/background/handlers/Extension.spec.ts

@@ -1,12 +1,11 @@
 // Copyright 2019-2024 @polkadot/extension-base authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
-
 /* global chrome */
 
 import '@polkadot/extension-mocks/chrome';
 
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 import type { ResponseSigning } from '@polkadot/extension-base/background/types';
 import type { MetadataDef } from '@polkadot/extension-inject/types';
 import type { KeyringPair } from '@polkadot/keyring/types';

packages/extension-dapp/package.json

@@ -26,6 +26,9 @@
     "@polkadot/util-crypto": "^12.6.2",
     "tslib": "^2.6.2"
   },
+  "devDependencies": {
+    "@polkadot/dev-test": "^0.79.3"
+  },
   "peerDependencies": {
     "@polkadot/api": "*",
     "@polkadot/util": "*",

packages/extension-dapp/src/wrapBytes.spec.ts

@@ -1,7 +1,7 @@
 // Copyright 2019-2024 @polkadot/extension authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 
 import { u8aConcat, u8aEq, u8aToString } from '@polkadot/util';
 

packages/extension-inject/package.json

@@ -27,6 +27,7 @@
     "tslib": "^2.6.2"
   },
   "devDependencies": {
+    "@polkadot/dev-test": "^0.79.3",
     "@types/chrome": "^0.0.254",
     "@types/firefox-webext-browser": "^111.0.5"
   },

packages/extension-inject/src/cyrb53.spec.ts

@@ -1,7 +1,7 @@
 // Copyright 2019-2024 @polkadot/extension-inject authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 
 import { cyrb53 } from './cyrb53.js';
 

packages/extension-ui/package.json

@@ -52,6 +52,7 @@
     "tslib": "^2.6.2"
   },
   "devDependencies": {
+    "@polkadot/dev-test": "^0.79.3",
     "@polkadot/extension-mocks": "0.48.3-1-x",
     "@types/enzyme": "^3.10.18",
     "@types/enzyme-adapter-react-16": "^1.0.9",

packages/extension-ui/src/Popup/Accounts/Account.spec.tsx

@@ -1,11 +1,10 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
-
 import '@polkadot/extension-mocks/chrome';
 
 import type { ReactWrapper } from 'enzyme';
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import enzyme from 'enzyme';

packages/extension-ui/src/Popup/Authorize/Authorize.spec.tsx

@@ -1,11 +1,10 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
-
 import '@polkadot/extension-mocks/chrome';
 
 import type { ReactWrapper } from 'enzyme';
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 import type { AccountJson, AuthorizeRequest } from '@polkadot/extension-base/background/types';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

packages/extension-ui/src/Popup/CreateAccount/CreateAccount.spec.tsx

@@ -1,11 +1,10 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
-
 import '@polkadot/extension-mocks/chrome';
 
 import type { ReactWrapper } from 'enzyme';
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import enzyme from 'enzyme';

packages/extension-ui/src/Popup/Derive/Derive.spec.tsx

@@ -1,11 +1,10 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
-
 import '@polkadot/extension-mocks/chrome';
 
 import type { ReactWrapper } from 'enzyme';
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 import type { AccountJson, ResponseDeriveValidate } from '@polkadot/extension-base/background/types';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

packages/extension-ui/src/Popup/Export.spec.tsx

@@ -1,11 +1,10 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
-
 import '@polkadot/extension-mocks/chrome';
 
 import type { ReactWrapper } from 'enzyme';
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 import type { KeyringPair$Json } from '@polkadot/keyring/types';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

packages/extension-ui/src/Popup/ImportQr.spec.tsx

@@ -1,11 +1,10 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
-
 import '@polkadot/extension-mocks/chrome';
 
 import type { ReactWrapper } from 'enzyme';
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import enzyme from 'enzyme';

packages/extension-ui/src/Popup/ImportSeed/ImportSeed.spec.tsx

@@ -1,11 +1,10 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
-
 import '@polkadot/extension-mocks/chrome';
 
 import type { ReactWrapper } from 'enzyme';
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import enzyme from 'enzyme';

packages/extension-ui/src/Popup/Signing/Signing.spec.tsx

@@ -1,11 +1,10 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
-
 import '@polkadot/extension-mocks/chrome';
 
 import type { ReactWrapper } from 'enzyme';
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 import type { SigningRequest } from '@polkadot/extension-base/background/types';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

packages/extension-ui/src/components/AccountNamePasswordCreation.spec.tsx

@@ -1,11 +1,10 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
-
 import '@polkadot/extension-mocks/chrome';
 
 import type { ReactWrapper } from 'enzyme';
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import enzyme from 'enzyme';

packages/extension-ui/src/components/Address.spec.tsx

@@ -1,11 +1,10 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
-
 import '@polkadot/extension-mocks/chrome';
 
 import type { ReactWrapper } from 'enzyme';
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 import type { AccountJson } from '@polkadot/extension-base/background/types';
 import type { IconTheme } from '@polkadot/react-identicon/types';
 import type { HexString } from '@polkadot/util/types';

packages/extension-ui/src/components/ErrorBoundary.tsx

@@ -1,76 +1,62 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributor
 // SPDX-License-Identifier: Apache-2.0
 
-import type { WithTranslation } from 'react-i18next';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
-import React from 'react';
-import { withTranslation } from 'react-i18next';
+import Header from '../partials/Header';
+import Button from './Button';
+import ButtonArea from './ButtonArea';
+import VerticalSpace from './VerticalSpace';
 
-import Header from '../partials/Header.js';
-import Button from './Button.js';
-import ButtonArea from './ButtonArea.js';
-import VerticalSpace from './VerticalSpace.js';
-
-interface Props extends WithTranslation {
+interface ErrorBoundaryProps {
   children: React.ReactNode;
   className?: string;
   error?: Error | null;
   trigger?: string;
 }
 
-interface State {
-  error: Error | null;
-}
+const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ children, error: propError, trigger }) => {
+  const { t } = useTranslation();
+  const [error, setError] = useState<Error | null>(null);
 
-const translate = withTranslation();
-
-// NOTE: This is the only way to do an error boundary, via extend
-class ErrorBoundary extends React.Component<Props> {
-  public override state: State = { error: null };
-
-  public static getDerivedStateFromError (error: Error): Partial<State> {
-    return { error };
-  }
-
-  public override componentDidUpdate (prevProps: Props) {
-    const { error } = this.state;
-    const { trigger } = this.props;
-
-    if (error !== null && (prevProps.trigger !== trigger)) {
-      this.setState({ error: null });
+  useEffect(() => {
+    if (error !== null && trigger) {
+      setError(null);
     }
-  }
+  }, [error, trigger]);
 
-  #goHome = () => {
-    this.setState({ error: null });
+  useEffect(() => {
+    if (propError) {
+      setError(propError);
+    }
+  }, [propError]);
+
+  const goHome = useCallback(() => {
+    setError(null);
     window.location.hash = '/';
-  };
+  }, [setError]);
 
-  public override render (): React.ReactNode {
-    const { children, t } = this.props;
-    const { error } = this.state;
-
-    return error
-      ? (
-        <>
-          <Header text={t<string, Record<string, string>, string>('An error occurred')} />
-          <div>
-            {t('Something went wrong with the query and rendering of this component. {{message}}', {
-              replace: { message: error.message }
-            })}
-          </div>
-          <VerticalSpace />
-          <ButtonArea>
-            <Button
-              onClick={this.#goHome}
-            >
-              {t('Back to home')}
-            </Button>
-          </ButtonArea>
-        </>
-      )
-      : children;
+  if (error) {
+    return (
+      <>
+        <Header text={t('An error occurred')} />
+        <div>
+          {t('Something went wrong with the query and rendering of this component. {{message}}', {
+            replace: { message: error.message }
+          })}
+        </div>
+        <VerticalSpace />
+        <ButtonArea>
+          <Button onClick={goHome}>
+            {t('Back to home')}
+          </Button>
+        </ButtonArea>
+      </>
+    );
   }
-}
 
-export default translate(ErrorBoundary);
+  return <>{children}</>;
+};
+
+export default ErrorBoundary;

packages/extension-ui/src/messaging.spec.ts

@@ -1,12 +1,12 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
-
 /* global chrome */
 
 import '@polkadot/extension-mocks/chrome';
 
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
+
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import enzyme from 'enzyme';
 

packages/extension-ui/src/partials/Header.spec.tsx

@@ -1,11 +1,10 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
-
 import '@polkadot/extension-mocks/chrome';
 
 import type { ReactWrapper } from 'enzyme';
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import enzyme from 'enzyme';

packages/extension-ui/src/util/buildHierarchy.spec.ts

@@ -1,10 +1,9 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
-
 /* eslint-disable jest/expect-expect */
 
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 import type { AccountJson, AccountWithChildren } from '@polkadot/extension-base/background/types';
 
 import { buildHierarchy } from './buildHierarchy.js';

packages/extension-ui/src/util/nextDerivationPath.spec.ts

@@ -1,7 +1,7 @@
 // Copyright 2019-2024 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev-test/globals" />
+import type * as _ from '@polkadot/dev-test/globals.d.ts';
 
 import { nextDerivationPath } from './nextDerivationPath.js';
 

tsconfig.base.json

@@ -4,7 +4,7 @@
 		"composite": true,
     /* FIXME Dropzone is problematic with nodenext resolution */
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
 		"paths": {
       "@polkadot/extension": ["extension/src/index.ts"],
       "@polkadot/extension/*": ["extension/src/*.ts"],

yarn.lock

@@ -63,7 +63,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.2":
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.23.2":
   version: 7.23.2
   resolution: "@babel/runtime@npm:7.23.2"
   dependencies:
@@ -72,6 +72,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.22.5":
+  version: 7.24.7
+  resolution: "@babel/runtime@npm:7.24.7"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 10/7b77f566165dee62db3db0296e71d08cafda3f34e1b0dcefcd68427272e17c1704f4e4369bff76651b07b6e49d3ea5a0ce344818af9116e9292e4381e0918c76
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.8.3":
   version: 7.22.10
   resolution: "@babel/types@npm:7.22.10"
@@ -878,6 +887,7 @@ __metadata:
   resolution: "@polkadot/extension-base@workspace:packages/extension-base"
   dependencies:
     "@polkadot/api": "npm:^12.0.2"
+    "@polkadot/dev-test": "npm:^0.79.3"
     "@polkadot/extension-chains": "npm:0.48.3-1-x"
     "@polkadot/extension-dapp": "npm:0.48.3-1-x"
     "@polkadot/extension-inject": "npm:0.48.3-1-x"
@@ -932,6 +942,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@polkadot/extension-dapp@workspace:packages/extension-dapp"
   dependencies:
+    "@polkadot/dev-test": "npm:^0.79.3"
     "@polkadot/extension-inject": "npm:0.48.3-1-x"
     "@polkadot/util": "npm:^12.6.2"
     "@polkadot/util-crypto": "npm:^12.6.2"
@@ -948,6 +959,7 @@ __metadata:
   resolution: "@polkadot/extension-inject@workspace:packages/extension-inject"
   dependencies:
     "@polkadot/api": "npm:^12.0.2"
+    "@polkadot/dev-test": "npm:^0.79.3"
     "@polkadot/rpc-provider": "npm:^12.0.2"
     "@polkadot/types": "npm:^12.0.2"
     "@polkadot/util": "npm:^12.6.2"
@@ -982,6 +994,7 @@ __metadata:
     "@fortawesome/react-fontawesome": "npm:^0.2.0"
     "@paraspell/xcm-analyser": "npm:^1.3.0"
     "@polkadot/api": "npm:^12.0.2"
+    "@polkadot/dev-test": "npm:^0.79.3"
     "@polkadot/extension-base": "npm:0.48.3-1-x"
     "@polkadot/extension-chains": "npm:0.48.3-1-x"
     "@polkadot/extension-dapp": "npm:0.48.3-1-x"