chore: update examples and benchmark

flamrdevs · Sep 22, 2023 · 4aed667 · 4aed667
1 parent 0d1ebc0
commit 4aed667
Show file tree

Hide file tree

Showing 20 changed files with 215 additions and 84 deletions.
diff --git a/README.md b/README.md
@@ -660,6 +660,60 @@ export default App;
         </div>
       </td>
     </tr>
+    <tr>
+      <td>
+        Astro + Uno
+      </td>
+      <td>
+        <div style="display: flex; gap: 0.2rem;">
+          <a title="github" href="https://github.com/flamrdevs/klass-examples/tree/main/astro-uno">
+            <picture>
+              <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/icon-button/simple?t=dark&i=github">
+              <img alt="github" src="https://none.deno.dev/ui/icon-button/simple?t=light&i=github">
+            </picture>
+          </a>
+          <a title="stackblitz" href="https://stackblitz.com/fork/github/flamrdevs/klass-examples/tree/main/astro-uno?title=Klass%20Astro%20Uno">
+            <picture>
+              <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/icon-button/simple?c=blue&t=dark&i=stackblitz">
+              <img alt="stackblitz" src="https://none.deno.dev/ui/icon-button/simple?c=blue&t=light&i=stackblitz">
+            </picture>
+          </a>
+          <a title="codesandbox" href="https://codesandbox.io/p/sandbox/github/flamrdevs/klass-examples/tree/main/astro-uno">
+            <picture>
+              <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/icon-button/simple?c=slate&t=dark&i=codesandbox">
+              <img alt="codesandbox" src="https://none.deno.dev/ui/icon-button/simple?c=slate&t=light&i=codesandbox">
+            </picture>
+          </a>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Astro + Master
+      </td>
+      <td>
+        <div style="display: flex; gap: 0.2rem;">
+          <a title="github" href="https://github.com/flamrdevs/klass-examples/tree/main/astro-master">
+            <picture>
+              <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/icon-button/simple?t=dark&i=github">
+              <img alt="github" src="https://none.deno.dev/ui/icon-button/simple?t=light&i=github">
+            </picture>
+          </a>
+          <a title="stackblitz" href="https://stackblitz.com/fork/github/flamrdevs/klass-examples/tree/main/astro-master?title=Klass%20Astro%20Master">
+            <picture>
+              <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/icon-button/simple?c=blue&t=dark&i=stackblitz">
+              <img alt="stackblitz" src="https://none.deno.dev/ui/icon-button/simple?c=blue&t=light&i=stackblitz">
+            </picture>
+          </a>
+          <a title="codesandbox" href="https://codesandbox.io/p/sandbox/github/flamrdevs/klass-examples/tree/main/astro-master">
+            <picture>
+              <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/icon-button/simple?c=slate&t=dark&i=codesandbox">
+              <img alt="codesandbox" src="https://none.deno.dev/ui/icon-button/simple?c=slate&t=light&i=codesandbox">
+            </picture>
+          </a>
+        </div>
+      </td>
+    </tr>
     <tr>
       <td>
         Preact + Master

