perf: improve variants/one/lazy perf

Author: jaredLunde

benchmark/index.ts

@@ -1,14 +1,28 @@
 import { styles } from "@dash-ui/styles";
-import bench from "@essentials/benchmark";
+import bench_ from "@essentials/benchmark";
 // eslint-disable-next-line
 import responsive from "../dist/module";
 
+function bench(name: string, callback: () => void) {
+  bench_(name, ({ duration }) => {
+    duration(1000);
+    return callback;
+  });
+}
+
 const responsiveStyle = responsive(styles, {
   sm: "only screen and (min-width: 20em)",
   md: "only screen and (min-width: 50em)",
 });
 
 const responsiveA = responsiveStyle.variants({
+  md: {
+    width: 400,
+    height: 800,
+  },
+});
+
+const responsiveAD = responsiveStyle.variants({
   default: {
     width: 200,
     height: 600,
@@ -19,14 +33,22 @@ const responsiveA = responsiveStyle.variants({
   },
 });
 
-bench("normal variant", () => {
+bench("normal variant w/o default", () => {
   responsiveA("md");
 });
 
+bench("normal variant w/ default", () => {
+  responsiveAD("md");
+});
+
 bench(`responsive variant`, () => {
   responsiveA({ sm: "md" });
 });
 
+bench("responsive variant w/ default", () => {
+  responsiveAD({ sm: "md" });
+});
+
 const responsiveB = responsiveStyle.variants({
   default: `
     width: 200px;
@@ -82,11 +104,11 @@ const responsiveD = responsiveStyle.lazy((queryValue) => {
   };
 });
 
-bench("normal variant [callback obj]", () => {
+bench("lazy variant [callback obj]", () => {
   responsiveD("md");
 });
 
-bench(`responsive variant [callback obj]`, () => {
+bench(`responsive lazy variant [callback obj]`, () => {
   responsiveD({ sm: "md" });
 });
 
@@ -102,5 +124,5 @@ bench("normal one [callback obj]", () => {
 });
 
 bench(`responsive one [callback obj]`, () => {
-  responsiveE({ sm: false, md: true });
+  responsiveE({ sm: true });
 });

package.json

@@ -32,9 +32,6 @@
   },
   "sideEffects": false,
   "types": "types/index.d.ts",
-  "dependencies": {
-    "@dash-ui/mq": "^1.0.0-alpha.6"
-  },
   "peerDependencies": {
     "@dash-ui/styles": ">=1.0.0-alpha.3"
   },
@@ -43,7 +40,7 @@
     "@commitlint/cli": "latest",
     "@commitlint/config-conventional": "latest",
     "@dash-ui/jest": "^2.1.2",
-    "@dash-ui/styles": "^1.0.0-alpha.6",
+    "@dash-ui/styles": "^1.0.0-alpha.7",
     "@essentials/benchmark": "^1.0.7",
     "@semantic-release/changelog": "^6.0.0",
     "@semantic-release/git": "^10.0.0",

pnpm-lock.yaml

@@ -16,6 +16,22 @@ exports[`responsive() should insert class into the dom: inline-block 1`] = `
 </style>
 `;
 
+exports[`responsive() should work insert into dom with nested objects: block 1`] = `
+<style
+  data-dash="ui"
+>
+  .ui-7qo3wy{display:block;}
+</style>
+`;
+
+exports[`responsive() should work insert into dom with nested objects: inline-block+flex 1`] = `
+<style
+  data-dash="ui"
+>
+  @media only screen and (min-width:0em){.ui-7qo3wy{display:inline-block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}
+</style>
+`;
+
 exports[`responsive.cls() should act like a callback style 1`] = `
 <style
   data-dash="ui"

src/__snapshots__/index.test.ts.snap

@@ -59,6 +59,51 @@ describe("responsive()", () => {
     );
   });
 
+  it("should work with nested objects", () => {
+    const responsiveDisplay = responsiveStyles.variants({
+      default: {
+        display: "block",
+      },
+      flex: {
+        display: "flex",
+      },
+      inlineBlock: {
+        display: "inline-block",
+      },
+    });
+
+    expect(
+      responsiveDisplay.css({ phone: { inlineBlock: true, flex: true } })
+    ).toBe(
+      `display:block;@media ${mediaQueries.phone}{display:inline-block;display:flex;}`
+    );
+  });
+
+  it("should work insert into dom with nested objects", () => {
+    const responsiveDisplay = responsiveStyles.variants({
+      default: {
+        display: "block",
+      },
+      flex: {
+        display: "flex",
+      },
+      inlineBlock: {
+        display: "inline-block",
+      },
+    });
+
+    expect(
+      responsiveDisplay({ phone: { inlineBlock: true, flex: true } })
+    ).not.toBe("");
+    expect(document.querySelectorAll(`style[data-dash]`).length).toBe(3);
+    expect(document.querySelectorAll(`style[data-dash]`)[1]).toMatchSnapshot(
+      "block"
+    );
+    expect(document.querySelectorAll(`style[data-dash]`)[2]).toMatchSnapshot(
+      "inline-block+flex"
+    );
+  });
+
   it("should provide tokens", () => {
     const responsiveDisplay = responsiveStyles.variants({
       default: ({ color }) => ({ color: color.white }),
@@ -143,6 +188,19 @@ describe("responsive()", () => {
     expect(responsiveDisplay()).toBe("");
   });
 
+  it("should hit base styles", () => {
+    const responsiveDisplay = responsiveStyles.variants({
+      flex: {
+        display: "flex",
+      },
+      inlineBlock: {
+        display: "inline-block",
+      },
+    });
+
+    expect(responsiveDisplay("flex")).not.toBe("");
+  });
+
   it("should insert class into the dom", () => {
     const responsiveDisplay = responsiveStyles.variants({
       flex: {