fix(jsx/dom): Fixed a bug that caused Script elements to turn into Style elements. (#3294)

usualoma · web-flow · commit e6459e7304df · 2024-08-19T09:54:49.000+09:00
diff --git a/src/jsx/dom/intrinsic-element/components.test.tsx b/src/jsx/dom/intrinsic-element/components.test.tsx
@@ -750,6 +750,33 @@ describe('intrinsic element', () => {
         await Promise.resolve()
         expect(root.innerHTML).toBe('<div><div>Content</div><button>Show</button></div>')
       })
+
+      it('should be inserted into body if has no props', async () => {
+        const App = () => {
+          return (
+            <div>
+              <script>alert('Hello')</script>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('')
+        // prettier-ignore
+        expect(root.innerHTML).toBe('<div><script>alert(\'Hello\')</script></div>')
+      })
+
+      it('should be inserted into body if has only src prop', async () => {
+        const App = () => {
+          return (
+            <div>
+              <script src='script.js'></script>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('')
+        expect(root.innerHTML).toBe('<div><script src="script.js"></script></div>')
+      })
     })
 
     it('accept ref object', async () => {
diff --git a/src/jsx/dom/intrinsic-element/components.ts b/src/jsx/dom/intrinsic-element/components.ts
@@ -226,7 +226,7 @@ export const title: FC<PropsWithChildren> = (props) => {
 export const script: FC<PropsWithChildren<IntrinsicElements['script']>> = (props) => {
   if (!props || ['src', 'async'].some((k) => !props[k])) {
     return newJSXNode({
-      tag: 'style',
+      tag: 'script',
       props,
     })
   }

Original file line number	Diff line number	Diff line change
`@@ -226,7 +226,7 @@ export const title: FC<PropsWithChildren> = (props) => {`
`226`	`226`	`export const script: FC<PropsWithChildren<IntrinsicElements['script']>> = (props) => {`
`227`	`227`	`if (!props \|\| ['src', 'async'].some((k) => !props[k])) {`
`228`	`228`	`return newJSXNode({`
`229`		`- tag: 'style',`
	`229`	`+ tag: 'script',`
`230`	`230`	`props,`
`231`	`231`	`})`
`232`	`232`	`}`