@pyreon/styler 0.24.5 → 0.25.0

package/lib/index.js

@@ -1,5 +1,5 @@
+import { computed, registerSingleton, renderEffect, runUntracked } from "@pyreon/reactivity";
 import { createReactiveContext, h, nativeCompat, provide, useContext } from "@pyreon/core";
-import { computed, renderEffect, runUntracked } from "@pyreon/reactivity";
 
 //#region src/resolve.ts
 const _countSink$2 = globalThis;
@@ -1170,6 +1170,10 @@ function useCSS(template, props, boost) {
 	return sheet.insert(cssText, boost);
 }
 
+//#endregion
+//#region src/index.ts
+registerSingleton("@pyreon/styler", "0.24.6", import.meta.url);
+
 //#endregion
 export { HASH_INIT, StyleSheet, ThemeContext, ThemeProvider, buildProps, clearNormCache, createGlobalStyle, createSheet, css, filterProps, hash, hashFinalize, hashUpdate, isDynamic, keyframes, normalizeCSS, resolve, resolveValue, sheet, styled, useCSS, useTheme, useThemeAccessor };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/styler",
-  "version": "0.24.5",
+  "version": "0.25.0",
   "description": "Lightweight CSS-in-JS engine for Pyreon",
   "license": "MIT",
   "repository": {
@@ -13,8 +13,7 @@
     "!lib/**/*.map",
     "!lib/analysis",
     "README.md",
-    "LICENSE",
-    "src"
+    "LICENSE"
   ],
   "type": "module",
   "sideEffects": false,
@@ -22,7 +21,6 @@
   "types": "./lib/index.d.ts",
   "exports": {
     ".": {
-      "bun": "./src/index.ts",
       "import": "./lib/index.js",
       "types": "./lib/index.d.ts"
     }
@@ -43,8 +41,8 @@
   },
   "devDependencies": {
     "@pyreon/manifest": "0.13.1",
-    "@pyreon/test-utils": "^0.13.11",
-    "@pyreon/typescript": "^0.24.5",
+    "@pyreon/test-utils": "^0.13.12",
+    "@pyreon/typescript": "^0.25.0",
     "@vitest/browser-playwright": "^4.1.4",
     "@vitus-labs/tools-rolldown": "^2.4.0"
   },
@@ -52,7 +50,7 @@
     "node": ">= 22"
   },
   "dependencies": {
-    "@pyreon/core": "^0.24.5",
-    "@pyreon/reactivity": "^0.24.5"
+    "@pyreon/core": "^0.25.0",
+    "@pyreon/reactivity": "^0.25.0"
   }
 }

package/src/ThemeProvider.ts

@@ -1,65 +0,0 @@
-/**
- * Theme context for styled components.
- *
- * Extensible theme interface. Consumers can augment this via module
- * declaration merging for full strict types:
- *
- *   declare module '@pyreon/styler' {
- *     interface DefaultTheme {
- *       colors: { primary: string; secondary: string }
- *       spacing: (n: number) => string
- *     }
- *   }
- */
-import type { VNode, VNodeChild } from '@pyreon/core'
-import { createReactiveContext, nativeCompat, provide, useContext } from '@pyreon/core'
-
-export interface DefaultTheme {}
-
-type Theme = DefaultTheme & Record<string, unknown>
-
-/**
- * Reactive theme context. Consumers get `() => Theme` from useContext.
- *
- * The DIFFERENCE from PR #258: styled components read the theme accessor
- * inside a COMPUTED (not an effect). The computed tracks theme + mode +
- * dimensions simultaneously, and the resolve itself runs untracked.
- * This gives reactive theme/mode/dimension switching with:
- * - Zero per-component effect()
- * - One lightweight computed per component
- * - String-equality memoization (same CSS class = no DOM update)
- * - Untracked resolve (no exponential cascade)
- */
-export const ThemeContext = createReactiveContext<Theme>({} as Theme)
-
-/**
- * Read the current theme. Returns the theme value (calls the accessor).
- * Inside a reactive scope (computed/effect), this tracks theme changes.
- */
-export const useTheme = <T extends object = Theme>(): T => useContext(ThemeContext)() as T
-
-/**
- * Returns the raw `() => Theme` accessor for use inside computeds
- * where you need explicit control over when the read happens.
- */
-export const useThemeAccessor = <T extends object = Theme>(): (() => T) =>
-  useContext(ThemeContext) as () => T
-
-/**
- * @internal Low-level provider — use `PyreonUI` from `@pyreon/ui-core` instead.
- * @deprecated Prefer `<PyreonUI theme={theme}>`
- */
-export function ThemeProvider({
-  theme,
-  children,
-}: {
-  theme: Theme
-  children?: VNodeChild
-}): VNode | null {
-  provide(ThemeContext, () => theme)
-  return (children ?? null) as VNode | null
-}
-
-// Mark as native — compat-mode jsx() runtimes skip wrapCompatComponent so
-// provide(ThemeContext, ...) reaches Pyreon's setup frame.
-nativeCompat(ThemeProvider)

