fix(jsx): ignore function object in attribute value in toString() (#2161

)

* refactor(jsx): ignore function object in attribute value in toString()

* test(jsx): fix lint error

* chore: denoify

deno_dist/jsx/base.ts

@@ -163,6 +163,11 @@ export class JSXNode implements HtmlEscaped {
       } else if (v instanceof Promise) {
         buffer[0] += ` ${key}="`
         buffer.unshift('"', v)
+      } else if (typeof v === 'function') {
+        if (!key.startsWith('on')) {
+          throw `Invalid prop '${key}' of type 'function' supplied to '${tag}'.`
+        }
+        // maybe event handler for client components, just ignore in server components
       } else {
         buffer[0] += ` ${key}="`
         escapeToBuffer(v.toString(), buffer)

src/jsx/base.ts

@@ -163,6 +163,11 @@ export class JSXNode implements HtmlEscaped {
       } else if (v instanceof Promise) {
         buffer[0] += ` ${key}="`
         buffer.unshift('"', v)
+      } else if (typeof v === 'function') {
+        if (!key.startsWith('on')) {
+          throw `Invalid prop '${key}' of type 'function' supplied to '${tag}'.`
+        }
+        // maybe event handler for client components, just ignore in server components
       } else {
         buffer[0] += ` ${key}="`
         escapeToBuffer(v.toString(), buffer)

src/jsx/index.test.tsx

@@ -293,6 +293,20 @@ describe('render to string', () => {
     })
   })
 
+  describe('Function', () => {
+    it('should be ignored used in on* props', () => {
+      const onClick = () => {}
+      const template = <button onClick={onClick}>Click</button>
+      expect(template.toString()).toBe('<button>Click</button>')
+    })
+
+    it('should raise an error if used in other props', () => {
+      const onClick = () => {}
+      const template = <button data-handler={onClick}>Click</button>
+      expect(() => template.toString()).toThrow()
+    })
+  })
+
   // https://en.reactjs.org/docs/jsx-in-depth.html#functions-as-children
   describe('Functions as Children', () => {
     it('Function', () => {

src/jsx/streaming.test.tsx

@@ -3,9 +3,9 @@ import { JSDOM } from 'jsdom'
 import { raw } from '../helper/html'
 import { HtmlEscapedCallbackPhase, resolveCallback } from '../utils/html'
 import type { HtmlEscapedString } from '../utils/html'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { jsx, Fragment } from './base'
 import { use } from './hooks'
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Suspense, renderToReadableStream } from './streaming'
 
 function replacementResult(html: string) {