feat: simplify AST selector to work with compiled code (#16)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faire/babel-plugin-formatjs-localized-bundle",
-  "version": "2.1.5",
+  "version": "2.2.0",
   "main": "dist/src/index.js",
   "author": "Paul Salvatore <[email protected]>",
   "license": "MIT",
@@ -57,5 +57,6 @@
       "@semantic-release/npm",
       "@semantic-release/github"
     ]
-  }
+  },
+  "dependencies": {}
 }

src/__fixtures__/pre-compiled-nextjs/code.js

@@ -0,0 +1,63 @@
+"use strict";
+(exports.id = 885),
+  (exports.ids = [885, 26456]),
+  (exports.modules = {
+    359692: (e, t, n) => {
+      let I = (e) => {
+        let { strictLocalize: t } = (0, i.Pi)(),
+          {
+            backgroundColor: n = o.QY.surface.subdued,
+            content: E,
+            contentColor: _ = o.QY.text.default,
+            notificationDot: a,
+          } = e,
+          l = t({
+            id: "J8xC2I",
+            defaultMessage: [{ type: 0, value: "with notification" }],
+          });
+        return (0, r.jsxs)(A, {
+          backgroundColor: n,
+          contentColor: _,
+          "data-test-id": e["data-test-id"],
+          className: e.className,
+          children: [
+            E > 99 ? "99+" : E,
+            a
+              ? (0, r.jsxs)(r.Fragment, {
+                  children: [
+                    (0, r.jsx)(R, { children: l }),
+                    (0, r.jsx)(T, { children: (0, r.jsx)(O.P, {}) }),
+                  ],
+                })
+              : null,
+          ],
+        });
+      };
+    },
+    200077: (t, e, i) => {
+      let f = class extends m.Component {
+        constructor(t) {
+          super(t),
+            (this.updateCustomOptionReaction = (0, h.reaction)(
+              () => this.props.value,
+              (t) => {
+                !this.isValueInOptions(t) &&
+                  this.props.shouldUseCustomOption &&
+                  ((this.customOption.value = t),
+                  (this.customOption.label = this.customOptionLabel),
+                  (this.hasEditedCustomOption = !0));
+              }
+            )),
+            (this.customQuantitySelection = !1),
+            (this.hasEditedCustomOption = !1),
+            (this.customOption = {
+              value: "",
+              label: this.props.strictLocalize({
+                id: "dhKCUV",
+                defaultMessage: [{ type: 0, value: "Custom Quantity" }],
+              }),
+            });
+        }
+      };
+    },
+  });

src/__fixtures__/pre-compiled-nextjs/mockMessages.js

@@ -0,0 +1,10 @@
+module.exports = {
+  J8xC2I: {
+    type: 0,
+    value: "mit Benachrichtigung",
+  },
+  dhKCUV: {
+    type: 0,
+    value: "Individuelle Menge",
+  },
+};

src/__tests__/__snapshots__/index.test.js.snap

@@ -142,6 +142,64 @@ var StubImperativeLocalizationComponent = function StubImperativeLocalizationCom
 };"
 `;
 
+exports[`babel-plugin-formatjs-localized-bundle transformers code that has been compiled by nextjs 1`] = `
+"\\"use strict\\";
+
+exports.id = 885, exports.ids = [885, 26456], exports.modules = {
+  359692: (e, t, n) => {
+    var I = e => {
+      var {
+          strictLocalize: t
+        } = (0, i.Pi)(),
+        {
+          backgroundColor: n = o.QY.surface.subdued,
+          content: E,
+          contentColor: _ = o.QY.text.default,
+          notificationDot: a
+        } = e,
+        l = t({
+          id: \\"J8xC2I\\",
+          defaultMessage: {
+            \\"type\\": 0,
+            \\"value\\": \\"mit Benachrichtigung\\"
+          }
+        });
+      return (0, r.jsxs)(A, {
+        backgroundColor: n,
+        contentColor: _,
+        \\"data-test-id\\": e[\\"data-test-id\\"],
+        className: e.className,
+        children: [E > 99 ? \\"99+\\" : E, a ? (0, r.jsxs)(r.Fragment, {
+          children: [(0, r.jsx)(R, {
+            children: l
+          }), (0, r.jsx)(T, {
+            children: (0, r.jsx)(O.P, {})
+          })]
+        }) : null]
+      });
+    };
+  },
+  200077: (t, e, i) => {
+    var f = class extends m.Component {
+      constructor(t) {
+        super(t), this.updateCustomOptionReaction = (0, h.reaction)(() => this.props.value, t => {
+          !this.isValueInOptions(t) && this.props.shouldUseCustomOption && (this.customOption.value = t, this.customOption.label = this.customOptionLabel, this.hasEditedCustomOption = !0);
+        }), this.customQuantitySelection = !1, this.hasEditedCustomOption = !1, this.customOption = {
+          value: \\"\\",
+          label: this.props.strictLocalize({
+            id: \\"dhKCUV\\",
+            defaultMessage: {
+              \\"type\\": 0,
+              \\"value\\": \\"Individuelle Menge\\"
+            }
+          })
+        };
+      }
+    };
+  }
+};"
+`;
+
 exports[`babel-plugin-formatjs-localized-bundle transpiles all types of messages 1`] = `
 "var x = /*#__PURE__*/React.createElement(\\"div\\", null, /*#__PURE__*/React.createElement(LocalMsg, {
   id: \\"AST\\",

