feat: String.matchAll polyfill

Author: vanska

.changeset/weak-points-brake.md

@@ -0,0 +1,5 @@
+---
+"typed-string-interpolation": patch
+---
+
+Polyfill for String.matchAll

.vscode/launch.json

@@ -0,0 +1,24 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      // https://github.com/microsoft/vscode-recipes/tree/main/debugging-jest-tests
+      // https://www.youtube.com/watch?v=_usf3xQ7wys
+      "type": "node",
+      "request": "launch",
+      "name": "Jest Current File",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "args": [
+        "--runTestsByPath",
+        "${relativeFile}",
+        "--config",
+        "jest.config.ts"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    }
+  ]
+}

README.md

@@ -14,8 +14,8 @@
 - Options to customize return, pattern matching and sanity checking
 - Both ES Module and CommonJS distributions available. Use anywhere!
 - Tiny footprint:
-  - ES Module: `0.354kB` (`0.481kB` unpacked)
-  - CommonJS: `0.589kB` (`0.977kB` unpacked)
+  - ES Module: `0.379B` (`0.533B` unpacked)
+  - CommonJS: `0.612B` (`1.03kB` unpacked)
 
 ## Motivation
 
@@ -144,8 +144,14 @@ Steps for contributing through a pull request:
   - `npm ci`
 - Make changes while running tests in watch mode
   - `npm run test:unit:all:watch`
+  - This project has a `.vscode/launch.json` file containing configuration for running Jest tests with the VSCode debugger which makes it simple to step through logic excecution. Steps to use VSCode debugger:
+    - Add a breakpoint to the source code
+    - Open a Jest unit test file (`*.test.ts`)
+    - Go to the VSCode debugger Tab (`shift` + `command` + `D` on MacOS) and select "Jest Current File" or optionally start the debug session from the command line (`shift` + `command` + `P` on MacOS) and type "Debug: Start debugging"
+    - VSCode should open a new terminal window and attach the Jest instance to the debugger
+    - Debugger should stop on the defined breakpoint in the source code
 - Once all changes are complete, create a new release with [changesets](https://github.com/changesets/changesets)
-  - `npm run changeset`
+  - `npm run create-release`
 - Commit and push changes to fork
 - Open a pull request against the fork
 - If the PR needs changes before a merge to `main` can be made, push more changes to the fork until the PR is approved

package.json

@@ -42,7 +42,7 @@
     "test": "npm run test:unit && npm run test:unit:types",
     "build": "tsup src/index.ts --format cjs,esm --dts --minify",
     "release": "npm run build && changeset publish",
-    "changeset": "changeset"
+    "create-release": "changeset"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

src/__tests__/stringInterpolation.test.ts

@@ -1,6 +1,6 @@
 import { stringInterpolation } from "../index"
 
-describe("interpolation()", () => {
+describe("stringInterpolation()", () => {
   // Throws
   test("Empty", () => {
     expect(() => {
@@ -43,7 +43,7 @@ describe("interpolation()", () => {
       )
     ).toStrictEqual(["Hello ", "world with variable"])
   })
-  test("Interpolate two variables", () => {
+  test.only("Interpolate two variables", () => {
     expect(
       stringInterpolation("Hello {{world}} and {{anotherVariable}}", {
         world: "world with variable",

src/index.ts

@@ -13,6 +13,21 @@ type StringInterpolationReturn<VariableValue extends any, OptionRaw> = Exclude<
     : string
   : (string | VariableValue)[]
 
+/**
+ * String.matchAll polyfill
+ * Used because no support in Safari <= 12
+ * @see https://caniuse.com/mdn-javascript_builtins_string_matchall
+ * @see https://stackoverflow.com/questions/58003217/how-to-use-the-string-prototype-matchall-polyfill
+ */
+function matchAllPolyfill(string: string, pattern: RegExp) {
+  let match
+  const matches = []
+
+  while ((match = pattern.exec(string))) matches.push(match)
+
+  return matches
+}
+
 /**
  * Takes in a string containing variables and an object containing variables for interpolation. Accepts options.
  * 
@@ -42,7 +57,7 @@ export function stringInterpolation<
   if (!string && sanity) throw "Empty string"
 
   // Find all variables within string
-  const stringVariables = [...string.matchAll(pattern)]
+  const stringVariables = matchAllPolyfill(string, pattern)
 
   // No variables => no need to interpolate
   if (!stringVariables[0])
@@ -55,9 +70,9 @@ export function stringInterpolation<
     if (stringVariables.length !== variableKeys.length)
       throw "Variable count mismatch"
     for (const regExpMatchArray of stringVariables) {
-      const variable = regExpMatchArray[1]
-      if (variable && !variableKeys.includes(variable))
-        throw `Variable '${variable}' not found`
+      const variableKeyInString = regExpMatchArray[1]
+      if (variableKeyInString && !variableKeys.includes(variableKeyInString))
+        throw `Variable '${variableKeyInString}' not found`
     }
   }