Handle Webpack and Prettier breaking changes

Author: Mrtenz

jest.config.base.js

@@ -121,6 +121,10 @@ module.exports = {
   // A preset that is used as a base for Jest's configuration
   // preset: '',
 
+  // The path to the Prettier executable used to format snapshots
+  // Jest doesn't support Prettier 3 yet, so we use Prettier 2
+  prettierPath: require.resolve('prettier-2'),
+
   // Run tests from one or more projects
   // projects: undefined,
 

package.json

@@ -112,6 +112,7 @@
     "lodash": "^4.17.21",
     "minimatch": "^7.4.1",
     "prettier": "^3.3.3",
+    "prettier-2": "npm:prettier@^2.8.8",
     "prettier-plugin-packagejson": "^2.5.8",
     "rimraf": "^4.1.2",
     "semver": "^7.5.4",

packages/examples/packages/json-rpc/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "An0r5dIP8lHzsMGaYcJqJIq1ynF0MZADyjoAo4trirs=",
+    "shasum": "A5COdI8IhqSN9zwvjqbms2my1m1PfmiSrkkZKkgaXC8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snaps-cli/src/commands/build/implementation.test.ts

@@ -16,6 +16,7 @@ import type * as webpack from '../../webpack';
 import type * as utils from '../../webpack/utils';
 import { BROWSERSLIST_FILE } from '../../webpack/utils';
 import { build } from './implementation';
+import { SemVerVersion } from '@metamask/utils';
 
 const { promises: fs } = normalFs;
 
@@ -36,7 +37,10 @@ jest.mock('../../webpack', () => ({
       .requireActual<typeof webpack>('../../webpack')
       .getCompiler(...args);
 
+    // @ts-expect-error: Type mismatch.
     compiler.inputFileSystem = normalFs;
+
+    // @ts-expect-error: Type mismatch.
     compiler.outputFileSystem = normalFs;
 
     return compiler;
@@ -48,6 +52,7 @@ jest.mock('../../webpack/utils', () => ({
   getDefaultLoader: jest.fn<
     ReturnType<typeof utils.getDefaultLoader>,
     Parameters<typeof utils.getDefaultLoader>
+    // @ts-expect-error: Type mismatch.
   >(async (config) => {
     if (config.legacy) {
       return {
@@ -66,7 +71,7 @@ describe('build', () => {
   beforeEach(async () => {
     const { manifest } = await getMockSnapFilesWithUpdatedChecksum({
       manifest: getSnapManifest({
-        platformVersion: getPlatformVersion(),
+        platformVersion: getPlatformVersion() as SemVerVersion,
       }),
     });
 
@@ -129,7 +134,7 @@ describe('build', () => {
 
     const output = await fs.readFile('/snap/output.js', 'utf8');
     expect(output).toMatchInlineSnapshot(
-      `"(()=>{var r={67:r=>{r.exports.onRpcRequest=({request:r})=>{console.log("Hello, world!");const{method:e,id:o}=r;return e+o}}},e={};var o=function o(t){var s=e[t];if(void 0!==s)return s.exports;var n=e[t]={exports:{}};return r[t](n,n.exports,o),n.exports}(67);module.exports=o})();"`,
+      `"(()=>{var r={157:r=>{r.exports.onRpcRequest=({request:r})=>{console.log("Hello, world!");const{method:e,id:o}=r;return e+o}}},e={};var o=function o(t){var s=e[t];if(void 0!==s)return s.exports;var n=e[t]={exports:{}};return r[t](n,n.exports,o),n.exports}(157);module.exports=o})();"`,
     );
   });
 
@@ -165,7 +170,7 @@ describe('build', () => {
     expect(output).toMatchInlineSnapshot(`
       "(() => {
         var __webpack_modules__ = {
-          67: module => {
+          157: module => {
             module.exports.onRpcRequest = ({
               request
             }) => {
@@ -190,7 +195,7 @@ describe('build', () => {
           __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
           return module.exports;
         }
-        var __webpack_exports__ = __webpack_require__(67);
+        var __webpack_exports__ = __webpack_require__(157);
         module.exports = __webpack_exports__;
       })();"
     `);

packages/snaps-cli/src/commands/watch/implementation.test.ts

@@ -24,7 +24,10 @@ jest.mock('../../webpack', () => ({
       .requireActual<typeof webpack>('../../webpack')
       .getCompiler(...args);
 
+    // @ts-expect-error: Type mismatch.
     compiler.inputFileSystem = normalFs;
+
+    // @ts-expect-error: Type mismatch.
     compiler.outputFileSystem = normalFs;
 
     return compiler;
@@ -57,6 +60,7 @@ describe('watch', () => {
     // @ts-expect-error - Partial mock.
     mock.mockImplementationOnce(() => ({
       watch: watchMock,
+      watching: {},
     }));
 
     await watch(
@@ -78,6 +82,7 @@ describe('watch', () => {
     // @ts-expect-error - Partial mock.
     mock.mockImplementationOnce(() => ({
       watch: watchMock,
+      watching: {},
     }));
 
     await expect(

packages/snaps-cli/src/commands/watch/implementation.ts

@@ -4,6 +4,7 @@ import type { Watching } from 'webpack';
 import type { ProcessedWebpackConfig } from '../../config';
 import type { WebpackOptions } from '../../webpack';
 import { getCompiler } from '../../webpack';
+import { assert } from '@metamask/utils';
 
 /**
  * Build the snap bundle and watch for changes. This uses Webpack to build the
@@ -39,6 +40,7 @@ export async function watch(
           return;
         }
 
+        assert(compiler.watching, 'Expected `compiler.watching` to be set.');
         resolve(compiler.watching);
       },
     );

packages/snaps-cli/src/webpack/plugins.ts

@@ -5,7 +5,6 @@ import type { Ora } from 'ora';
 import type {
   Compiler,
   ProvidePlugin,
-  ResolvePluginInstance,
   Resolver,
   StatsError,
   WebpackPluginInstance,
@@ -241,13 +240,23 @@ export type SnapsBuiltInResolverOptions = {
   ignore?: string[];
 };
 
+/**
+ * A Webpack resolve plugin.
+ *
+ * Copied from Webpack's own types, because the `ResolvePluginInstance` type is
+ * a union, and can't be used as a type for a class.
+ */
+type ResolvePlugin = {
+  apply: (resolver: Resolver) => void;
+}
+
 /**
  * A plugin that logs a message when a built-in module is not resolved. The
  * MetaMask Snaps CLI does not support built-in modules by default, and this
  * plugin is used to warn the user when they try to import a built-in module,
  * when no fallback is configured.
  */
-export class SnapsBuiltInResolver implements ResolvePluginInstance {
+export class SnapsBuiltInResolver implements ResolvePlugin {
   /**
    * The built-in modules that have been imported, but not resolved.
    */

packages/snaps-webpack-plugin/src/__snapshots__/plugin.test.ts.snap

@@ -2,15 +2,13 @@
 
 exports[`SnapsWebpackPlugin applies a transform 1`] = `
 "(() => {
-  var __webpack_exports__ = {};
   const foo = 'bar';
 })();"
 `;
 
 exports[`SnapsWebpackPlugin forwards the options 1`] = `
 "/******/(() => {
   // webpackBootstrap
-  var __webpack_exports__ = {};
 
   // foo bar
   /* baz qux */

packages/snaps-webpack-plugin/src/manifest.test.ts

@@ -47,44 +47,6 @@ describe('writeManifest', () => {
     `);
   });
 
-  it('uses a custom Prettier config if found', async () => {
-    const manifest = JSON.stringify(getSnapManifest());
-    await writeManifest(
-      resolve(__dirname, '__fixtures__', 'foo.json'),
-      manifest,
-    );
-
-    expect(jest.mocked(fs.writeFile).mock.calls[0][1]).toMatchInlineSnapshot(`
-      "{
-          "version": "1.0.0",
-          "description": "The test example snap!",
-          "proposedName": "@metamask/example-snap",
-          "repository": {
-              "type": "git",
-              "url": "https://github.com/MetaMask/example-snap.git"
-          },
-          "source": {
-              "shasum": "/17SwI03+Cn9sk45Z6Czp+Sktru1oLzOmkJW+YbP9WE=",
-              "location": {
-                  "npm": {
-                      "filePath": "dist/bundle.js",
-                      "packageName": "@metamask/example-snap",
-                      "registry": "https://registry.npmjs.org",
-                      "iconPath": "images/icon.svg"
-                  }
-              }
-          },
-          "initialPermissions": {
-              "snap_dialog": {},
-              "endowment:rpc": { "snaps": true, "dapps": false }
-          },
-          "platformVersion": "1.0.0",
-          "manifestVersion": "0.1"
-      }
-      "
-    `);
-  });
-
   it('accepts a custom write function', async () => {
     const fn = jest.fn();
     const manifest = JSON.stringify(getSnapManifest());

packages/snaps-webpack-plugin/src/manifest.ts

@@ -1,13 +1,12 @@
 import type { WriteFileFunction } from '@metamask/snaps-utils/node';
 import { promises as fs } from 'fs';
-import { format, resolveConfig } from 'prettier';
+import { format } from 'prettier/standalone';
+import * as babel from 'prettier/plugins/babel';
+import * as estree from 'prettier/plugins/estree';
 
 /**
  * Format the manifest data with Prettier and write it to disk.
  *
- * It uses the Prettier configuration found in the project directory (if any),
- * or the default Prettier configuration if none is found.
- *
  * @param path - The path to write the manifest to.
  * @param data - The manifest data.
  * @param writeFileFn - The function to use to write the manifest.
@@ -18,14 +17,11 @@ export async function writeManifest(
   data: string,
   writeFileFn: WriteFileFunction = fs.writeFile,
 ) {
-  const config = await resolveConfig(path, {
-    editorconfig: true,
-  });
-
-  const formattedManifest = format(data, {
-    ...config,
+  const formattedManifest = await format(data, {
+    tabWidth: 2,
     parser: 'json',
     filepath: path,
+    plugins: [babel, estree],
   });
 
   await writeFileFn(path, formattedManifest);