@pyreon/rocketstyle 0.11.5 → 0.11.7

package/src/__tests__/dimensions.test.ts

@@ -7,89 +7,89 @@ import {
   getValues,
   isMultiKey,
   isValidKey,
-} from "../utils/dimensions"
+} from '../utils/dimensions'
 
-describe("isValidKey", () => {
-  it("returns true for truthy values", () => {
-    expect(isValidKey("a")).toBe(true)
+describe('isValidKey', () => {
+  it('returns true for truthy values', () => {
+    expect(isValidKey('a')).toBe(true)
     expect(isValidKey(1)).toBe(true)
     expect(isValidKey(true)).toBe(true)
     expect(isValidKey(0)).toBe(true)
-    expect(isValidKey("")).toBe(true)
+    expect(isValidKey('')).toBe(true)
   })
 
-  it("returns false for undefined, null, false", () => {
+  it('returns false for undefined, null, false', () => {
     expect(isValidKey(undefined)).toBe(false)
     expect(isValidKey(null)).toBe(false)
     expect(isValidKey(false)).toBe(false)
   })
 })
 
-describe("isMultiKey", () => {
-  it("returns [true, propName] for object with propName", () => {
-    expect(isMultiKey({ propName: "tags", multi: true })).toEqual([true, "tags"])
+describe('isMultiKey', () => {
+  it('returns [true, propName] for object with propName', () => {
+    expect(isMultiKey({ propName: 'tags', multi: true })).toEqual([true, 'tags'])
   })
 
-  it("returns [false, value] for string", () => {
-    expect(isMultiKey("variant")).toEqual([false, "variant"])
+  it('returns [false, value] for string', () => {
+    expect(isMultiKey('variant')).toEqual([false, 'variant'])
   })
 })
 
-describe("getKeys", () => {
-  it("returns object keys", () => {
-    expect(getKeys({ a: 1, b: 2 })).toEqual(["a", "b"])
+describe('getKeys', () => {
+  it('returns object keys', () => {
+    expect(getKeys({ a: 1, b: 2 })).toEqual(['a', 'b'])
   })
 
-  it("returns empty array for empty object", () => {
+  it('returns empty array for empty object', () => {
     expect(getKeys({})).toEqual([])
   })
 })
 
-describe("getValues", () => {
-  it("returns object values", () => {
+describe('getValues', () => {
+  it('returns object values', () => {
     expect(getValues({ a: 1, b: 2 })).toEqual([1, 2])
   })
 })
 
-describe("getDimensionsValues", () => {
-  it("extracts string dimension values", () => {
-    const dimensions = { size: "size", variant: "variant" }
-    expect(getDimensionsValues(dimensions)).toEqual(["size", "variant"])
+describe('getDimensionsValues', () => {
+  it('extracts string dimension values', () => {
+    const dimensions = { size: 'size', variant: 'variant' }
+    expect(getDimensionsValues(dimensions)).toEqual(['size', 'variant'])
   })
 
-  it("extracts propName from object dimensions", () => {
+  it('extracts propName from object dimensions', () => {
     const dimensions = {
-      size: "size",
-      tags: { propName: "tags", multi: true },
+      size: 'size',
+      tags: { propName: 'tags', multi: true },
     }
-    expect(getDimensionsValues(dimensions)).toEqual(["size", "tags"])
+    expect(getDimensionsValues(dimensions)).toEqual(['size', 'tags'])
   })
 })
 
-describe("getMultipleDimensions", () => {
-  it("identifies multi-key dimensions", () => {
+describe('getMultipleDimensions', () => {
+  it('identifies multi-key dimensions', () => {
     const dimensions = {
-      size: "size",
-      tags: { propName: "tags", multi: true },
+      size: 'size',
+      tags: { propName: 'tags', multi: true },
     }
     expect(getMultipleDimensions(dimensions)).toEqual({ tags: true })
   })
 
-  it("returns empty for no multi dimensions", () => {
-    const dimensions = { size: "size", variant: "variant" }
+  it('returns empty for no multi dimensions', () => {
+    const dimensions = { size: 'size', variant: 'variant' }
     expect(getMultipleDimensions(dimensions)).toEqual({})
   })
 
-  it("skips multi=false", () => {
+  it('skips multi=false', () => {
     const dimensions = {
-      tags: { propName: "tags", multi: false },
+      tags: { propName: 'tags', multi: false },
     }
     expect(getMultipleDimensions(dimensions)).toEqual({})
   })
 })
 
-describe("getDimensionsMap", () => {
-  it("builds keysMap and keywords from themes", () => {
+describe('getDimensionsMap', () => {
+  it('builds keysMap and keywords from themes', () => {
     const themes = {
       size: { small: { fontSize: 12 }, large: { fontSize: 18 } },
     }
@@ -100,7 +100,7 @@ describe("getDimensionsMap", () => {
     expect(result.keywords.size).toBe(true)
   })
 
-  it("adds dimension keys to keywords when useBooleans", () => {
+  it('adds dimension keys to keywords when useBooleans', () => {
     const themes = {
       size: { small: { fontSize: 12 }, large: { fontSize: 18 } },
     }
@@ -109,7 +109,7 @@ describe("getDimensionsMap", () => {
     expect(result.keywords.large).toBe(true)
   })
 
-  it("skips invalid values (false, null, undefined)", () => {
+  it('skips invalid values (false, null, undefined)', () => {
     const themes = {
       size: { small: { fontSize: 12 }, disabled: false, hidden: null },
     }
@@ -117,17 +117,17 @@ describe("getDimensionsMap", () => {
     expect(result.keysMap.size).toEqual({ small: true })
   })
 
-  it("returns empty for empty themes", () => {
+  it('returns empty for empty themes', () => {
     const result = getDimensionsMap({ themes: {} })
     expect(result.keysMap).toEqual({})
     expect(result.keywords).toEqual({})
   })
 
-  it("includes function values (transform modifiers) as valid keys", () => {
+  it('includes function values (transform modifiers) as valid keys', () => {
     const themes = {
       modifier: {
         outlined: (theme: any) => ({ color: theme.bg }),
-        ghost: () => ({ bg: "transparent" }),
+        ghost: () => ({ bg: 'transparent' }),
       },
     }
     const result = getDimensionsMap({ themes })
@@ -137,7 +137,7 @@ describe("getDimensionsMap", () => {
     expect(result.keywords.modifier).toBe(true)
   })
 
-  it("includes function values as boolean keywords when useBooleans", () => {
+  it('includes function values as boolean keywords when useBooleans', () => {
     const themes = {
       modifier: {
         outlined: (theme: any) => ({ color: theme.bg }),
@@ -148,35 +148,35 @@ describe("getDimensionsMap", () => {
   })
 })
 
-describe("getTransformDimensions", () => {
-  it("identifies transform dimensions", () => {
+describe('getTransformDimensions', () => {
+  it('identifies transform dimensions', () => {
     const dimensions = {
-      states: "state",
-      modifiers: { propName: "modifier", multi: true, transform: true },
+      states: 'state',
+      modifiers: { propName: 'modifier', multi: true, transform: true },
     }
     expect(getTransformDimensions(dimensions)).toEqual({ modifier: true })
   })
 
-  it("returns empty when no transform dimensions exist", () => {
+  it('returns empty when no transform dimensions exist', () => {
     const dimensions = {
-      states: "state",
-      sizes: "size",
-      multiple: { propName: "multiple", multi: true },
+      states: 'state',
+      sizes: 'size',
+      multiple: { propName: 'multiple', multi: true },
     }
     expect(getTransformDimensions(dimensions)).toEqual({})
   })
 
-  it("skips dimensions without transform flag", () => {
+  it('skips dimensions without transform flag', () => {
     const dimensions = {
-      states: "state",
-      tags: { propName: "tags", multi: true },
+      states: 'state',
+      tags: { propName: 'tags', multi: true },
     }
     expect(getTransformDimensions(dimensions)).toEqual({})
   })
 
-  it("skips transform=false", () => {
+  it('skips transform=false', () => {
     const dimensions = {
-      modifiers: { propName: "modifier", multi: true, transform: false },
+      modifiers: { propName: 'modifier', multi: true, transform: false },
     }
     expect(getTransformDimensions(dimensions)).toEqual({})
   })

package/src/__tests__/e2e-styler.test.ts

@@ -7,221 +7,163 @@
  * Unlike the React version which tested CSS injection in the DOM,
  * this Pyreon version tests the computed $rocketstyle output directly.
  */
-import { popContext, pushContext } from "@pyreon/core"
-import { config } from "@pyreon/ui-core"
-import { context } from "../context/context"
-import rocketstyle from "../init"
-
-// Mock styled that passes through the component unchanged
-const mockStyled = (component: any) => {
-  const taggedTemplate = (_strings: any, ..._args: any[]) => component
-  return taggedTemplate
-}
-
-const mockCss = (_strings: any, ..._args: any[]) => ""
-
-const originalStyled = config.styled
-const originalCss = config.css
+import { ThemeCapture, getComputedTheme, initTestConfig, withThemeContext } from '@pyreon/test-utils'
+import rocketstyle from '../init'
 
+let cleanup: () => void
 beforeAll(() => {
-  config.init({
-    css: mockCss as any,
-    styled: mockStyled as any,
-    component: "div",
-    textComponent: "span",
-  })
+  cleanup = initTestConfig()
 })
+afterAll(() => cleanup())
 
-afterAll(() => {
-  config.styled = originalStyled
-  config.css = originalCss
-})
-
-/** Component that captures $rocketstyle for inspection */
-const ThemeCapture: any = ({ $rocketstyle, $rocketstate, ...rest }: any) => ({
-  type: "div",
-  props: rest,
-  children: [],
-  key: null,
-  $rocketstyle,
-  $rocketstate,
-})
-ThemeCapture.displayName = "ThemeCapture"
-
-/** Helper to render within theme context and return $rocketstyle */
-const getComputedTheme = (Component: any, props: Record<string, any> = {}) => {
-  pushContext(
-    new Map([
-      [
-        context.id,
-        {
-          theme: { rootSize: 16 },
-          mode: "light",
-          isDark: false,
-          isLight: true,
-        },
-      ],
-    ]),
-  )
-  try {
-    let vnode = Component(props) as any
-    // EnhancedComponent returns a reactive accessor (function) for mode switching.
-    // In tests we evaluate it directly to get the VNode.
-    while (typeof vnode === "function") vnode = vnode()
-    return vnode.$rocketstyle
-  } finally {
-    popContext()
-  }
-}
-
-describe("e2e: rocketstyle theme computation", () => {
-  it("base theme values are passed through", () => {
+describe('e2e: rocketstyle theme computation', () => {
+  it('base theme values are passed through', () => {
     const Comp: any = rocketstyle()({
-      name: "BaseComp",
+      name: 'BaseComp',
       component: ThemeCapture,
     }).theme({
-      backgroundColor: "#0070f3",
-      color: "#fff",
+      backgroundColor: '#0070f3',
+      color: '#fff',
     })
 
     const theme = getComputedTheme(Comp)
-    expect(theme.backgroundColor).toBe("#0070f3")
-    expect(theme.color).toBe("#fff")
+    expect(theme.backgroundColor).toBe('#0070f3')
+    expect(theme.color).toBe('#fff')
   })
 
-  it("state dimension overrides base theme values", () => {
+  it('state dimension overrides base theme values', () => {
     const Comp: any = rocketstyle()({
-      name: "StateComp",
+      name: 'StateComp',
       component: ThemeCapture,
     })
       .theme({
-        backgroundColor: "#0070f3",
-        color: "#fff",
+        backgroundColor: '#0070f3',
+        color: '#fff',
       })
       .states({
         danger: {
-          backgroundColor: "#dc3545",
-          color: "#fff",
+          backgroundColor: '#dc3545',
+          color: '#fff',
         },
       })
 
-    const theme = getComputedTheme(Comp, { state: "danger" })
-    expect(theme.backgroundColor).toBe("#dc3545")
-    expect(theme.color).toBe("#fff")
+    const theme = getComputedTheme(Comp, { state: 'danger' })
+    expect(theme.backgroundColor).toBe('#dc3545')
+    expect(theme.color).toBe('#fff')
   })
 
-  it("modifier transform derives styles from accumulated state theme", () => {
+  it('modifier transform derives styles from accumulated state theme', () => {
     const Comp: any = rocketstyle()({
-      name: "ModifierComp",
+      name: 'ModifierComp',
       component: ThemeCapture,
     })
       .theme({
-        backgroundColor: "#0070f3",
-        color: "#fff",
+        backgroundColor: '#0070f3',
+        color: '#fff',
       })
       .states({
         danger: {
-          backgroundColor: "#dc3545",
-          color: "#fff",
+          backgroundColor: '#dc3545',
+          color: '#fff',
         },
       })
       .modifiers({
         outlined: (accTheme: any) => ({
           color: accTheme.backgroundColor,
-          backgroundColor: "transparent",
+          backgroundColor: 'transparent',
         }),
       })
 
     // danger state + outlined modifier
     const theme = getComputedTheme(Comp, {
-      state: "danger",
-      modifier: "outlined",
+      state: 'danger',
+      modifier: 'outlined',
     })
     // outlined should flip: color becomes the danger backgroundColor
-    expect(theme.color).toBe("#dc3545")
-    expect(theme.backgroundColor).toBe("transparent")
+    expect(theme.color).toBe('#dc3545')
+    expect(theme.backgroundColor).toBe('transparent')
   })
 
-  it("modifier without active state uses base theme only", () => {
+  it('modifier without active state uses base theme only', () => {
     const Comp: any = rocketstyle()({
-      name: "ModifierBaseComp",
+      name: 'ModifierBaseComp',
       component: ThemeCapture,
     })
       .theme({
-        backgroundColor: "#0070f3",
-        color: "#fff",
+        backgroundColor: '#0070f3',
+        color: '#fff',
       })
       .modifiers({
         outlined: (accTheme: any) => ({
           color: accTheme.backgroundColor,
-          backgroundColor: "transparent",
+          backgroundColor: 'transparent',
         }),
       })
 
     // just outlined modifier, no state — derive from base theme
-    const theme = getComputedTheme(Comp, { modifier: "outlined" })
-    expect(theme.color).toBe("#0070f3")
-    expect(theme.backgroundColor).toBe("transparent")
+    const theme = getComputedTheme(Comp, { modifier: 'outlined' })
+    expect(theme.color).toBe('#0070f3')
+    expect(theme.backgroundColor).toBe('transparent')
   })
 
-  it("variant dimension values are applied correctly", () => {
+  it('variant dimension values are applied correctly', () => {
     const Comp: any = rocketstyle()({
-      name: "VariantComp",
+      name: 'VariantComp',
       component: ThemeCapture,
     })
       .theme({
-        backgroundColor: "#FFFFFF",
+        backgroundColor: '#FFFFFF',
         borderRadius: 8,
       })
       .variants({
         box: {
           height: 64,
           padding: 8,
-          backgroundColor: "transparent",
+          backgroundColor: 'transparent',
         },
         circle: {
           width: 72,
           height: 72,
           padding: 4,
-          backgroundColor: "#F0F0F0",
+          backgroundColor: '#F0F0F0',
           borderRadius: 180,
         },
       })
 
-    const theme = getComputedTheme(Comp, { variant: "circle" })
+    const theme = getComputedTheme(Comp, { variant: 'circle' })
     expect(theme.width).toBe(72)
     expect(theme.height).toBe(72)
-    expect(theme.backgroundColor).toBe("#F0F0F0")
+    expect(theme.backgroundColor).toBe('#F0F0F0')
     expect(theme.borderRadius).toBe(180)
   })
 
-  it("variant box values override base theme", () => {
+  it('variant box values override base theme', () => {
     const Comp: any = rocketstyle()({
-      name: "VariantBoxComp",
+      name: 'VariantBoxComp',
       component: ThemeCapture,
     })
       .theme({
-        backgroundColor: "#FFFFFF",
+        backgroundColor: '#FFFFFF',
         borderRadius: 8,
       })
       .variants({
         box: {
           height: 64,
           padding: 8,
-          backgroundColor: "transparent",
+          backgroundColor: 'transparent',
         },
       })
 
-    const theme = getComputedTheme(Comp, { variant: "box" })
-    expect(theme.backgroundColor).toBe("transparent")
+    const theme = getComputedTheme(Comp, { variant: 'box' })
+    expect(theme.backgroundColor).toBe('transparent')
     expect(theme.borderRadius).toBe(8) // inherited from base
     expect(theme.height).toBe(64)
     expect(theme.padding).toBe(8)
   })
 
-  it("size dimension values are applied", () => {
+  it('size dimension values are applied', () => {
     const Comp: any = rocketstyle()({
-      name: "SizeComp",
+      name: 'SizeComp',
       component: ThemeCapture,
     })
       .theme({ fontSize: 14 })
@@ -230,65 +172,129 @@ describe("e2e: rocketstyle theme computation", () => {
         large: { fontSize: 18, padding: 8 },
       })
 
-    const theme = getComputedTheme(Comp, { size: "large" })
+    const theme = getComputedTheme(Comp, { size: 'large' })
     expect(theme.fontSize).toBe(18)
     expect(theme.padding).toBe(8)
   })
 
-  it("multiple dimensions combine", () => {
+  it('multiple dimensions combine', () => {
     const Comp: any = rocketstyle()({
-      name: "MultiDimComp",
+      name: 'MultiDimComp',
       component: ThemeCapture,
     })
-      .theme({ color: "black" })
-      .states({ primary: { color: "blue" } })
+      .theme({ color: 'black' })
+      .states({ primary: { color: 'blue' } })
       .sizes({ large: { fontSize: 18 } })
 
     const theme = getComputedTheme(Comp, {
-      state: "primary",
-      size: "large",
+      state: 'primary',
+      size: 'large',
     })
-    expect(theme.color).toBe("blue")
+    expect(theme.color).toBe('blue')
     expect(theme.fontSize).toBe(18)
   })
 
-  it("multiple modifier transforms compose sequentially", () => {
+  it('multiple modifier transforms compose sequentially', () => {
     const Comp: any = rocketstyle()({
-      name: "MultiModComp",
+      name: 'MultiModComp',
       component: ThemeCapture,
     })
-      .theme({ backgroundColor: "blue", color: "white" })
+      .theme({ backgroundColor: 'blue', color: 'white' })
       .modifiers({
         outlined: (accTheme: any) => ({
           color: accTheme.backgroundColor,
-          backgroundColor: "transparent",
+          backgroundColor: 'transparent',
         }),
-        rounded: () => ({ borderRadius: "999px" }),
+        rounded: () => ({ borderRadius: '999px' }),
       })
 
     const theme = getComputedTheme(Comp, {
-      modifier: ["outlined", "rounded"],
+      modifier: ['outlined', 'rounded'],
     })
-    expect(theme.color).toBe("blue")
-    expect(theme.backgroundColor).toBe("transparent")
-    expect(theme.borderRadius).toBe("999px")
+    expect(theme.color).toBe('blue')
+    expect(theme.backgroundColor).toBe('transparent')
+    expect(theme.borderRadius).toBe('999px')
   })
 
-  it("later transform sees earlier transform results", () => {
+  it('later transform sees earlier transform results', () => {
     const Comp: any = rocketstyle()({
-      name: "ChainedModComp",
+      name: 'ChainedModComp',
       component: ThemeCapture,
     })
       .theme({})
       .modifiers({
-        first: () => ({ step: "one" }),
+        first: () => ({ step: 'one' }),
         second: (accTheme: any) => ({ sawStep: accTheme.step }),
       })
 
     const theme = getComputedTheme(Comp, {
-      modifier: ["first", "second"],
+      modifier: ['first', 'second'],
+    })
+    expect(theme.step).toBe('one')
+    expect(theme.sawStep).toBe('one')
+  })
+})
+
+// ── Reactive dimension props ──────────────────────────────────────────────────
+
+describe('reactive $rocketstyle accessor', () => {
+  it('$rocketstyleAccessor resolves different themes for different dimension props', () => {
+    const Comp: any = rocketstyle()({
+      name: 'ReactiveComp',
+      component: ThemeCapture,
+    })
+      .theme({ color: 'black', bg: 'white' })
+      .states({
+        primary: { color: 'blue' },
+        secondary: { color: 'green' },
+      })
+
+    // First call with state=primary
+    const theme1 = getComputedTheme(Comp, { state: 'primary' })
+    expect(theme1.color).toBe('blue')
+
+    // Second call with state=secondary — should produce different theme
+    const theme2 = getComputedTheme(Comp, { state: 'secondary' })
+    expect(theme2.color).toBe('green')
+  })
+
+  it('$rocketstyleAccessor is a function, not a plain object', () => {
+    const Comp: any = rocketstyle()({
+      name: 'AccessorComp',
+      component: ThemeCapture,
+    }).theme({ color: 'red' })
+
+    const vnode = withThemeContext(() => Comp({}))
+    // ThemeCapture resolves the accessor — result should be the theme object
+    expect(vnode.$rocketstyle).toBeDefined()
+    expect(vnode.$rocketstyle.color).toBe('red')
+  })
+
+  it('$rocketstateAccessor resolves active dimensions', () => {
+    const Comp: any = rocketstyle()({
+      name: 'StateAccessorComp',
+      component: ThemeCapture,
+    }).states({
+      primary: { color: 'blue' },
     })
-    expect(theme.step).toBe("one")
-    expect(theme.sawStep).toBe("one")
+
+    const vnode = withThemeContext(() => Comp({ state: 'primary' }))
+    expect(vnode.$rocketstate).toBeDefined()
+    expect(vnode.$rocketstate.state).toBe('primary')
+  })
+
+  it('mode change produces different theme via accessor', () => {
+    const Comp: any = rocketstyle()({
+      name: 'ModeReactiveComp',
+      component: ThemeCapture,
+    }).theme((t: any, m: any) => ({
+      color: m('light-color', 'dark-color'),
+    }))
+
+    const lightTheme = getComputedTheme(Comp, {}, { mode: 'light' })
+    expect(lightTheme.color).toBe('light-color')
+
+    const darkTheme = getComputedTheme(Comp, {}, { mode: 'dark' })
+    expect(darkTheme.color).toBe('dark-color')
   })
 })