Tiny benchmarking harness

benchmarks/splitDashedKey.ts

@@ -0,0 +1,31 @@
+/* eslint-disable no-console */
+import { Bench } from 'tinybench';
+
+import { splitDashedKey, splitDashedKeyIterative, splitDashedKeyRegex } from 'src/utils/splitDashedKey';
+
+const inputs: string[] = ['mycomponent-0-1', 'f81d4fae-7dec-11d0-a765-00a0c91e6bf6-100-200'];
+
+const bench = new Bench({
+  name: 'splitDashedKey benchmark',
+  time: 100,
+  setup: (_task, mode) => {
+    // Run the garbage collector before warmup at each cycle
+    if (mode === 'warmup' && typeof globalThis.gc === 'function') {
+      globalThis.gc();
+    }
+  },
+});
+
+for (const input of inputs) {
+  bench
+    .add(`[${input}] original`, () => splitDashedKey(input))
+    .add(`[${input}] regex`, () => splitDashedKeyRegex(input))
+    .add(`[${input}] iterative`, () => splitDashedKeyIterative(input));
+}
+
+bench.run().then(() => {
+  const table = bench.table();
+
+  console.log(bench.name);
+  console.table(table);
+});

benchmarks/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "include": ["*.ts"],
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "noUncheckedIndexedAccess": true,
+    "paths": {
+      "src/*": ["../src/*"],
+    },
+  }
+}

package.json

@@ -26,7 +26,8 @@
     "tsc": "yarn gen && tsc && tsc --project test/tsconfig.json",
     "tsc:watch": "yarn gen && tsc --watch",
     "tsc:watch:cypress": "yarn gen && tsc --watch --project test/tsconfig.json",
-    "lint": "yarn gen && eslint ."
+    "lint": "yarn gen && eslint .",
+    "bench": "tsx --expose_gc --tsconfig benchmarks/tsconfig.json benchmarks/${0}"
   },
   "devDependencies": {
     "@babel/core": "7.25.8",
@@ -112,10 +113,12 @@
     "source-map-loader": "5.0.0",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
+    "tinybench": "^3.0.3",
     "ts-jest": "29.2.5",
     "ts-loader": "9.5.1",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",
+    "tsx": "^4.19.2",
     "typescript-plugin-css-modules": "^5.1.0",
     "use-immer": "^0.10.0",
     "utility-types": "3.11.0",

src/utils/splitDashedKey.ts

@@ -46,6 +46,7 @@ export function splitDashedKey(componentId: string): SplitKey {
     depth: [],
   };
 }
+
 // If all you want is the baseId, use this instead
 // If you see this, feel free to optimize this further ;)
 export function getBaseComponentId(componentId: string): string {
@@ -64,3 +65,68 @@ export function getBaseComponentId(componentId: string): string {
 
   return componentId;
 }
+
+const regex = /(\p{L}+|[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})-(\d+)-(\d+)/u;
+export function splitDashedKeyRegex(componentId: string): SplitKey {
+  const result = componentId.match(regex);
+  if (!result || result.length < 4) {
+    return {
+      baseComponentId: componentId,
+      stringDepth: '',
+      stringDepthWithLeadingDash: '',
+      depth: [],
+    };
+  }
+
+  const stringDepth = `${result[2]}-${result[3]}`;
+  return {
+    baseComponentId: result[1],
+    stringDepth,
+    stringDepthWithLeadingDash: `-${stringDepth}`,
+    depth: [parseInt(result[2], 10), parseInt(result[3], 10)],
+  };
+}
+
+export function splitDashedKeyIterative(componentId: string): SplitKey {
+  let firstDepth: number | undefined;
+  let secondDepth: number | undefined;
+  let lastDashIndex = componentId.length;
+  for (let i = componentId.length - 1; i >= 0; i--) {
+    if (componentId[i] === '-') {
+      lastDashIndex = i;
+
+      if (secondDepth === undefined) {
+        secondDepth = parseInt(componentId.slice(i + 1), 10);
+        if (Number.isNaN(secondDepth)) {
+          throw new Error('Invalid componentId');
+        }
+      } else {
+        firstDepth = parseInt(componentId.slice(i + 1, lastDashIndex), 10);
+        if (Number.isNaN(secondDepth)) {
+          throw new Error('Invalid componentId');
+        }
+        if (i - 1 < 0) {
+          throw new Error('Invalid componentId');
+        }
+        break;
+      }
+    }
+  }
+
+  if (firstDepth === undefined || secondDepth === undefined) {
+    return {
+      baseComponentId: componentId,
+      stringDepth: '',
+      stringDepthWithLeadingDash: '',
+      depth: [],
+    };
+  }
+
+  const stringDepth = `${firstDepth}-${secondDepth}`;
+  return {
+    baseComponentId: componentId.slice(0, lastDashIndex),
+    stringDepth,
+    stringDepthWithLeadingDash: `-${stringDepth}`,
+    depth: [firstDepth, secondDepth],
+  };
+}