Fix #104

Author: alex-kinokon

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsx-dom",
-  "version": "8.1.3",
+  "version": "8.1.4",
   "description": "JSX to document.createElement.",
   "main": "index.js",
   "module": "index.js",
@@ -67,7 +67,6 @@
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "fs-extra": "^11.2.0",
-    "happy-dom": "^14.3.2",
     "husky": "9.0.11",
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.2",

src/jsx-dom.ts

@@ -111,7 +111,7 @@ export function createFactory(tag: string) {
   return createElement.bind(null, tag)
 }
 
-export function Fragment(attr: { children: JSX.Element | JSX.Element[] }) {
+export function Fragment(attr: { children: (JSX.Element | JSX.Element)[] }) {
   const fragment = document.createDocumentFragment()
   appendChild(attr.children, fragment)
   return fragment
@@ -134,7 +134,11 @@ export class Component {
 function initComponentClass(Class: ComponentClass, attr, children) {
   attr = { ...attr, children }
   const instance = new Class(attr)
-  return instance.render()
+  const node = instance.render()
+  if ("ref" in attr) {
+    attachRef(attr.ref, instance)
+  }
+  return node
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

src/ref.ts

@@ -1,10 +1,10 @@
 import { isObject } from "./util"
 
-interface Ref<T = Node> {
+interface Ref<T> {
   current: null | T
 }
 
-export function createRef<T extends Node = Node>(): Ref<T> {
+export function createRef<T>(): Ref<T> {
   return Object.seal({ current: null })
 }
 

test/main.test.tsx

@@ -354,6 +354,26 @@ describe("jsx-dom", () => {
         expect(node.className).toBe("container")
         expect(ref.current).toBeInstanceOf(HTMLButtonElement)
       })
+
+      // #104
+      it("class component with ref", () => {
+        class Button extends React.Component<{ className: string }> {
+          render() {
+            return <button className={this.props.className} />
+          }
+        }
+
+        const ref = lib.createRef<Button>()
+        React.createElement(Button, { className: "", ref })
+        const node = (
+          <Button className="container" ref={ref}>
+            Click me!
+          </Button>
+        )
+        expect(node.className).toBe("container")
+        console.log(ref)
+        expect(ref.current).toBeInstanceOf(Button)
+      })
     })
 
     it("supports useImperativeHandle", () => {
@@ -603,10 +623,10 @@ describe("jsx-dom", () => {
 
     it("supports fragments with explicit tag", () => {
       const frag = (
-        <lib.Fragment>
+        <React.Fragment>
           {[2]}
           <span>Bonjour</span>
-        </lib.Fragment>
+        </React.Fragment>
       )
       const nodes = frag.childNodes
       expect(nodes[0].nodeType).toBe(Node.TEXT_NODE)

types/index.d.ts

@@ -144,9 +144,16 @@ export function createElement<T extends Element>(
 ): T
 
 // Custom components
-export function createElement<P extends {}, T extends Element>(
-  type: ComponentType<P, T>,
-  props?: (Attributes & P) | null,
+export function createElement<T extends Element, Type extends ComponentClass<any, T>>(
+  type: Type,
+  props?:
+    | (Attributes & PropOfComponent<Type> & { ref?: Ref<InstanceType<Type>> | undefined })
+    | null,
+  ...children: ReactNode[]
+): T
+export function createElement<P extends {}, T extends Element, Type extends ComponentClass<P, T>>(
+  type: Type,
+  props?: (Attributes & P & { ref?: Ref<InstanceType<Type>> | undefined }) | null,
   ...children: ReactNode[]
 ): T
 
@@ -228,7 +235,7 @@ export interface ComponentClass<P = {}, T extends Element = JSX.Element> {
 }
 
 export class Component<P = {}, T extends Element = JSX.Element> {
-  constructor(props: PropsWithChildren<P>)
+  constructor(props: PropsWithChildren<P> & { ref?: Ref<any> })
   readonly props: PropsWithChildren<P>
   render(): T | null
 }
@@ -241,6 +248,8 @@ export type ComponentType<P = {}, T extends Element = JSX.Element> =
   | ComponentClass<P, T>
   | FunctionComponent<P, T>
 
+type PropOfComponent<T> = T extends ComponentType<infer P> ? P : never
+
 //
 // React Hooks
 // ----------------------------------------------------------------------