feat(chore): performance (#18)

* feat(core): hugely improve performance better than CVA with responsive * feat(documentation): update documentation
busbud · Sep 10, 2024 · eef64b5 · eef64b5
1 parent 3bdfc57
commit eef64b5
Show file tree

Hide file tree

Showing 32 changed files with 560 additions and 643 deletions.
diff --git a/packages/benchmark/benchmark.mjs b/packages/benchmark/benchmark.mjs
@@ -3,13 +3,14 @@ import Benchmark from "benchmark";
 const suite = new Benchmark.Suite();
 
 import * as CVA from "./configs/cva.mjs";
-import * as TAILWINDBUDDY from "./configs/tailwindbuddy.mjs";
-import * as TAILWINDBUDDYPERFOFF from "./configs/tailwindbuddy-performance-off.mjs";
+import {
+  noSlotsAndCompoundNoTwMergeNoResponsive,
+  slotsAndCompoundNoTwMergeNoResponsive,
+} from "./configs/tailwindbuddy.mjs";
 import * as TV from "./configs/tv.mjs";
 import { twMerge } from "./configs/twMerge.config.mjs";
 
 suite
-
   // TV - slots false - twMerge no - compound yes
   .add("TV - slots false - twMerge no - compound yes", function () {
     TV.noSlotsAndCompoundNoTwMergeNoResponsive.avatar({ size: "md" });
@@ -18,18 +19,10 @@ suite
     CVA.noSlotsAndCompoundNoTwMergeNoResponsive.avatar({ size: "md" });
   })
   .add("TAILWINDBUDDY - slots false - twMerge no - compound yes", function () {
-    TAILWINDBUDDY.noSlotsAndCompoundNoTwMergeNoResponsive.avatar.root({
+    noSlotsAndCompoundNoTwMergeNoResponsive.avatar.root({
       size: "md",
     });
   })
-  .add(
-    "TAILWINDBUDDYPERFOFF - slots false - twMerge no - compound yes",
-    function () {
-      TAILWINDBUDDYPERFOFF.noSlotsAndCompoundNoTwMergeNoResponsive.avatar.root({
-        size: "md",
-      });
-    }
-  )
 
   //  TV - slots false - twMerge yes - compound yes
   .add("TV - slots false - twMerge yes - compound yes", function () {
@@ -40,23 +33,11 @@ suite
   })
   .add("TAILWINDBUDDY - slots false - twMerge yes - compound yes", function () {
     twMerge(
-      TAILWINDBUDDY.noSlotsAndCompoundNoTwMergeNoResponsive.avatar.root({
+      slotsAndCompoundNoTwMergeNoResponsive.avatar.root({
         size: "md",
       })
     );
   })
-  .add(
-    "TAILWINDBUDDYPERFOFF - slots false - twMerge yes - compound yes",
-    function () {
-      twMerge(
-        TAILWINDBUDDYPERFOFF.noSlotsAndCompoundNoTwMergeNoResponsive.avatar.root(
-          {
-            size: "md",
-          }
-        )
-      );
-    }
-  )
 
   .on("cycle", function (event) {
     console.log(String(event.target));

diff --git a/packages/benchmark/configs/tailwindbuddy-performance-off.mjs b/packages/benchmark/configs/tailwindbuddy-performance-off.mjs
diff --git a/packages/benchmark/configs/tailwindbuddy.mjs b/packages/benchmark/configs/tailwindbuddy.mjs
@@ -1,18 +1,18 @@
 import { setupCompose } from "@busbud/tailwind-buddy";
 
-const compose = setupCompose(["md", "lg", "xl", "2xl"]);
+export const compose = setupCompose(["md", "lg", "xl", "2xl"]);
 
-const options = {
+export const options = {
   slots: {
-    root: "relative flex shrink-0 overflow-hidden rounded-full",
+    root: ["relative", "flex", "shrink-0", "overflow-hidden", "rounded-full"],
   },
   variants: {
     size: {
-      xs: "h-6 w-6",
-      sm: "h-8 w-8",
-      md: "h-10 w-10",
-      lg: "h-12 w-12",
-      xl: "h-14 w-14",
+      xs: ["h-6", "w-6"],
+      sm: ["h-8", "w-8"],
+      md: ["h-10", "w-10"],
+      lg: ["h-12", "w-12"],
+      xl: ["h-14", "w-14"],
     },
   },
   defaultVariants: {
@@ -23,13 +23,13 @@ const options = {
       conditions: {
         size: ["xs", "sm"],
       },
-      class: "ring-1",
+      class: ["ring-1"],
     },
     {
       conditions: {
         size: ["md", "lg", "xl", "2xl"],
       },
-      class: "ring-2",
+      class: ["ring-2"],
     },
   ],
 };

diff --git a/packages/benchmark/package.json b/packages/benchmark/package.json
@@ -11,11 +11,11 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@busbud/tailwind-buddy": "workspace:*",
     "benchmark": "^2.1.4",
     "class-variance-authority": "^0.7.0",
-    "@busbud/tailwind-buddy": "workspace:*",
     "tailwind-merge": "^2.3.0",
     "tailwind-variants": "^0.2.1",
-    "vitest": "^1.4.0"
+    "vitest": "^1.6.0"
   }
 }