diff --git a/src/jsx/base.ts b/src/jsx/base.ts index 603b0939..029a0d64 100644 --- 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 index 5381e642..82db53a7 100644 --- a/src/jsx/index.test.tsx +++ b/src/jsx/index.test.tsx @@ -470,6 +470,21 @@ describe('render to string', () => { expect(template.toString()).toBe('Hello') }) }) + + describe('head', () => { + it('Simple head elements should be rendered as is', () => { + const template = ( + + Hono! + + + + ) + expect(template.toString()).toBe( + 'Hono!' + ) + }) + }) }) describe('className', () => { diff --git a/src/jsx/intrinsic-element/components.ts b/src/jsx/intrinsic-element/components.ts index d9342bee..b8ed7dc7 100644 --- 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 = ({ 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> = ({ 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> = ({ childre return documentMetadataTag('link', children, props, 'precedence' in props) } export const meta: FC = ({ children, ...props }) => { + const nameSpaceContext = getNameSpaceContext() + if (nameSpaceContext && useContext(nameSpaceContext) === 'head') { + return returnWithoutSpecialBehavior('meta', children, props) + } return documentMetadataTag('meta', children, props, false) }