BREAKING: Change CLI config to use Webpack by default (#2214)

Initially when implementing the Webpack configuration for the CLI, the goal was to be fully backwards compatible with legacy Browserify-based Snap configs. This meant that in order to use Webpack, you would have to specify `bundler: 'webpack'` in your config. Now that the Webpack-based configuration has been available for some time, we can further deprecate Browserify by making Webpack the default. You can still opt-in to Browserify by setting `bundler: 'browserify'`.
MetaMask · Feb 23, 2024 · 33f01f1 · 33f01f1
1 parent df74d38
commit 33f01f1
Show file tree

Hide file tree

Showing 32 changed files with 57 additions and 40 deletions.
diff --git a/packages/examples/packages/bip32/snap.config.ts b/packages/examples/packages/bip32/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8001,

diff --git a/packages/examples/packages/bip44/snap.config.ts b/packages/examples/packages/bip44/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8002,

diff --git a/packages/examples/packages/browserify/snap.config.ts b/packages/examples/packages/browserify/snap.config.ts
@@ -2,6 +2,7 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
+  bundler: 'browserify',
   cliOptions: {
     src: resolve(__dirname, 'src/index.ts'),
     port: 8021,

diff --git a/packages/examples/packages/client-status/snap.config.ts b/packages/examples/packages/client-status/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8027,

diff --git a/packages/examples/packages/cronjobs/snap.config.ts b/packages/examples/packages/cronjobs/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8004,

diff --git a/packages/examples/packages/dialogs/snap.config.ts b/packages/examples/packages/dialogs/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8005,

diff --git a/packages/examples/packages/errors/snap.config.ts b/packages/examples/packages/errors/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8006,

diff --git a/packages/examples/packages/ethereum-provider/snap.config.ts b/packages/examples/packages/ethereum-provider/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8007,

diff --git a/packages/examples/packages/ethers-js/snap.config.ts b/packages/examples/packages/ethers-js/snap.config.ts
@@ -4,7 +4,6 @@ import { resolve } from 'path';
 import { DefinePlugin } from 'webpack';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8008,

diff --git a/packages/examples/packages/get-entropy/snap.config.ts b/packages/examples/packages/get-entropy/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8009,

diff --git a/packages/examples/packages/get-file/snap.config.ts b/packages/examples/packages/get-file/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8024,

diff --git a/packages/examples/packages/home-page/snap.config.ts b/packages/examples/packages/home-page/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8025,

diff --git a/packages/examples/packages/images/snap.config.ts b/packages/examples/packages/images/snap.config.ts
@@ -1,7 +1,6 @@
 import type { SnapConfig } from '@metamask/snaps-cli';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: './src/index.ts',
   server: {
     port: 8026,

diff --git a/packages/examples/packages/interactive-ui/snap.config.ts b/packages/examples/packages/interactive-ui/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8028,

diff --git a/packages/examples/packages/invoke-snap/packages/consumer-signer/snap.config.ts b/packages/examples/packages/invoke-snap/packages/consumer-signer/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8012,

diff --git a/packages/examples/packages/invoke-snap/packages/core-signer/snap.config.ts b/packages/examples/packages/invoke-snap/packages/core-signer/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8011,

diff --git a/packages/examples/packages/json-rpc/snap.config.ts b/packages/examples/packages/json-rpc/snap.config.ts
@@ -1,7 +1,6 @@
 import type { SnapConfig } from '@metamask/snaps-cli';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: './src/index.ts',
   server: {
     port: 8013,

diff --git a/packages/examples/packages/lifecycle-hooks/snap.config.ts b/packages/examples/packages/lifecycle-hooks/snap.config.ts
@@ -1,7 +1,6 @@
 import type { SnapConfig } from '@metamask/snaps-cli';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: './src/index.ts',
   server: {
     port: 8022,

diff --git a/packages/examples/packages/localization/snap.config.ts b/packages/examples/packages/localization/snap.config.ts
@@ -1,7 +1,6 @@
 import type { SnapConfig } from '@metamask/snaps-cli';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: './src/index.ts',
   server: {
     port: 8020,

diff --git a/packages/examples/packages/manage-state/snap.config.ts b/packages/examples/packages/manage-state/snap.config.ts
@@ -1,7 +1,6 @@
 import type { SnapConfig } from '@metamask/snaps-cli';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: './src/index.ts',
   server: {
     port: 8014,

diff --git a/packages/examples/packages/name-lookup/snap.config.ts b/packages/examples/packages/name-lookup/snap.config.ts
@@ -1,7 +1,6 @@
 import type { SnapConfig } from '@metamask/snaps-cli';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: './src/index.ts',
   server: {
     port: 8023,

diff --git a/packages/examples/packages/network-access/snap.config.ts b/packages/examples/packages/network-access/snap.config.ts
@@ -1,7 +1,6 @@
 import type { SnapConfig } from '@metamask/snaps-cli';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: './src/index.ts',
   server: {
     port: 8015,

diff --git a/packages/examples/packages/notifications/snap.config.ts b/packages/examples/packages/notifications/snap.config.ts
@@ -1,7 +1,6 @@
 import type { SnapConfig } from '@metamask/snaps-cli';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: './src/index.ts',
   server: {
     port: 8016,

diff --git a/packages/examples/packages/signature-insights/snap.config.ts b/packages/examples/packages/signature-insights/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8017,

diff --git a/packages/examples/packages/transaction-insights/snap.config.ts b/packages/examples/packages/transaction-insights/snap.config.ts
@@ -1,7 +1,6 @@
 import type { SnapConfig } from '@metamask/snaps-cli';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: './src/index.ts',
   server: {
     port: 8018,

diff --git a/packages/examples/packages/wasm/snap.config.ts b/packages/examples/packages/wasm/snap.config.ts
@@ -2,7 +2,6 @@ import type { SnapConfig } from '@metamask/snaps-cli';
 import { resolve } from 'path';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: resolve(__dirname, 'src/index.ts'),
   server: {
     port: 8019,

diff --git a/packages/snaps-cli/src/__fixtures__/configs/cjs.ts b/packages/snaps-cli/src/__fixtures__/configs/cjs.ts
@@ -4,7 +4,6 @@
 import type { SnapConfig } from '../../config';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: 'src/index.ts',
 };
 

diff --git a/packages/snaps-cli/src/__fixtures__/configs/esm.ts b/packages/snaps-cli/src/__fixtures__/configs/esm.ts
@@ -1,7 +1,6 @@
 import type { SnapConfig } from '../../config';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: 'src/index.ts',
 };
 

diff --git a/packages/snaps-cli/src/__fixtures__/configs/invalid.ts b/packages/snaps-cli/src/__fixtures__/configs/invalid.ts
@@ -1,7 +1,6 @@
 import type { SnapConfig } from '../../config';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   // @ts-expect-error - Invalid option.
   foo: 'bar',
 };

diff --git a/packages/snaps-cli/src/__fixtures__/configs/typescript/snap.config.ts b/packages/snaps-cli/src/__fixtures__/configs/typescript/snap.config.ts
@@ -1,7 +1,6 @@
 import type { SnapConfig } from '../../../config';
 
 const config: SnapConfig = {
-  bundler: 'webpack',
   input: 'src/index.ts',
 };
 

diff --git a/packages/snaps-cli/src/config.test.ts b/packages/snaps-cli/src/config.test.ts
@@ -51,6 +51,52 @@ describe('getConfig', () => {
     ).toThrow(`Unknown key: ${bold('cliOptions')}, received:`);
   });
 
+  it.each([
+    {
+      input: 'src/index.js',
+      sourceMap: false,
+      output: {
+        path: 'dist',
+      },
+      server: {
+        port: 8081,
+      },
+    },
+    {
+      input: 'src/index.js',
+      output: {
+        path: 'dist',
+      },
+      server: {
+        port: 8081,
+      },
+    },
+    {
+      input: 'src/index.js',
+      server: {
+        port: 8081,
+      },
+    },
+    {
+      input: 'src/index.js',
+      output: {},
+    },
+    {
+      input: 'src/index.js',
+    },
+    {},
+  ])('returns a valid config for `%o`', (value) => {
+    const config = getConfig(value, MOCK_ARGV);
+
+    expect(config).toStrictEqual(
+      getMockConfig('webpack', {
+        input: resolve(process.cwd(), 'src', 'index.js'),
+      }),
+    );
+
+    expect(config.legacy).toBeUndefined();
+  });
+
   describe('browserify', () => {
     it.each([
       {
@@ -73,20 +119,18 @@ describe('getConfig', () => {
         },
       },
       {
+        bundler: 'browserify',
         cliOptions: {
-          src: 'src/index.js',
           port: 8081,
         },
       },
       {
-        cliOptions: {
-          port: 8081,
-        },
+        bundler: 'browserify',
+        cliOptions: {},
       },
       {
-        cliOptions: {},
+        bundler: 'browserify',
       },
-      {},
     ])('returns a valid config for `%o`', (value) => {
       const config = getConfig(value, MOCK_ARGV);
 
@@ -115,6 +159,7 @@ describe('getConfig', () => {
       expect(() =>
         getConfig(
           {
+            bundler: 'browserify',
             cliOptions: {
               depsToTranspile: ['foo', 'bar'],
               transpilationMode: TranspilationModes.LocalOnly,

diff --git a/packages/snaps-cli/src/config.ts b/packages/snaps-cli/src/config.ts
@@ -54,7 +54,7 @@ export type SnapBrowserifyConfig = {
    * deprecated and will be removed in a future release, so it's recommended to
    * use the Webpack bundler instead.
    */
-  bundler?: 'browserify';
+  bundler: 'browserify';
 
   /**
    * The options for the Snaps CLI. These are merged with the options passed to
@@ -206,7 +206,7 @@ export type SnapWebpackConfig = {
    * deprecated and will be removed in a future release, so it's recommended to
    * use the Webpack bundler instead.
    */
-  bundler: 'webpack';
+  bundler?: 'webpack';
 
   /**
    * The path to the snap entry point. This should be a JavaScript or TypeScript
@@ -488,7 +488,7 @@ const SnapsBrowserifyBundlerCustomizerFunctionStruct =
   );
 
 export const SnapsBrowserifyConfigStruct = object({
-  bundler: defaulted(literal('browserify'), 'browserify'),
+  bundler: literal('browserify'),
   cliOptions: defaulted(
     object({
       bundle: optional(file()),
@@ -530,7 +530,7 @@ const SnapsWebpackCustomizeWebpackConfigFunctionStruct =
   );
 
 export const SnapsWebpackConfigStruct = object({
-  bundler: literal('webpack'),
+  bundler: defaulted(literal('webpack'), 'webpack'),
   input: defaulted(file(), resolve(process.cwd(), 'src/index.js')),
   sourceMap: defaulted(union([boolean(), literal('inline')]), false),
   evaluate: defaulted(boolean(), true),
@@ -633,7 +633,7 @@ export const SnapsWebpackConfigStruct = object({
 export const SnapsConfigStruct = type({
   bundler: defaulted(
     union([literal('browserify'), literal('webpack')]),
-    'browserify',
+    'webpack',
   ),
 });