@pyreon/rocketstyle 0.14.0 → 0.16.0

package/src/__tests__/rocketstyle.browser.test.tsx

@@ -95,6 +95,152 @@ describe('@pyreon/rocketstyle in real browser', () => {
     unmount()
   })
 
+  // Bug 3 audit: derivation chain matching the real bokisch.com bug shape.
+  //
+  // Library defines a base `Text` component with `.styles(({css}) => css\`color:
+  // ${$rocketstyle.color}\`)` — the .styles() callback reads $rocketstyle.color.
+  // Library also defines `.theme({color: 'black'})` as the default.
+  //
+  // Consumer derives a sub-component: `Text.theme((t, m) => ({color: m('red',
+  // 'blue')}))` — adds NEW .theme() but does NOT call .styles() again. The
+  // derivation should INHERIT the base's .styles() and have it consume the
+  // new .theme() values, with mode toggling re-rendering correctly.
+  //
+  // The user's report: components in this chain keep stale colors on
+  // theme toggle. Test verifies whether the derivation chain actually
+  // wires up reactively.
+  it('Bug 3 repro: rocketstyle derivation chain — inherited .styles() + new .theme() reacts to mode', async () => {
+    const modeSig = signal<'light' | 'dark'>('light')
+
+    // Library base — has .styles() that reads $rocketstyle.color.
+    const TextBase: any = rocketstyle()({
+      name: 'TextBase',
+      component: Base,
+    })
+      .styles(
+        (css: any) => css`
+          color: ${({ $rocketstyle }: any) => $rocketstyle.color};
+        `,
+      )
+      .theme({ color: 'rgb(0, 128, 0)' }) // green default
+
+    // Consumer derivation — only adds .theme(), no .styles() override.
+    const Text: any = TextBase
+      .theme((_t: any, m: any) => ({
+        color: m('rgb(255, 0, 0)', 'rgb(0, 0, 255)'),
+      }))
+
+    const { container, unmount } = mountInBrowser(
+      h(PyreonUI, { theme: {}, mode: modeSig }, h(Text, { id: 'derive' })),
+    )
+
+    const el = container.querySelector<HTMLElement>('#derive')!
+    const initialColor = getComputedStyle(el).color
+
+    modeSig.set('dark')
+    await new Promise((r) => setTimeout(r, 0))
+    await new Promise((r) => requestAnimationFrame(() => r(undefined)))
+
+    const darkColor = getComputedStyle(el).color
+
+    // Diagnostic: log both colors for clarity, regardless of pass/fail
+    // (helps triage whether the bug is "no .theme() applied at all" vs
+    // "applied but doesn't react to mode toggle").
+    if (initialColor === 'rgb(255, 0, 0)' && darkColor === 'rgb(0, 0, 255)') {
+      // Works correctly — derivation chain wires up reactively
+      expect(darkColor).toBe('rgb(0, 0, 255)')
+    } else {
+      throw new Error(
+        `[bug-3-repro] derivation chain failed. initial=${initialColor}, dark=${darkColor}. ` +
+          `Expected initial=rgb(255, 0, 0), dark=rgb(0, 0, 255). ` +
+          `Possible causes: (a) .theme() override silently dropped, ` +
+          `(b) .styles() not inherited from base, ` +
+          `(c) mode toggle doesn't propagate.`,
+      )
+    }
+    unmount()
+  })
+
+  // Bug 3 audit (continued): derivation chain WITH dimension props.
+  // Real consumer pattern: `<Text base paragraph centered>` uses
+  // dimension-prop values from .sizes()/.variants(). Tests that mode
+  // toggle still propagates when dimension props are active.
+  it('Bug 3 repro: derivation + dimension props + mode toggle', async () => {
+    const modeSig = signal<'light' | 'dark'>('light')
+
+    const TextBase: any = rocketstyle()({ name: 'TextBaseDim', component: Base })
+      .styles(
+        (css: any) => css`
+          color: ${({ $rocketstyle }: any) => $rocketstyle.color};
+          font-size: ${({ $rocketstyle }: any) => $rocketstyle.fontSize};
+        `,
+      )
+      .theme({ color: 'rgb(0, 0, 0)', fontSize: '14px' })
+      .sizes({
+        small: { fontSize: '12px' },
+        large: { fontSize: '20px' },
+      })
+
+    // Consumer derivation: theme override that depends on mode
+    const Text: any = TextBase.theme((_t: any, m: any) => ({
+      color: m('rgb(255, 0, 0)', 'rgb(0, 0, 255)'),
+    }))
+
+    const { container, unmount } = mountInBrowser(
+      h(PyreonUI, { theme: {}, mode: modeSig },
+        h(Text, { id: 'dim', size: 'large' }),
+      ),
+    )
+    const el = container.querySelector<HTMLElement>('#dim')!
+    expect(getComputedStyle(el).color).toBe('rgb(255, 0, 0)')
+    expect(getComputedStyle(el).fontSize).toBe('20px')
+
+    modeSig.set('dark')
+    await new Promise((r) => setTimeout(r, 0))
+    await new Promise((r) => requestAnimationFrame(() => r(undefined)))
+
+    expect(getComputedStyle(el).color).toBe('rgb(0, 0, 255)')
+    expect(getComputedStyle(el).fontSize).toBe('20px') // dimension unchanged
+    unmount()
+  })
+
+  // Bug 3 audit (continued): DOUBLE derivation — Text → TextStyled → consumer.
+  // Tests whether mode reactivity survives a multi-level chain.
+  it('Bug 3 repro: double-derivation chain still reacts to mode', async () => {
+    const modeSig = signal<'light' | 'dark'>('light')
+
+    const TextBase: any = rocketstyle()({ name: 'DoubleTextBase', component: Base })
+      .styles(
+        (css: any) => css`
+          color: ${({ $rocketstyle }: any) => $rocketstyle.color};
+        `,
+      )
+      .theme({ color: 'rgb(0, 0, 0)' })
+
+    // First derivation — adds states (no theme override yet)
+    const TextStyled: any = TextBase.states({
+      muted: { color: 'rgb(128, 128, 128)' },
+    })
+
+    // Second derivation — mode-aware theme
+    const Text: any = TextStyled.theme((_t: any, m: any) => ({
+      color: m('rgb(255, 0, 0)', 'rgb(0, 0, 255)'),
+    }))
+
+    const { container, unmount } = mountInBrowser(
+      h(PyreonUI, { theme: {}, mode: modeSig }, h(Text, { id: 'dbl' })),
+    )
+    const el = container.querySelector<HTMLElement>('#dbl')!
+    expect(getComputedStyle(el).color).toBe('rgb(255, 0, 0)')
+
+    modeSig.set('dark')
+    await new Promise((r) => setTimeout(r, 0))
+    await new Promise((r) => requestAnimationFrame(() => r(undefined)))
+
+    expect(getComputedStyle(el).color).toBe('rgb(0, 0, 255)')
+    unmount()
+  })
+
   it('the `variant` prop layers on top of state', () => {
     const Box: any = rocketstyle()({ name: 'VariantBox', component: Base })
       .styles(
@@ -168,6 +314,81 @@ describe('@pyreon/rocketstyle in real browser', () => {
     dark.unmount()
   })
 
+  // Bug 5 repro: cache-key collision under `useBooleans: true`.
+  //
+  // The user-facing bug shape: `<Btn primary />` and `<Btn secondary />`
+  // both render with the FIRST cached variant's resolved styles. Pre-fix
+  // the dimension-prop memo built its key from raw `propsRec[dimName]`
+  // BEFORE _calculateStylingAttrs resolved the boolean shorthand, so all
+  // boolean variants on the same dimension had `propsRec.state === undefined`
+  // and collided. Real-app symptom: a button group where primary, secondary,
+  // and danger variants all render in the FIRST color the user clicked.
+  //
+  // Real-Chromium proof: mounts both variants in parallel and asserts
+  // `getComputedStyle().color` is different. happy-dom's class-based
+  // assertions wouldn't catch this — only real CSS resolution proves
+  // the styler classCache served different cached styles for each variant.
+  it('Bug 5 repro: useBooleans:true with multiple boolean variants render with distinct computed styles', () => {
+    const Btn: any = rocketstyle({ useBooleans: true })({
+      name: 'BoolBtn',
+      component: Base,
+    })
+      .styles(
+        (css: any) => css`
+          color: ${({ $rocketstyle }: any) => $rocketstyle.color};
+        `,
+      )
+      .theme({ color: 'rgb(0, 0, 0)' })
+      .states({
+        primary: { color: 'rgb(255, 0, 0)' },
+        secondary: { color: 'rgb(0, 255, 0)' },
+        danger: { color: 'rgb(0, 0, 255)' },
+      })
+
+    const primaryMount = mountInBrowser(h(Btn, { id: 'p', primary: true }))
+    const secondaryMount = mountInBrowser(h(Btn, { id: 's', secondary: true }))
+    const dangerMount = mountInBrowser(h(Btn, { id: 'd', danger: true }))
+
+    const primaryEl = primaryMount.container.querySelector<HTMLElement>('#p')!
+    const secondaryEl = secondaryMount.container.querySelector<HTMLElement>('#s')!
+    const dangerEl = dangerMount.container.querySelector<HTMLElement>('#d')!
+
+    // Without the fix: all three resolve to whichever variant was cached
+    // first under the colliding key (mode|undefined|...). With the fix:
+    // each gets its own cache entry keyed off the resolved state value.
+    expect(getComputedStyle(primaryEl).color).toBe('rgb(255, 0, 0)')
+    expect(getComputedStyle(secondaryEl).color).toBe('rgb(0, 255, 0)')
+    expect(getComputedStyle(dangerEl).color).toBe('rgb(0, 0, 255)')
+
+    // Sibling mount under the SAME PyreonUI provider — exercises the
+    // cross-instance shared memo (per-theme WeakMap entry). Pre-fix this
+    // was the actual real-app shape: button group children mounted under
+    // a single provider, all hitting the same colliding key.
+    const groupMount = mountInBrowser(
+      h(PyreonUI, { theme: {}, mode: 'light' },
+        h('div', { id: 'group' },
+          h(Btn, { id: 'g-primary', primary: true }),
+          h(Btn, { id: 'g-secondary', secondary: true }),
+          h(Btn, { id: 'g-danger', danger: true }),
+        ),
+      ),
+    )
+    expect(
+      getComputedStyle(groupMount.container.querySelector<HTMLElement>('#g-primary')!).color,
+    ).toBe('rgb(255, 0, 0)')
+    expect(
+      getComputedStyle(groupMount.container.querySelector<HTMLElement>('#g-secondary')!).color,
+    ).toBe('rgb(0, 255, 0)')
+    expect(
+      getComputedStyle(groupMount.container.querySelector<HTMLElement>('#g-danger')!).color,
+    ).toBe('rgb(0, 0, 255)')
+
+    primaryMount.unmount()
+    secondaryMount.unmount()
+    dangerMount.unmount()
+    groupMount.unmount()
+  })
+
   it('multiple instances share definition-scoped caches (no per-mount rebuild)', () => {
     // Verifies the perf optimization: getDimensionsMap, reservedPropNames keys,
     // and omit Sets are cached at definition time (WeakMap), not rebuilt per mount.

package/src/__tests__/rocketstyleIntegration.test.ts

@@ -214,6 +214,36 @@ describe('chaining methods', () => {
     const result = WithAttrs.getDefaultAttrs({}, {}, 'light')
     expect(result.label).toBe('default')
   })
+
+  it('.getDefaultAttrs() passes isDark/isLight helpers matching the requested mode', () => {
+    // Regression: pre-fix the helpers were inverted in `getDefaultAttrs`
+    // (isDark: mode === 'light', isLight: mode === 'dark') so introspection
+    // callers (rocketstories-style story generators, devtools) saw the
+    // OPPOSITE of what the runtime renders. Runtime via `useTheme` derives
+    // helpers correctly from context (and handles `inversed` by flipping
+    // the mode at the Provider level — see context.test.ts), so the bug
+    // only surfaced for callers that read the helpers via `getDefaultAttrs`.
+    //
+    // Contract: `mode` is the EFFECTIVE mode (post-`inversed` resolution).
+    // Callers wanting "inversed light" pass `'dark'`; this function takes
+    // the resolved value, so testing both light/dark covers both the
+    // un-inversed and inversed cases.
+    const captured: Array<{ mode: any; isDark: any; isLight: any }> = []
+    const Probe = Button.attrs((_props: any, _theme: any, helpers: any) => {
+      captured.push({
+        mode: helpers.mode,
+        isDark: helpers.isDark,
+        isLight: helpers.isLight,
+      })
+      return {}
+    })
+
+    Probe.getDefaultAttrs({}, {}, 'light')
+    Probe.getDefaultAttrs({}, {}, 'dark')
+
+    expect(captured[0]).toEqual({ mode: 'light', isDark: false, isLight: true })
+    expect(captured[1]).toEqual({ mode: 'dark', isDark: true, isLight: false })
+  })
 })
 
 // --------------------------------------------------------
@@ -575,3 +605,107 @@ describe('theme and state injection', () => {
     expect(vnode.$rocketstate.state).toBe('primary')
   })
 })
+
+// --------------------------------------------------------
+// component-swap reset (cloneAndEnhance)
+// --------------------------------------------------------
+// `.config({ component: NewBase })` swaps the underlying renderable. The prior
+// .attrs() / .priorityAttrs() / .filterAttrs() / .compose() chains were
+// tailored to the previous component's prop shape — applying them to a
+// different component silently leaks invalid props through to the DOM (e.g.
+// `disabled` on an `<a>`). vitus-labs's rocketstyle drops those chains on
+// component swap; this regression test locks in matching behavior here.
+describe('component-swap reset', () => {
+  it('drops .attrs() chain when component changes', () => {
+    const ButtonBase: any = ({ children, $rocketstyle, $rocketstate, ...rest }: any) => ({
+      type: 'button',
+      props: rest,
+      children,
+    })
+    ButtonBase.displayName = 'ButtonBase'
+
+    const AnchorBase: any = ({ children, $rocketstyle, $rocketstate, ...rest }: any) => ({
+      type: 'a',
+      props: rest,
+      children,
+    })
+    AnchorBase.displayName = 'AnchorBase'
+
+    const Button: any = rocketstyle()({
+      name: 'Button',
+      component: ButtonBase,
+    }).attrs((() => ({ 'data-button-attr': 'leaked' })) as any)
+
+    const Link: any = Button.config({ component: AnchorBase })
+
+    const result = renderProps(Link)
+    expect(result['data-button-attr']).toBeUndefined()
+  })
+
+  it('preserves .attrs() chain when component is not changed', () => {
+    const Base: any = ({ children, $rocketstyle, $rocketstate, ...rest }: any) => ({
+      type: 'div',
+      props: rest,
+      children,
+    })
+    Base.displayName = 'Base'
+
+    const Button: any = rocketstyle()({
+      name: 'Button',
+      component: Base,
+    }).attrs((() => ({ 'data-keep': 'yes' })) as any)
+
+    const Same: any = Button.config({ DEBUG: false })
+
+    const result = renderProps(Same)
+    expect(result['data-keep']).toBe('yes')
+  })
+
+  it('preserves .attrs() chain when same component is re-passed via config', () => {
+    const Base: any = ({ children, $rocketstyle, $rocketstate, ...rest }: any) => ({
+      type: 'div',
+      props: rest,
+      children,
+    })
+    Base.displayName = 'Base'
+
+    const Button: any = rocketstyle()({
+      name: 'Button',
+      component: Base,
+    }).attrs((() => ({ 'data-keep': 'yes' })) as any)
+
+    const Same: any = Button.config({ component: Base })
+
+    const result = renderProps(Same)
+    expect(result['data-keep']).toBe('yes')
+  })
+
+  it('lets fresh attrs after component swap apply to the new component', () => {
+    const ButtonBase: any = ({ children, $rocketstyle, $rocketstate, ...rest }: any) => ({
+      type: 'button',
+      props: rest,
+      children,
+    })
+    ButtonBase.displayName = 'ButtonBase'
+
+    const AnchorBase: any = ({ children, $rocketstyle, $rocketstate, ...rest }: any) => ({
+      type: 'a',
+      props: rest,
+      children,
+    })
+    AnchorBase.displayName = 'AnchorBase'
+
+    const Button: any = rocketstyle()({
+      name: 'Button',
+      component: ButtonBase,
+    }).attrs((() => ({ 'data-from-button': 'original' })) as any)
+
+    const Link: any = Button.config({ component: AnchorBase }).attrs(
+      (() => ({ 'data-from-link': 'fresh' })) as any,
+    )
+
+    const result = renderProps(Link)
+    expect(result['data-from-button']).toBeUndefined()
+    expect(result['data-from-link']).toBe('fresh')
+  })
+})

package/src/constants/index.ts

@@ -2,11 +2,8 @@
 // literal-replaced so prod bundles tree-shake the dev branch to zero bytes.
 // Typed through a narrowing interface so downstream packages don't need
 // `vite/client` in their tsconfigs to type-check this file transitively.
-interface ViteMeta {
-  readonly env?: { readonly DEV?: boolean }
-}
 /** Tree-shakeable dev-mode flag. `true` in dev, `false` (dead code eliminated) in prod. */
-export const __DEV__: boolean = (import.meta as ViteMeta).env?.DEV === true
+export const __DEV__: boolean = process.env.NODE_ENV !== 'production'
 
 /** Default theme mode used when no mode is provided via context. */
 export const MODE_DEFAULT = 'light'

package/src/context/context.ts

@@ -1,5 +1,5 @@
 import type { VNodeChild } from '@pyreon/core'
-import { useContext } from '@pyreon/core'
+import { nativeCompat, useContext } from '@pyreon/core'
 import { Provider as CoreProvider, context } from '@pyreon/ui-core'
 import { MODE_DEFAULT, THEME_MODES_INVERSED } from '../constants'
 
@@ -49,6 +49,10 @@ const Provider = ({ provider = CoreProvider, inversed, ...props }: TProvider): V
   return result ?? null
 }
 
+// Mark as native — reads useContext() and delegates to CoreProvider, both
+// of which need Pyreon's setup frame.
+nativeCompat(Provider)
+
 export { context }
 
 export default Provider

package/src/env.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Minimal process type — just enough for `process.env.NODE_ENV` checks.
+ * Avoids requiring @types/node in consumers that import pyreon source
+ * via the `"bun"` export condition.
+ */
+declare var process: { env: { NODE_ENV?: string } }

package/src/index.ts

@@ -4,7 +4,7 @@ import type { Rocketstyle } from './init'
 import rocketstyle from './init'
 import type { IsRocketComponent } from './isRocketComponent'
 import isRocketComponent from './isRocketComponent'
-import type { AttrsCb } from './types/attrs'
+import type { AttrsCb, AttrsHelpers } from './types/attrs'
 import type {
   ConfigAttrs,
   ConsumerCb,
@@ -37,6 +37,7 @@ import type { ComponentFn, ElementType, ExtractProps, MergeTypes, TObj } from '.
 
 export type {
   AttrsCb,
+  AttrsHelpers,
   ComponentFn,
   ComposeParam,
   ConfigAttrs,