Use .js imports in src (#727)

* Use .js in src imports

* Bump dev

packages/react-qr/src/Display.tsx

@@ -2,22 +2,22 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import styledComponents from 'styled-components';
+import styledComponents, { StyledInterface } from 'styled-components';
 
 import { objectSpread } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
-import { qrcode } from './qrcode';
-import { createFrames, createImgSize } from './util';
+import { qrcode } from './qrcode.js';
+import { createFrames, createImgSize } from './util.js';
 
 // In styled-components v6, there is a named export which can be used
 // directly, i.e. "import { styled } from ..." with no more magic. Until
 // such time the cjs vs esm import here is problematic, so we hack around
 // the various shapes below
 const styled = (
-  (styledComponents as unknown as { styled: typeof styledComponents }).styled ||
-  (styledComponents as unknown as { default: typeof styledComponents }).default ||
-  styledComponents
+  (styledComponents as unknown as { styled: StyledInterface }).styled ||
+  (styledComponents as unknown as { default: StyledInterface }).default ||
+  styledComponents as unknown as StyledInterface
 );
 
 interface Props {

packages/react-qr/src/DisplayAddress.tsx

@@ -3,8 +3,8 @@
 
 import React, { useMemo } from 'react';
 
-import { QrDisplay } from './Display';
-import { createAddressPayload } from './util';
+import { QrDisplay } from './Display.js';
+import { createAddressPayload } from './util.js';
 
 interface Props {
   address: string;

packages/react-qr/src/DisplayPayload.tsx

@@ -3,8 +3,8 @@
 
 import React, { useMemo } from 'react';
 
-import { QrDisplay } from './Display';
-import { createSignPayload } from './util';
+import { QrDisplay } from './Display.js';
+import { createSignPayload } from './util.js';
 
 interface Props {
   address: string;

packages/react-qr/src/NetworkSpecs.tsx

@@ -5,8 +5,8 @@ import type { NetworkSpecsStruct } from '@polkadot/ui-settings/types';
 
 import React, { useMemo } from 'react';
 
-import { QrDisplay } from './Display';
-import { encodeString } from './util';
+import { QrDisplay } from './Display.js';
+import { encodeString } from './util.js';
 
 interface Props {
   className?: string;

packages/react-qr/src/Scan.tsx

@@ -3,18 +3,18 @@
 
 import React, { useCallback, useMemo } from 'react';
 import Reader from 'react-qr-reader';
-import styledComponents from 'styled-components';
+import styledComponents, { StyledInterface } from 'styled-components';
 
-import { createImgSize } from './util';
+import { createImgSize } from './util.js';
 
 // In styled-components v6, there is a named export which can be used
 // directly, i.e. "import { styled } from ..." with no more magic. Until
 // such time the cjs vs esm import here is problematic, so we hack around
 // the various shapes below
 const styled = (
-  (styledComponents as unknown as { styled: typeof styledComponents }).styled ||
-  (styledComponents as unknown as { default: typeof styledComponents }).default ||
-  styledComponents
+  (styledComponents as unknown as { styled: StyledInterface }).styled ||
+  (styledComponents as unknown as { default: StyledInterface }).default ||
+  styledComponents as unknown as StyledInterface
 );
 
 interface Props {

packages/react-qr/src/ScanAddress.tsx

@@ -6,8 +6,8 @@ import React, { useCallback } from 'react';
 import { assert } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
-import { ADDRESS_PREFIX, SEED_PREFIX } from './constants';
-import { QrScan } from './Scan';
+import { ADDRESS_PREFIX, SEED_PREFIX } from './constants.js';
+import { QrScan } from './Scan.js';
 
 interface ScanType {
   isAddress: boolean;

packages/react-qr/src/ScanSignature.tsx

@@ -5,7 +5,7 @@ import type { HexString } from '@polkadot/util/types';
 
 import React, { useCallback } from 'react';
 
-import { QrScan } from './Scan';
+import { QrScan } from './Scan.js';
 
 interface ScanType {
   signature: HexString;

packages/react-qr/src/bundle.ts

@@ -1,9 +1,9 @@
 // Copyright 2017-2023 @polkadot/react-qr authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { QrDisplayAddress } from './DisplayAddress';
-export { QrDisplayPayload } from './DisplayPayload';
-export { QrScanAddress } from './ScanAddress';
-export { QrScanSignature } from './ScanSignature';
-export { QrNetworkSpecs } from './NetworkSpecs';
-export { packageInfo } from './packageInfo';
+export { QrDisplayAddress } from './DisplayAddress.js';
+export { QrDisplayPayload } from './DisplayPayload.js';
+export { QrScanAddress } from './ScanAddress.js';
+export { QrScanSignature } from './ScanSignature.js';
+export { QrNetworkSpecs } from './NetworkSpecs.js';
+export { packageInfo } from './packageInfo.js';

packages/react-qr/src/detectPackage.ts

@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);

packages/react-qr/src/index.ts

@@ -1,6 +1,6 @@
 // Copyright 2017-2023 @polkadot/react-qr authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import './detectPackage';
+import './detectPackage.js';
 
-export * from './bundle';
+export * from './bundle.js';

packages/react-qr/src/util.spec.ts

@@ -6,7 +6,7 @@
 import { u8aConcat, u8aToHex, u8aToString } from '@polkadot/util';
 import { randomAsU8a } from '@polkadot/util-crypto';
 
-import { createAddressPayload, createFrames, createSignPayload, decodeString, encodeNumber, encodeString } from './util';
+import { createAddressPayload, createFrames, createSignPayload, decodeString, encodeNumber, encodeString } from './util.js';
 
 describe('util', (): void => {
   describe('Uint8Array <-> string', (): void => {

packages/react-qr/src/util.ts

@@ -4,7 +4,7 @@
 import { isString, u8aConcat, u8aToU8a } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
-import { ADDRESS_PREFIX, CRYPTO_SR25519, FRAME_SIZE, SUBSTRATE_ID } from './constants';
+import { ADDRESS_PREFIX, CRYPTO_SR25519, FRAME_SIZE, SUBSTRATE_ID } from './constants.js';
 
 const MULTIPART = new Uint8Array([0]);