perf(jsx): skip the special behavior when the element is in the head. (…

…#3352)
honojs · Sep 1, 2024 · e4cc5aa · e4cc5aa
1 parent 0712530
commit e4cc5aa
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/src/jsx/base.ts b/src/jsx/base.ts
@@ -327,7 +327,7 @@ export const jsxFn = (
       props,
       children
     )
-  } else if (tag === 'svg') {
+  } else if (tag === 'svg' || tag === 'head') {
     nameSpaceContext ||= createContext('')
     return new JSXNode(tag, props, [
       new JSXFunctionNode(

diff --git a/src/jsx/index.test.tsx b/src/jsx/index.test.tsx
@@ -470,6 +470,21 @@ describe('render to string', () => {
       expect(template.toString()).toBe('<span data-text="&lt;html-escaped-string&gt;">Hello</span>')
     })
   })
+
+  describe('head', () => {
+    it('Simple head elements should be rendered as is', () => {
+      const template = (
+        <head>
+          <title>Hono!</title>
+          <meta name='description' content='A description' />
+          <script src='script.js'></script>
+        </head>
+      )
+      expect(template.toString()).toBe(
+        '<head><title>Hono!</title><meta name="description" content="A description"/><script src="script.js"></script></head>'
+      )
+    })
+  })
 })
 
 describe('className', () => {

diff --git a/src/jsx/intrinsic-element/components.ts b/src/jsx/intrinsic-element/components.ts
@@ -106,8 +106,15 @@ const documentMetadataTag = (tag: string, children: Child, props: Props, sort: b
 
 export const title: FC<PropsWithChildren> = ({ children, ...props }) => {
   const nameSpaceContext = getNameSpaceContext()
-  if (nameSpaceContext && useContext(nameSpaceContext) === 'svg') {
-    new JSXNode('title', props, toArray(children ?? []) as Child[])
+  if (nameSpaceContext) {
+    const context = useContext(nameSpaceContext)
+    if (context === 'svg' || context === 'head') {
+      return new JSXNode(
+        'title',
+        props,
+        toArray(children ?? []) as Child[]
+      ) as unknown as HtmlEscapedString
+    }
   }
 
   return documentMetadataTag('title', children, props, false)
@@ -116,7 +123,11 @@ export const script: FC<PropsWithChildren<IntrinsicElements['script']>> = ({
   children,
   ...props
 }) => {
-  if (['src', 'async'].some((k) => !props[k])) {
+  const nameSpaceContext = getNameSpaceContext()
+  if (
+    ['src', 'async'].some((k) => !props[k]) ||
+    (nameSpaceContext && useContext(nameSpaceContext) === 'head')
+  ) {
     return returnWithoutSpecialBehavior('script', children, props)
   }
 
@@ -144,6 +155,10 @@ export const link: FC<PropsWithChildren<IntrinsicElements['link']>> = ({ childre
   return documentMetadataTag('link', children, props, 'precedence' in props)
 }
 export const meta: FC<PropsWithChildren> = ({ children, ...props }) => {
+  const nameSpaceContext = getNameSpaceContext()
+  if (nameSpaceContext && useContext(nameSpaceContext) === 'head') {
+    return returnWithoutSpecialBehavior('meta', children, props)
+  }
   return documentMetadataTag('meta', children, props, false)
 }