Package 'react-native-webview' and 'whatwg-url' in the RN bundle

package.json

@@ -18,10 +18,13 @@
  "lint": "eslint --fix src/**/*.ts",
  "clean": "npm-run-all -s clean:*",
  "clean:test-artifacts": "rimraf coverage && rimraf .nyc_output",
- "clean:build": "rimraf dist && rimraf RN",
+ "clean:build": "rimraf dist",
  "clean_node_modules": "rimraf node_modules"
  },
- "dependencies": {},
+ "dependencies": {
+ "react-native-webview": "^8.1.2",
+ "whatwg-url": "^8.0.0"
+ },
  "devDependencies": {
  "@ikscodes/browser-env": "~0.3.1",
  "@ikscodes/eslint-config": "~6.2.0",
@@ -32,6 +35,7 @@
  "@types/react-native": "^0.62.2",
  "@types/sinon": "~7.5.0",
  "@types/webpack": "~4.41.0",
+ "@types/whatwg-url": "^6.4.0",
  "@typescript-eslint/eslint-plugin": "~2.17.0",
  "ava": "2.2.0",
  "cli-glob": "^0.1.0",
@@ -49,7 +53,6 @@
  "prettier": "~1.19.1",
  "react": "^16.13.1",
  "react-native": "^0.62.2",
- "react-native-webview": "^9.1.4",
  "rimraf": "~3.0.0",
  "sinon": "7.1.1",
  "ts-loader": "~6.2.1",

react-native.d.ts

@@ -1 +1 @@
-export * from './dist/react-native/index.react-native';
+export * from './dist/react-native/index.react-native.d.ts';

react-native.js

@@ -1 +1 @@
-module.exports = require('./dist/react-native');
+module.exports = require('./dist/react-native/index.js');

src/core/sdk.ts

@@ -11,6 +11,7 @@ import { MagicSDKAdditionalConfiguration } from '../types';
 import { RPCProviderModule } from '../modules/rpc-provider';
 import { ViewController } from '../types/core/view-types';
 import { ReactNativeWebViewController } from './views/react-native-webview-controller';
+import { createURL } from '../util/url';
 
 export class MagicSDK {
  private static readonly __transports__: Map<string, PayloadTransport> = new Map();
@@ -44,12 +45,12 @@ export class MagicSDK {
 
  const fallbackEndpoint = IS_REACT_NATIVE ? MGBOX_URL : MAGIC_URL;
 
- this.endpoint = new URL(options?.endpoint ?? fallbackEndpoint).origin;
+ this.endpoint = createURL(options?.endpoint ?? fallbackEndpoint).origin;
  this.encodedQueryParams = encodeQueryParameters({
  API_KEY: this.apiKey,
  DOMAIN_ORIGIN: window.location ? window.location.origin : '',
  ETH_NETWORK: options?.network,
- host: new URL(this.endpoint).host,
+ host: createURL(this.endpoint).host,
  sdk: IS_REACT_NATIVE ? `${SDK_NAME}-rn` : SDK_NAME,
  version: SDK_VERSION,
  });
@@ -90,7 +91,7 @@ export class MagicSDK {
  protected get overlay(): ViewController {
  if (!MagicSDK.__overlays__.has(this.encodedQueryParams)) {
  const controller = IS_REACT_NATIVE
- ? (undefined as any)
+ ? new ReactNativeWebViewController(this.transport, this.endpoint, this.encodedQueryParams)
  : new IframeController(this.transport, this.endpoint, this.encodedQueryParams);
  MagicSDK.__overlays__.set(this.encodedQueryParams, controller);
  }

src/core/views/iframe-controller.ts

@@ -3,6 +3,7 @@
 import { MagicIncomingWindowMessage } from '../../types';
 import { PayloadTransport } from '../payload-transport';
 import { createDuplicateIframeWarning } from '../sdk-exceptions';
+import { createURL } from '../../util/url';
 
 /**
  * Magic `<iframe>` overlay styles. These base styles enable `<iframe>` UI
@@ -70,8 +71,8 @@ export class IframeController {
  if (!checkForSameSrcInstances(this.encodedQueryParams)) {
  const iframe = document.createElement('iframe');
  iframe.classList.add('magic-iframe');
- iframe.dataset.magicIframeLabel = new URL(this.endpoint).host;
- iframe.src = new URL(`/send?params=${this.encodedQueryParams}`, this.endpoint).href;
+ iframe.dataset.magicIframeLabel = createURL(this.endpoint).host;
+ iframe.src = createURL(`/send?params=${this.encodedQueryParams}`, this.endpoint).href;
  applyOverlayStyles(iframe);
  document.body.appendChild(iframe);
  resolve(iframe);

src/util/type-guards.ts

@@ -9,7 +9,6 @@
  */
 
 import { JsonRpcRequestPayload, JsonRpcResponsePayload, MagicPayloadMethod, RPCErrorCode } from '../types';
-import { ViewController } from '../types/core/view-types';
 
 /**
  * Assert `value` is `undefined`.

src/util/url.ts

@@ -0,0 +1,16 @@
+import { URL as PolyfillURL } from 'whatwg-url';
+
+/**
+ * Builds a `URL` object depending on the code environment (whether Browser or
+ * React Native).
+ */
+export function createURL(url: string, base?: string): URL {
+ // We only include the polyfill in the React Native-compatible bundle.
+ // Otherwise, we strip out the `whatwg-url` dependency completely.
+ if (PolyfillURL) {
+ return (new PolyfillURL(url, base) as unknown) as URL;
+ }
+
+ // This line should only be reached in the CJS/CDN bundles.
+ return new URL(url, base);
+}

webpack/webpack.config.ts

@@ -24,19 +24,20 @@ function configBase(tsconfig: string, isReactNative = false) {
  config.plugin('environment').use(EnvironmentPlugin, [envVariables]);
  config.plugin('react-native-environment').use(DefinePlugin, [{ 'process.env.IS_REACT_NATIVE': isReactNative }]);
 
- const reactDependencyRegex = /^(react|react-native|react-native-webview)$/;
-
  if (isReactNative) {
  // In React Native environments, we expect the developer to provide their
  // own React dependencies, so we mark them as "externals".
- config.externals(reactDependencyRegex);
+ config.externals(/^(react|react-native)$/);
  } else {
  // In browser environments, we must ensure that React dependencies are not
  // included or `required` anywhere, so we force these modules to be replaced
  // with an empty module.
  config
  .plugin('remove-react-dependencies')
- .use(NormalModuleReplacementPlugin, [reactDependencyRegex, resolve(__dirname, '../src/noop-module.ts')]);
+ .use(NormalModuleReplacementPlugin, [
+ /^(react|react-native|react-native-webview|whatwg-url)$/,
+ resolve(__dirname, '../src/noop-module.ts'),
+ ]);
  }
 
  config.resolve.extensions.merge(['.ts', '.tsx', '.js']);
@@ -57,6 +58,7 @@ configCJS.output
 const configReactNative = configBase('tsconfig.react-native.json', true);
 configReactNative.name('react-native');
 configReactNative.entry('main').add('./src/index.react-native.ts');
+configReactNative.performance.hints(false);
 configReactNative.output
  .path(resolve(__dirname, '../dist/react-native'))
  .filename('index.js')