@furystack/shades 11.0.35 → 12.0.0

package/src/style-manager.ts

@@ -0,0 +1,104 @@
+import { generateCSS } from './css-generator.js'
+import type { CSSObject } from './models/css-object.js'
+
+/**
+ * Singleton that manages component CSS injection.
+ * Creates and maintains a shared `<style>` element in the document head,
+ * and tracks registered component styles to avoid duplicates.
+ */
+class StyleManagerClass {
+  private styleElement: HTMLStyleElement | null = null
+  private registeredComponents = new Set<string>()
+
+  /**
+   * Gets or creates the shared style element
+   * @returns The style element for CSS injection
+   */
+  private getStyleElement(): HTMLStyleElement {
+    if (!this.styleElement) {
+      this.styleElement = document.createElement('style')
+      this.styleElement.setAttribute('data-shades-styles', '')
+      document.head.appendChild(this.styleElement)
+    }
+    return this.styleElement
+  }
+
+  /**
+   * Registers CSS styles for a component.
+   * Styles are only injected once per component (based on the custom element name).
+   *
+   * @param shadowDomName - The custom element tag name (used as CSS selector)
+   * @param cssObject - The CSSObject containing styles and nested selectors
+   * @param elementBaseName - Optional base element name for customized built-in elements (e.g., 'a', 'button').
+   *                          When provided, generates selector like `a[is="component-name"]` instead of `component-name`
+   * @returns True if styles were injected, false if already registered
+   *
+   * @example
+   * ```typescript
+   * // Regular custom element
+   * StyleManager.registerComponentStyles('my-button', {
+   *   padding: '12px',
+   *   '&:hover': { backgroundColor: 'blue' }
+   * })
+   *
+   * // Customized built-in element (extends anchor)
+   * StyleManager.registerComponentStyles('my-link', {
+   *   color: 'blue',
+   *   '&:hover': { textDecoration: 'underline' }
+   * }, 'a')
+   * // Generates: a[is="my-link"] { color: blue; }
+   * ```
+   */
+  public registerComponentStyles(shadowDomName: string, cssObject: CSSObject, elementBaseName?: string): boolean {
+    if (this.registeredComponents.has(shadowDomName)) {
+      return false
+    }
+
+    const selector = elementBaseName ? `${elementBaseName}[is="${shadowDomName}"]` : shadowDomName
+    const css = generateCSS(selector, cssObject)
+    if (css) {
+      const styleElement = this.getStyleElement()
+      styleElement.textContent += `\n/* ${shadowDomName} */\n${css}\n`
+      this.registeredComponents.add(shadowDomName)
+      return true
+    }
+
+    return false
+  }
+
+  /**
+   * Checks if a component's styles have already been registered
+   * @param shadowDomName - The component identifier to check
+   * @returns True if styles are already registered
+   */
+  public isRegistered(shadowDomName: string): boolean {
+    return this.registeredComponents.has(shadowDomName)
+  }
+
+  /**
+   * Gets all registered component names (for debugging/testing)
+   * @returns Set of registered component names
+   */
+  public getRegisteredComponents(): ReadonlySet<string> {
+    return this.registeredComponents
+  }
+
+  /**
+   * Clears all registered styles (useful for testing)
+   */
+  public clear(): void {
+    this.registeredComponents.clear()
+    if (this.styleElement) {
+      this.styleElement.textContent = ''
+      this.styleElement.remove()
+      this.styleElement = null
+    }
+  }
+}
+
+/**
+ * Singleton instance for managing component CSS styles.
+ * Use this to register component-level styles that support
+ * pseudo-selectors and nested selectors.
+ */
+export const StyleManager = new StyleManagerClass()

package/src/styled-element.spec.tsx

