perf(): rm runtime RegExp usages

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- perf(): rm runtime RegExp usages [#9802](https://github.com/fabricjs/fabric.js/pull/9802)
 - fix(Canvas): Fix searchPossibleTargets for non-interactive nested targets [#9762](https://github.com/fabricjs/fabric.js/pull/9762)
 - test(): Rename svg tests [#9775](https://github.com/fabricjs/fabric.js/pull/9775)
 - refactor(): `_findTargetCorner` is now called `findControl` and returns the key and the control and the coordinates [#9668](https://github.com/fabricjs/fabric.js/pull/9668)

src/Shadow.ts

@@ -31,15 +31,14 @@ import { rotateVector } from './util/misc/vectors';
 
 const shadowOffsetRegex = '(-?\\d+(?:\\.\\d*)?(?:px)?(?:\\s?|$))?';
 
-const reOffsetsAndBlur = () =>
-  new RegExp(
-    '(?:\\s|^)' +
-      shadowOffsetRegex +
-      shadowOffsetRegex +
-      '(' +
-      reNum +
-      '?(?:px)?)?(?:\\s?|$)(?:$|\\s)'
-  );
+const reOffsetsAndBlur = new RegExp(
+  '(?:\\s|^)' +
+    shadowOffsetRegex +
+    shadowOffsetRegex +
+    '(' +
+    reNum +
+    '?(?:px)?)?(?:\\s?|$)(?:$|\\s)'
+);
 
 export const shadowDefaultValues: Partial<TClassProperties<Shadow>> = {
   color: 'rgb(0,0,0)',
@@ -142,11 +141,10 @@ export class Shadow {
    */
   static parseShadow(value: string) {
     const shadowStr = value.trim(),
-      regex = reOffsetsAndBlur(),
       [, offsetX = 0, offsetY = 0, blur = 0] = (
-        regex.exec(shadowStr) || []
+        reOffsetsAndBlur.exec(shadowStr) || []
       ).map((value) => parseFloat(value) || 0),
-      color = (shadowStr.replace(regex, '') || 'rgb(0,0,0)').trim();
+      color = (shadowStr.replace(reOffsetsAndBlur, '') || 'rgb(0,0,0)').trim();
 
     return {
       color,

src/filters/BaseFilter.ts

@@ -16,6 +16,8 @@ import {
 import type { Abortable } from '../typedefs';
 import { FabricError } from '../util/internals/console';
 
+const regex = new RegExp(highPsourceCode, 'g');
+
 export class BaseFilter {
   /**
    * Filter type
@@ -84,7 +86,7 @@ export class BaseFilter {
     } = getEnv();
     if (GLPrecision !== 'highp') {
       fragmentSource = fragmentSource.replace(
-        new RegExp(highPsourceCode, 'g'),
+        regex,
         highPsourceCode.replace('highp', GLPrecision)
       );
     }

src/parser/getSvgRegex.ts

@@ -1,3 +1,6 @@
+/**
+ * Do not use in runtime
+ */
 export function getSvgRegex(arr: string[]) {
   return new RegExp('^(' + arr.join('|') + ')\\b', 'i');
 }

src/parser/parseTransformAttribute.ts

@@ -24,8 +24,9 @@ const transforms = `(?:${transform}*)`;
 const transformList = String.raw`^\s*(?:${transforms}?)\s*$`;
 // http://www.w3.org/TR/SVG/coords.html#TransformAttribute
 const reTransformList = new RegExp(transformList);
+const reTransform = new RegExp(transform);
+const reTransformAll = new RegExp(transform, 'g');
 // == end transform regexp
-const reTransform = new RegExp(transform, 'g');
 
 /**
  * Parses "transform" attribute, returning an array of values
@@ -53,8 +54,8 @@ export function parseTransformAttribute(attributeValue: string): TMat2D {
     return [...iMatrix];
   }
 
-  for (const match of attributeValue.matchAll(reTransform)) {
-    const transformMatch = new RegExp(transform).exec(match[0]);
+  for (const match of attributeValue.matchAll(reTransformAll)) {
+    const transformMatch = reTransform.exec(match[0]);
     if (!transformMatch) {
       continue;
     }

src/util/internals/cleanupSvgAttribute.ts

@@ -1,8 +1,10 @@
 import { reNum } from '../../parser/constants';
 
+const regex = new RegExp(`(${reNum})`, 'gi');
+
 export const cleanupSvgAttribute = (attributeValue: string) =>
   attributeValue
-    .replace(new RegExp(`(${reNum})`, 'gi'), ' $1 ')
+    .replace(regex, ' $1 ')
     // replace annoying commas and arbitrary whitespace with single spaces
     .replace(/,/gi, ' ')
     .replace(/\s+/gi, ' ');

src/util/path/index.ts

@@ -829,6 +829,9 @@ export const getPointOnPath = (
   }
 };
 
+const rePathCmdAll = new RegExp(rePathCommand, 'gi');
+const rePathCmd = new RegExp(rePathCommand, 'i');
+
 /**
  *
  * @param {string} pathString
@@ -847,41 +850,31 @@ export const parsePath = (pathString: string): TComplexPathData => {
   pathString = cleanupSvgAttribute(pathString);
 
   const res: TComplexPathData = [];
-  for (const match of pathString.matchAll(new RegExp(rePathCommand, 'gi'))) {
-    let matchStr = match[0];
+  for (let [match] of pathString.matchAll(rePathCmdAll)) {
     const chain: TComplexPathData = [];
     let paramArr: RegExpExecArray | null;
     do {
-      paramArr = new RegExp(rePathCommand, 'i').exec(matchStr);
+      paramArr = rePathCmd.exec(match);
       if (!paramArr) {
         break;
       }
       // ignore undefined match groups
-      const filteredGroups = paramArr.filter((g) => g);
+      const filteredGroups = paramArr.filter(Boolean);
       // remove the first element from the match array since it's just the whole command
-      filteredGroups.shift();
+      const value = filteredGroups.shift();
       // if we can't parse the number, just interpret it as a string
       // (since it's probably the path command)
-      const command = filteredGroups.map((g) => {
+      const command: (string | number)[] = [];
+      for (const g of filteredGroups) {
         const numParse = Number.parseFloat(g);
-        if (Number.isNaN(numParse)) {
-          return g;
-        } else {
-          return numParse;
-        }
-      });
-      chain.push(command as any);
+        command.push(Number.isNaN(numParse) ? g : numParse);
+      }
+      chain.push(command as TComplexParsedCommand);
       // stop now if it's a z command
       if (filteredGroups.length <= 1) {
         break;
       }
-      // remove the last part of the chained command
-      filteredGroups.shift();
-      // ` ?` is to support commands with optional spaces between flags
-      matchStr = matchStr.replace(
-        new RegExp(`${filteredGroups.join(' ?')} ?$`),
-        ''
-      );
+      match = match.slice(value ? value.length : 0);
     } while (paramArr);
     // add the chain, convert multiple m's to l's in the process
     chain.reverse().forEach((c, idx) => {