package/src/__tests__/ThemeProvider.test.ts

@@ -1,67 +0,0 @@
-import { popContext } from '@pyreon/core'
-import { afterEach, describe, expect, it } from 'vitest'
-import { ThemeContext, ThemeProvider, useTheme } from '../ThemeProvider'
-
-describe('ThemeContext', () => {
-  it('is a Context object with an id', () => {
-    expect(ThemeContext).toBeDefined()
-    expect(ThemeContext.id).toBeDefined()
-  })
-
-  it('has a symbol id for context identification', () => {
-    expect(typeof ThemeContext.id).toBe('symbol')
-  })
-})
-
-describe('ThemeProvider', () => {
-  afterEach(() => {
-    try {
-      popContext()
-    } catch {
-      // Ignore if no context was pushed
-    }
-  })
-
-  it('returns children when provided', () => {
-    const children = 'Hello world'
-    const result = ThemeProvider({ theme: {}, children })
-    expect(result).toBe('Hello world')
-  })
-
-  it('returns null when no children are provided', () => {
-    const result = ThemeProvider({ theme: {} })
-    expect(result).toBeNull()
-  })
-
-  it('returns null when children is undefined', () => {
-    const result = ThemeProvider({ theme: {}, children: undefined })
-    expect(result).toBeNull()
-  })
-
-  it('provides theme via context (useTheme returns it)', () => {
-    const theme = { colors: { primary: 'red' }, spacing: 8 }
-    ThemeProvider({ theme, children: 'child' })
-    const result = useTheme()
-    expect(result).toEqual(theme)
-  })
-})
-
-describe('useTheme', () => {
-  it('is a function', () => {
-    expect(typeof useTheme).toBe('function')
-  })
-
-  it('returns the default theme (empty object) when called outside a provider', () => {
-    const theme = useTheme()
-    expect(theme).toEqual({})
-  })
-
-  it('can be called with a type parameter', () => {
-    interface MyTheme {
-      primary: string
-      spacing: number
-    }
-    const theme = useTheme<MyTheme>()
-    expect(theme).toBeDefined()
-  })
-})

package/src/__tests__/benchmark.bench.ts

