Build browser bundles (#779)

* Build browser bundles

* Webpack resolution

* Bump common

* Bump deps

CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## master
+
+Changes:
+
+- Allow building as a completely stand-alone browser bundle (experimental)
+
+
 ## 0.38.8 Jun 26, 2012
 
 **Important** Not published to the stores, aligns with latest released packages.

package.json

@@ -8,22 +8,24 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^4.17.1",
+    "@polkadot/api": "^4.17.2-18",
-    "@polkadot/keyring": "^6.11.1",
+    "@polkadot/keyring": "^6.11.2-14",
-    "@polkadot/networks": "^6.11.1",
+    "@polkadot/networks": "^6.11.2-14",
-    "@polkadot/types": "^4.17.1",
+    "@polkadot/types": "^4.17.2-18",
-    "@polkadot/util": "^6.11.1",
+    "@polkadot/util": "^6.11.2-14",
-    "@polkadot/util-crypto": "^6.11.1",
+    "@polkadot/util-crypto": "^6.11.2-14",
-    "@polkadot/x-fetch": "^6.11.1",
+    "@polkadot/x-fetch": "^6.11.2-14",
     "babel-core": "^7.0.0-bridge.0",
     "safe-buffer": "^5.2.1",
-    "typescript": "^4.3.5"
+    "typescript": "^4.3.5",
+    "webpack": "5.41.1"
   },
   "scripts": {
-    "build": "polkadot-dev-build-ts && yarn build:zip",
+    "build": "polkadot-dev-build-ts && yarn build:zip && yarn build:rollup",
     "build:extra": "yarn build:i18n && yarn build:ui",
     "build:i18n": "i18next-scanner --config i18next-scanner.config.js",
     "build:release": "polkadot-ci-ghact-build",
+    "build:rollup": "polkadot-exec-rollup --config",
     "build:ui": "cd packages/extension && NODE_ENV=production yarn webpack --config webpack.extension.cjs --mode production",
     "build:zip": "yarn build:zip:dst && yarn build:zip:src",
     "build:zip:dst": "rm -rf ./master-build.zip && cd packages/extension/build && zip -r -FS ../../../master-build.zip .",
@@ -39,7 +41,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
-    "@polkadot/dev": "^0.62.44",
+    "@polkadot/dev": "^0.62.56",
     "@types/jest": "^26.0.23",
     "i18next-scanner": "^3.0.0",
     "sinon-chrome": "^3.0.1",

packages/extension-base/package.json

@@ -9,11 +9,11 @@
   "sideEffects": false,
   "dependencies": {
     "@babel/runtime": "^7.14.6",
-    "@polkadot/api": "^4.17.1",
+    "@polkadot/api": "^4.17.2-18",
     "@polkadot/extension-dapp": "^0.38.8",
     "@polkadot/extension-inject": "^0.38.8",
-    "@polkadot/keyring": "^6.11.1",
+    "@polkadot/keyring": "^6.11.2-14",
-    "@polkadot/phishing": "^0.6.219",
+    "@polkadot/phishing": "^0.6.220",
-    "@polkadot/ui-keyring": "^0.82.2-1"
+    "@polkadot/ui-keyring": "^0.83.2-3"
   }
 }

packages/extension-chains/package.json

