@pyreon/unistyle 0.23.0 → 0.24.1

package/lib/index.js

@@ -19,7 +19,8 @@ const breakpoints = {
 //#region src/responsive/createMediaQueries.ts
 const createMediaQueries = ((props) => {
 	const { breakpoints, rootSize, css } = props;
-	return Object.keys(breakpoints).reduce((acc, key) => {
+	const acc = {};
+	for (const key in breakpoints) {
 		const breakpointValue = breakpoints[key];
 		if (breakpointValue === 0) acc[key] = (...args) => css(...args);
 		else if (breakpointValue != null) {
@@ -30,8 +31,8 @@ const createMediaQueries = ((props) => {
         }
       `;
 		}
-		return acc;
-	}, {});
+	}
+	return acc;
 });
 
 //#endregion
@@ -56,17 +57,24 @@ const handleObjectCb = (obj) => (bp, i, bps, res) => {
 	return previousValue;
 };
 const handleValueCb = (value) => () => value;
-const shouldNormalize = (props) => Object.values(props).some((item) => typeof item === "object" || Array.isArray(item));
+const shouldNormalize = (props) => {
+	for (const key in props) {
+		const item = props[key];
+		if (typeof item === "object" || Array.isArray(item)) return true;
+	}
+	return false;
+};
 const normalizeTheme = ({ theme, breakpoints }) => {
 	if (!shouldNormalize(theme)) return theme;
 	const getBpValues = assignToBreakpointKey(breakpoints);
 	const result = {};
-	Object.entries(theme).forEach(([key, value]) => {
-		if (value == null) return;
+	for (const key in theme) {
+		const value = theme[key];
+		if (value == null) continue;
 		if (Array.isArray(value)) result[key] = getBpValues(handleArrayCb(value));
 		else if (typeof value === "object") result[key] = getBpValues(handleObjectCb(value));
 		else result[key] = getBpValues(handleValueCb(value));
-	});
+	}
 	return result;
 };
 
@@ -196,11 +204,14 @@ const optimizeBreakpointDeltas = (cssStrings) => {
 const shallowEqual = (a, b) => {
 	if (a === b) return true;
 	if (!a || !b) return false;
-	const keysA = Object.keys(a);
-	const keysB = Object.keys(b);
-	if (keysA.length !== keysB.length) return false;
-	for (const key of keysA) if (a[key] !== b[key]) return false;
-	return true;
+	let aCount = 0;
+	for (const key in a) {
+		aCount++;
+		if (a[key] !== b[key]) return false;
+	}
+	let bCount = 0;
+	for (const _ in b) bCount++;
+	return aCount === bCount;
 };
 /**
 * Removes breakpoints whose full-object styles are identical to the
@@ -242,21 +253,22 @@ const removeUnexpectedKeys = (obj, keys) => {
 const transformTheme = ({ theme, breakpoints }) => {
 	const result = {};
 	if (isEmpty(theme) || isEmpty(breakpoints)) return result;
-	Object.entries(theme).forEach(([key, value]) => {
-		if (Array.isArray(value) && value.length > 0) value.forEach((child, i) => {
+	for (const key in theme) {
+		const value = theme[key];
+		if (Array.isArray(value) && value.length > 0) for (let i = 0; i < value.length; i++) {
 			const indexBreakpoint = breakpoints[i];
-			if (indexBreakpoint == null) return;
-			set(result, [indexBreakpoint, key], child);
-		});
-		else if (typeof value === "object" && value !== null) Object.entries(value).forEach(([childKey, childValue]) => {
-			set(result, [childKey, key], childValue);
-		});
-		else if (value != null) {
+			if (indexBreakpoint == null) continue;
+			set(result, [indexBreakpoint, key], value[i]);
+		}
+		else if (typeof value === "object" && value !== null) {
+			const obj = value;
+			for (const childKey in obj) set(result, [childKey, key], obj[childKey]);
+		} else if (value != null) {
 			const firstBreakpoint = breakpoints[0];
-			if (firstBreakpoint == null) return;
+			if (firstBreakpoint == null) continue;
 			set(result, [firstBreakpoint, key], value);
 		}
-	});
+	}
 	return removeUnexpectedKeys(result, breakpoints);
 };
 
@@ -454,7 +466,7 @@ const ALIGN_CONTENT_DIRECTION = {
 const alignContent = (attrs) => {
 	const { direction, alignX, alignY } = attrs;
 	if (isEmpty(attrs) || !direction || !alignX || !alignY) return null;
-	const isReverted = ["inline", "reverseInline"].includes(direction);
+	const isReverted = direction === "inline" || direction === "reverseInline";
 	const dir = ALIGN_CONTENT_DIRECTION[direction];
 	const x = ALIGN_CONTENT_MAP_X[alignX];
 	const y = ALIGN_CONTENT_MAP_Y[alignY];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/unistyle",
-  "version": "0.23.0",
+  "version": "0.24.1",
   "description": "Responsive theming and breakpoint utilities for Pyreon",
   "license": "MIT",
   "repository": {
@@ -43,8 +43,8 @@
   },
   "devDependencies": {
     "@pyreon/manifest": "0.13.1",
-    "@pyreon/test-utils": "^0.13.10",
-    "@pyreon/typescript": "^0.23.0",
+    "@pyreon/test-utils": "^0.13.11",
+    "@pyreon/typescript": "^0.24.1",
     "@vitest/browser-playwright": "^4.1.4",
     "@vitus-labs/tools-rolldown": "^2.4.0"
   },
@@ -52,9 +52,9 @@
     "node": ">= 22"
   },
   "dependencies": {
-    "@pyreon/core": "^0.23.0",
-    "@pyreon/reactivity": "^0.23.0",
-    "@pyreon/styler": "^0.23.0",
-    "@pyreon/ui-core": "^0.23.0"
+    "@pyreon/core": "^0.24.1",
+    "@pyreon/reactivity": "^0.24.1",
+    "@pyreon/styler": "^0.24.1",
+    "@pyreon/ui-core": "^0.24.1"
   }
 }

package/src/responsive/createMediaQueries.ts

@@ -19,25 +19,25 @@ const createMediaQueries: CreateMediaQueries = ((props: {
 }) => {
   const { breakpoints, rootSize, css } = props
 
-  return Object.keys(breakpoints).reduce<
-    Record<string, (...args: [TemplateStringsArray, ...any[]]) => string>
-  >((acc, key) => {
+  // Direct for-in + mutation. The prior `Object.keys.reduce` allocated the
+  // keys array and paid reduce-callback overhead per iteration. Hot at
+  // PyreonUI mount and on any theme/rootSize change. Ported from
+  // vitus-labs `e573e6c4`; measured upstream: +15.9%.
+  const acc: Record<string, (...args: [TemplateStringsArray, ...any[]]) => string> = {}
+  for (const key in breakpoints) {
     const breakpointValue = breakpoints[key]
-
     if (breakpointValue === 0) {
       acc[key] = (...args: [TemplateStringsArray, ...any[]]) => css(...args)
     } else if (breakpointValue != null) {
       const emSize = breakpointValue / rootSize
-
       acc[key] = (...args: [TemplateStringsArray, ...any[]]) => css`
         @media only screen and (min-width: ${emSize}em) {
           ${css(...args)};
         }
       `
     }
-
-    return acc
-  }, {})
+  }
+  return acc
 }) as CreateMediaQueries
 
 export default createMediaQueries

package/src/responsive/normalizeTheme.ts

@@ -30,8 +30,18 @@ const handleObjectCb =
 
 const handleValueCb = (value: unknown) => () => value
 
-const shouldNormalize = (props: Record<string, any>) =>
-  Object.values(props).some((item) => typeof item === 'object' || Array.isArray(item))
+// for-in early-exit avoids the `Object.values(props)` array allocation
+// that the prior `.some()` paid on every theme normalization decision.
+// Fires once per per-breakpoint theme transform; the early `return true`
+// is hit by any responsive token, so most calls bail out quickly. Ported
+// from vitus-labs `e573e6c4`; measured upstream: +20.3%.
+const shouldNormalize = (props: Record<string, any>) => {
+  for (const key in props) {
+    const item = props[key]
+    if (typeof item === 'object' || Array.isArray(item)) return true
+  }
+  return false
+}
 
 export type NormalizeTheme = ({
   theme,
@@ -47,8 +57,12 @@ const normalizeTheme: NormalizeTheme = ({ theme, breakpoints }) => {
   const getBpValues = assignToBreakpointKey(breakpoints)
   const result: Record<string, unknown> = {}
 
-  Object.entries(theme).forEach(([key, value]) => {
-    if (value == null) return
+  // for-in instead of Object.entries.forEach — avoids the entries-tuple
+  // array allocation per theme normalization (one outer alloc + one inner
+  // [k,v] tuple per property dropped). Ported from vitus-labs `e573e6c4`.
+  for (const key in theme) {
+    const value = theme[key]
+    if (value == null) continue
 
     if (Array.isArray(value)) {
       result[key] = getBpValues(handleArrayCb(value as (string | number)[]))
@@ -57,7 +71,7 @@ const normalizeTheme: NormalizeTheme = ({ theme, breakpoints }) => {
     } else {
       result[key] = getBpValues(handleValueCb(value))
     }
-  })
+  }
 
   return result
 }

package/src/responsive/optimizeTheme.ts

@@ -12,13 +12,18 @@ const shallowEqual = (
 ): boolean => {
   if (a === b) return true
   if (!a || !b) return false
-  const keysA = Object.keys(a)
-  const keysB = Object.keys(b)
-  if (keysA.length !== keysB.length) return false
-  for (const key of keysA) {
+  // for-in + counting avoids the two `Object.keys` array allocations the
+  // prior implementation paid on every breakpoint optimization step.
+  // Ported from vitus-labs `e573e6c4`; measured upstream: +4.0% on the
+  // EQUAL hot path (the common case in steady-state renders).
+  let aCount = 0
+  for (const key in a) {
+    aCount++
     if (a[key] !== b[key]) return false
   }
-  return true
+  let bCount = 0
+  for (const _ in b) bCount++
+  return aCount === bCount
 }
 
 /**

package/src/responsive/transformTheme.ts

@@ -24,23 +24,29 @@ const transformTheme: TransformTheme = ({ theme, breakpoints }) => {
 
   if (isEmpty(theme) || isEmpty(breakpoints)) return result
 
-  Object.entries(theme).forEach(([key, value]) => {
+  // for-in + nested for-in avoids the two `Object.entries(...)` array
+  // allocations (outer + inner per object value) the prior forEach paid.
+  // Same for `value.forEach((child, i) => ...)` → indexed for-loop.
+  // Ported from vitus-labs `e573e6c4`.
+  for (const key in theme) {
+    const value = theme[key]
     if (Array.isArray(value) && value.length > 0) {
-      value.forEach((child, i) => {
+      for (let i = 0; i < value.length; i++) {
         const indexBreakpoint = breakpoints[i]
-        if (indexBreakpoint == null) return
-        set(result, [indexBreakpoint, key], child)
-      })
+        if (indexBreakpoint == null) continue
+        set(result, [indexBreakpoint, key], value[i])
+      }
     } else if (typeof value === 'object' && value !== null) {
-      Object.entries(value).forEach(([childKey, childValue]) => {
-        set(result, [childKey, key], childValue)
-      })
+      const obj = value as Record<string, unknown>
+      for (const childKey in obj) {
+        set(result, [childKey, key], obj[childKey])
+      }
     } else if (value != null) {
       const firstBreakpoint = breakpoints[0]
-      if (firstBreakpoint == null) return
+      if (firstBreakpoint == null) continue
       set(result, [firstBreakpoint, key], value)
     }
-  })
+  }
 
   return removeUnexpectedKeys(result, breakpoints)
 }

package/src/styles/alignContent.ts

@@ -47,7 +47,11 @@ const alignContent: AlignContent = (attrs) => {
     return null
   }
 
-  const isReverted = ['inline', 'reverseInline'].includes(direction)
+  // Direct comparisons avoid the per-call 2-element array allocation that
+  // `['inline', 'reverseInline'].includes(direction)` paid. Hot path: fires
+  // for every styled component with a `direction` prop. Ported from
+  // vitus-labs `e573e6c4`.
+  const isReverted = direction === 'inline' || direction === 'reverseInline'
   const dir = ALIGN_CONTENT_DIRECTION[direction]
   const x = ALIGN_CONTENT_MAP_X[alignX]
   const y = ALIGN_CONTENT_MAP_Y[alignY]