@@ -1,200 +0,0 @@
-/**
- * Benchmark: @pyreon/styler CSS-in-JS operations
- *
- * Run: bun vitest bench
- *
- * Measures core CSS-in-JS operations:
- * 1. css() tagged template creation
- * 2. css() with interpolations
- * 3. Template resolution to CSS string
- * 4. Dynamic function interpolation
- * 5. Hash function throughput
- * 6. Nested css() composition
- * 7. styled() component factory
- * 8. normalizeCSS — Comment Stripping & Cleanup
- */
-import { bench, describe } from 'vitest'
-import { css } from '../css'
-import { hash } from '../hash'
-import { normalizeCSS, resolve } from '../resolve'
-import { styled } from '../styled'
-
-// ============================================================================
-// 1. CSS Tagged Template — Creation Speed
-// ============================================================================
-describe('css() tagged template creation', () => {
-  bench('@pyreon/styler', () => {
-    css`
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 16px;
-      margin: 8px;
-      background-color: #f0f0f0;
-      border-radius: 4px;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    `
-  })
-})
-
-// ============================================================================
-// 2. CSS Tagged Template with Interpolations
-// ============================================================================
-describe('css() with interpolations', () => {
-  const color = '#ff0000'
-  const size = '16px'
-
-  bench('@pyreon/styler', () => {
-    css`
-      color: ${color};
-      font-size: ${size};
-      display: flex;
-      padding: 8px;
-    `
-  })
-})
-
-// ============================================================================
-// 3. Template Resolution (strings + values -> CSS string)
-// ============================================================================
-describe('template resolution to CSS string', () => {
-  const strings = Object.assign(['display: flex; color: ', '; font-size: ', '; padding: 8px;'], {
-    raw: ['display: flex; color: ', '; font-size: ', '; padding: 8px;'],
-  }) as unknown as TemplateStringsArray
-
-  const values = ['red', '16px']
-  const props = { theme: { primary: 'blue' } }
-
-  bench('@pyreon/styler resolve()', () => {
-    resolve(strings, values, props)
-  })
-})
-
-// ============================================================================
-// 4. Dynamic Interpolation (function interpolations)
-// ============================================================================
-describe('dynamic function interpolation', () => {
-  const props = { theme: { primary: 'blue', size: '14px' }, active: true }
-
-  const strings = Object.assign(['color: ', '; font-size: ', '; opacity: ', ';'], {
-    raw: ['color: ', '; font-size: ', '; opacity: ', ';'],
-  }) as unknown as TemplateStringsArray
-
-  const stylerValues = [
-    (p: any) => p.theme.primary,
-    (p: any) => p.theme.size,
-    (p: any) => (p.active ? '1' : '0.5'),
-  ]
-
-  bench('@pyreon/styler resolve()', () => {
-    resolve(strings, stylerValues, props)
-  })
-})
-
-// ============================================================================
-// 5. Hash Function Throughput
-// ============================================================================
-describe('hash function throughput', () => {
-  const shortCSS = 'display: flex; color: red;'
-  const mediumCSS =
-    'display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; margin: 0 auto; max-width: 1200px; background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);'
-  const longCSS = mediumCSS.repeat(5)
-
-  bench('@pyreon/styler FNV-1a (short)', () => {
-    hash(shortCSS)
-  })
-
-  bench('@pyreon/styler FNV-1a (medium)', () => {
-    hash(mediumCSS)
-  })
-
-  bench('@pyreon/styler FNV-1a (long)', () => {
-    hash(longCSS)
-  })
-})
-
-// ============================================================================
-// 6. Nested css() Composition
-// ============================================================================
-describe('nested css() composition', () => {
-  bench('@pyreon/styler', () => {
-    const base = css`
-      display: flex;
-      padding: 8px;
-    `
-    const hover = css`
-      background: #eee;
-    `
-    const result = css`
-      ${base};
-      &:hover {
-        ${hover};
-      }
-      color: red;
-    `
-    result.toString()
-  })
-})
-
-// ============================================================================
-// 7. Styled Component Creation (factory call)
-// ============================================================================
-describe('styled() component factory', () => {
-  bench('@pyreon/styler', () => {
-    styled('div')`
-      display: flex;
-      color: red;
-      padding: 8px;
-    `
-  })
-})
-
-// ============================================================================
-// 8. normalizeCSS — Comment Stripping & Cleanup
-// ============================================================================
-describe('normalizeCSS', () => {
-  const plain =
-    '  display: flex;  align-items: center;  justify-content: center;  padding: 16px;  margin: 8px;  background-color: #f0f0f0;  border-radius: 4px;  '
-
-  const withBlockComments = `
-    /* -------------------------------------------------------- */
-    /* BASE STATE */
-    /* -------------------------------------------------------- */
-    display: flex; align-items: center; justify-content: center;
-    padding: 16px; margin: 8px; background-color: #f0f0f0;
-    /* -------------------------------------------------------- */
-    /* HOVER STATE */
-    /* -------------------------------------------------------- */
-    &:hover { color: red; background: blue; }
-    /* -------------------------------------------------------- */
-    /* ACTIVE STATE */
-    /* -------------------------------------------------------- */
-    &:active { color: green; }
-  `
-
-  const withLineComments = `
-    // base styles
-    display: flex; align-items: center;
-    // hover override
-    &:hover { color: red; }
-    background: url(https://example.com/img.png);
-  `
-
-  const withSemicolonJunk = '  ; display: flex;; ; color: red; ; font-size: 1rem;; ;  '
-
-  bench('plain CSS (no comments)', () => {
-    normalizeCSS(plain)
-  })
-
-  bench('CSS with /* */ block comments', () => {
-    normalizeCSS(withBlockComments)
-  })
-
-  bench('CSS with // line comments', () => {
-    normalizeCSS(withLineComments)
-  })
-
-  bench('CSS with semicolon junk', () => {
-    normalizeCSS(withSemicolonJunk)
-  })
-})