MetaMask / metamask-sdk

The simplest yet most secure way to connect your blockchain-based applications to millions of MetaMask Wallet users.
https://metamask.io/sdk/
Other
188 stars 115 forks source link

Remove react-native related dependencies #776

Open nlnw opened 8 months ago

nlnw commented 8 months ago

Feature Request

The react-native dependencies adds 200MB to npm installs (react-native-webview, react-native, @react-native-async-storage/async-storage). It's more than 10x bigger than any other dependency. This makes anything that uses this package to need 500mb+ in wasted storage. Can you please find a way to include this type of dependency without pulling in react-native packages?

Why it is needed

Reduce slow npm install times and hugely wasted disk space since most projects won't be using react-native.

Askadias commented 2 months ago

Can we rise up this one? react-native-webview definitely should be in peer dependencies.

We are using web3modal and currently have to patch our pnpm installation like that .pnpmfile.cjs:

module.exports = {
  hooks: {
    readPackage(pkg) {
      if (pkg.name === 'react-native-webview') {
        pkg.dependencies = {};
        pkg.peerDependencies = {};
        pkg.optionalDependencies = {};
      }
      return pkg;
    },
  },
};
jd1378 commented 2 months ago

We are also using web3modal and we had to patch web3modal core (2810) and use a .pnpmfile.cjs similar to Askadias':

function isReactDependency(pkgName) {
  return (
    pkgName.startsWith('react') ||
    pkgName.startsWith('@react') ||
    pkgName === 'use-sync-external-store'
  );
}

function depsWithoutReact(deps) {
  if (!deps) return deps;
  return Object.keys(deps)
    .filter(k => isReactDependency(k) && k !== 'react-native-webview')
    .reduce((accu, pkgName) => {
      delete accu[pkgName];
      return accu;
    }, deps);
}

module.exports = {
  hooks: {
    readPackage(pkg) {
      if (pkg.name === 'react-native-webview') {
        pkg.dependencies = {};
        pkg.peerDependencies = {};
        pkg.optionalDependencies = {};
        pkg.transitivePeerDependencies = {};
      } else {
        pkg.dependencies = depsWithoutReact(pkg.dependencies);
        pkg.peerDependencies = depsWithoutReact(pkg.peerDependencies);
        pkg.optionalDependencies = depsWithoutReact(pkg.optionalDependencies);
        pkg.transitivePeerDependencies = depsWithoutReact(
          pkg.transitivePeerDependencies,
        );
      }
      return pkg;
    },
  },
};