@@ -0,0 +1,117 @@
+import { describe, expect, it } from 'vitest'
+import { styledElement } from './styled-element.js'
+
+describe('styled-element', () => {
+  describe('styledElement', () => {
+    it('should apply additional styles to an intrinsic element', () => {
+      const additionalStyles = { color: 'red', padding: '10px' }
+      const StyledDiv = styledElement('div', additionalStyles)
+
+      const result = StyledDiv({}, [])
+
+      expect(result.style.color).toBe('red')
+      expect(result.style.padding).toBe('10px')
+    })
+
+    it('should merge styles when element already has styles', () => {
+      const additionalStyles = { color: 'red' }
+      const existingStyles = { backgroundColor: 'blue' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const result = StyledDiv({ style: existingStyles }, [])
+
+      expect(result.style.backgroundColor).toBe('blue')
+      expect(result.style.color).toBe('red')
+    })
+
+    it('should override existing styles with additional styles', () => {
+      const additionalStyles = { color: 'red' }
+      const existingStyles = { color: 'blue' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const result = StyledDiv({ style: existingStyles }, [])
+
+      expect(result.style.color).toBe('red')
+    })
+
+    it('should preserve original props', () => {
+      const additionalStyles = { color: 'red' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const result = StyledDiv({ className: 'my-class', id: 'my-id' }, [])
+
+      expect(result.className).toBe('my-class')
+      expect(result.id).toBe('my-id')
+      expect(result.style.color).toBe('red')
+    })
+
+    it('should pass children correctly', () => {
+      const additionalStyles = { color: 'red' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const child1 = document.createElement('span')
+      child1.textContent = 'child1'
+      const child2 = document.createElement('span')
+      child2.textContent = 'child2'
+
+      const result = StyledDiv({}, [child1, child2])
+
+      expect(result.children.length).toBe(2)
+      expect(result.children[0]).toBe(child1)
+      expect(result.children[1]).toBe(child2)
+    })
+
+    it('should handle text children', () => {
+      const additionalStyles = { color: 'red' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const result = StyledDiv({}, ['Hello', ' ', 'World'])
+
+      expect(result.textContent).toBe('Hello World')
+    })
+
+    it('should return an HTMLElement', () => {
+      const additionalStyles = { color: 'red' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const result = StyledDiv({}, [])
+
+      expect(result).toBeInstanceOf(HTMLElement)
+      expect(result.tagName.toLowerCase()).toBe('div')
+    })
+
+    it('should work with different element types', () => {
+      const spanStyles = { fontWeight: 'bold' }
+      const buttonStyles = { cursor: 'pointer' }
+
+      const StyledSpan = styledElement('span', spanStyles)
+      const StyledButton = styledElement('button', buttonStyles)
+
+      const spanResult = StyledSpan({}, [])
+      const buttonResult = StyledButton({}, [])
+
+      expect(spanResult.tagName.toLowerCase()).toBe('span')
+      expect(spanResult.style.fontWeight).toBe('bold')
+      expect(buttonResult.tagName.toLowerCase()).toBe('button')
+      expect(buttonResult.style.cursor).toBe('pointer')
+    })
+
+    it('should handle props being undefined', () => {
+      const additionalStyles = { color: 'red' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const result = StyledDiv(undefined as unknown as Record<string, unknown>, [])
+
+      expect(result.style.color).toBe('red')
+    })
+
+    it('should handle empty children list', () => {
+      const additionalStyles = { color: 'red' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const result = StyledDiv({}, [])
+
+      expect(result.children.length).toBe(0)
+    })
+  })
+})

package/src/styled-shade.spec.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from 'vitest'
+import { styledShade } from './styled-shade.js'
+
+describe('styled-shade', () => {
+  describe('styledShade', () => {
+    it('should apply additional styles to a component', () => {
+      const mockElement = vi.fn().mockReturnValue({} as JSX.Element)
+      const additionalStyles = { color: 'red', padding: '10px' }
+
+      const StyledComponent = styledShade(mockElement, additionalStyles)
+      StyledComponent({})
+
+      expect(mockElement).toHaveBeenCalledTimes(1)
+      const [props] = mockElement.mock.calls[0] as [{ style: Record<string, string> }]
+      expect(props.style.color).toBe('red')
+      expect(props.style.padding).toBe('10px')
+    })
+
+    it('should merge styles when component already has styles', () => {
+      const mockElement = vi.fn().mockReturnValue({} as JSX.Element)
+      const additionalStyles = { color: 'red' }
+      const existingStyles = { backgroundColor: 'blue' }
+
+      const StyledComponent = styledShade(mockElement, additionalStyles)
+      StyledComponent({ style: existingStyles })
+
+      expect(mockElement).toHaveBeenCalledTimes(1)
+      const [props] = mockElement.mock.calls[0] as [{ style: Record<string, string> }]
+      expect(props.style.backgroundColor).toBe('blue')
+      expect(props.style.color).toBe('red')
+    })
+
+    it('should override existing styles with additional styles', () => {
+      const mockElement = vi.fn().mockReturnValue({} as JSX.Element)
+      const additionalStyles = { color: 'red' }
+      const existingStyles = { color: 'blue' }
+
+      const StyledComponent = styledShade(mockElement, additionalStyles)
+      StyledComponent({ style: existingStyles })
+
+      expect(mockElement).toHaveBeenCalledTimes(1)
+      const [props] = mockElement.mock.calls[0] as [{ style: Record<string, string> }]
+      expect(props.style.color).toBe('red')
+    })
+
+    it('should preserve original props', () => {
+      const mockElement = vi.fn().mockReturnValue({} as JSX.Element)
+      const additionalStyles = { color: 'red' }
+
+      const StyledComponent = styledShade<{ className?: string; style?: Partial<CSSStyleDeclaration> }>(
+        mockElement,
+        additionalStyles,
+      )
+      StyledComponent({ className: 'my-class' })
+
+      expect(mockElement).toHaveBeenCalledTimes(1)
+      const [props] = mockElement.mock.calls[0] as [{ className: string; style: Record<string, string> }]
+      expect(props.className).toBe('my-class')
+      expect(props.style.color).toBe('red')
+    })
+
+    it('should pass children correctly', () => {
+      const mockElement = vi.fn().mockReturnValue({} as JSX.Element)
+      const additionalStyles = { color: 'red' }
+      const children = ['child1', 'child2'] as unknown as JSX.Element[]
+
+      const StyledComponent = styledShade(mockElement, additionalStyles)
+      StyledComponent({}, children)
+
+      expect(mockElement).toHaveBeenCalledTimes(1)
+      const [, passedChildren] = mockElement.mock.calls[0] as [unknown, JSX.Element[]]
+      expect(passedChildren).toBe(children)
+    })
+
+    it('should return a function that returns JSX.Element', () => {
+      const expectedElement = { tagName: 'div' } as unknown as JSX.Element
+      const mockElement = vi.fn().mockReturnValue(expectedElement)
+      const additionalStyles = { color: 'red' }
+
+      const StyledComponent = styledShade(mockElement, additionalStyles)
+      const result = StyledComponent({})
+
+      expect(result).toBe(expectedElement)
+    })
+  })
+})