fix(ref): use new ref structure and fix press

release-npm

demo/index.tsx

@@ -9,7 +9,7 @@ const MyButton = tag('button', 'color-blue p-sm button', {
   focus: 'color-green',
   small: 'fontSize-[10px]',
 })
-const ExtendedButton = tag(MyButton, 'bg-yellow', { hover: 'bg-purple' })
+const ExtendedButton = tag(MyButton, 'bg-yellow', { press: 'bg-purple', hover: 'bg-magenta', focus: 'bg-cyan' })
 const MyInput = tag('input', 'bg-blue p-sm outline border', { hover: 'bg-red', focus: 'bg-green' })
 const Image = tag('img', 'alignSelf-center width-[10vw] height-[10vw]')
 

demo/package.json

@@ -8,7 +8,7 @@
     "@biomejs/biome": "^1.9.4",
     "@rsbuild/core": "^1.2.4",
     "@rsbuild/plugin-react": "^1.1.0",
-    "epic-jsx": "^0.10.1",
+    "epic-jsx": "^0.10.3",
     "exmpl": "^3.1.0",
     "typescript": "^5.7.3",
     "zero-configuration": "^0.18.0"

helper.ts

@@ -1,5 +1,5 @@
+import type React from 'epic-jsx'
 import { create } from 'logua'
-import type React from 'react'
 import { toInline } from './style'
 import type { HtmlTag, States, Style, Styles, Tag } from './types'
 
@@ -53,7 +53,11 @@ export function extendStates<P extends string>(initial?: States<P>, additional?:
   return newStates
 }
 
-export function handleStateIn(ref: { current: HTMLElement }, state: Styles | { [key: string]: Styles }, props: React.ComponentProps<any>) {
+export function handleStateIn(
+  ref: { tag: { native: HTMLElement } },
+  state: Styles | { [key: string]: Styles },
+  props: React.ComponentProps<any>,
+) {
   let specificState = state as Styles
   if (typeof state === 'object') {
     let found = false
@@ -72,24 +76,25 @@ export function handleStateIn(ref: { current: HTMLElement }, state: Styles | { [
     }
   }
 
-  return () => {
-    if (!ref.current) {
+  return (event: any) => {
+    event.preventDefault() // Ensures that focus will not override press when "pressed".
+    if (!ref.tag.native) {
       return toInline(specificState)
     }
 
-    Object.assign(ref.current.style, toInline(specificState))
+    Object.assign(ref.tag.native.style, toInline(specificState))
   }
 }
 
-export function handleStateOut(ref: { current: HTMLElement }, currentStyles: Style[]) {
+export function handleStateOut(ref: { tag: { native: HTMLElement } }, currentStyles: Style[]) {
   return () => {
-    if (!ref.current) {
+    if (!ref.tag.native) {
       return toInline()
     }
 
     // TODO styles from other state styles should be kept.
     // Remove all styles and reset to initial styles (could be memoized).
-    ref.current.removeAttribute('style')
-    Object.assign(ref.current.style, toInline(currentStyles))
+    ref.tag.native.removeAttribute('style')
+    Object.assign(ref.tag.native.style, toInline(currentStyles))
   }
 }

index.tsx

@@ -26,25 +26,24 @@ export const tag = <T extends HtmlTag, P extends string>(Tag: T | TagType<T, P>,
 
   const TagComponent = Tag as TagType<T, P>
 
-  function StyleTag(this: Component, props: TagProps<T, P>) {
-    const ref = { current: undefined } as unknown as { current: HTMLElement }
+  function StyleTag(this: Component<undefined, 'tag'>, props: TagProps<T, P>) {
     const currentStyles = (styles ? (Array.isArray(styles) ? [...styles] : styles) : []) as Style[]
     // TODO useRef as value to keep track of styles.
 
     if (typeof states === 'object' && states.hover) {
-      props.onMouseEnter = handleStateIn(ref, states.hover, props)
-      props.onMouseLeave = handleStateOut(ref, currentStyles)
+      props.onMouseEnter = handleStateIn(this.ref, states.hover, props)
+      props.onMouseLeave = handleStateOut(this.ref, currentStyles)
     }
 
     if (typeof states === 'object' && states.focus) {
-      // TODO also consider, onFocusIn, onFocus out folder children coming in and out of focus.
-      props.onFocus = handleStateIn(ref, states.focus, props)
-      props.onBlur = handleStateOut(ref, currentStyles)
+      // TODO also consider, onFocusIn, onFocusOut for children coming in and out of focus.
+      props.onFocus = handleStateIn(this.ref, states.focus, props)
+      props.onBlur = handleStateOut(this.ref, currentStyles)
     }
 
     if (typeof states === 'object' && states.press) {
-      props.onMouseDown = handleStateIn(ref, states.press, props)
-      props.onMouseUp = handleStateOut(ref, currentStyles)
+      props.onMouseDown = handleStateIn(this.ref, states.press, props)
+      props.onMouseUp = handleStateOut(this.ref, currentStyles)
     }
 
     if (typeof states === 'object') {
@@ -69,11 +68,10 @@ export const tag = <T extends HtmlTag, P extends string>(Tag: T | TagType<T, P>,
     }
 
     this.once(() => {
-      ref.current = this.refs[0] as HTMLElement
-
+      // All "id"s assigned to tags are tracked on the exported refs object.
       if (props.id) {
         if (!Object.hasOwn(refs, props.id)) {
-          refs[props.id] = ref.current
+          refs[props.id] = this.ref.tag.native
         } else if (process.env.NODE_ENV !== 'production') {
           log(`A ref with id ${props.id} has already been assigned, make sure to use unique ids.`, 'warning')
         }
@@ -82,7 +80,7 @@ export const tag = <T extends HtmlTag, P extends string>(Tag: T | TagType<T, P>,
 
     const objectStyles = Object.assign(toInline(currentStyles) ?? {}, props.style)
 
-    return <TagComponent {...props} style={objectStyles} />
+    return <TagComponent ref="tag" {...props} style={objectStyles} />
   }
 
   // Pass inputs on for later extension of this component.

package.json

@@ -15,12 +15,12 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@happy-dom/global-registrator": "^17.0.0",
+    "@happy-dom/global-registrator": "^17.0.2",
     "@testing-library/react": "^16.2.0",
     "@types/bun": "^1.2.2",
     "@types/jsdom": "^21.1.7",
-    "epic-jsx": "^0.10.1",
-    "happy-dom": "^17.0.0",
+    "epic-jsx": "^0.10.3",
+    "happy-dom": "^17.0.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "^5.7.3",