Align parsing of custom resolver options, rename arg (#42392)

Summary:

Follow-up to #42333 following internal feedback. We are now aligning this to match the [`metro build` command](https://github.com/facebook/metro/blob/702e1b8fc7ab8b973bcd53f1a41f7e797cbf7dca/packages/metro/src/commands/build.js#L85-L91). This also improves validation on parsing (done after initial `commander` arg parsing as variadic string).

Changelog: [Internal]
(same as #42333)

Reviewed By: motiz88

Differential Revision: D52911017

Author: huntie

packages/community-cli-plugin/README.md

@@ -59,6 +59,7 @@ npx react-native bundle --entry-file <path> [options]
 | `--minify [boolean]` | Allows overriding whether bundle is minified. Defaults to `false` if `--dev` is set. Disabling minification can be useful for speeding up production builds for testing purposes. |
 | `--bundle-output <string>` | Specify the path to store the resulting bundle. |
 | `--bundle-encoding <string>` | Specify the encoding for writing the bundle (<https://nodejs.org/api/buffer.html#buffer_buffer>). |
+| `--resolver-option <string...>` | Custom resolver options of the form key=value. URL-encoded. May be specified multiple times. |
 | `--sourcemap-output <string>` | Specify the path to store the source map file for the resulting bundle. |
 | `--sourcemap-sources-root <string>` | Set the root path for source map entries. |
 | `--sourcemap-use-absolute-path` | Report `SourceMapURL` using its full path. |

packages/community-cli-plugin/package.json

@@ -22,16 +22,17 @@
     "dist"
   ],
   "dependencies": {
-    "@react-native/dev-middleware": "0.74.0",
     "@react-native-community/cli-server-api": "13.0.0",
     "@react-native-community/cli-tools": "13.0.0",
+    "@react-native/dev-middleware": "0.74.0",
     "@react-native/metro-babel-transformer": "0.74.0",
     "chalk": "^4.0.0",
     "execa": "^5.1.1",
     "metro": "^0.80.3",
     "metro-config": "^0.80.3",
     "metro-core": "^0.80.3",
     "node-fetch": "^2.2.0",
+    "querystring": "^0.2.1",
     "readline": "^1.3.0"
   },
   "devDependencies": {

packages/community-cli-plugin/src/commands/bundle/buildBundle.js

@@ -14,6 +14,7 @@ import type {ConfigT} from 'metro-config';
 import type {RequestOptions} from 'metro/src/shared/types.flow';
 
 import loadMetroConfig from '../../utils/loadMetroConfig';
+import parseKeyValueParamArray from '../../utils/parseKeyValueParamArray';
 import saveAssets from './saveAssets';
 import {logger} from '@react-native-community/cli-tools';
 import chalk from 'chalk';
@@ -42,7 +43,7 @@ export type BundleCommandArgs = {
   verbose: boolean,
   unstableTransformProfile: string,
   indexedRamBundle?: boolean,
-  customResolverOptions?: Record<string, string>,
+  resolverOption?: Array<string>,
 };
 
 async function buildBundle(
@@ -65,6 +66,10 @@ async function buildBundleWithConfig(
   config: ConfigT,
   bundleImpl: typeof metroBundle | typeof metroRamBundle = metroBundle,
 ): Promise<void> {
+  const customResolverOptions = parseKeyValueParamArray(
+    args.resolverOption ?? [],
+  );
+
   if (config.resolver.platforms.indexOf(args.platform) === -1) {
     logger.error(
       `Invalid platform ${
@@ -100,7 +105,7 @@ async function buildBundleWithConfig(
     minify: args.minify !== undefined ? args.minify : !args.dev,
     platform: args.platform,
     unstable_transformProfile: args.unstableTransformProfile,
-    customResolverOptions: args.customResolverOptions,
+    customResolverOptions,
   };
   const server = new Server(config);
 

packages/community-cli-plugin/src/commands/bundle/index.js

@@ -115,16 +115,11 @@ const bundleCommand: Command = {
       parse: (val: string): string => path.resolve(val),
     },
     {
-      name: '--custom-resolver-options <string>',
-      description: 'Custom resolver options, format: key=value,key2=value2.',
-      parse: (val: string): Record<string, string> => {
-        return Object.fromEntries(
-          val.split(',').map(option => {
-            const [key, value] = option.split('=');
-            return [key, value];
-          }),
-        );
-      },
+      name: '--resolver-option <string...>',
+      description:
+        'Custom resolver options of the form key=value. URL-encoded. May be specified multiple times.',
+      parse: (val: string, previous: Array<string> = []): Array<string> =>
+        previous.concat([val]),
     },
   ],
 };

packages/community-cli-plugin/src/utils/parseKeyValueParamArray.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import querystring from 'querystring';
+
+export default function parseKeyValueParamArray(
+  keyValueArray: $ReadOnlyArray<string>,
+): Record<string, string> {
+  const result = {};
+
+  for (const item of keyValueArray) {
+    if (item.indexOf('=') === -1) {
+      throw new Error('Expected parameter to include "=" but found: ' + item);
+    }
+    if (item.indexOf('&') !== -1) {
+      throw new Error('Parameter cannot include "&" but found: ' + item);
+    }
+    Object.assign(result, querystring.parse(item));
+  }
+
+  return result;
+}

yarn.lock

@@ -8073,6 +8073,11 @@ query-string@^6.12.1:
     split-on-first "^1.0.0"
     strict-uri-encode "^2.0.0"
 
+querystring@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.1.tgz#40d77615bb09d16902a85c3e38aa8b5ed761c2dd"
+  integrity sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"