diff --git a/docs/.vitepress/cache/deps/_metadata.json b/docs/.vitepress/cache/deps/_metadata.json
diff --git a/docs/.vitepress/cache/deps/chunk-67UUJLDS.js → ...ache/deps_temp_37a31b7c/chunk-67UUJLDS.js b/docs/.vitepress/cache/deps/chunk-67UUJLDS.js → ...ache/deps_temp_37a31b7c/chunk-67UUJLDS.js
diff --git a/...itepress/cache/deps/chunk-67UUJLDS.js.map → .../deps_temp_37a31b7c/chunk-67UUJLDS.js.map b/...itepress/cache/deps/chunk-67UUJLDS.js.map → .../deps_temp_37a31b7c/chunk-67UUJLDS.js.map
diff --git a/docs/.vitepress/cache/deps/package.json → ...ess/cache/deps_temp_37a31b7c/package.json b/docs/.vitepress/cache/deps/package.json → ...ess/cache/deps_temp_37a31b7c/package.json
diff --git a/...che/deps/vitepress___@vue_devtools-api.js → ...37a31b7c/vitepress___@vue_devtools-api.js b/...che/deps/vitepress___@vue_devtools-api.js → ...37a31b7c/vitepress___@vue_devtools-api.js
diff --git a/...deps/vitepress___@vue_devtools-api.js.map → ...1b7c/vitepress___@vue_devtools-api.js.map b/...deps/vitepress___@vue_devtools-api.js.map → ...1b7c/vitepress___@vue_devtools-api.js.map
diff --git a/...ss___@vueuse_integrations_useFocusTrap.js → ...ss___@vueuse_integrations_useFocusTrap.js b/...ss___@vueuse_integrations_useFocusTrap.js → ...ss___@vueuse_integrations_useFocusTrap.js
diff --git a/..._@vueuse_integrations_useFocusTrap.js.map → ..._@vueuse_integrations_useFocusTrap.js.map b/..._@vueuse_integrations_useFocusTrap.js.map → ..._@vueuse_integrations_useFocusTrap.js.map
diff --git a/...s/vitepress___mark__js_src_vanilla__js.js → ...c/vitepress___mark__js_src_vanilla__js.js b/...s/vitepress___mark__js_src_vanilla__js.js → ...c/vitepress___mark__js_src_vanilla__js.js
diff --git a/...tepress___mark__js_src_vanilla__js.js.map → ...tepress___mark__js_src_vanilla__js.js.map b/...tepress___mark__js_src_vanilla__js.js.map → ...tepress___mark__js_src_vanilla__js.js.map
diff --git a/...ress/cache/deps/vitepress___minisearch.js → ...s_temp_37a31b7c/vitepress___minisearch.js b/...ress/cache/deps/vitepress___minisearch.js → ...s_temp_37a31b7c/vitepress___minisearch.js
diff --git a/.../cache/deps/vitepress___minisearch.js.map → ...mp_37a31b7c/vitepress___minisearch.js.map b/.../cache/deps/vitepress___minisearch.js.map → ...mp_37a31b7c/vitepress___minisearch.js.map
diff --git a/docs/.vitepress/cache/deps/vue.js → ...vitepress/cache/deps_temp_37a31b7c/vue.js b/docs/.vitepress/cache/deps/vue.js → ...vitepress/cache/deps_temp_37a31b7c/vue.js
diff --git a/docs/.vitepress/cache/deps/vue.js.map → ...press/cache/deps_temp_37a31b7c/vue.js.map b/docs/.vitepress/cache/deps/vue.js.map → ...press/cache/deps_temp_37a31b7c/vue.js.map
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -105,6 +105,14 @@ export default {
             text: "Vue + Tailwind",
             link: "/examples/vue-tailwind",
           },