@@ -9,7 +9,7 @@
   "sideEffects": false,
   "dependencies": {
     "@babel/runtime": "^7.14.6",
-    "@polkadot/networks": "^6.11.1"
+    "@polkadot/networks": "^6.11.2-14"
   },
   "peerDependencies": {
     "@polkadot/api": "*"

packages/extension-chains/src/index.ts

@@ -4,8 +4,7 @@
 import type { MetadataDef } from '@polkadot/extension-inject/types';
 import type { Chain } from './types';
 
-import { Metadata } from '@polkadot/metadata';
+import { Metadata, TypeRegistry } from '@polkadot/types';
-import { TypeRegistry } from '@polkadot/types';
 import { base64Decode } from '@polkadot/util-crypto';
 
 // imports chain details, generally metadata. For the generation of these,

packages/extension-dapp/package.json

@@ -10,8 +10,8 @@
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@polkadot/extension-inject": "^0.38.8",
-    "@polkadot/util": "^6.11.1",
+    "@polkadot/util": "^6.11.2-14",
-    "@polkadot/util-crypto": "^6.11.1"
+    "@polkadot/util-crypto": "^6.11.2-14"
   },
   "peerDependencies": {
     "@polkadot/api": "*",

packages/extension-ui/package.json

@@ -15,13 +15,13 @@
     "@polkadot/extension-base": "^0.38.8",
     "@polkadot/extension-dapp": "^0.38.8",
     "@polkadot/extension-inject": "^0.38.8",
-    "@polkadot/hw-ledger": "^6.11.1",
+    "@polkadot/hw-ledger": "^6.11.2-14",
-    "@polkadot/keyring": "^6.11.1",
+    "@polkadot/keyring": "^6.11.2-14",
-    "@polkadot/networks": "^6.11.1",
+    "@polkadot/networks": "^6.11.2-14",
-    "@polkadot/react-identicon": "^0.82.2-1",
+    "@polkadot/react-identicon": "^0.83.2-3",
-    "@polkadot/react-qr": "^0.82.2-1",
+    "@polkadot/react-qr": "^0.83.2-3",
-    "@polkadot/util": "^6.11.1",
+    "@polkadot/util": "^6.11.2-14",
-    "@polkadot/util-crypto": "^6.11.1",
+    "@polkadot/util-crypto": "^6.11.2-14",
     "file-saver": "^2.0.5",
     "i18next": "^20.3.2",
     "react": "^17.0.2",

packages/extension-ui/src/util/chains.ts

@@ -3,9 +3,9 @@
 
 import type { MetadataDefBase } from '@polkadot/extension-inject/types';
 
-import networks from '@polkadot/networks';
+import { selectableNetworks } from '@polkadot/networks';
 
-const hashes: MetadataDefBase[] = networks
+const hashes: MetadataDefBase[] = selectableNetworks
   .filter(({ genesisHash }) => !!genesisHash.length)
   .map((network) => ({
     chain: network.displayName,

packages/extension-ui/src/util/legerChains.ts

@@ -1,6 +1,6 @@
 // Copyright 2019-2021 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import networks from '@polkadot/networks';
+import { selectableNetworks } from '@polkadot/networks';
 
-export default networks.filter((network) => network.hasLedgerSupport);
+export default selectableNetworks.filter((network) => network.hasLedgerSupport);

packages/extension/package.json

@@ -12,7 +12,7 @@
     "@polkadot/extension-ui": "^0.38.8"
   },
   "devDependencies": {
-    "@polkadot/dev": "^0.62.44",
+    "@polkadot/dev": "^0.62.56",
     "babel-loader": "^8.2.2",
     "browser-resolve": "^2.0.0",
     "buffer": "^6.0.3",

rollup.config.mjs

@@ -0,0 +1,38 @@
+// Copyright 2017-2021 @polkadot/extension authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import path from 'path';
+
+import { createBundle } from '@polkadot/dev/config/rollup';
+
+const pkgs = [
+  '@polkadot/extension-dapp'
+];
+
+const external = [
+  ...pkgs,
+  '@polkadot/networks',
+  '@polkadot/util',
+  '@polkadot/util-crypto'
+];
+
+const entries = ['extension-base', 'extension-chains', 'extension-inject'].reduce((all, p) => ({
+  ...all,
+  [`@polkadot/${p}`]: path.resolve(process.cwd(), `packages/${p}/build`)
+}), {});
+
+const overrides = {};
+
+export default pkgs.map((pkg) => {
+  const override = (overrides[pkg] || {});
+
+  return createBundle({
+    external,
+    pkg,
+    ...override,
+    entries: {
+      ...entries,
+      ...(override.entries || {})
+    }
+  });
+});

test-bundle.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Bundler tests</title>
+    <style>
+      pre {
+        margin: 0.5rem 0;
+      }
+
+      pre.header {
+        background: #ddd;
+        margin-top: 1.5rem;
+        padding: 0.25rem 0.75rem;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      function log (label, result) {
+        const pre = document.createElement('pre');
+
+        if (typeof result !== 'undefined') {
+          pre.innerHTML = `${label.padStart(24)} = ${result}`;
+        } else {
+          pre.innerHTML = label;
+          pre.className = 'header';
+        }
+
+        document.body.appendChild(pre);
+      }
+    </script>
+    <script src="node_modules/@polkadot/util/bundle-polkadot-util.js"></script>
+    <script src="node_modules/@polkadot/util-crypto/bundle-polkadot-util-crypto.js"></script>
+    <script src="packages/extension-dapp/build/bundle-polkadot-extension-dapp.js"></script>
+    <script>
+      log('polkadotExtensionDapp (not quite useful... extension does not inject to files)');
+
+      const { web3Accounts, web3Enable } = polkadotExtensionDapp;
+
+      web3Enable('bundle-testing')
+        .then(() => {
+          log('enabled', true);
+
+          return web3Accounts();
+        })
+        .then((accounts) =>
+          log('accounts', accounts.length)
+        );
+    </script>
+  </body>
+</html>