feat(formatjs): Support hash encodings in id interpolation pattern (#438)

FormatJs Babel plugin allows using any binary-to-text encoding supported by NodeJS Buffer. Currently, this includes "base64", "base64url", and "hex". See https://nodejs.org/api/buffer.html#buffers-and-character-encodings.

Add support for "hex" and "base64url" encodings. Use "hex" by default to match the behavior of the Babel plugin.

- Fixes #401

Author: vitalijusv

.changeset/tired-streets-grab.md

@@ -0,0 +1,5 @@
+---
+"@swc/plugin-formatjs": minor
+---
+
+add support for hex and base64url digest encodings in idInterpolationPattern placeholders

Cargo.lock

@@ -224,4 +224,30 @@ describe("formatjs swc plugin", () => {
 
     expect(output).toMatch(/id: "zL\/jyT\"/);
   });
+
+  it("should be able to use different encodings in interpolation", async () => {
+    const input = `
+      import { FormattedMessage } from 'react-intl';
+
+      export function Greeting() {
+        return (
+          <FormattedMessage
+            defaultMessage="Hello, World!"
+            description="Greeting message"
+          />
+        );
+      }
+    `;
+
+    const hexOutput = await transformCode(input, {
+      idInterpolationPattern: "[sha512:contenthash:hex:9]",
+    });
+
+    const base64UrlOutput = await transformCode(input, {
+      idInterpolationPattern: "[sha512:contenthash:base64url:12]",
+    });
+
+    expect(hexOutput).toMatch(/id: "[0-9a-f]{9}"/);
+    expect(base64UrlOutput).toMatch(/id: "[a-zA-Z0-9-_]{12}"/);
+  });
 });

packages/formatjs/__tests__/wasm.test.ts

@@ -16,6 +16,7 @@ custom_transform = []
 [dependencies]
 base64ct   = { workspace = true, features = ["alloc"] }
 digest     = { workspace = true }
+hex        = { workspace = true }
 once_cell  = { workspace = true }
 regex      = { workspace = true }
 serde      = { workspace = true, features = ["derive"] }

packages/formatjs/transform/Cargo.toml

@@ -4,7 +4,7 @@ use std::{
     path::Path,
 };
 
-use base64ct::{Base64, Encoding};
+use base64ct::{Base64, Base64UrlUnpadded, Encoding};
 use digest::DynDigest;
 use once_cell::sync::Lazy;
 use regex::{Captures, Regex as Regexp};
@@ -491,13 +491,14 @@ fn interpolate_name(filename: &str, interpolate_pattern: &str, content: &str) ->
     };
 
     let mut url = interpolate_pattern.to_string();
-    let r = Regexp::new(r#"\[(?:([^:\]]+):)?(?:hash|contenthash)(?::([a-z]+\d*))?(?::(\d+))?\]"#)
-        .unwrap();
+    let r =
+        Regexp::new(r#"\[(?:([^:\]]+):)?(?:hash|contenthash)(?::([a-z][a-z0-9]*))?(?::(\d+))?\]"#)
+            .unwrap();
 
     url = r
         .replace(url.as_str(), |cap: &Captures| {
             let hash_type = cap.get(1);
-            // let digest_type = cap.get(2);
+            let digest_encoding_type = cap.get(2);
             let max_length = cap.get(3);
 
             // TODO: support more hash_types than sha1 and sha512
@@ -507,12 +508,28 @@ fn interpolate_name(filename: &str, interpolate_pattern: &str, content: &str) ->
             };
             hasher.update(content.as_bytes());
             let hash = hasher.finalize();
-            let base64_hash = Base64::encode_string(&hash);
+            let encoded_hash = match digest_encoding_type.map(|m| m.as_str()) {
+                Some("base64") => Base64::encode_string(&hash),
+                Some("base64url") => Base64UrlUnpadded::encode_string(&hash),
+                Some("hex") | None => hex::encode(&hash),
+                Some(other) => {
+                    swc_core::plugin::errors::HANDLER.with(|handler| {
+                        handler.warn(&format!(
+                            "[React Intl] Unsupported encoding type `{}` in \
+                             `idInterpolationPattern`, must be one of `hex`, `base64`, or \
+                             `base64url`.",
+                            other
+                        ))
+                    });
+
+                    hex::encode(&hash)
+                }
+            };
 
             if let Some(max_length) = max_length {
-                base64_hash[0..max_length.as_str().parse::<usize>().unwrap()].to_string()
+                encoded_hash[0..max_length.as_str().parse::<usize>().unwrap()].to_string()
             } else {
-                base64_hash
+                encoded_hash
             }
         })
         .to_string();