fix: minor

src/jsx-runtime.ts

@@ -1,5 +1,7 @@
-export * from 'html-jsx'
 import type * as jsxi from 'html-jsx'
+
+export * from 'html-jsx'
+
 import { createProps, updateProps } from './props'
 export { createProps, updateProps }
 
@@ -65,7 +67,8 @@ declare global {
 
     interface HTMLAttributes<T> extends jsxi.HTMLAttributes<T> {}
     interface SVGAttributes<T> extends jsxi.SVGAttributes<T> {}
-    interface DOMAttributes<T> extends jsxi.DOMAttributes<T> {}
+    interface DOMAttributes<T> extends jsxi.DOMAttributes<T> {
+    }
   }
 }
 
@@ -90,7 +93,7 @@ type VKids =
   }>
 type DomEl = Element | CharacterData | ChildNode
 type El = DomEl | Chunk
-type TargetEl = El | ShadowRoot
+type TargetEl = El | DocumentFragment
 type VAny = VNode<any>
 export type Hook = Fn & { fn: Fn; onremove?: Fn } & Record<string, any>
 export type Props = Record<string, any>
@@ -102,12 +105,11 @@ type VNode<T extends string | symbol | typeof Text | typeof Comment | VFn> = {
   keep?: boolean
   onunref?: () => void
 }
-
 const anchor = new Comment()
 export const Fragment = Symbol()
 export const jsx = (kind: any, props: any, key: any) =>
   kind === Fragment
-    ? props.children
+    ? props.children as VKid
     : { kind, props, key } as VNode<typeof kind>
 export const jsxs = jsx
 
@@ -173,8 +175,12 @@ const flatDom = (arr: El[], res: DomEl[] = []) => {
 }
 
 const prevs = new WeakMap()
-export const render = (n: VKid, el: TargetEl, doc: Doc = html, withNull = false) =>
+export function render(n: VKid): DocumentFragment
+export function render(n: VKid, el: TargetEl, doc?: Doc, withNull?: boolean): TargetEl
+export function render(n: VKid, el: TargetEl = document.createDocumentFragment(), doc: Doc = html, withNull = false) {
   reconcile(el, forceArray(n, withNull), prevs.get(el), doc)
+  return el
+}
 
 const reconcile = (parent: TargetEl, nk: VKids, pk: VKids | VKid, doc: Doc) => {
   if ((pk as VKids)?.running) {

test/__snapshots__/events.spec.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`events render replace 1`] = `"<button></button>"`;
+
+exports[`events render replace 2`] = `"<button></button>"`;
+
+exports[`events render simple 1`] = `"<button></button>"`;

test/events.spec.tsx

@@ -0,0 +1,51 @@
+/** @jsxImportSource ../src */
+import { render } from '../src/jsx-runtime'
+
+const r = (jsx: any, div = document.createElement('div')) => {
+  render(jsx, div)
+  return div
+}
+
+// const o = (jsx: any, div?: any) => r(jsx, div).innerHTML
+
+describe('events', () => {
+  describe('render', () => {
+    it('simple', () => {
+      let clicked = 0
+      const onclick = () => {
+        clicked++
+      }
+      const result = r(<button onclick={onclick} />)
+      expect(result.innerHTML).toMatchSnapshot()
+      expect(clicked).toBe(0)
+      result.querySelector('button')!.click()
+      expect(clicked).toBe(1)
+    })
+
+    it('replace', () => {
+      let clickedOne = 0
+      const onclickOne = () => {
+        clickedOne++
+      }
+
+      let clickedTwo = 0
+      const onclickTwo = () => {
+        clickedTwo++
+      }
+
+      let result = r(<button onclick={onclickOne} />)
+      expect(result.innerHTML).toMatchSnapshot()
+      expect(clickedOne).toBe(0)
+      const button = result.querySelector('button')!
+      button.click()
+      expect(clickedOne).toBe(1)
+
+      result = r(<button onclick={onclickTwo} />, result)
+      expect(result.innerHTML).toMatchSnapshot()
+      expect(clickedTwo).toBe(0)
+      button.click()
+      expect(clickedTwo).toBe(1)
+      expect(clickedOne).toBe(1)
+    })
+  })
+})

test/render.spec.tsx

@@ -493,8 +493,8 @@ describe('all', () => {
         class FooElement extends HTMLElement {}
         const Foo = fromElement(FooElement)
         render(<Foo />, t)
-        expect(html()).toContain('<x-fooelement')
-        expect(html()).toContain('</x-fooelement')
+        expect(html()).toContain('<x-foo')
+        expect(html()).toContain('</x-foo')
       })
     })