src/__tests__/index.test.js

@@ -241,4 +241,51 @@ describe("babel-plugin-formatjs-localized-bundle", () => {
       ).code
     ).toMatchSnapshot();
   });
+
+  test("transformers code that has been compiled by nextjs", function () {
+    expect(
+      transformFileSync(
+        path.resolve(
+          __dirname,
+          "..",
+          "__fixtures__",
+          "pre-compiled-nextjs",
+          "code.js"
+        ),
+        {
+          presets: [
+            [
+              "@babel/preset-env",
+              {
+                targets: {
+                  node: "14",
+                  esmodules: true,
+                },
+                modules: false,
+                useBuiltIns: false,
+                ignoreBrowserslistConfig: true,
+              },
+            ],
+            "@babel/preset-react",
+          ],
+          plugins: [
+            [
+              plugin,
+              {
+                translatedMessages: require(path.resolve(
+                  __dirname,
+                  "..",
+                  "__fixtures__",
+                  "pre-compiled-nextjs",
+                  "mockMessages.js"
+                )),
+                additionalComponentNames: ["LocalMsg"],
+                additionalFunctionNames: ["localize"],
+              },
+            ],
+          ],
+        }
+      ).code
+    ).toMatchSnapshot();
+  });
 });

src/index.js

@@ -16,20 +16,9 @@ module.exports = (babel, options) => {
       ? require(options.translatedMessages)
       : options.translatedMessages;
 
-  const replaceMessageInPath = (path, argPosition) => {
-    const args = path.get("arguments");
-    if (!args) {
-      return;
-    }
-    const arg = args[argPosition];
-    if (!arg) {
-      return;
-    }
-    if (!arg.has("properties")) {
-      return;
-    }
-    const properties = arg.get("properties");
-    const defaultMessageProp = properties.find(
+  const replaceMessageInPath = (path) => {
+    const properties = path.get("properties");
+    const defaultMessageProp = properties?.find(
       (p) =>
         p.has("key") && p.get("key").isIdentifier({ name: "defaultMessage" })
     );
@@ -69,48 +58,21 @@ module.exports = (babel, options) => {
   return {
     name: "babel-plugin-formatjs-localized-bundle",
     visitor: {
-      CallExpression(path) {
-        if (!path) {
-          return;
-        }
-
-        const { node } = path;
-        if (
-          !(
-            node.callee &&
-            (additionalFunctionName.includes(node.callee.name) ||
-              (node.callee.property &&
-                functionNames.includes(node.callee.property.name)) ||
-              // This check handles pre-compiled babel code, used to extract
-              // messages from our shared dependencies
-              (node.callee.expressions &&
-                node.callee.expressions.some(
-                  (e) =>
-                    e.property &&
-                    additionalFunctionName.includes(e.property.name)
-                )))
-          )
-        ) {
-          return;
-        }
-
-        replaceMessageInPath(path, 0);
-      },
-
       Identifier(path) {
         if (!path) {
           return;
         }
 
-        if (!componentNames.includes(path.node.name)) {
+        const { node } = path;
+        if (node.name !== "defaultMessage") {
           return;
         }
 
-        const parent = path.findParent((i) => i);
+        const parent = path.findParent((i) => i)?.findParent((i) => i);
         if (!parent) {
           return;
         }
-        replaceMessageInPath(parent, 1);
+        replaceMessageInPath(parent);
       },
     },
   };

yarn.lock

@@ -2503,9 +2503,9 @@ camelcase@^6.2.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30001400:
-  version "1.0.30001431"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz#e7c59bd1bc518fae03a4656be442ce6c4887a795"
-  integrity sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==
+  version "1.0.30001579"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz"
+  integrity sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==
 
 cardinal@^2.1.1:
   version "2.1.1"