chore: update examples and benchmark

flamrdevs · Sep 15, 2023 · 5e3a07b · 5e3a07b
1 parent 9e0efaa
commit 5e3a07b
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -276,6 +276,42 @@ export const Example = () => {
         </p>
       </td>
     </tr>
+    <tr>
+      <td>
+        <span style="font-size: 1rem; font-weight: 500;">Astro + Tailwind Daisy UI</span>
+      </td>
+      <td>
+        <p align="center">
+          <a title="github" href="https://github.com/flamrdevs/klass-examples/tree/main/astro-tailwind-daisyui" target="_blank" style="display: inline-block; margin: 0px 4px;">
+            <img alt="github" src="https://none.deno.dev/ui/icon-button/simple?i=github" />
+          </a>
+          <a title="stackblitz" href="https://stackblitz.com/fork/github/flamrdevs/klass-examples/tree/main/astro-tailwind-daisyui?title=Klass%20Astro%20Tailwind%20Daisy%20UI" target="_blank" style="display: inline-block; margin: 0px 4px;">
+            <img alt="stackblitz" src="https://none.deno.dev/ui/icon-button/simple?c=blue&i=stackblitz" />
+          </a>
+          <a title="codesandbox" href="https://codesandbox.io/p/sandbox/github/flamrdevs/klass-examples/tree/main/astro-tailwind-daisyui" target="_blank" style="display: inline-block; margin: 0px 4px;">
+            <img alt="codesandbox" src="https://none.deno.dev/ui/icon-button/simple?i=codesandbox" />
+          </a>
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <span style="font-size: 1rem; font-weight: 500;">Astro + Tailwind Ripple UI</span>
+      </td>
+      <td>
+        <p align="center">
+          <a title="github" href="https://github.com/flamrdevs/klass-examples/tree/main/astro-tailwind-rippleui" target="_blank" style="display: inline-block; margin: 0px 4px;">
+            <img alt="github" src="https://none.deno.dev/ui/icon-button/simple?i=github" />
+          </a>
+          <a title="stackblitz" href="https://stackblitz.com/fork/github/flamrdevs/klass-examples/tree/main/astro-tailwind-rippleui?title=Klass%20Astro%20Tailwind%20Ripple%20UI" target="_blank" style="display: inline-block; margin: 0px 4px;">
+            <img alt="stackblitz" src="https://none.deno.dev/ui/icon-button/simple?c=blue&i=stackblitz" />
+          </a>
+          <a title="codesandbox" href="https://codesandbox.io/p/sandbox/github/flamrdevs/klass-examples/tree/main/astro-tailwind-rippleui" target="_blank" style="display: inline-block; margin: 0px 4px;">
+            <img alt="codesandbox" src="https://none.deno.dev/ui/icon-button/simple?i=codesandbox" />
+          </a>
+        </p>
+      </td>
+    </tr>
     <tr>
       <td>
         <span style="font-size: 1rem; font-weight: 500;">Preact + Tailwind</span>

diff --git a/docs/.vitepress/cache/deps/_metadata.json b/docs/.vitepress/cache/deps/_metadata.json
@@ -1,35 +1,35 @@
 {
-  "hash": "3b0268e2",
-  "browserHash": "7f499e9a",
+  "hash": "96b21796",
+  "browserHash": "e8c6522a",
   "optimized": {
     "vue": {
       "src": "../../../../node_modules/.pnpm/[email protected]/node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "782f1bb7",
+      "fileHash": "9c3218dc",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../../node_modules/.pnpm/@[email protected]/node_modules/@vue/devtools-api/lib/esm/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "b6ae6182",
+      "fileHash": "e02dba5b",
       "needsInterop": false
     },
     "vitepress > @vueuse/integrations/useFocusTrap": {
       "src": "../../../../node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vueuse/integrations/useFocusTrap.mjs",
       "file": "vitepress___@vueuse_integrations_useFocusTrap.js",
-      "fileHash": "4806641e",
+      "fileHash": "2e7ab31f",
       "needsInterop": false
     },
     "vitepress > mark.js/src/vanilla.js": {
       "src": "../../../../node_modules/.pnpm/[email protected]/node_modules/mark.js/src/vanilla.js",
       "file": "vitepress___mark__js_src_vanilla__js.js",
-      "fileHash": "b7d5186b",
+      "fileHash": "33c39d1b",
       "needsInterop": false
     },
     "vitepress > minisearch": {
       "src": "../../../../node_modules/.pnpm/[email protected]/node_modules/minisearch/dist/es/index.js",
       "file": "vitepress___minisearch.js",
-      "fileHash": "4e6945ac",
+      "fileHash": "8eb9d833",
       "needsInterop": false
     }
   },

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -72,6 +72,14 @@ export default {
             text: "Astro + Tailwind",
             link: "/examples/astro-tailwind",
           },
+          {
+            text: "Astro + Tailwind Daisy UI",
+            link: "/examples/astro-tailwind-daisyui",
+          },
+          {
+            text: "Astro + Tailwind Ripple UI",
+            link: "/examples/astro-tailwind-rippleui",
+          },
           {
             text: "Preact + Tailwind",
             link: "/examples/preact-tailwind",

diff --git a/docs/benchmark.md b/docs/benchmark.md
@@ -10,52 +10,56 @@ OS `x64 | win32 | 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz | 15.71GB`
 
 Node.js `v20.5.1`
 
-Testing on `Tuesday, 12 September 2023`.
+Testing on `Friday, 15 September 2023`.
 
 ## Variants
 
 | No  | Libs                                 | Ops/Sec |
 | --- | ------------------------------------ | ------: |
-| 1   | @klass/core                          | 1759378 |
-| 2   | classname-variants                   |  816012 |
-| 3   | @tw-classed/core                     |  694961 |
-| 4   | @klass/core + tailwind-merge         |  532937 |
-| 5   | @intrnl/cv                           |  528032 |
-| 6   | tailwind-variants(-tailwind-merge)   |  357239 |
-| 7   | @vanilla-extract/recipes (impostor!) |  308376 |
-| 8   | tailwind-variants(+tailwind-merge)   |  272108 |
-| 9   | cvu                                  |  267728 |
-| 10  | cva                                  |  233068 |
-| 11  | classname-manager                    |  206604 |
-| 12  | cvu + tailwind-merge                 |  182029 |
-| 13  | cva + tailwind-merge                 |  166480 |
-| 14  | pandacss (impostor!)                 |   67592 |
+| 1   | @klass/core                          | 2359262 |
+| 2   | onno                                 | 1589834 |
+| 3   | classname-variants                   | 1262852 |
+| 4   | @tw-classed/core                     |  886347 |
+| 5   | @klass/core + tailwind-merge         |  604750 |
+| 6   | @intrnl/cv                           |  603070 |
+| 7   | tailwind-variants(-tailwind-merge)   |  416523 |
+| 8   | tailwind-variants(+tailwind-merge)   |  353357 |
+| 9   | @vanilla-extract/recipes (impostor!) |  342620 |
+| 10  | cvu                                  |  295359 |
+| 11  | classname-manager                    |  275028 |
+| 12  | cva                                  |  273486 |
+| 13  | cvu + tailwind-merge                 |  207270 |
+| 14  | cva + tailwind-merge                 |  197720 |
+| 15  | stitches (impostor!)                 |   90523 |
+| 16  | pandacss (impostor!)                 |   79138 |
 
 ## Variants Compound
 
 | No  | Libs                                 | Ops/Sec |
 | --- | ------------------------------------ | ------: |
-| 1   | @klass/core                          |  562332 |
-| 2   | classname-variants                   |  513894 |
-| 3   | @intrnl/cv                           |  391631 |
-| 4   | @klass/core + tailwind-merge         |  292046 |
-| 5   | @vanilla-extract/recipes (impostor!) |  230901 |
-| 6   | @tw-classed/core                     |  123657 |
-| 7   | cva                                  |   89968 |
-| 8   | cva + tailwind-merge                 |   73457 |
-| 9   | cvu                                  |   45127 |
-| 10  | tailwind-variants(-tailwind-merge)   |   41689 |
-| 11  | cvu + tailwind-merge                 |   41412 |
-| 12  | tailwind-variants(+tailwind-merge)   |   40826 |
-| 13  | pandacss (impostor!)                 |   32647 |
+| 1   | @klass/core                          |  612640 |
+| 2   | classname-variants                   |  596251 |
+| 3   | onno                                 |  581667 |
+| 4   | @intrnl/cv                           |  478861 |
+| 5   | @klass/core + tailwind-merge         |  334563 |
+| 6   | @vanilla-extract/recipes (impostor!) |  279898 |
+| 7   | @tw-classed/core                     |  143751 |
+| 8   | cva                                  |  105350 |
+| 9   | cva + tailwind-merge                 |   89046 |
+| 10  | stitches (impostor!)                 |   75254 |
+| 11  | cvu                                  |   52748 |
+| 12  | tailwind-variants(-tailwind-merge)   |   52349 |
+| 13  | tailwind-variants(+tailwind-merge)   |   51280 |
+| 14  | cvu + tailwind-merge                 |   48585 |
+| 15  | pandacss (impostor!)                 |   40121 |
 
 ## Responsive Variants
 
 | No  | Libs                                   | Ops/Sec |
 | --- | -------------------------------------- | ------: |
-| 1   | @klass/core                            |  538246 |
-| 2   | @klass/core + tailwind-merge           |  398425 |
-| 3   | tailwind-variants(+tailwind-merge)     |  105391 |
-| 4   | tailwind-variants(-tailwind-merge)     |  103567 |
-| 5   | @vanilla-extract/sprinkles (impostor!) |   75549 |
-| 6   | pandacss (impostor!)                   |   42979 |
+| 1   | @klass/core                            |  649255 |
+| 2   | @klass/core + tailwind-merge           |  486601 |
+| 3   | tailwind-variants(-tailwind-merge)     |  124291 |
+| 4   | tailwind-variants(+tailwind-merge)     |  124171 |
+| 5   | @vanilla-extract/sprinkles (impostor!) |   93788 |
+| 6   | pandacss (impostor!)                   |   49954 |
diff --git a/docs/examples.md b/docs/examples.md
@@ -32,6 +32,42 @@
         </p>
       </td>
     </tr>
+    <tr>
+      <td>
+        <a href="/examples/astro-tailwind-daisyui" style="font-size: 1rem; font-weight: 500;">Astro + Tailwind Daisy UI</a>
+      </td>
+      <td>
+        <p align="center">
+          <a title="github" href="https://github.com/flamrdevs/klass-examples/tree/main/astro-tailwind-daisyui" target="_blank" style="display: inline-block; margin: 0px 4px;">
+            <img alt="github" src="https://none.deno.dev/ui/icon-button/simple?i=github" />
+          </a>
+          <a title="stackblitz" href="https://stackblitz.com/fork/github/flamrdevs/klass-examples/tree/main/astro-tailwind-daisyui?title=Klass%20Astro%20Tailwind%20Daisy%20UI" target="_blank" style="display: inline-block; margin: 0px 4px;">
+            <img alt="stackblitz" src="https://none.deno.dev/ui/icon-button/simple?c=blue&i=stackblitz" />
+          </a>
+          <a title="codesandbox" href="https://codesandbox.io/p/sandbox/github/flamrdevs/klass-examples/tree/main/astro-tailwind-daisyui" target="_blank" style="display: inline-block; margin: 0px 4px;">
+            <img alt="codesandbox" src="https://none.deno.dev/ui/icon-button/simple?i=codesandbox" />
+          </a>
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/examples/astro-tailwind-rippleui" style="font-size: 1rem; font-weight: 500;">Astro + Tailwind Ripple UI</a>
+      </td>
+      <td>
+        <p align="center">
+          <a title="github" href="https://github.com/flamrdevs/klass-examples/tree/main/astro-tailwind-rippleui" target="_blank" style="display: inline-block; margin: 0px 4px;">
+            <img alt="github" src="https://none.deno.dev/ui/icon-button/simple?i=github" />
+          </a>
+          <a title="stackblitz" href="https://stackblitz.com/fork/github/flamrdevs/klass-examples/tree/main/astro-tailwind-rippleui?title=Klass%20Astro%20Tailwind%20Ripple%20UI" target="_blank" style="display: inline-block; margin: 0px 4px;">
+            <img alt="stackblitz" src="https://none.deno.dev/ui/icon-button/simple?c=blue&i=stackblitz" />
+          </a>
+          <a title="codesandbox" href="https://codesandbox.io/p/sandbox/github/flamrdevs/klass-examples/tree/main/astro-tailwind-rippleui" target="_blank" style="display: inline-block; margin: 0px 4px;">
+            <img alt="codesandbox" src="https://none.deno.dev/ui/icon-button/simple?i=codesandbox" />
+          </a>
+        </p>
+      </td>
+    </tr>
     <tr>
       <td>
         <a href="/examples/preact-tailwind" style="font-size: 1rem; font-weight: 500;">Preact + Tailwind</a>

diff --git a/docs/examples/astro-tailwind-daisyui.md b/docs/examples/astro-tailwind-daisyui.md
@@ -0,0 +1,34 @@
+---
+aside: false
+---
+
+<p>
+  <a title="astro" href="https://astro.build" target="_blank" style="display: inline-block; margin: 0px 4px;">
+    <img alt="astro" src="https://none.deno.dev/ui/icon-button/simple?c=orange&i=astro" />
+  </a>
+  <a title="tailwindcss" href="https://tailwindcss.com" target="_blank" style="display: inline-block; margin: 0px 4px;">
+    <img alt="tailwindcss" src="https://none.deno.dev/ui/icon-button/simple?c=cyan&i=tailwindcss" />
+  </a>
+  <a title="typescript" href="https://www.typescriptlang.org" target="_blank" style="display: inline-block; margin: 0px 4px;">
+    <img alt="typescript" src="https://none.deno.dev/ui/icon-button/simple?c=blue&i=typescript" />
+  </a>
+  <a title="vite" href="https://vitejs.dev" target="_blank" style="display: inline-block; margin: 0px 4px;">
+    <img alt="vite" src="https://none.deno.dev/ui/icon-button/simple?c=violet&i=vite" />
+  </a>
+</p>
+
+<p>
+  <a title="github" href="https://github.com/flamrdevs/klass-examples/tree/main/astro-tailwind-daisyui" target="_blank" style="display: inline-block; margin: 0px 4px;">
+    <img alt="github" src="https://none.deno.dev/ui/button/simple?i=github&e=Open in GitHub" hspace="1">
+  </a>
+</p>
+<p>
+  <a title="stackblitz" href="https://stackblitz.com/fork/github/flamrdevs/klass-examples/tree/main/astro-tailwind-daisyui?title=Klass%20Astro%20Tailwind%20Daisy%20UI" target="_blank" style="display: inline-block; margin: 0px 4px;">
+    <img alt="stackblitz" src="https://none.deno.dev/ui/button/simple?c=blue&i=stackblitz&e=Open in StackBlitz" hspace="1">
+  </a>
+</p>
+<p>
+  <a title="codesandbox" href="https://codesandbox.io/p/sandbox/github/flamrdevs/klass-examples/tree/main/astro-tailwind-daisyui" target="_blank" style="display: inline-block; margin: 0px 4px;">
+    <img alt="codesandbox" src="https://none.deno.dev/ui/button/simple?i=codesandbox&e=Open in CodeSandbox" hspace="1">
+  </a>
+</p>
diff --git a/docs/examples/astro-tailwind-rippleui.md b/docs/examples/astro-tailwind-rippleui.md
@@ -0,0 +1,34 @@
+---
+aside: false
+---
+
+<p>
+  <a title="astro" href="https://astro.build" target="_blank" style="display: inline-block; margin: 0px 4px;">
+    <img alt="astro" src="https://none.deno.dev/ui/icon-button/simple?c=orange&i=astro" />
+  </a>
+  <a title="tailwindcss" href="https://tailwindcss.com" target="_blank" style="display: inline-block; margin: 0px 4px;">
+    <img alt="tailwindcss" src="https://none.deno.dev/ui/icon-button/simple?c=cyan&i=tailwindcss" />
+  </a>
+  <a title="typescript" href="https://www.typescriptlang.org" target="_blank" style="display: inline-block; margin: 0px 4px;">
+    <img alt="typescript" src="https://none.deno.dev/ui/icon-button/simple?c=blue&i=typescript" />
+  </a>
+  <a title="vite" href="https://vitejs.dev" target="_blank" style="display: inline-block; margin: 0px 4px;">
+    <img alt="vite" src="https://none.deno.dev/ui/icon-button/simple?c=violet&i=vite" />
+  </a>
+</p>
+
+<p>
+  <a title="github" href="https://github.com/flamrdevs/klass-examples/tree/main/astro-tailwind-rippleui" target="_blank" style="display: inline-block; margin: 0px 4px;">
+    <img alt="github" src="https://none.deno.dev/ui/button/simple?i=github&e=Open in GitHub" hspace="1">
+  </a>
+</p>
+<p>
+  <a title="stackblitz" href="https://stackblitz.com/fork/github/flamrdevs/klass-examples/tree/main/astro-tailwind-rippleui?title=Klass%20Astro%20Tailwind%20Ripple%20UI" target="_blank" style="display: inline-block; margin: 0px 4px;">
+    <img alt="stackblitz" src="https://none.deno.dev/ui/button/simple?c=blue&i=stackblitz&e=Open in StackBlitz" hspace="1">
+  </a>
+</p>
+<p>
+  <a title="codesandbox" href="https://codesandbox.io/p/sandbox/github/flamrdevs/klass-examples/tree/main/astro-tailwind-rippleui" target="_blank" style="display: inline-block; margin: 0px 4px;">
+    <img alt="codesandbox" src="https://none.deno.dev/ui/button/simple?i=codesandbox&e=Open in CodeSandbox" hspace="1">
+  </a>
+</p>