+          {
+            text: "Astro + Uno",
+            link: "/examples/astro-uno",
+          },
+          {
+            text: "Astro + Master",
+            link: "/examples/astro-master",
+          },
           {
             text: "Preact + Master",
             link: "/examples/preact-master",

diff --git a/docs/benchmark.md b/docs/benchmark.md
@@ -15,7 +15,7 @@ OS `x64 | win32 | 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz | 15.71GB`
 
 Node.js `v20.5.1`
 
-Testing on `Thursday, September 21, 2023`
+Testing on `Saturday, September 23, 2023`
 
 <!-- /information/ -->
 
@@ -25,23 +25,23 @@ Testing on `Thursday, September 21, 2023`
 
 | No  | Libs                                 | Ops/Sec |
 | --- | ------------------------------------ | ------: |
-| 1   | @klass/core                          | 2361848 |
-| 2   | onno                                 | 1507000 |
-| 3   | classname-variants                   | 1250773 |
-| 4   | @tw-classed/core                     |  778452 |
-| 5   | @klass/core + tailwind-merge         |  568475 |
-| 6   | @intrnl/cv                           |  553991 |
-| 7   | tailwind-variants(-tailwind-merge)   |  375026 |
-| 8   | @vanilla-extract/recipes (impostor!) |  372953 |
-| 9   | tailwind-variants(+tailwind-merge)   |  340855 |
-| 10  | cvu                                  |  272800 |
-| 11  | classname-manager                    |  271240 |
-| 12  | cva                                  |  256860 |
+| 1   | @klass/core                          | 2237764 |
+| 2   | onno                                 | 1450524 |
+| 3   | classname-variants                   | 1096217 |
+| 4   | @tw-classed/core                     |  889882 |
+| 5   | @klass/core + tailwind-merge         |  541159 |
+| 6   | @intrnl/cv                           |  506236 |
+| 7   | tailwind-variants(-tailwind-merge)   |  369089 |
+| 8   | @vanilla-extract/recipes (impostor!) |  321932 |
+| 9   | tailwind-variants(+tailwind-merge)   |  300440 |
+| 10  | cvu                                  |  270882 |
+| 11  | classname-manager                    |  258012 |
+| 12  | cva                                  |  232658 |
 | 13  | class-variant                        |  223143 |
-| 14  | cvu + tailwind-merge                 |  193000 |
-| 15  | cva + tailwind-merge                 |  187522 |
-| 16  | stitches (impostor!)                 |   87737 |
-| 17  | pandacss (impostor!)                 |   75354 |
+| 14  | cvu + tailwind-merge                 |  191297 |
+| 15  | cva + tailwind-merge                 |  174812 |
+| 16  | stitches (impostor!)                 |   80487 |
+| 17  | pandacss (impostor!)                 |   69410 |
 
 <!-- variants -->
 
@@ -51,21 +51,21 @@ Testing on `Thursday, September 21, 2023`
 
 | No  | Libs                                 | Ops/Sec |
 | --- | ------------------------------------ | ------: |
-| 1   | @klass/core                          |  716004 |
-| 2   | onno                                 |  583666 |
-| 3   | classname-variants                   |  540465 |
-| 4   | @intrnl/cv                           |  428484 |
-| 5   | @klass/core + tailwind-merge         |  344556 |
-| 6   | @vanilla-extract/recipes (impostor!) |  260876 |
-| 7   | @tw-classed/core                     |  134310 |
-| 8   | cva                                  |   98398 |
-| 9   | cva + tailwind-merge                 |   85470 |
-| 10  | stitches (impostor!)                 |   66453 |
-| 11  | cvu                                  |   49018 |
-| 12  | tailwind-variants(-tailwind-merge)   |   48449 |
-| 13  | tailwind-variants(+tailwind-merge)   |   46974 |
-| 14  | cvu + tailwind-merge                 |   45246 |
-| 15  | pandacss (impostor!)                 |   38303 |
+| 1   | @klass/core                          |  882296 |
+| 2   | onno                                 |  578497 |
+| 3   | classname-variants                   |  476375 |
+| 4   | @intrnl/cv                           |  456167 |
+| 5   | @klass/core + tailwind-merge         |  400391 |
+| 6   | @vanilla-extract/recipes (impostor!) |  262037 |
+| 7   | @tw-classed/core                     |  130195 |
+| 8   | cva                                  |   89005 |
+| 9   | cva + tailwind-merge                 |   74484 |
+| 10  | stitches (impostor!)                 |   70983 |
+| 11  | tailwind-variants(+tailwind-merge)   |   50228 |
+| 12  | cvu                                  |   48284 |
+| 13  | tailwind-variants(-tailwind-merge)   |   46945 |
+| 14  | cvu + tailwind-merge                 |   42893 |
+| 15  | pandacss (impostor!)                 |   39656 |
 
 <!-- variants-compound -->
 
@@ -75,12 +75,12 @@ Testing on `Thursday, September 21, 2023`
 
 | No  | Libs                                   | Ops/Sec |
 | --- | -------------------------------------- | ------: |
-| 1   | @klass/core                            |  626671 |
-| 2   | @klass/core + tailwind-merge           |  452566 |
-| 3   | tailwind-variants(+tailwind-merge)     |  115027 |
-| 4   | tailwind-variants(-tailwind-merge)     |  114245 |
-| 5   | @vanilla-extract/sprinkles (impostor!) |   85922 |
-| 6   | pandacss (impostor!)                   |   49028 |
+| 1   | @klass/core                            |  695045 |
+| 2   | @klass/core + tailwind-merge           |  453429 |
+| 3   | tailwind-variants(-tailwind-merge)     |  113100 |
+| 4   | tailwind-variants(+tailwind-merge)     |  109636 |
+| 5   | @vanilla-extract/sprinkles (impostor!) |   86290 |
+| 6   | pandacss (impostor!)                   |   44075 |
 
 <!-- responsive-variants -->
 
@@ -90,10 +90,10 @@ Testing on `Thursday, September 21, 2023`
 
 | No  | Libs                               | Ops/Sec |
 | --- | ---------------------------------- | ------: |
-| 1   | @klass/core/slots                  |  772581 |
-| 2   | @klass/core/slots + tailwind-merge |  460656 |
-| 3   | tailwind-variants(+tailwind-merge) |   26341 |
-| 4   | tailwind-variants(-tailwind-merge) |   24637 |
-| 5   | pandacss (impostor!)               |   22872 |
+| 1   | @klass/core/slots                  |  675015 |
+| 2   | @klass/core/slots + tailwind-merge |  505661 |
+| 3   | tailwind-variants(-tailwind-merge) |   25238 |
+| 4   | tailwind-variants(+tailwind-merge) |   22726 |
+| 5   | pandacss (impostor!)               |   22451 |
 
 <!-- slots -->
diff --git a/docs/examples.md b/docs/examples.md
@@ -278,6 +278,64 @@
         </div>
       </td>
     </tr>
+    <tr>
+      <td>
+        <a href="/examples/astro-uno">
+          Astro + Uno
+        </a>
+      </td>
+      <td>
+        <div style="display: flex; gap: 0.2rem;">
+          <a title="github" href="https://github.com/flamrdevs/klass-examples/tree/main/astro-uno">
+            <picture>
+              <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/icon-button/simple?t=dark&i=github">
+              <img alt="github" src="https://none.deno.dev/ui/icon-button/simple?t=light&i=github">
+            </picture>
+          </a>
+          <a title="stackblitz" href="https://stackblitz.com/fork/github/flamrdevs/klass-examples/tree/main/astro-uno?title=Klass%20Astro%20Uno">
+            <picture>
+              <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/icon-button/simple?c=blue&t=dark&i=stackblitz">
+              <img alt="stackblitz" src="https://none.deno.dev/ui/icon-button/simple?c=blue&t=light&i=stackblitz">
+            </picture>
+          </a>
+          <a title="codesandbox" href="https://codesandbox.io/p/sandbox/github/flamrdevs/klass-examples/tree/main/astro-uno">
+            <picture>
+              <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/icon-button/simple?c=slate&t=dark&i=codesandbox">
+              <img alt="codesandbox" src="https://none.deno.dev/ui/icon-button/simple?c=slate&t=light&i=codesandbox">
+            </picture>
+          </a>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/examples/astro-master">
+          Astro + Master
+        </a>
+      </td>
+      <td>
+        <div style="display: flex; gap: 0.2rem;">
+          <a title="github" href="https://github.com/flamrdevs/klass-examples/tree/main/astro-master">
+            <picture>
+              <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/icon-button/simple?t=dark&i=github">
+              <img alt="github" src="https://none.deno.dev/ui/icon-button/simple?t=light&i=github">
+            </picture>
+          </a>
+          <a title="stackblitz" href="https://stackblitz.com/fork/github/flamrdevs/klass-examples/tree/main/astro-master?title=Klass%20Astro%20Master">
+            <picture>
+              <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/icon-button/simple?c=blue&t=dark&i=stackblitz">
+              <img alt="stackblitz" src="https://none.deno.dev/ui/icon-button/simple?c=blue&t=light&i=stackblitz">
+            </picture>
+          </a>
+          <a title="codesandbox" href="https://codesandbox.io/p/sandbox/github/flamrdevs/klass-examples/tree/main/astro-master">
+            <picture>
+              <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/icon-button/simple?c=slate&t=dark&i=codesandbox">
+              <img alt="codesandbox" src="https://none.deno.dev/ui/icon-button/simple?c=slate&t=light&i=codesandbox">
+            </picture>
+          </a>
+        </div>
+      </td>
+    </tr>
     <tr>
       <td>
         <a href="/examples/preact-master">

diff --git a/docs/examples/astro-master.md b/docs/examples/astro-master.md
@@ -0,0 +1,26 @@
+---
+aside: false
+---
+
+# Klass Astro Master
+
+<p>
+  <a title="github" href="https://github.com/flamrdevs/klass-examples/tree/main/astro-master">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/button/simple?t=dark&i=github&e=Open%20in%20GitHub">
+      <img alt="github" src="https://none.deno.dev/ui/button/simple?t=light&i=github&e=Open%20in%20GitHub" vspace="5">
+    </picture>
+  </a>
+  <a title="stackblitz" href="https://stackblitz.com/fork/github/flamrdevs/klass-examples/tree/main/astro-master?title=Klass%20Astro%20Master">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/button/simple?c=blue&t=dark&i=stackblitz&e=Open%20in%20StackBlitz">
+      <img alt="stackblitz" src="https://none.deno.dev/ui/button/simple?c=blue&t=light&i=stackblitz&e=Open%20in%20StackBlitz" vspace="5">
+    </picture>
+  </a>
+  <a title="codesandbox" href="https://codesandbox.io/p/sandbox/github/flamrdevs/klass-examples/tree/main/astro-master">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/button/simple?c=slate&t=dark&i=codesandbox&e=Open%20in%20CodeSandbox">
+      <img alt="codesandbox" src="https://none.deno.dev/ui/button/simple?c=slate&t=light&i=codesandbox&e=Open%20in%20CodeSandbox" vspace="5">
+    </picture>
+  </a>
+</p>
diff --git a/docs/examples/astro-uno.md b/docs/examples/astro-uno.md
@@ -0,0 +1,26 @@
+---
+aside: false
+---
+
+# Klass Astro Uno
+
+<p>
+  <a title="github" href="https://github.com/flamrdevs/klass-examples/tree/main/astro-uno">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/button/simple?t=dark&i=github&e=Open%20in%20GitHub">
+      <img alt="github" src="https://none.deno.dev/ui/button/simple?t=light&i=github&e=Open%20in%20GitHub" vspace="5">
+    </picture>
+  </a>
+  <a title="stackblitz" href="https://stackblitz.com/fork/github/flamrdevs/klass-examples/tree/main/astro-uno?title=Klass%20Astro%20Uno">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/button/simple?c=blue&t=dark&i=stackblitz&e=Open%20in%20StackBlitz">
+      <img alt="stackblitz" src="https://none.deno.dev/ui/button/simple?c=blue&t=light&i=stackblitz&e=Open%20in%20StackBlitz" vspace="5">
+    </picture>
+  </a>
+  <a title="codesandbox" href="https://codesandbox.io/p/sandbox/github/flamrdevs/klass-examples/tree/main/astro-uno">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://none.deno.dev/ui/button/simple?c=slate&t=dark&i=codesandbox&e=Open%20in%20CodeSandbox">
+      <img alt="codesandbox" src="https://none.deno.dev/ui/button/simple?c=slate&t=light&i=codesandbox&e=Open%20in%20CodeSandbox" vspace="5">
+    </picture>
+  </a>
+</p>